【Progate】道場が難しい！HTML＆CSSコースを全力でやってみた【有料版】

ProgateのHTML&CSSコースを修了しました！

【Progate HTML&CSS】
全7レッスン
合計所要時間　5時間25分（目安18時間50分）

中級編の道場コースが一番の山場。
このコースが修了できれば、HTML＆CSSでLPを作成できるレベルの知識は学べる。

しかし、実際に作れるかはまた別でどのように実装していくのかを効率的に考えていくことが難しい。

— ぎーすえ@ブログ×プログラミング (@gisuekawazu) July 24, 2020

この記事では、これからHTML&CSSコースを学ぶか迷っている人に向けてコースの概要や感想をお伝えします！

プロゲートHTML&CSSコースの全体像

コースの所要時間

コース名	修了時間目安	かかった時間
HTML&CSS 初級編[学習コース]	3h50m	50m
HTML&CSS 中級編[学習コース]	4h30m	1h
HTML&CSS 初級編[道場コース]	2h30m	1h
HTML&CSS 中級編[道場コース]	3h20m	1h30m
HTML&CSS 上級編[学習コース]	2h	25m
HTML&CSS 上級編[道場コース]	1h40m	30m
HTML&CSS Flexbox編[学習コース]	1h	10m
合計	18h50m	5h25m

かなり全力でやったつもりですがそもそものボリュームが初級・中級でかなりあるのでかなり時間がかかってしまいました。

特に、道場コースは細かい違いで進めないことも多く見た目以上に時間がかかると言えます。

上級編とFlexbox編はレスポンシブルに関する内容で、最初の段階ではそういうのがあるんだという認識ぐらいで問題ないと思います。

HTML＆CSSの立ち位置

Webページを作る際の見た目に関する部分でフロントエンドの基本中の基本となってきます。

Webアプリを作る際にも必要になる知識ですし、これ単体だけでもマスターできればランディングページ（LP）を作ることだってできます。

プログラミングにありがちな計算などがメインではなく、文章を飾り付けていくといったものなので比較的とっつきやすいとも思います。

いつも見ているWebページもHTML＆CSSで動いているわけですから、一番身近にあって見かける機会も最も多い言語だと思います。

プロゲートHTML&CSSコースの感想

全体のレベル感

このコースを学びきることで1ページのレスポンシブに対応したLPを作るほどの知識を学ぶことができます。

講義自体はわかりやすく、1つずつ出てくる課題をクリアしていくとだんだん自分が作っているLPが出来上がっていくというのはなかなか楽しいものです。

しかし、いざ自分で作るとなる道場コースをやるとわかるのですが、一から作ると慣れるまではかなり難しいと思います。

どのような構造でHTMLとCSSを使っていくか考えていかないと意図しない見た目になってしまい、細かいずれに気づけず致命的になってしまうことも多いので回数を重ねていく必要があります。

ブロガーにもオススメ

ブログをやっている人にHTMLとかCSSの知識は必要かっていう議論がたまにありますが、Progateのレベルの知識を身につけておくことはプラスになると思いました。

ブログをテーマのデフォルトの設定のままでいくと他のブログと差別化をするのが難しく見たことあるような見た目になってしまいがちで、凝った見た目にしようと思うとHTMLとCSSの知識は少しは必要になってきます。

たとえコピペコードだとしてもどんなものかイメージすらできなかったらエラーの原因になったり、意図したものにできないことが多いと思います。

実践するには物足りない

このコースを修了することでバンバンLPを作っていけるかというとちょっと厳しいと思います。

インプットは基本的なことだけだし、アウトプットに関しては圧倒的に足りてないで、いざ何か作ろうと思ったら手が止まってしまう人が大半だと思います。

僕も、LPを作っていきたいと思っていますがとにかくLPの模写コーディングなどでアウトプットを重ねて量を積み重ねていく必要があるのかなと思います。

Progateの道場コースの攻略方法

おそらくProgateをHTML＆CSSから始めて道場コースで一度挫折する人が多いと思うので僕が考える攻略方法を伝えたいと思います。

ちなみに道場コースを全くヒントも見ずにスラスラできるのであれば、それはかなり実務に近いレベルでありほとんどの人はスラスラできないので心配することはありません。

1周目は手が止まったら答えを見る

答えを見ずに完成させたいという気持ちは痛いほどわかりますが、1周目は手が止まってどうしようもなくなったら潔く答えを見ましょう。

考えて答えを導けるのならいいのですが初学者にそんなことはそうそう起きないので、手が止まってしまう時間の分だけもったいないです。

ただ、答えを見る分その答えがどういう構造でどういう意味があるかはしっかりと見て理解しましょう。

2週目は何が分からないかを具体的にする

1周目で答えを見ながら終わらせて2週目をするんだから何も見ずにいけるでしょと思っていたら大抵どこかでひっかかります。

2週目ではできるだけ答えは見ずに調べながら分からないところを実装していけるようにしましょう。

この「分からない部分を調べて実装する」というのは模写コーディングや実務でも使うスキルなので道場のうちから鍛えておくといいです。

調べるためにも何かしらキーとなる言葉や表現は覚えておかないといけないので2週目ではそれがクリアできるといいですね。

3週目以降は何も見ずにコーディングできることを目指す

3週目以降は基本的に2週目の繰り返しで調べることをどんどん少なくしていき、最終的には何も見ずに実装できるようになるのが理想です。

ただ、個人的には何も見ずに実装できるよりも調べることがあっても短い時間で実装できる方が価値があると思うので、何も見ずにできるようになるまで繰り返す必要はないと思います。

HTML＆CSSコースの次にやるべきこと

ProgateのHTML＆CSSを終えたら次に何をやるかですが候補をいくつか挙げてみます。

基本的にはフロントエンジニアを目指すという視点でチョイスしてます。

Progateでほかの言語を学習する

HTMLとCSSによってWebページは作れますが、動きをつけたりアプリとして機能させたりするにはほかの言語も学ぶ必要があります。

以下にHTMLとCSSに関係してくるコースを上げておきます。

またそれぞれのコースの難易度を比較している記事もあるのでよかったら見てみてください。
≫【Progate】プログラミング全コースのレベルを徹底比較

書籍を使って独学する

このようにHTML＆CSSでは良質な書籍がたくさん出ているので書籍を使いながら独学するのはおすすめです。

Progateではやっていないようなところまで細かく学ぶことができるので気に入ったものを1冊しっかりとこなすだけでレベルは確実に上がります。

僕は1番上のエビスコムさんの本で学習しましたが、しばらくはコーディングの教科書として実装方法の逆引きとしても使えたのがよかったです。

模写コーディングをする

模写コーディングをしようとするとProgateの道場コースを初めてやった時のように何から手を付けていいかさっぱり分からない状態になると思います。

いきなり模写コーディングというのはなかなか難しいので、コーディングの流れを学ぶという点でも一度書籍を学んでおくのはいいですね。

なんとか似たようなものを作れるのようになったら、それを本当のサイトのデザインのように近づけていくだけなので回数をこなしていくと力がついていきます。

ある程度力がついてきたと思ったらiSaraの模写コーディングをやってみるのがオススメです！
≫iSara[イサラ]の模写コーディングでつまづくポイントを解説！

Udemyでオンライン学習をする

オンライン動画でもフロントエンジニア向けの講座がたくさん出ていてUdemyなんかは人気があります。

おすすめ講座

未経験からフロントエンジニアになるまでに必要なことをカバーしてくれているので本気でフロントエンジニアを目指すなら要チェックです！

＼世界最大級のオンライン学習！／

プログラミングスクールに通ってみる

上記までは独学でしたがProgateでプログラミングをしてみて面白い！フロントエンジニアを目指したい！と思えたらプログラミングスクールに通ってみるのもありかなと思います。

プログラミングスクールには独学にはないメリットがたくさんあるので最短でプログラマーを目指したい人にはうってつけですね。

プログラミングスクールの中でもおすすめは転職保証もついていてる【DMM WEBCAMP COMMIT】です！

＼経済産業省の第四次産業革命スキル習得講座に認定！／

まとめ

ProgateのHTML&CSSコースの紹介をしました。

基本的な知識が身について、見た目にもわかりやすいものなので初めてプログラミングする人もHTMLとCSSから入るのはいい順番だと思います。

やっぱり派手に見た目が変わっていくので、自分が作っているという感覚が味わえて面白いです。

ただ、あくまで最初のウォーミングアップというレベル感なので本番はコースを終えてから実際に手を動かしてく段階のときですね。