今までコード書きながらも、ヒントがあるからサクサク書けるけど無かったらどうなるんだろう。
という不安もありましたが、この道場コースでは「見本通り」に見た目がなっていれば自由！
という今までのおさらいを兼ねたコース。
このコースがちゃんとできるかどうかで、今までの内容が頭に入っているかの確認になりそう。
スポンサードサーチ
HTML/CSS 道場コース初級編
初級編を復習しよう
1. ヘッダーを作ろう
2. トップ部分を作ろう
3. コンテンツ部分を作ろう
4. お問い合わせフォームを作ろう
5. フッター部分を作ろう引用：progate公式HP © 2014 Progate, Inc.
こんなレッスン内容で進んでいきます。
パッとでてこない部分もある
おおーう。
一個一個解説を挟みながら進んでいたのとは違い、これをつくってねーバーン！と言われるとあやふやな部分も。
横に並べる・リストを作るとかは頻繁にでてきたから覚えていたけど、お問い合わせフォームは一回しかやってなかった。
どうしても問い合わせフォームが思い出せなかったので仕方なく前に戻る・・・
そして試行錯誤しながらもなんとかステップを進めていく。
総復習だけあってほんとに全部復習できる
これほんとにいままで習ったとこが網羅されている！
- 一通り学習する
- 道場コースで定着しているかどうかの確認
- できなかったところは戻っておさらい
- 一通りやったらまた道場コースで確認
というループで習ったことは頭にいれることが出来そう！
見本には数値が記載されてるから楽勝だなーと思いきや、やってみると結構こんがらがる。
この数字は上のpadding-bottomなのか？下のpaddhing-topなのか？いやこれはmarginだったかなどなど、基礎の復習がしやすい問題が多い。
このステップをやるのとやらないのでは定着率に差が出るので、もう習ったとこだからいいやと思わずにやっておこう！
スポンサードサーチ
不合格を繰り返しながらもなんとか合格
チェック→不合格
あーここはもっと隙間あったかー。
チェック→不合格
あーここは文字色も変わってるのかー
チェック→不合格
あれ？なんかinputのwidth400pxにしたはずなのになんか小さい。なんで？
こんなトライ&エラーを繰り返しながら、なんとか最終的には合格。
やっぱり覚えたとこしか出さないから自力で作れ！といわれるとまだまだだった。
気になったこと
初級が終わって気になったことがふたつ。
進行には全く支障がないけど、もしかしたらやり方を知らないだけで出来る方法があるのか？
ひとつめ
ひとつは今の時点の見た目がチェックを押さないと見られないこと。
今までは右のウィンドウに表示されていたから、わざとなのかな？
より実践に近い形でチェックさせようとしていたのだろうか？
理由は謎だが、ちょっと面倒だった。
ふたつめ
合格したときにコードの間に隙間ができること。
これ結構みにくかった！
自分のコードと模範解答のコードを左右に並べて、違いがある行がハイライトされるから
行があまりにちがうとハイライトが多くなる！
こんな感じ。
左側の自分で書いたコードは、行と行の間が大きい箇所がある。
より多く左右であっている個所を探して合わせているのかな？
自分で左右の行を合わせる調整ができれば、もっと違いを確認しやすくて便利だと思った。
今まではここに書こう。みたいな表示のとこに書いていたから差がなかったけど、
フリーだとclassの名前も違うし、左右差がでやすい。
次は道場コース中級編
次もなかなか苦戦しそうではあるけど、中級編に進んでみよう！
もはや中級で何を勉強したかおぼろげだから、何が出てくるのかやってみないとわからない・・・
トライ&エラーで少しずつレベルアップしていこう。
それでは、また。
