どうも7noteです。学習サイトが終わったら次にやることについて。

HTMLやCSS、また他の様々な言語を勉強するのに、今では無料のプログラミング学習サイトが主流になってきました。
ただ学習サイトは「とても親切かつ楽しくできてしまいすぎる」というのが私の見解です。

それがいいことか悪いことかは置いておき、伝えたい事としては「学習サイトだけでは言語の習得は難しい」ということです。

どんなに優れた学習サイトだとしても全ての事を学び習得するのは難しいです。プログラミング言語を習得するにはそれに見合った量のコーディングの経験値が必要です。

ただいきなり実践というわけにはいかないので、学習サイト→実践（仕事）まで1段１段順番に上がっていくステップアップの方法を紹介できればと思います。

自身の習得レベルごとに合わせた次のステップ

ここではプロゲートを例にお話させていただきます。
（プロゲートって何？という方はこちら→https://prog-8.com/）

例えば、プロゲートを受講してもその内容をどの程度理解しているのかは人によって様々です。
それであれば、理解度によって次のステップもどのような方法を取るか分けるべきかと思いました。
なので、理解度を大きく3つのタイプに分けて、それぞれに合わせたステップアップの方法を紹介していきたいと思います。

【プロゲートの理解度基準】
レベル①：とりあえず1周終わって、見返しながらであれば練習課題と同じ物が作れる。（もしくはすべての道場編を完了している）
レベル②：2周以上、もしくは1周プラス分からなかったところを復習して出てきた単語や意味（効果）は全部理解している。
レベル③：道場編で作ったページなら、プロゲートのヒント（ソース上のコメント）無しでも似たようなものを作れる。

※もし上のレベル①にまだいけてないかもと思う場合はゆっくり理解を深めながらもう一周やってみよう！

レベル①：とりあえず1周終わって、見返しながらであれば練習課題と同じ物が作れる。（もしくはすべての道場編を完了している）

ざっと1周完了していて、見返しながらならできる方はHTML/CSSの教本学習をおすすめします。
特に基礎がしっかりと書いてある本が初心者の方には分かりやすくていいかなと思います。
また教本の購入方法としては、できれば大きな書店に足を運び中身を見て選ぶ事をおすすめします。
これから勉強するところなのに中身を見ても決められないと思うかもしれませんが、中を軽く見てみてください。複数冊出ているということは必ず違いがあります。見比べてみて自分が「あ、この本の説明や図見やすいな」と少しでも思った方を買ってみてください。これだけで学習意欲やスピードが格段にあがるのでおすすめです。

近所に大きな書店なんかないよという方は、ネットなどのレビューを見て、自分に近い境遇や考え方の方のレビューを参考に選んでみてください。

ひと通り通読したら、模写コーディングなどをやってみましょう。（模写コーディングについてはレベル③で。）

レベル②：2周以上、もしくは1周プラス分からなかったところを復習して出てきた単語や意味（効果）は全部理解している。

学習用サイトはとても親切丁寧に書いてありますが、それでも普段パソコンに馴染みの無い方からすればちんぷんかんぷんな事がかいてあります。そんな内容をしっかり理解されている方は理解力が高い方だと思います。

なのでそんな方にはぜひ開発の環境構築をおすすめします。
学習サイトなどはエディタなど必要なものが全て揃っています。ですが、実際に自分でコーディングを始めるとなるとエディタが必要になります。エディタには有料のものから無料のものまで様々ありますのでまずは検索してみて気になったエディタを入れてみるところから初めて見ましょう。
今後本格的にホームぺージ制作をするとなればエディタだけでなく、デザインツールや効率化を図るソフトなど様々なソフトウェアを駆使して作っていくことになります。
独学であれば、困ったときに頼れるのは自分かネットしかありませんので、ネットにある情報やソフトウェアを使いこなせるようになる必要があります。

その手始めとして自分の好きなエディタをインストールするところから始めるのがいいと思います。
実際にエディタをダウンロードできたら、学習した内容を元にこんなことできるかな、あんなことできるかなといろいろ試してみてください。最初はサイトの形にこだわらなくてもいいと思います。HTMLとCSSだけで「ビルみたいなのを表現できないかな」とか、「カレンダーっぽいものを作ってみたり」など、自由な発想でエディタを使うことに慣れていきましょう。

レベル③：道場編で作ったページなら、プロゲートのヒント（ソース上のコメント）無しでも似たようなものを作れる。

すばらしい才能だと思います。ぜひすぐにその力を活かしてみましょう！
手元にエディタなどの開発環境が整っていれば、模写コーディングをやってみましょう。
「模写コーディング」などで検索すると、いくつかサンプルのホームぺージが見つかると思うので、サンプルを元に同じサイトを作ってみましょう。
ただまだ学習していないjavascriptなどが使われているところは今は省略してもいいと思います。まずはHTMLとCSSを完璧にコピーできるように取り組んでみましょう。

模写コーディングをする際に、フォントの種類や画像データなどを見るためには「検証ツール」を使う事をおすすめします。他のサイトでどんな風にコーディングしているのか、画像データはどこに入っているのかなどを確認することができます。検証ツールはWEBブラウザ上で右クリックの「検証」を押すか、F12キーで見れると思います。（※ブラウザによって多少仕様が違う場合があります）

検証ツールを使って模写コーディングをやってみてください。そしてぜひ転職活動などでポートフォリオなどにまとめて自己PRなどに使ってみましょう。