【Progate】HTML＆CSSコースの勉強時間【プログラミング未経験者の体験談】

こんにちは、32リタイア男です。

私は2020年6月末に会社を退職後、32歳未経験からプログラミングの勉強を始めました。

プログラミング未経験者がまず初めに勉強する教材として、オンラインのプログラミング学習サービス「Progate」が挙げられます。

そのため、私もProgateからプログラミング学習を始めました。

Progateは環境構築が不要なため、プログラミング未経験者の初めての学習教材にはオススメです！

私は最終的に3カ月の間、Progateを勉強しました。
Progateを3カ月勉強した後、私のProgateのレベルは以下のようになりました。

この記事では、ProgateのHTML＆CSSコースの勉強時間について、プログラミング未経験者の私が実際にかかった時間を紹介します。

この記事では、以下のポイントについて解説します。

ProgateのHTML＆CSSコースについて

ProgateのHTML＆CSSコースは、Web制作の基礎知識を学ぶことができます。
HTML&CSSはマークアップ言語と呼ばれるものであり、厳密にはプログラミング言語ではありません。

しかし、プログラミングを学習する方にとっては必須知識となるため、最初に受講をオススメします。
ただし、Web制作で稼ぐためには深い知識が必要となりますが、プログラミングにおいては最低限の知識があれば問題ない場合があります。

自分がプログラミングで実現したいことが明確な場合、学習するコースは限定しても良いかもしれません。

HTML&CSSコースには、全部で次の７つのコースがあります。

学習コースおよびFlexbox編では、Web制作に必要な基礎知識を学ぶことができます。
道場コースでは、仕様書に沿ってゼロからWeb制作することで、学習コースの内容を実践をとおして覚えることができます。

HTML&CSSの全コースのProgateの目安時間は18時間50分です。

この記事では、HTML&CSSの各コースの概要と、実際にプログラミング未経験者の私が要した勉強時間を紹介します。

各コースの概要と実際の勉強時間

HTML&CSS 初級編 学習コース（Progateの目安時間：3時間50分）

Progateの学習を開始された方は、まずHTML&CSS初級編学習コースを受講する方が多いはずです。
HTML&CSS初級編学習コースは無料で受講できるため、最初の学習としてはオススメです。

私のHTML&CSS初級編学習コースの勉強時間は、1時間30分です。
その後、復習に1時間程度費やしています。

未経験からHTML&CSSを学習する方は、最初から全てを完璧に理解しようとする方もいます。
理解できない場合は、HTML&CSS 初級編 学習コースを何度も復習する方もいますが、オススメはしません。

なぜなら、このコースの知識はWebページを作るうえでは必須のため、今後の実践をとおして自然と身につくからです。

私はHTML&CSS初級編学習コースを2周していますが、学習コースを復習するより、道場コースを復習した方が良いと感じています。

復習時間も含めて、HTML&CSS初級編学習コースの勉強時間の合計は、2時間30分となります。

これからProgateの学習を開始される方は、まずはHTML&CSS初級編学習コースの勉強時間を測定してください。
もしも私と同じ1時間30分程度かかる場合、HTML&CSSコースの勉強時間は私と同程度の時間がかかると思われます。

HTML&CSS 中級編 学習コース（Progateの目安時間：4時間30分）

HTML&CSS中級編学習コースからは、Progate有料コースとなります。

中級編からは、ログインリンク作成など実際のWeb制作で使用頻度の多い知識について説明しています。
Web制作で稼ぐことを考えている方は、このコースは必ず受講することをオススメします。

私のHTML&CSS中級編学習コースの勉強時間は、2時間30分です。
その後、復習に2時間程度費やしています。

HTML&CSSコースは、中級編の学習内容が最も密度が濃く、難易度もそれなりに高いです。
Web制作で稼ぐことを目指している方は、まずはこのコースでWeb制作が自分に向いているか確かめましょう。

私は中級編学習コースを2周していますが、中級編道場コースで詰まったら、学習コースを復習する形で良いと考えます。

復習時間も含めて、HTML&CSS中級編学習コースの勉強時間の合計は、4時間30分となります。

このコースは内容が多く、全部は覚えきれないかもしれません。
勉強方法としては、メモをとるよりは、実際にコードをひたすら書いて、身体に覚え込ませることをオススメします。

HTML&CSS 初級編 道場コース（Progateの目安時間：2時間30分）

HTML&CSS初級編道場コースは、HTML&CSS初級編学習コースの復習ともいえるコースです。

道場コースは学習コースの内容をゼロから作っていくコースになります。

そのため、道場コースは人によっては時間がかかります。

私のHTML&CSS初級編道場コースの勉強時間は、2時間です。
その後、復習に1時間30分程度費やしています。

道場コースは自分で考えて製作するため、学習コースの復習には最適です。
何度も復習した方が良いかは賛否は分かれますが、私は道場コースを2周しました。

復習時間も含めて、HTML&CSS初級編道場コースの勉強時間の合計は、3時間30分となります。

HTML&CSS 中級編 道場コース（Progateの目安時間：3時間20分）

HTML&CSS中級編道場コースは、HTML&CSSコースの中でも一番難易度が高いコースと考えます。

そのため、今後Web制作で稼ぐことを考えている方は、このコースで挫折しないことが重要です。
もしも、このコースを独力で突破できない場合、言い方は厳しいですが、Web制作で稼ぐのはとても困難だと考えます。

私のHTML&CSS中級編道場コースの勉強時間は、4時間です。
その後、復習に3時間30分程度費やしています。

このコースで注意すべきことは、最初にチャレンジした場合、まず間違いなくエラーが発生すると思います。
そのとき、エラー箇所が正確に表示されない場合があります。
その場合、「margin」「padding」「width」「height」のいずれかが異なるケース（レイアウトのズレ）が多いため、まずはレイアウトがズレていないか確認しましょう。

私はこのコースにとても苦労したため、合計3周しています。

復習時間も含めて、HTML&CSS中級編道場コースの勉強時間の合計は、7時間30分となります。

HTML&CSS 上級編 学習コース（Progateの目安時間：2時間）

HTML&CSS上級編学習コースは、中級編と比べて難易度は高くないと考えます。

ただし、このコースはレスポンシブ対応（スマホなどの画面サイズに応じた表示調整）に関する内容のため、HTML&CSSの中でもとても重要なコースです。

私のHTML&CSS上級編学習コースの勉強時間は、1時間です。
その後、復習に30分程度費やしています。

Progateのレスポンシブ対応の内容自体はそこまで難しくありません。
しかし、実際のWeb制作では、スマホやiPadなど、どのデバイスでもきちんと表示させることを意識しなければいけません。

そのため、仕事でレスポンシブ対応にかける労力はかなり大きいです。
また、Web制作で稼ぐ場合は、Progateでは説明されていない部分のレスポンシブ対応も自分で調べて対応する必要があります。
レスポンシブ対応は重要なため、私はこのコースを2周しています。

復習時間も含めて、HTML&CSS上級編学習コースの勉強時間の合計は、1時間30分となります。

HTML&CSS 上級編 道場コース（Progateの目安時間：1時間40分）

HTML&CSS上級編道場コースは、中級編道場コースと比べてボリュームは少ないため、作業時間は少ないです。

しかし、レイアウトのエラーが出やすいため、エラー箇所の確認のため、上級編学習コースを何度も見返すことになるかもしれません。

エラーの原因を突き止めることで理解が深まるため、エラーが発生した場合はなるべく独力で解決しましょう。
どの箇所でエラーが発生しているのか、細分化して考えるのがコツです。

私のHTML&CSS上級編道場コースの勉強時間は、2時間です。
その後、復習に1時間程度費やしています。

レスポンシブ対応の理解を深めるため、私は上級編学習コースとあわせて、道場コースも2周しています。

復習時間も含めて、HTML&CSS上級編道場コースの勉強時間の合計は、3時間となります。

HTML&CSS Flexbox編（Progateの目安時間：1時間）

HTML&CSS Flexbox編の難易度は低く、他のHTML&CSSコースの学習を完了できた人なら問題無く理解できるでしょう。

そして、Flexboxは実際にWeb制作をするうえでも便利なため、覚えておいて損はない知識です。
私もレスポンシブ対応をする際に、Flexboxを用いた経験があります。

私のHTML&CSS Flexbox編の勉強時間は、30分です。

理解しやすい内容のため、Flexboxを使う機会が訪れたら復習するぐらいで良いと考え、復習はしていません。

そのため、HTML&CSS Flexbox編の勉強時間の合計は、30分となります。

HTML&CSSコースのまとめ

HTML&CSSコースについて、Progateの累計目安時間と、私がHTML&CSSコースを1周するのにかけた時間、復習も含めた累計勉強時間をまとめると、以下のようになります。

HTML&CSSコースは、プログラミング未経験者がWeb制作で稼ぐためには必須の知識が詰まっています。
このコースを学習すれば、すぐにWeb制作で稼げるわけではありません。
しかし、自分でカンタンなWebページは作れるようになるので、これからプログラミング学習を始める方にオススメのコースと考えます。