Progateが終わったら次どうやって勉強する?【HTML&CSS編】

プログラミング

こんにちは!

この記事では、ProgateでWeb制作(コーディング・デザイン)の知識を学んだ方に向けて、次にどう勉強していくかを解説しています!

Progateである程度勉強したけどもっと勉強したい!

Progateで学んだ知識を何かに活かしたい!



という方はこの記事を読んで、この先何をすべきかの参考にしてみてください!

注意


この記事は、HTML・CSS・jQuery等のコーディングスキルを活かしたい方向けの記事です。
本格的なWebアプリケーションの制作をしたい方など向けではありませんのでご注意ください。

Progateが終わったら次は何を勉強する?

Progateが終わった段階でさらにスキルアップしたいという方は、主に以下の3つの学習方法があります。

  • 既存のサイトを真似して作る(模写コーディング)
  • 参考書を買う
  • プログラミングスクールに入る

下に行けば行くほど費用こそかかりますが、確実にスキルアップに繋がります。
逆に言えば、上に行くほど費用はかかりませんが、スキルアップに時間がかかったり、本当に必要なスキルを身につけられなかったりします。
とは言え、すべてにメリット・デメリットがあるので、1つずつ見ていきましょう!

Progateが終わったらその1:既存のサイトを真似して作る(模写コーディング)

既存のサイトを真似して作ることを模写コーディングと呼びます。
言葉の通りですが、ネットで検索して出てきたWebサイトの見た目を真似して、0から自分でコーディングするという方法です。Web制作を勉強している人の中では割と有名な学習法です。

これはほとんど自習に近い形なので、費用は必要ありませんが、その分自分で自覚を持って学習しなければなりません。全てが一筋縄ではいかないので、強い気持ちを持っていないと挫折しやすいです。

費用をかけず自習したいなら模写コーディングがオススメです!

コラム:どんなサイトを真似したらいいの?

段階としては、静的なサイト→動的なサイトの順で真似してみるのがオススメです。簡単に言えば、

  • 静的なサイトとは、動き無しでHTMLとCSSだけで完成するサイト
  • 動的なサイトとは、動きやアニメーションがあって、jQueryなどを要するサイト

って感じです。簡単なものから始めてだんだん難しいものに挑戦していくってことです。

とはいっても、Webサイトはこの世に無数に存在するので、真似するのにオススメサイトをレベル別に厳選しました!参考にしてみてください。

  • レベル1 令和の生き方学校
     当サイトです(笑)当サイトは動的コンテンツをほぼ使っていませんので、HTML・CSSの基礎の復習にもってこいです!
  • レベル2 Airbnb
     いわゆるLP(ランディングページ)型のサイトです。よく使う手法がたくさん盛り込まれてるので、じっくり取り組んでみてください!
  • レベル3 iSara
     模写コーディングの定番サイトです。このサイトを模写できれば、案件をそれなりにこなせるでしょう。またiSaraの模写は、条件を守ることで自分の実績として公開することができます。Web制作の案件をとる際に有利になるので、オススメです!

Progateが終わったらその2:参考書を買う

自分で参考書を買ってきて勉強する、こちらも定番の勉強法です。
これから本格的に案件をもらったり仕事をする際、辞書として何か1冊持っておくのもオススメです。

以下でオススメの参考書を2つ軽く紹介しますので、ぜひ参考にしてみてください!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

紹介文より抜粋

この本はAmazonの書籍のWebプログラミングカテゴリでベストセラー1位と人気の参考書です。
こういった本を1冊学習しておくと、自信にもつながるのでオススメです。
右上の画像をクリックすると試し読みもできますのでぜひチェックしてみてください!(Amazonページに飛びます)

できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 できるポケットシリーズ 

手元において引きやすい定番のHTMLとCSSの事典が、最新仕様に準拠しリニューアル!

紹介文より抜粋

この本では、主要なブラウザーで動作するCSS3およびCSS4のプロパティをすべて掲載しており、まさに辞書としてオススメの1冊です。
こういった本を1冊持っているといざという時にも安心です。

こちらも右上の画像をクリックすると試し読みができますので是非チェックしてみてください!(Amazonページに飛びます)

Progateが終わったらその3:プログラミングスクールに入る

一番確実にスキルアップする方法として、思い切ってプログラミングスクールに入るという手があります。

プログラミングスクールに入るメリットとして、主に以下のものが挙げられます。

  • プロの講師に教えてもらえるので効率的にスキルが身に付く
  • 手厚いサポートで挫折しにくい
  • 周りに仲間がいるのでモチベーションが維持しやすい
  • 転職しやすい

皆さんも学校や塾などで、誰かに教わることのメリットは理解していると思います。他の方法に比べて費用こそかかりますが、その費用以上の恩恵を受けることができます。

本気で仕事にしたい人は、プログラミングスクールに入ることも視野に入れてみてください。自己投資だと思えば安いと感じるでしょう。

以下にオススメのプログラミングスクールを2つ紹介します。参考にしてみてください!

DMM WEBCAMP ビジネス教養コース

DMMが運営するプログラミングスクールです。
このコースは「本気でスキルを習得させること」を追求したWebスキルのパーソナルジムで、1ヶ月の短期で集中してスキルアップを図れます。

特徴としては、

  • マンツーマンサポートなので、いつからでも受講可能
  • マンツーマンサポートなので、最も効率の良い学習の進め方ができる
  • 好きな時間に自由に通える通い放題
  • 手厚いサポート

などですかね。こんな環境があれば最高ですよね。あるんですけどね。

無料説明会もありますし、入会しても満足できなければ受講料全額返金保証もありますので、気軽に参加できます。

↓気になった方はこちらよりどうぞ!↓

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

プログラミングスクールに入るデメリットとして、スクールに通わなければならないことが挙げられます。
そんなデメリットを補い、移動時間や交通費などを考えたくないという方にオススメなのが、TechAcademyです。
TechAcademyは、最短4週間で未経験からプロを育てるオンライン完結のスクールです。どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
特徴としては、

  • 自宅にいながらオンライン完結で勉強できる
  • 受講生に1人ずつ現役のプロのパーソナルメンターがつく
  • チャットで質問すればすぐに回答が返ってくる
  • オリジナルサービスやオリジナルアプリなどの開発までサポート
  • 学生も割引があり学生も多く受講している

などです。
家にいながら、実際にスクールに通うのと同じくらい手厚いサポートが受けられるのは最高ですね。こちらも無料体験がありますので、登録してみることをオススメします!

↓気になった方はこちらからどうぞ!↓

まとめ

いかがでしたか?

Progateで勉強し終わったけど、次なにをすればいいか分からないという方は、この記事を参考にしてみてください。この記事に書いてあることを実践すれば、かなり実務レベルに近づけるので頑張ってみてください。

個人的には金銭的に余裕がある場合はプログラミングスクールに1ヶ月だけ入会するのがオススメです。ぜひご検討ください!

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

まとめ
  • 費用をかけたくないなら模写コーディング。ただし挫折しやすいかも
  • 1冊は相棒の参考書を持っておくのがオススメ!
  • プログラミングスクールでしっかり学ぶのがオススメ!自宅完結型もアリ

Progateで他のコースを学んだ方向けの記事もありますので、ぜひどうぞ!

コメント