【Progate】｢HTML&CSS｣の道場コースまで終えた感想と取り組むコツ【2日目】

｢Progate｣を初めて数日、｢道場コース｣まで終わりましたー！いえーい！

基礎コースでcssやレイアウトの基礎を学んだので、｢Progateのトップページのようなおしゃれなレイアウトが作れるんじゃないか！？｣と謎めいた全能感を覚えながら挑んだ｢道場コース｣。

結果的に、その甘々な幻想はぶち壊されました…。

ただ、｢道場コース｣を終えてから、HTMLとCSSに対して実践で使える知識が身に着きました

ということで｢道場コース｣を取り組んでみた感想と、取り組んだ時のコツをお話します。

 有料コースにするか悩んでいる人にも、参考になればと思います。

道場コースはどんな感じ？

｢道場コース｣の特徴は、｢学習コース｣で一度作ったWEBデザインを、仕様書をもとに自分の力で作るというもの。

まず｢学習コース｣では、基本的にHTMLとCSSの基礎を手取り足取り丁寧に教えてくれる。学習コースの流れはこんな感じ。

1.｢透過には〇〇というタグを使用します｣って説明スライドを読む
2.｢〇〇をこちらに記入して、背景色を透過させてください｣という説明を読む
3.説明のとおりにコードを打つ

インプットと同時に、アウトプットも行えるから、すごく丁寧なんだよね。

だから理解しながら1つのWEBデザインを作り上げるので達成感も味わえる

でも｢道場コース｣は大きくちがう。｢学習コース｣が授業であれば、｢道場コース｣は試験なんだよね。道場コースの学習の流れはこんな感じ。

1.作成すべきWEBデザインを確認する(「学習コース」で作ったもの)
2.文字の色や背景のサイズを指定された仕様書を提示される
3.その仕様書に沿ってデザインを自分で考えて作る

この流れの通り、インプットじゃなくアウトプットが中心なんだよね。

｢学習コース｣で作り上げたデザインだから余裕だと侮ってたら…かなり知識が抜けていて、作るのに苦労したよ…

知識の定着を確認するためのアウトプットができる

｢アウトプットは、自分の知識量が確認出来て、問題点も見つかる万能のツール｣ってことは繰り返し主張してるんだけど、改めて証明された感じ。

「道場コース」によるアウトプットを通して自分の記憶の曖昧さを実感したし、反対に｢一回の学習で7割くらい覚えたんだな｣って自分の記憶力の自信も得た。

こんな感じ。雑だから伝わらないかも笑

思い出せなかったタグは、メモしていたんだけど、これが正解。

自分の知識量が把握できて、何を覚えるべきかの目的が明確になる。同じミスを何度もしちゃうんだけど、メモのおかげで｢同じミスを何度もしている｣と気づくことが出来た。

結果的に、この気づきが記憶の定着に繋がったなあ。

苦戦したけど自信を得た｢道場コース 中級編｣

特に｢道場コース 中級編｣は｢学習コース 中級編｣で作ったWEBデザインを自分の手で作るコースなんだけど、これが難しい…。

デザインの骨格が全然掴めなくて、コードがぐちゃぐちゃになってしまったり…。全然スマートじゃない。

そこで気づいたのが「構造の重要性」ね。

WEBデザインで一番重要なのは、おしゃれなボタンでも、アニメーション技術でもなく、骨組みなんだよね。

これさえ初めに決めていれば、コードが洗練されてかなり書きやすくなる。

こんな感じで構造を意識するようになって、WEBデザインの理解が一気に進んだ。

ペーパーに書いているのは休憩中のマクドナルドで構造の重要性を気づいたから…笑

 道場コースは知識の定着を図るコース

道場コースは本流から逸れている感じだけど、全くそんなことはない。
むしろ、道場コースを取り組んで、HTMLとCSSの基礎は完成すると言ってもいいと思う。なんてったって、アウトプットが知識を定着させるための最強のツールだからね。

さいごに

今は｢実践コース｣に取り組んでいます。構造理解の意識と、知識の定着を確認するアウトプットに取り組んだおかげで、デザイン作成の方向性は掴めています。

｢何をすればいいかわからない｣を脱却出来て良かった。さああと少し、頑張るぞー！おー！