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

ぎーすえ

ProgateのHTML&CSSコースは基本的なことから学べて初心者でももちろんOK。
お手本と解説に従っていけばオシャレなランディングページの作り方が学べますよ!

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

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

目次

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

コースの所要時間

コース名修了時間目安かかった時間
HTML&CSS 初級編[学習コース]3h50m50m
HTML&CSS 中級編[学習コース]4h30m1h
 HTML&CSS 初級編[道場コース]2h30m1h
 HTML&CSS 中級編[道場コース]3h20m1h30m
HTML&CSS 上級編[学習コース]2h25m
 HTML&CSS 上級編[道場コース]1h40m30m
HTML&CSS Flexbox編[学習コース]1h10m
合計18h50m5h25m

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

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

上級編と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の道場コースの攻略方法

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

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

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

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

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

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

ぎーすえ

初級、中級は特に必須の要素が詰め込まれているので答えを暗記するというぐらいの気持ちで臨むといいですね。

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

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

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

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

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

ぎーすえ

Progateの仕様として成果物が完全一致していないと先に進めないので、見た目でほとんど同じものが作れたのに進めない場合は答えを見てしまっても問題ないです。

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から入るのはいい順番だと思います。

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

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

この記事が気に入ったら
フォローしてね!

目次
閉じる