- Progate（プロゲート）のHTML,CSS編が一通り終わったけど、次に何をすればいいか分からない！
- 1人でWebサイトを作れるようになるには何を次にすればいいか教えて欲しい！
独学でプログラミング（HTML,CSS）を学ぶ初めのステップとしてProgate（プロゲート）で学習をする方が多いと思います。
Progateは初心者に分かりやすく、プログラミングを楽しく学習するコンテンツとしては素晴らしいサービスです！
しかし、将来エンジニアになりたい方や、フリーランスとして案件を獲得したい方だとProgateを数回やった程度では実践的なスキルは全く身につきません。
プロゲートのHTML,CSS編を3週もやったけど実践的なスキルは身につかない！次に何すればいいの〜？？
Progateの学習を終えてからが本当のスタートです！次に何をするべきかいくつか学習方法をご紹介しますね！
今回はプログラミング初心者の方向けに、Progeteの学習（HTML,CSS編）の学習を終了した後に、エンジニアになったり仕事を獲得できる様な実践的なスキルを身につけるには何をすれば良いかいくつか方法をご紹介します！
無料の教材作りました▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】
✔︎こんな方にオススメ
- ProgateのHTML,CSS編を一通り学習し終わった方
- プログラミング初心者で将来エンジニア職に就きたい方
- プログラミングの学習方法に迷っている方
この記事を読めば次に何をすれば良いか明確になると思います！
Progate（プロゲート）が終わったら次にするべき4STEP
ProgateのHTML,CSS編を終わった人は、おそらくProgate内の課題であれば難なくこなせるレベルまでは成長していると思います！
HTML,CSSの基礎知識はこれで十分なので、次にHTML,CSSの応用と、アウトプットをして実戦でも使えるようにしなければいけません！
✔︎プロゲートが終わったら次にするべき4STEP
- エディタを使ってHTML,CSSをコーディングしてみる
- 効率よくコーディングするスキルを身につける
- GoogleChromの検証ツールの使い方をマスターする
- 模写コーディングで実践スキルを身につける
プロゲートが終わった後に、この4つのステップを行えば、自分一人で簡単なWebサイトであればHTML,CSSを使って作れるようになります！
✔︎プログラミング学習のPOINT
プログラミング学習はカンニングOKなので、暗記しようとせずに、分からなければ調べて解決するようにしましょう！
調べる力を鍛えるのもプログラミングを上達することに繋がります！
ドットインストールでエディタの使い方、コーディングを学ぶ
プロゲートでの学習は自身のエディタ（HTMLタグやCSSを書いた黒い画面）を使わずに、プロゲート側が用意してくれたエディタを使ってコーディングをしていたかと思います。
当然ですが、何か仕事などでWebサイトを作る際には、自分専用のエディタが必ず必要になってきます。
Progateのように親切に誰もエディタを用意してくれません！
また、Progateの学習だけではHTMLタグ（<h3>など）やCSSメソッド（color:）の知識量はまだまだ不十分です。
他にも何100種類ものタグがあるので、使いこなせる様になる必要があります。
そこで、エディタの基本的な使い方、プロゲート以外のコーディングの仕方、この2つをカバーしてくれるのが、皆さんもご存知のドットインストールです。
✔︎ドットインストールでやるべきレッスン
- HTML/CSSの学習環境を整えよう
- もっと詳しくHTML/CSSを学んでみよう（全6レッスン）
ここではVisual Studio Codeと呼ばれるエディタを使用して、HTML,CSSのコーディングを学習していくので、実戦に近い形で学習ができます！
ここで需要なのが必ず、「動画を見る→実際に自分のエディタで真似して書く」というプロセスを必ず行うようにしましょう！
このステップを終えると、自分のエディタを使って、HTML,CSSのコーディングスキルがある程度身につくレベルまで成長します！
▼合わせて読みたい！
最強エディタVSCodeとは？特徴からインストール、使い方まで解説！
効率よくコーディングするスキルを身につける
ここまでのステップを終えると、HTML,CSSの基礎はだいたいOKなので、効率よくWebサイトを構築するスキルを身につけていきます。
実務でWebサイトを作るときは、効率よくコーディングをするのが非常に大事で、フリーランスとして活動する際にもどれだけ早く納品できるかで時給が大きく異なります。
✔︎HTML,CSSを効率よくコーディングするためのTip！
※リンクをクリックすると解説記事に飛びます
これらの3つの効率化の方法を学ぶと、見違えるほどコーディング速度が早くなると思います！
実務でもよく使う手法なので、ぜひ習得しておきましょう！
GoogleChromの検証ツールの使い方をマスターする
初心者の方がコーディングをしていくと、画像の中央揃えが上手くいかない、marginとpaddingが上手く作動しない時が多々あり、どうしたら良いか分からないことが多くあります。
その問題を解決してくれるのがGoogleChromの検証ツールです！
✔︎検証ツールのメリット
- コーディングのミスが直ぐに見つかる
- margin,paddingの状態が一目で分かる
- デバイスによっての見え方を確認することができる
- 公開されているサイトのコードを見る事ができる
- コードのテストができる
Chromの検証ツールは、実務で使わないことはないと言うほど、頻繁に使用するツールで、これがないと正しくコーディングをすることができません。
検証ツールを使用すると、このようにWebサイトの内部構造をみれたり、どのHTML要素にどんなCSSが適用されているのかを一目で確認することができます！
▼Chromeの検証ツールの使い方ガイド
【Chrome検証ツール使い方】初心者が抑えておくべき便利な４つの機能の使い方
模写コーディングで実践スキルを身につける
ここまでのステップを終えることができれば、自分一人でWebサイトをHTML,CSSを使って作るスキルは十分身についています！
そこで、実際に自分一人でWebサイトを作ってみましょう！
自分一人で1からデザインしてサイト作れる自信はないよー！
安心して下さい！こらから行うのは模写コーディングといって既存であるサイトを真似して同じページを作る学習をします！
✔︎模写コーディングとは？
実際に公開されているサイトを見ながら、見た目が同じになる様に1からコーディングをしていく学習法の事を言います。
僕も当初はこの模写コーディングを沢山して、スキルを伸ばしていきました！
模写コーディングは、実務とほとんど同じ環境なので、このステップを終えれば、簡単なコーディング案件ならクラウドワークス などを利用して受注できます！
✔︎模写コーディングにおすすめのサイト
初めて模写コーディングするときは、つまずくことが多々あると思いますが、分からないことは調べてOKなので、なんとか完成させるようにしましょう！
▼模写コーディングする前に読んでください！
プロゲートの次の4STEPが終わった後は？
ここまでのステップを終えれば、簡単なWebサイトであればHTML,CSSを使って作れる程度のスキルは身についています。
しかし、エンジニア転職したり、フリーランスエンジニアとして活動するにはまだまだスキルが不十分です。
エンジニア転職であれば、プログラミング言語（Ruby、PHP、JavaScript）の習得が必要ですし、フリーランスエンジニアであれば、営業方法や実績を作らなければいけません。
TechAcademyのホームページでそれぞれの言語で開発できるものや、現役エンジニアがオススメする言語が書いてあるのでチェックして見ましょう！
HTML,CSSはWeb開発の土台のようなものです！
ここからが本当のスタートなので頑張りましょう！
確実にエンジニアになるならスクールを活用する
本気で、エンジニア転職やフリーランスエンジニアを目指すのであれば、プログラミングスクールを活用するのが最善策です。
正直、独学だと高度なスキルは身につきませんし、挫折する確率も高いので、せっかくのプログラミング習得のチャンスを逃すことになります。
僕も、独学に限界を感じてプログラミングスクールに通った結果、フリーランスエンジニアになることができました！
プログラミングスクールを活用すれば、プログラミングの学習以外にも、転職サポートやフリーランスとしての案件獲得サポートをしてくれるので、スクールの受講費はすぐに回収できます。
- TechAcademy：20以上の豊富なコースから自分に合ったスキルを学ぶ！
- DMM WEBCAMP：経済産業省が認定！エンジニア転職成功率98%！
- TECH CAMP：エンジニア転職できなければ全額返金保証！
TechAcademyは日本最大級のオンラインプログラミングスクールで、エンジニア転職保証コースがあります。
エンジニア転職できなければ、全額返金保障してくれるので、確実にエンジニアとして仕事ができるようになります。
Progate学習が終わった後まとめ
何をすれば良いか分からなかったけど、この記事を読んでやることが明確になった！
いかがでしたでしょうか！
Progate学習終了〜模写コーディングまで解説してきましたが、この4STEPを終えると、HTML&CSSに関しては卒業してもOKなレベルです。
HTML&CSSの学習が終わった方は、LP制作に必要なスキルを習得してクラウドソーシング系のサイトで案件を受注して見るのもありですね！
その他のPHPやRubyなどのプログラミング言語を学びたい方は、TechAcademy のサイトを参考に自分にあった言語を選択してみましょう！
▼合わせて読みたい！
