ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

プログラミング
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

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

ネコ君
ネコ君

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

ネコ君
ネコ君

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

プログラミング初心者の方はまだまだ全体像が掴めないかと思いますので、ある程度プロゲートで学習して、全体像が見えた僕の視点から、これだけやるとHTML,CSSを使ってこんなサイトが作れるなどリアルな情報を共有したいと思います。

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

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

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

↓Progateがオススメな理由はこちらの記事をどうぞ!

エンジニア視点から見る!Progateが初心者にオススメな理由6つ

稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

スポンサーリンク

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

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

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

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

HTML,CSSとは?

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

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

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

初級・中級・上級に分かれており、初級編ではプログラミングに触れた事もない人でも分かりやすいようにHTML,CSSとは何か?タグの書き方まで基礎中の基礎から教えてくれるので、初心者の方は予め勉強しなくてもいきなりProgateを始めて問題ありません。

中級編ではLPと呼べれる一枚のwebページの作り方を学びます。

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

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

ネコ君
ネコ君

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

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

CSSでメディアクエリ(@media)を使ってレスポンシブ(スマホ対応)にする方法

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

全体像まとめ

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

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

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

ネコ君
ネコ君

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

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

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

僕が0からコーディングしたポートフォリオ

【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】

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

結論から言うと、1週しただけでは自分が思うようなカッコいいwebページを1からコーディングすることは出来ません。

1週くらいすると、Progate内で作る制作物のコーディングはできるようになりますが、いざ他の制作物に取りかかると恐らく手も動かないかと思います。

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

僕自身、HTML,CSSを使ってほとんどのサイトは模写できるレベルに達していますが、Progateを1週したくらいでは簡単なLPのコーディングでも苦戦するかと思います。

ネコ君
ネコ君

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

ネコ君
ネコ君

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

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

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

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

ネコ君
ネコ君

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

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

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

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

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

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

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

大学生の僕が未経験から3ヶ月でエンジニアになった方法をご紹介します!

Progateを課金するべきか

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

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

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

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

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

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

まとめ

HikoPro
HikoPro

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

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

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

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

↓合わせて読みたいプログラミングの記事↓

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

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

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

コメント

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