Progate(プロゲート)が終わったら次にやるべきことは?8つのステップを詳しく解説!

2021年3月29日

この記事を読んでいるあなたは

  • Progate(プロゲート)でHTML,CSSをひと通り学んだけど、次に何をすればいいの?
  • Progate(プロゲート)が終わったら稼げるようになる?
  • Progate(プロゲート)が終わったあとにやってはいけないことってあるの?

上記のように考えているかもしれません。

この記事ではそんなあなたに「Progate(プロゲート)が終わったらやるべきこと」について詳しくお伝えしていきます。

なお、Progate(プロゲート)って何?どういうサイト?と思っている方は以下の記事を確認してみてください。

Progate(プロゲート)とは?特徴や学習の進め方、無料版と有料版の違いなどを説明!

Progate(プロゲート)が終わったら稼げるようになる?

パソコン

結論から言うと、Progate(プロゲート)が終わってもすぐに稼げるようにはなりません。

なぜならProgate(プロゲート)で学んだ知識やスキルでは実務をこなすことができないからです。

稼げるようになるには正しいステップを踏む必要があります。

以下で詳しく紹介していきます。

Progate(プロゲート)が終わったら次にやるべき8ステップ

階段

では、早速Progate(プロゲート)が終わったあとにやるべきこと8つのステップをお伝えしていきます。

ローカルの開発環境を構築する

開発環境とは、システムを開発するために必要な環境のことを指します。

Progate(プロゲート)では開発環境が事前に用意されていました。

しかし、自分で1からコードを書きプログラムを動かすためにはローカルで開発環境を構築する必要があります。

Progate(プロゲート)のサイト内で開発環境の構築について詳しく解説しているので参考にしてみてください。

環境開発の構築方法についてはこちら!

エディタの使い方を勉強する

開発環境の構築をマスターしたらエディタの使い方を勉強していきましょう。

エディタとは、データの作成や編集を行うためのソフトウェアを指します。

もっと簡単に説明するとプログラムを書く場所のことです。

Progate(プロゲート)で言うと下の画面がエディタです。

エディター

出典:https://prog-8.com/docs/html-env

Progate(プロゲート)ではこのようにエディタが用意されていました。

しかし、実際にサイト制作やアプリ開発をする際には自分でエディタを用意する必要があります。

そのため、エディタの基本的な使い方を勉強をしましょう。

なお、「ドットインストール」ではエディタについて勉強することができます。

以下のリンクをクリックしてエディタについて学習してみてください。

ドットインストールでエディタを学ぶにはこちら!

また、ドットインストールって何?という方は以下の記事を確認してみてください。

ドットインストールとは?レッスン内容やメリットについて紹介!

任意のサイトを模写する

エディタについて学んだ後はサイト模写をしていきましょう。

サイト模写とは、自分の好きなサイトを1からコーティングすることです。

目安として3つのサイトを模写するようにしましょう。

サイトを模写することによりディベロッパーツールの使い方を学ぶことができます。

ディベロッパーツールとはWebサイトを編集、構築するツールのことです。

下記の画面がディベロッパーツールになります。

ディベロッパーツール

Macの場合はGoogle Chromeのメニューから「表示」->「開発/管理」->「デベロッパーツール」を選択して起動できます。

Windowsの場合は、Google Chromeの右上のメニューから「Google Chromeの設定」->「その他のツール」->「デベロッパーツール」を選択して起動できます。

ディベロッパーツールの使い方を学ぶメリットは以下の4つです。

  • エラーの発見がはやくなる
  • 各デバイス(スマホ・パソコンなど)からのサイトの見え方が確認できる
  • 書いたコードの検証が簡単にできる
  • 他のサイトのコードを確認できる

このツールを使えばコーティングのスキルもアップするので必ず勉強しましょう。

書籍で勉強する

上記の学習を終えたら書籍での勉強を始めていきましょう。

書籍ではProgate(プロゲート)よりも実践的な内容が書かれています。

書籍で学習すると

  • カレンダー
  • お問い合わせ機能

などを作れるようになります。

また、データベースの設計方法やデータベースの扱い方を習得することができます。

詳しい説明は割愛しますがここでは1冊、おすすめの書籍を紹介しますので参考にしてみてください。

プログラミングに関する本

出典:https://www.amazon.co.jp/HTML-CSS=pla-524694581422&psc=1&th=1&psc=1

価格 2,508円
出版日 2017/7/21
学べること 問い合わせページの作成、2カラムページの作成など

コーティングを効率的にできるようにする

次に効率的にコーティングをするスキルを身につけていきます。

コーティングを効率的にできるようになるとより少ない労働時間で多くのお金を稼ぐことができます。

効率的にコーティングをするためには以下の3つを学習しましょう。

  • Emmet
  • VSCodeのLiverServer機能
  • Sass

以下で各機能や言語について簡単に説明します。

Emmet

EmmetとはHTMLやCSSのコードの一部の文字を入力するだけで、残りを勝手に入力してくれる入力補助ツールです。

この機能を使いこなすことにより短時間でプロダクトを制作することができます。

以下のリンクをクリックしてEmmetをマスターしましょう。

Emmetをマスターするにはこちら!

VSCodeのLiverServer機能

LiverServerはテキストエディタの変更内容を、リアルタイムでブラウザに反映できる機能です。

HTML/CSSでコーディングして、どのようにできているかブラウザで確認する場合は、

【エディタを保存する→ブラウザをリロード】

上記の手順で確認していたと思いますが、LiveServerを使うとこの手間を省くことができます。

LiverServerは以下の手順で簡単にインストールすることができます。

  1. VSCodeの拡張機能で「LiveServer」と検索する
  2. インストールボタンをクリックする
  3. 下にある「Go Live」をクリックするとブラウザで 「http://127.0.0.1:5500/」 が立ち上がる。

Sass

SassはCSSをより簡単に記述することができるプログラミング言語です。

SassをマスターすることによりCSSの記述量をかなり省略することができます。

以下のリンクをクリックしてSassをマスターしましょう。

Sassをマスターするにはこちら!

ポートフォリオサイトを作る

ここまでの内容を学習したら、いよいよポートフォリオサイトの作成に取りかかっていきます。

ポートフォリオサイトと、は自身が作った作品をまとめたWebサイトのことです。

新規のクライアントに対してスキルや実績をアピールすることを目的としています。

フリーランスとして活動していくには、ポートフォリオサイトの作成は欠かせません。

以下のサイトではポートフォリオを簡単に作れるので参考にしてみてください。

ポートフォリオサイトを簡単に作成するにはこちら!

実際に案件をこなしてみる

上記の学習を全て終えたらLP制作などの案件をこなしてみましょう。

案件は納期が設定されているので、よりレベルアップをすることができます。

クワウドワークスのようなサイトで案件を積極的に受け付けましょう。

Progate(プロゲート)が終わって転職・就職をしたい場合

パソコン

ここまで8つのステップについて紹介してきました。

しかし、読者の中には「そんなことをやっている時間はない!」「すぐにエンジニアとして転職・就職をしたい!

と、思っている方もいるかもしれません。

ここでは、そんな方に「Progate(プロゲート)を終えたあとにすぐに採用される方法」をお伝えしていきます。

プログラミングスクールに通う

結論、即戦力として採用されるためにはプログラミングスクールに通うことが最適です。

もちろん独学で即戦力として採用されることも可能です。

しかし、独学では採用されるレベルのスキルをつけるまでにかなりの時間がかかってしまいます。

プログラミングスクールに通うと、最短でスキルアップできるだけでなく、転職や就職のサポートを受けることができます。

また、案件獲得のサポートも充実しているためスクールの費用を回収することが可能です。

是非検討してみてください。

次におすすめのプログラミングスクールを紹介していきます。

Progate(プロゲート)が終わったあとに通うおすすめのスクール

プログラミング 言語

結論、Progate(プロゲート)が終わったあとに通うおすすめのスクールはテックアカデミー(Tech Academy)です。

テックアカデミー(Tech Academy)ーに通うと

  • プロのメンターによるマンツーマンレッスンが完全オンラインで受けられる
  • 未経験でも最短4週間でプロレベルのスキルが身につく
  • 学生は受講料金の割引がある

上記のようなメリットがあります。

本気でスキルをつけたい方は以下のリンクをクリックして無料体験を申し込みましょう。

なお、以下の記事ではテックアカデミーについて詳しく紹介しているので、ぜひ参照してみてください。

テックアカデミー(Tech Academy)とは?学べるコースや利用するメリットなどを詳しく紹介!

Progate(プロゲート)が終わったあとにやってはいけないこと

禁止

ここではProgate(プロゲート)が終わったあとにやってはいけない禁止事項について詳しく紹介していきます。

無計画にインターンに応募する

まず、Progate(プロゲート)が終わったあとに無計画にインターンを申し込むのはやめましょう。

初心者の方には、「自分はProgate(プロゲート)が終わったから即戦力だ!」と思いインターンに応募する方がいます。

確かにProgate(プロゲート)はプログラミングを体系的に理解することができます。

しかし、まだまだお金をもらって働けるスキルは身についていません。

よって、インターンに無計画に応募しても採用される可能性は低いです。

しっかりと実務レベルのスキルを身につけてから応募するようにしましょう。

様々な言語に手を出す

Progate(プロゲート)が終わったあとに様々な言語に手を出すのはやめましょう。

先ほど述べたとおり、ひと通り学んだ言語でさえも実務レベルのスキルは身についていません。

やたらと他の言語を学習しても実践で使えるスキルを習得することは難しいです。

ですので、まずは8つのステップを踏み、学んだ言語で案件を獲得することを目指しましょう。

すぐに案件に取りかかる

Progate(プロゲート)終了後に、すぐに案件に取りかかることもやめましょう。

上記で紹介したステップを着実に踏むことにより、案件を獲得することができます。

焦らずに正しい順序で学習を進めていきましょう。

Progate(プロゲート)が終わったらやるべきことについてまとめ

仕事場

今回、Progate(プロゲート)が終わったらやるべきことについて紹介しました。

紹介した8つのステップで学習を進めれば確実にスキルが身につきますので、是非参考にしてみてください。