若者のチャレンジを後押しするメディアを作りました!▶︎▶︎▶︎

【実体験】Progate(プロゲート)でどこまでスキルが身につくの?【HTML,CSS編】

プログラミング
スポンサーリンク
現役エンジニアがおすすめする!
プログラミングスクールランキング

  1. TechAcademy20以上の豊富なコースから自分に合ったスキルを学ぶ!
  2. TECH::EXPERT:エンジニア転職、案件獲得できなければ全額返金保証!
  3. DMM WEBCAMP経済産業省が認定!エンジニア転職成功率98%!

HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです!

最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

今回のお悩み

Progate(プロゲート)を本気でやったらどこまでスキルが身につくの?

エンジニアになれる?1人でアプリを作れるようになるのか教えて欲しい!

これからプログラミング学習を始めようと思っている方の多くは、まず始めにProgate(プロゲート )から学習する方が大半かと思いますが、Progateを勉強するとどの程度のスキルを得れるか気になりますよね!

HikoPro
HikoPro

僕自身もプログラミング学習の入り口はProgateで大変お世話になりました!

ネコ君
ネコ君

プロゲートを学習したら自分でアプリやWebサイトを作れるようになるのかなぁ?

HikoPro
HikoPro

今回の記事ではProgateでどれくらい勉強すれば、どのくらいのHTML,CSSのスキルが身につくか僕の実体験を踏まえてご説明しますね!

プログラミング初心者の方はまだまだ全体像が掴めないかと思います。

そこで本記事では、プロゲートにお世話になり現在フリーランスエンジニアとして活動している僕の視点から、ProgateのHTML,CSSコースでどこまでスキルが身につくのかリアルな情報をご紹介します!

こんな方にオススメ
  • これからプロゲートで学習を始めようと思ってる方
  • プロゲートをやっているが有料版に課金するか迷っている方
  • Progateでどこまでのスキルが得れるか気になる方

今回はProgateのHTML,CSS編について詳しくご紹介します。

ちなみに僕のProgate学習時間は1ヶ月程度で現在のレベルは94Lvです。(もう利用はしていません)

無料の学習教材を作りました!
スポンサーリンク

プロゲートHTML,CSS編の全体像

YouTubeにてProgateの概要やメリット、効果的な学習方法について解説しているので、聞き流しでご覧ください!

まず始めにProgate【HTML&CSSS】の全体像を見ていきましょう。

どんな学習をするときも同じようなことが言えますが、まず始めに全体像を掴んでおくと自分が目指しているゴールが明確になり効率よく学習でき、モチベーションにもつながります。

さて、まず始めにこのコースの全体像を詳しくご紹介していきます。

HTML,CSSとは?

HTML,CSSはWebサイトの「見た目」を作る言語で、学習する際はHTMLとCSSを同時に学習します。

HTMLはページの骨組みを作るもので、CSSはHTMLで作った骨組みに色をつけたり装飾する言語です。

このコースでは全6レッスン(自主制作3レッスン)が組み込まれており、全て学習するのに約18時間必要になります。

「初級・中級・上級」に分かれており、HTML,CSSの基礎中の基礎〜実際に自分一人で簡単なWebページを作るまで勉強します。

プログラミング初心者の方はあらかじめ勉強しなくても、いきなりProgateを始めて問題ありません。

プロゲートの全体像
初級編HTML,CSSとは何か?タグの書き方など基礎知識
中級編ランディングページを作りながらHTML,CSSを本格的に学習
上級編スマホデザイン(レスポンシブデザイン)について学習

初級編では、HTML,CSSに触れてみることからスタートします。

HTMLで画像を挿入してみたり、リンクを設置したりして、CSSで文字の色を変えたり、簡単な装飾も勉強します。

中級編ではLP(ランディングページ)と呼べれる一枚のWebページの作り方を学びます。

Webページには欠かせないヘッダー、フッターの作り方、CSSを使いボタンを作ったり、カーソルがボタンの上に乗ると色が変わる(hover:)の仕組みを学ぶことができます。

このレッスンでは初心者がつまずくレイアウト(要素の横並びの配置)を詳しく解説しています。

ネコ君
ネコ君

僕もレイアウトの配置でとても苦戦したよー!

最後に上級編では、現代のWebページには欠かせないモバイルデザイン(レスポンシブデザイン)について学ぶことができます。

簡単に説明すると、HTML,CSSで作ったPC版のサイトをCSSを使って画面が小さくなっても綺麗な見た目を保つことができるようになります。

出典:Progate

上級編を終えると、このようなかっこいいWebページが作れるようになります!(一人で自力で作るのは難しいと思いますが、、、)

プロゲート全体像まとめ

HTML,CSSとは何か〜スマホ対応のWebページ作成まで学習することができます。

1週すればHTMLタグの書き方に慣れる事ができ、CSSで簡単な装飾も付け加える事ができます。

無料の学習教材を作りました!

自分でWebページを作れるようになるのか?

ネコ君
ネコ君

Progate頑張って1週できたよ!

これでWebページ作る事できるのかなぁ?

プロゲートをこれから始めようと思っている方はおそらく、このようなwebページを作れるようになりたいと、学習を始められる方が多いかと思います。

僕が初めて一からコーディングしたポートフォリオサイトです

結論から言うと、プロゲートを1週しただけでは自分が思うようなカッコいいWebページを1から作ることは出来ません。

1週くらいすると、Progateの上級編で作る制作物のWebサイトはできるようになりますが、いざ他の制作物に取りかかると恐らく手も動かないかと思います。

なぜかと言うと、Progateで学んだHTMLタグやCSSメソッドをいつでも使えるアウトプット力は身に付いておらず、学んだ事は全体の1/10くらいしか達していないからです。

ネコ君
ネコ君

じゃあ1週したら何ができるようになるのー?

HikoPro
HikoPro

1週したら既存であるサイトのコードを読んだり、カスタマイズできるくらいのレベルです!次にProgateで学べる限界をご紹介しますね!

Progateで習得できるスキルの限界

まずプロゲートのHTML&CSS編で学べる事をざっと箇条書きでご紹介します。

プロゲートのHTML,CSS編で学べること
  • HTML,CSSの概念
  • HTMLでサイトのレイアウトを作る
  • CSSで色の指定・フォントの指定
  • 余白の調整(margin.padding)
  • お問い合わせフォームの実装(送信はできない)
  • ボタンの作成(カーソル時に色の変化も)
  • 要素の横並び配置
  • リンクの設置
  • 画像の挿入
  • レスポンシブデザイン
ネコ君
ネコ君

18時間も勉強してこれしか学べないのー?

プログラミング学習はそこまで甘くないです。笑

プロゲートだけでは知識が少なすぎるので、次のステップに進みたいかっこいサイトを作れるようになりたい方はコチラの記事をご覧ください!

自分で思うようなページを作れるようになるにはプロゲートの学習を終えて少なくとも2週間ほど学習する必要があります。

プロゲートをやり込んでできる事
  • 既存のサイトのコードがなんとなく読める
  • 上級編の道場コース レベルのページが作れる
  • 既存サイトの色を変えたり配置を変えたり簡単なカスタマイズができる

プロゲートだけやり込んでも、プロゲートで提供しているレベルのサイトしか作る事ができません。

もっとクオリティの高いサイトを作りたければ早めにProgateは卒業しましょう!

合わせて読みたい!

【経験談】PC音痴で未経験の僕がフリーランスエンジニアになるまでの全行程まとめ

Progateを課金するべきか

この質問には即答でYesです。

無料版だと初級編と、他のコースを少ししか学習する事ができません。

Progateはプログラミングを始めるにはとてもいい教材で、ゲーム感覚で楽しく学習ができるので、有料会員になって一気に進めていく事をオススメします!

またHTML,CSSは冒頭にもお伝えしましたがサイトの見た目を作るものであって、お問い合わせフォームを機能させたりログインページを作ったり動的なサイトはできません。

HTML,CSS+違う言語(PHP,Jsなど)ができてこそエンジニアへの道が開きます。

有料会員になることによって、自分が求めている自分にあったプログラミング言語を見つける事ができるので、ぜひ有料会員になりましょう!

プロゲートを課金するといろんなプログラミング言語が学べる!

Progate(プロゲート)だけではエンジニアにはなれない

ぶっちゃけ言うと、プロゲートをやっただけではエンジニアになることはできません。

プロゲートはプログラミングの入り口を提供するものであって、仕事で通用するスキルを身につけることはできないのです。

エンジニアとして仕事できるまでにすること
  • プログラミングの基礎と応用を学ぶ
  • 既存サービスのクローンを作る
  • オリジナルサービスを開発する
  • 本番環境での構築を経験する
  • ポートフォリオの作成をする
  • サーバーやインフラ関連の勉強をする
  • セキュリティ面の勉強
  • コーディングを効率化させるツールの使用方法

かなりざっくりで、エンジニアになるためのほんの一部ですが、これほどの勉強やスキルを習得する必要があります。

そして、残念なことに独学でプログラミングを学習する人の8割程度が途中で挫折してしまう結果となるのです。

HikoPro
HikoPro

せっかくプログラミングを学ぶチャンスができたのに、途中で諦めるのは非常にもったいないです!

確実にエンジニアになるならスクールを活用する

本気でエンジニア転職やフリーランスエンジニアを目指すのであれば、独学でなくプログラミングスクールを活用するのがおすすめです。

HikoPro
HikoPro

僕自身も途中で独学するのに限界を感じて、スクールを活用した結果フリーランスエンジニアになれました!

プログラミングスクールを活用すれば、プログラミングの学習以外にも、転職サポートやフリーランスとしての案件獲得サポートをしてくれるので、スクールの受講費はすぐに回収できます。

現役エンジニアの僕が本気でおすすめするスクール3つ!
  • DMM WEBCAMP経済産業省が認定!エンジニア転職成功率98%!
  • TechAcademy20以上の豊富なコースから自分に合ったスキルを学ぶ!
  • TECH::EXPERT:エンジニア転職、案件獲得できなければ全額返金保証!

TECH CAMPは堀江貴文も大絶賛するプログラミングスクールで、エンジニア転職保証コースと、フリーランス案件獲得保証コースがあります。

エンジニア転職できない、フリーランスとして案件を受注できなければ、全額返金保障してくれるので、確実にエンジニアとして仕事ができるようになります。

まとめ:まずはプロゲートからHTML,CSSを勉強しよう!

ネコ君
ネコ君

この記事で全体像が掴めて効率よく勉強が進めれそう!

いかがでしたでしょうか!

プロゲートに限界はあるものの、初心者の入り口としてはこの上ないクオリティの教材で、挫折する事なく楽しく学習ができるのでとてもオススメです!

プロゲートを何週もするのではなく、早めに卒業し、TechAcademy Udemy を活用し、知らない知識をどんどん蓄えていきましょう!

Progateを卒業した後は、Webアプリケーションを開発できるPHPRubyを学習することをオススメします!

合わせて読みたい!
HikoPro
HikoPro

最後までご覧いただきありがとうございました!

YouTubeTwitterでプログラミングの学習方法や、フリーランスのライフスタイルについて発信しているのでチェックしてみてください!

スポンサーリンク
スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生クリエイター|ライター|エンジニア|YouTuber|Webディレクター|「Z大学」編集長

【PC音痴の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産Webマーケ→インドIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア→フリーランス独立→ITメガベンチャー】

▷▷ポートフォリオ・実績
▷▷インタビュー記事
▷▷Z大学

HikoProをフォローする
プログラミング
HikoPro Blog

コメント

タイトルとURLをコピーしました