【HTML/CSS】Progateでの勉強が終わったらやること4選【爆速で成長します】
前回の記事で、プログラミングを始めるのに
- とりあえず1ヶ月
- Progateから始める(HTML/CSS)
といった内容について主に書きました。
では、1ヶ月続けた後、具体的にどうすれば良いのか？
ツールを紹介されている方は多いですが、それ以外のことを書いている方は少ないので、今回はより詳細な内容をまとめていきます。
自分はそのあたりは行きあたりばったりでしたので、かなり遠回りしながら進めているなぁと感じています。
学習を継続するには何をやるか分かってないと不安になりますよね。そういった方に少しでも手助けになればと思います。
それでは行きましょう！
Progateが終わった後にやること4選
基礎をやり終えたら何をすべきか？
結論から書きますね。
- ドットインストールor参考書を進める
- 目標管理を明確にする
- アウトプットと模写を進める
- 目標を修正しつつ、次の言語へ
順を追って解説していきます。
ドットインストールor参考書を進める
ProgateでHTML/CSSのレッスンを終えただけでは正直スキルが全然足りません。あれはあくまで導入と思っていただいたほうがいいです。
そこで、次にやるべき勉強はと言うと、Progateと同様に人気のある学習サイトのドットインストールです。
ある程度までなら無料でできるので、「動画学習でも集中してできそう！」という方にはおすすめです。
Progateと比べると、コチラの方が難易度が高いと感じますので、良い成長になると思います。
ただ、逆に、「動画学習はあまり向いてない、、勉強は参考書が一番！」といった方は、ドットインストールよりも本屋さんで参考書を買うほうがオススメです。
私は後者で、本を読み進めながら自分でコードを書く方が集中できましたし、より成長したと実感してます。
決して両者をやる必要はないので、自分の向き不向きを考慮して、集中できそうな方で学習を進めていきましょう。
でないと、楽しくなくなってしまいます。
Progateとドットインストールの進め方はこの記事にまとめてありますので、よければご覧ください。
目標管理を明確にする
では基礎学習を終えたところで次にやるべきことはと言うと、それは目標・スケジュール管理です。
急に真面目になってしまいましたが、個人的にはかなり重要なこと思っています。
なぜ目標を定めることが重要かは勉強をしてきた方なら分かると思いますが、自分がやるべきことが明確にならないからです。
受験勉強するときに志望校を決めずに勉強しますか？資格の勉強をするのは、その資格が取りたいからではないですか？
それと同じで、プログラミングをやる上でも、フロントエンドを極めてコーダーになるのか、バックエンドに移行してみるのか、webデザイナーを目指すのか、転職するのか、副業するのか、、どれを選ぶのかによってゴールや必要になるスキルも違ってきます。
重要なのは、「その言語を勉強して、何をしたいか」です。プログラミング言語の習得は手段であって、目的ではありません。
ここを履き違えて目的となってしまうと、Progateやドットインストールでレベル上げを趣味でやっている人となってしまいます。
また、スケジュール管理ですが、独学でやっている上では何をいつまでにやるのかが雑になりがちです。
私はスケジュール帳に書いて自身で管理していますが、一応Twitterで #100DaysOfCode とつけて毎日つぶやいています。
100日間(できるだけ)毎日コードを書こう！というものですから、必然的にダラダラできないわけです。
あとは、30DAYSトライアルを進めるのもオススメです。
私はかなり後になって気づいたので、学び初めの段階でこれを知っていたらこの通りに進めていたと思います。
名前の通り30日間でここまでやろう！というもので、難易度で1st、2nd、3rdと別れていて、目的別に進めることもできるのでかなり便利そうです。(しかも無料)
このあたりのツールを上手く活用しつつ、目標・スケジュール管理を明確にしましょう。
それから勉強を再開です。
アウトプットと模写を進める
では特にHTML/CSSをスキルとして定着させるに最適な方法とは何でしょうか。
💡html/cssでアウトプットの方法に困ったら
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月31日
✅簡単なサイトを見つつ模写する
これに尽きます。大事なのはオリジナル要素を考えながら入れること。
これだけで知識の定着が爆速で進みます😌
後、この方の記事で凄く助かりました😄#プログラミング#駆け出しエンジニアhttps://t.co/CKAXxLa2Ij
この方の記事もかなり参考になりました、、
以前こういったツイートをしましたが、一番効果があるのはアウトプットです。
アウトプットは自分で考えコードを書いていくことや既存サイトを見つつ模写することと思っていただければ大丈夫です。
Progateでレッスンをやった後に道場コースをやると「あれ、最初に何書くんだっけ、、？」ってなりませんでしたか？
ここを自分で考え、オリジナル要素を入れつつスムーズに書くことができるとスキルも身に付いてめっちゃ成長が早くなります。
模写に最適なサイトややり方は上記に貼ったツイートの記事にも詳しく載っています。
また、オリジナルで作るのであれば、以下を参考にするといいです。
💡html/cssの知識を効率良く定着させる！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年2月1日
✅模写×アウトプット×架空サイト作成がベスト！
1️⃣他サイトの研究
2️⃣似た構成、良い構成を盗みつつメモ
3️⃣オリジナル要素を入れてカンプ作成
順に終えたら後はコーディングするだけ！凄く成長できましたよ✨#プログラミング初心者#今日の積み上げ
最初は自分の好きなジャンルでいいので、作りたい内容に近いサイトを見て、サイトの構成をメモ書きします。
例えば、ファッション系にするなら、好きなブランドのサイトをいくつか見る、というのでOK。
そこからざっとでいいのでデザインを紙に書きます。
カンプというのはデザイン設計書みたいなものです。
これも調べれば出てきます。
準備ができたらひたすらコーディングしていきます。
また、お金をかけてもいいかな、という方はくりのすけさんのnote教材がかなり勉強になります。
この教材にはお世話になりました！
