【Web制作の毎日コーディング日記（2日目）】シンプルページ作成。

少々むちゃな計画を思いついてしまいました('ω')

最近めっきりWeb制作やってみたい欲が出てきておりまして、ずっとHTMLとCSSの勉強をしているのですがなかなか身につきません。

Progateでの勉強はおおよそ終わり「HTMLとCSS」の基礎知識は身についているはずなのですが、いざサイトを作ろうとしてもなかなかコーディングがうまくいきません(笑)

圧倒的練習不足！！

そう感じます('ω')

じゃー毎日自分で考えながらコーディングをしていけば、三か月後には化けるのではないかと考えて・・・・

【Web制作毎日1つプロジェクト】を考えました。

これは毎日模写コーディングをしていくというやつです！
少々無茶かも知らませんが、確実に身につくと思います。

※適当に思いついたのではなくて↓こちらの方の記事を参考にしています。

【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】

（入門編）題材は何をするのか？

模写コーディングといっても、適当にあるサイトを拾ってくるのは難易度もわからないですし「Javascript」とか「jQuery」を使われていたらお手上げです。

まず、以下の標準的な参考書でコーディングしてWebページ作成の知識を身につけていきます。

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉

おすすめの模写コーディングサイト9選から

模写コーディングがWeb制作スキルを身につけるのにはとても良いと聞きます。

【レベル別】模写コーディングにおすすめのサイトまとめ9選【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog

こちらにわかりやすくレベル別でおすすめサイトが紹介されているので、9個とも順番にやっていこうと思います(^^)/

がんばるぞー( ｀ー´)ノ

本日の成果

さっそくHTMLとCSSでコーディングをしていました。

参考書にあるサイトなのですが「ちらっ|дﾟ)・・・ちらっ|дﾟ)」っと堪忍宇久はするもののほぼ一人でいちから書いていきました。

コードを書いていた時間なんと3時間！！

これを長いと思うか短いと思うかはよくわかりません(笑)

気づき

画像を中央にしたいのに、imgタグがブロック要素ではないため、「margin:0 auto」としても全然効いてくれませんでした。
imgタグをブロック要素にする「display:block」とすることでうまく画像が中央にいきました。

同様に「申し込む」のbuttonタグも「display:block」として「margin:0 auto」としないといけないなど、ブロック要素とインライン要素って大事なんだなって思いましたね(/・ω・)/

いちおうノートに構造を書きながら、余白に学んだことを書いています。

●ノートにまとめる
●やった内容をnoteで公開する

学習の方法は様々ですが、アウトプット70％（インプット30％）くらいの感覚で学習を進めていきます。

あとは、こちらのnoteが格安の400円だったのでデザインカンプを入手して動画を見ながらコーディングをしていきました。

↓動画は無料です。

ヘッダーと一つだけセクションを作ってみました。

画像の配置のcssがむずいです・・・・

.main{
   background-image: url(../img/circle.png);
   background-position: top -150px right -120px;
   background-size: auto;
   background-repeat: no-repeat;
   position: relative;;
}

.mian-image{
   position: absolute;
   right: 15%;
   top: 20%;
   z-index: 1000;
}

一応他の勉強も同時にしている・・・・

模写コーディングは優先度高めで勉強を進めるのですが、ほかに色々勉強をしています。

●昼間：Pythonのデータサイエンス
●夜：熱力学、Flask（Pythonフレームワーク）

毎日、学びがあって楽しいですね。

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）