この記事を読むメリット
・Html & CSSを効率よく学習する方法がわかる
・具体的な教材やアクションプランがわかる
・どこまで技術力が上げれば、Html & CSSの学習を卒業して良いかわかる
Html & CSS 学習方法
ステップ1：プロゲートの「HTML & CSS」コースを３周する
ゲーム感覚で手を動かしながら、効率よくプログラミングを習得できます。
ポイント1：必ず３週する
HTMLとCSSは最も基礎的な言語です。
頻出の記述を毎回ググるのは大変です。
反復練習をすることで、ある程度暗記します。
頻出の記述はググらなくても書けるレベルにしましょう。
ポイント2：絶対に4週以上はやらない
先ほど反復練習の重要性を説明しました。
反復しすぎるのは、それも問題です。
3週したら必ず次に進みましょう。
基礎学習依存症のプロゲート中毒に陥ってしまわないように気をつけましょう。
今後javaScriptやReactを学習する上で、復習する機会はたくさんあります。
細かい知識はそこで、ググって思い出せば十分です。
ポイント3：floatは理解できなくてOK
最近の実務でfloatが使われることはほとんどありません。
フレックスボックスの方が便利だからです。
プロゲートにフレックスボックスの項目があります。
これはしっかり理解しましょう。
ステップ2：ドットインストールのWebサイトを作れるようになろうを一周する
プロゲートでは補いきれなかった、周辺知識を補うことができます。
アップロードする手順の解説もあるので、転職先に実績として公開することができます。
ポイント1：ファイル作成からアップロードまで達成する
プロゲートではプログラミングの全体像を掴み基礎を習得できます。
しかし実際の現場では
・PCにエディターをインストールし、ファイルを作成する
・バグが起きたらディベロッパーツールで確認する
・完成したら、サーバーにアップロードし公開する
など求められる知識がたくさんあります。
これらを補うことができるのがドットインストールの魅力です。
ポイント2：細かい属性やプロパティは覚えなくてOK
ドットインストールでは細かい属性やプロパティについて解説があります。
これらは暗記する必要はありません。
ただ選択肢として頭の片隅に置いておく必要はあります。
倍速で良いので、しっかり目を通すようにしましょう。
ポイント3：HtmlのデフォルトCSSは覚えなくてOK
例えばulタグにはpaddingが入っていたり、liには「・」がついています。
これらのデフォルトのCSSを覚える必要はありません。
実務ではリセットCSSを利用します。
Htmlのcss設定は全て削除してから、書いていくのが基本です。
デザインは全てCSSに委ねるのが一般的です。
Htmlの役割とは「構造を定義する」ことです。
ulやliが使われていると何かが繰り返されていることがわかります。
全てdivだと見にくいです。
ステップ3：模写コーディングに挑戦する
https://magicgifted.com/html-goal/
最後にこちらのサイトの模写コーデインングに挑戦しましょう。
模写できたらHtml & CSS は卒業です。
ポイント1：このレベルでOK
こちらのサイトを模写できれば、独学レベルでは十分です。
あとは実務でググりながら成長するしかありません。
「模写コーディング おすすめ」などの検索して出てくるサイトは正直レベルが高すぎです。
私も妻も弟も上記の模写コーディング後にすぐ実務に入りましたが、十分通用しています。
ポイント2：暗記力よりも検索力
模写コーディングでは、知らなかった知識がたくさん必要になります。
この時に、焦ってプロゲートをやり直してはいけません。
暗記力ではなく、検索力を養う気持ちで、自走力を磨きましょう。
補足
