HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約9分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • Progate(プロゲート)を本気でやったらどこまでスキルが身につくの?
  • エンジニアになれる?1人でアプリを作れるようになるのか教えて欲しい!

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

HikoPro
HikoPro

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

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

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

✔︎こんな方にオススメ

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

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

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

無料の教材作りました!▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円!未経験でもOK】

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

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

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

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

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

✔︎HTML,CSSとは?

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

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

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

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

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

▼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ページを作れるようになるのか?

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

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

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

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

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

HikoPro

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

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

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

✔︎プロゲートのHTML,CSS編で学べること

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

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

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

✔︎プロゲートをやり込んでできる事

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

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

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

▼合わせて読みたい!
【経験談】PC音痴で未経験の僕がフリーランスエンジニアになるまでの全行程まとめ

Progateを課金するべきか

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

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

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

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

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

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

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

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

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

✔︎エンジニアとして仕事できるまでにすること

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

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

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

HikoPro
HikoPro

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

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

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

HikoPro
HikoPro

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

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

  • DMM WEBCAMP経済産業省が認定!エンジニア転職成功率98%!
  • TechAcademy20以上の豊富なコースから自分に合ったスキルを学ぶ!
  • TECH CAMP:エンジニア転職!全額返金保証!

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

エンジニア転職できない場合、全額返金保障してくれるので、確実にエンジニアとして仕事ができるようになります。

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

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

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

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

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

▼合わせて読みたい!
未経験からエンジニア転職できるプログラミングスクール3つ【現役エンジニアおすすめ】
【神教材】Udemyで独学でエンジニアに!【おすすめの教材を紹介!】

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)