こんにちは！

最近ProgateでHTML&CSSの勉強中でしたが一応完走したので
その感想とか学習法を書きたいと思います。

Progateはプログラミング学習のサイトで指示に沿って自分でうちこんでいくのでわかりやすく勉強が出来ました。

初級、中級、上級にわかれていて徐々に難しくなっていきますが
HTML&CSSってこういうのってのを知る意味ではすごく良いサイトだと思いました。

それぞれの級の学習が終わると道場コースと言われるパートがあり
学習コースで学んだことを自力で出来るかを問われます。

これがスムーズにできればマスターしたという事なんですね。

個人的には道場コースは全然わからず答えを見ながら
あーそうだ、こいうのあったね

みたいな具合に一応終わらせることが出来ました。
それを何周かしていてこの方法がオススメだ！

というやり方をご紹介です。

最初から打ち込まないで紙に流れを書いてみる

これが意外としっくりきました。
詳細が↓なんですが

①自分流にチャート？階層？を紙に書いてみる

仕様書を見ながらクラス名はきにせずに
図解やらチャートもどきを紙に書いていきます。

そうすると大きな箱の中に小さい箱が何個もあって
その中に文字や画像が入っている事が
パソコンとにらめっこするよりイメージしやすかったです

②仕様書に書いてある指定箇所をCSS化してみる

フォントサイズ

空白

色　などなどを

わかる範囲でCSS風に書いてみる
わからなければ

.main(自分で適当につけたやつでOK)
上下20px　左右10px

みたいに自分なりに書いておきます。

③完成形のサイトを”検証”して答えを自分で見る！

いわゆる答え合わせです。

まずはクラス名を清書していきます。
命名規則はサイトによっても様々？です。気にしすぎると進まないので
名前があっていたかどうかよりも、階層が正しかったかどうかで判断すると
いいと思います。

次にCSSの記述を見て抜けがないかを確認しあったら紙に追記します。
意味がわからないものがあれば”スライド検索”を使いもう一度復習します。
※スライド検索はProgateのTOPメニューの左上にあります。

★Progateでは答えのコードを見ることが出来ますが
検証機能になれる上でも自分で答えを探し当てる方が
個人的にはいいかなと思いました。

④メモを参考に実際に打ち込んでいきます。

ここまで来たらちゃんと出来ると思いきや意外と抜けがあったりして
想定通りの動きをしてくれないことがあります。
僕だけかな？(´；ω；｀)

そしたら何が抜けていたのかを自分で探す！
この段階であればProgateの”解答”を見るほうが早かったりする

そして完成させる。

⑤もう一回同じ箇所やってみる。

結局は繰り返しですね^^;

まとめ

何回かやっていると階層構造とか、コードの癖？みたいな
ものがわかる気がします。

僕の場合は別の書籍でも勉強していたりしましたが
微妙に書き方や命名規則、階層構造が違ったりしていたので

あまり難しく考えずに自分なりのやり方でって思ってからは
勉強のスピードが格段にあがりました。

こうやって書かなきゃダメだって思うと単語覚えなくては！
みたいな頭になって全然おもしろくなかったですが

後から名前は変えればいいやって思いながらだと
パズルしているだけの感覚に近いので面白かったです。

ちなみにコードもそんなに覚えなくても有名なemmetなどのプラグインで
予測変換してくれることを知ったのでより一層気にしないでいいやって
思いました。

※emeet
bckgrco　みたいに適当にうっても　background-color って変換してくれる！やつです！（説明下手ですね(；・∀・)

そういう意味でも紙に一度書くのはおすすめです！