【Progate・有料版】初心者がHTML&CSSコースをガチってみた正直な感想

公開日:2019.04.02
更新日:2019.04.04

こんにちは!

セブ島の海上に住んでいるバジャウ族でゴロゴロしてたらIT × 英語留学の「Kredo」にスカウトされた太一です。

最近はKredoで働きつつ、プログラミングも勉強しています。

そこで今回は、僕がプログラミング学習で大いにお世話になっているProgate(プロゲート)のHTML&CSSコースの無料版、有料版それぞれの、

  1. 学べる内容
  2. 僕がつまずいた点
  3. 学習終了後にできるようになること

以上3点について詳しく説明していきます。

また、Progate(プロゲート)以外のオススメ教材はこちらの記事で紹介していますので参照してみてください。

Progate:HTML&CSSコースで学べる内容【無料版】

初級編(無料)で学べるのはHTML&CSSの基礎中の基礎です。

7つの章があり、それぞれ合格しなければ次の章に進むことができません。

第1章ではまずHTMLに触れることから始まり、HTMLの役割、書き方などを学びます。

このようにまず始めにスライドで勉強した後に実践に移り、実際にコードを書きそれぞれのタグがどのような働きをするのかを確認しながら進むことができます。

7章を終了する頃にはWebサイトのだいたいのアウトラインが作成できるくらいのレベルになります。

Progate:HTML&CSSコースで学べる内容【有料版】

ここからは有料会員になることで受講可能になる中級編、上級編で学べることをご紹介!

Progate:HTML&CSS中級編

中級編(有料)ではどのようにランディングページを作成していくのかを学習します。

【ランディングページとは】

ランディングページとはサイトに訪問した人が一番初めに見るWebサイトのページのことです。ランディングページは商品の購入やお問い合わせなどユーザーが行動を取りやすくするためのページなので、売り上げに大きな影響を与えるのでとても重要なページになります。

中級編も7つの章から成り立っており、学習のプロセスも初級編と同じく初めにスライドで学習をしてから、実践に移ります。

Webページの構成はヘッダー、トップ、レッスン、メッセージ、フッターの5つのコンテンツから構成されており、それぞれの作成の方法を学んでいきます。

また、トップ部分のレイアウトを作成し、お問い合わせなどをするために必要なボタンを作成していきます。さらに、ボタンをクリックした時のアニメーションを加える方法や、背景画像の設定の方法も学習します。

その他、文字を中央に寄せる方法や、文字の間隔を変更する方法を学ぶことができ、より細かくこだわったデザインをすることが可能となります。

Progate:HTML&CSS上級編

上級編(有料)ではレスポンシブデザインの作成方法を学びます。レスポンシブデザインはWebサイト作成時にとても重要なスキルです。

【レスポンシブデザインとは】

レスポンシブデザインとはスマホ、タブレット、PCなど異なる画面幅でウェブサイトを見た時にレイアウトを崩すことなく、綺麗に保つ方法です。タブレットなどでサイトを訪れた場合にデザインが崩れるのを防ぎます。また、それぞれの特徴に基づいて異なったデザインを設定することもできます。

また、メディアクエリ(Meadi Queries)というタグの使用方法も学びます。メディアクエリとは、条件を満たせばCSSが適応されるようになるためのタグです。

Progate::HTML&CSS【道場コース】

僕が今現在まさにつまずいたところがこの道場コース。

道場コースでは、見本となる完成デザインのみをヒントに、デザインを模写していきます。また、道場コースも初級編・中級編・上級編の3つに分かれており、それぞれ学習コースで学んだことを実践的にアウトプットしていきます。

このように、画面右下の見本のみをヒントに、自分なりに「このデザインならこのタグを使おう」と考えながらコーディングしなければならないため、学習コースに比べると難しいです。

そしてこの道場コースをやりながら「プログラミングは試行錯誤の上に成り立つ」「エラーを自己解決する力がかなり必要」だということに気づかされました。

ネットではエラーを自己解決する力が大切と書いてありましたが、実際に自分がその立場に立つと、改めてその重要性を実感しました。

今後、プログラマー、エンジニアを目指すのであれば避けては通れない道ですね。

初心者の僕がつまずいたポイント

僕はこの画像部分でつまずきました。

上記画像をみればわかりますが、具体的にどのように間違っているのかの説明がないのです!笑

そのため、どの部分にどのような修正が必要なのかわからず、ひたすら色々な場所を修正するしかありません。

さらに道場コースでは自分なりにコードを書いていくので、見本通りの見た目になることはほとんどありません。見た目がほとんど同じでも、コードの書き方が同じになることは滅多にないのです。

これらがプログラミング学習の独学において、多くの人が離脱してく理由だと思いました。

一度わからない場所が出てくると、そこを修正できるまで次に進めず、特に独学では問題が発生した時にヘルプを求められる人がいないため続けるのが難しく感じました。

ちなみに、Kredoの先生に聞いたらすぐに解決しましたし、プログラミング学習においてはメンターを作ることが最速の習得策かなと思いました。

Progate:HTMLコースを終えて

ProgateのHTML&CSSコースを終えてできるようになることは、HTML&CSSについて少し理解する程度だと思います。

「あー、プログラミングってこんなものなんだ」って大まかに理解できます。

また、HTML&CSSがどのようなものなのか、タグの働き、書き方など基礎中の基礎は理解できるようになるでしょう。

ですが、このコースをやり終えたところで何かサイトが作れるようになるということはないかと思います。それでも簡単で大まかなWebサイトのデザインならできるようになるでしょう。

このコースだけをやり終えて仕事にすることは難しいと感じました。

【まとめ】Progateは初心者にはおすすめ

基礎中の基礎が学べるのでゼロから勉強する方にはおすすめ。無知の人が「とりあえずやってみよう」ということならいいサービスではないでしょうか。

しかし、ProgateのHTML&CSSコースを学んだだけで仕事を受注できたり、満足のいくWebサイトを作ることは難しいと感じました。

なぜなら、実践形式の学習があまりないからです。

ある程度知識のある人がレベルアップするための教材としては、イマイチでしょう。

また、Progateで学習することによって独学でのプログラミング学習の難しさも実感しました。つまずいてしまっても頼れる人がおらず、そのままフェードアウトしてしまうなと感じました。

多くの人がプログラミングの独学での学習を諦めてしまう理由が、メンターがいないことによって問題の解決方法がわからないことだと思います。

プログラミングを最速で習得するなら「Kredo」

初心者からプログラミング学習を始めるなら、KredoのIT×英語留学がおすすめです。

なぜなら、

  1. 大学教員レベルのIT教員がプログラミングを教えてくれる
  2. 意識の高い仲間と学習するため、モチーベーションを維持しやすい
  3. コスト的に国内のプログラミングスクールとあまり変わらない
  4. 英語も同時に学習し、将来の幅を広げられる

などといった理由があります。

Kredoの先生はフィリピン人で、とても親身になり教えてくれます。先生1人に対しての生徒数も少ないのでわからなければすぐに質問できる環境が整っています。

これからプログラミングを学習したい、プログラミング学習で挫折してしまった、英語も身につけ将来優秀なエンジニアを目指したいという方はぜひ、KredoのIT×英語留学を検討してみてはいかがでしょうか?

Kredo公式サイトをみる

セブ島で、ITと英語を同時に学びませんか?

当メディアを運営しているKredoでは、「セブ島で唯一、ITを英語で教える政府公認校」として IT × 英語 留学を運営しています。これからの時代は「 ITスキル+α」の時代です。卒業生は国内外のIT企業への就職、海外起業、フリーランスなど、実績が多数ございます。IT、英語ともに初心者の方から学ぶことができますので、ぜひお気軽にご相談ください!

Kredo公式サイトへ
この記事を書いた人
Taichi
Taichi

海外新卒フリーランスライターをやめてKredoでインターンをしている倉若太一(くらわかたいち)です。倉若って名前日本に100人くらいしかいないめっちゃ珍しい名字。大学4回生の頃にアメリカへ1年間留学、その時にした「アメリカ3ヶ月宿無し旅」がきっかけで旅にもうハマり。今はある部族の集落に住みながらリモートワークでインターン中。3/25日からオフィス勤務です。今はKredoでいっぱい学んで将来「海外フッ軽族」になるのが夢。