ProgateでHTML・CSSを学習したら何をする？_Web制作ができるようになるためには？

Prpgateで一通りの学習が終わったんだけどどうすれば良い？
Prpgateの後って何するの？
HTML・CSSの次はどの言語を学べばよい？

などがあるのではないでしょうか？

プログラミングを始めたらまずはProgateというのはなんとなくわかったと思います。

ですが、Progateだけですとプログラミングの基礎しか身に付けることができず、その後にどうすれば良いのか迷いますよね。

というわけで、今回はWeb制作ができるようになりたい人のための手順を紹介します。

などにおすすめの内容となっています。

Web制作で月5万稼げるようになるまでのロードマップを知りたい人は以下の記事が参考になります。活用してみてください。

なぜWeb制作限定の学習方法なのか？

おそらく

なぜWeb制作に限定されているの？

と思った人が少なからずいると思います。

大きな理由としては、今後の進路に合わせて学習内容が変わってくるからです。

大きなまとまりになっているので分かりにくいですが、プログラミングは

• Web制作
• フロントエンド
• バックエンド

と、3つの分野に分けることができるからです。

最初のHTMLとCSSに関してはどの分野でも共通して学ぶべき内容ですので、特に問われることないですが、この後は分野によって分かれます。

つまり、このタイミングでフロントエンドやバックエンドの方法で進めると、よくわからない方向に進みますね。
今後の学習でも気を付けてください。

初心者のうちは3つの違いが分からずに

「話している人によって主張が違うけど、誰が正しいの？」

みたいなことになります。

ちなみに僕もなりました…

念を押して言いますが、Web制作の内容です。

注意して進めていきましょう。

Web制作を身に付けたい人がProgateの次に取るべき行動

この記事を見ている人はProgateを一通り触っているはずですので、HTML・CSSのことが何となくわかっているはずです。

ProgateのHTML・CSSは基礎中の基礎みたいなものですので、何周もすればよいというものではありません。

ある程度の理解ができたらどんどん次に行きましょう。

1つアドバイスとして、今後の学習でも完璧を求めるのではなく、学びながら進める方が進歩が速くなります。

ということで

という流れで進めていきましょう。

ProgateでJavaScript（jQuery）を学ぶ

まずはProgateでJavaScript（jQuery）の練習をするようにしましょう。

流れとしてはJavaScript→jQueryです。

HTMLとCSSだけでもサイトを作ることができますが、静的なサイトしか作ることができません。

ほとんどのサイトではjQueryなどを使うことで動的な動きのあるサイトを作ることが一般的ですので、基本はマスターするようにしましょう。

実はjQueryはオワコンとも言われていますが、Web制作を学ぶならまだまだ学習価値はあります。

詳しく知りたい人は以下の記事から確認することができます。

ドットインストールでスキルを上達させる

Progateの学習が終わったら、次はドットインストールで勉強しましょう。

ドットインストールもProgateと同じ要領で登録すると、プログラミングの動画が閲覧できるようになります。

学習する内容としては、HTML、CSS、JavaScript（jQuery）になります。

また、Progateではプログラミングをするためのエディタを用意してくれていましたが、本来は自分で用意する必要があります。

ドットインストールでは、提供されているのはプログラミングの動画ですので、このタイミング自分専用のエディタを用意します。

エディタはコードを書く場所という認識で大丈夫です。メモ帳もエディタの1つになります。

ここでおすすめのエディタとしてはVScode（Visual Studio Code）というものになります。

全くわからないんだけど…

という感じかもしれませんが、複雑な操作があるわけではありませんので、大丈夫です。

ドットインストールのログイン後の画面を下にスクーロールすると「エディタを使いこなそう」という項目があります。







その中に「Visual Studio Code入門」という項目がありますので、その動画を見るようにしましょう。







すると、VScodeの導入から設定の方法、拡張機能の使い方まで用意されていますので、初心者でも十分理解することができます。

これからは自分専用のエディタを使うことになりますが、当面の間はVScodeで良いです。

GoogleChromeの検証ツールを使えるようにする

ここまでの学習で無料で試せるものは終わりました。

ここからは人によって勉強方法が変わったり、何を勉強すべきか分からなくなる人がいるのですが、次の学習に入る前に使えるようになるべきものがあります。

それが、Google Chromeの検証ツールです。

いきなり何のこと？

という感じかもしれませんね。

今までの学習で1つ大きな問題がありまして、実際にコード書いてもどのようなサイトが完成するのかが分からないところです。







確かに、VScodeなどを使えば私たちが普段見る感覚でおおよその配置を確認することはできますが、細かい部分は分かりません。

この状態ですと

• どのくらいの空白があるのか
• どのような文字サイズ・太さ・フォントが使われているのか
• どのような色が使われているのか
• どのような技術が使われているのか

などが全くわからない状態です。






これを解決するのが検証ツールというものになります。






使い方なのですが、とりあえずWindowsを前提にしますと「Shift＋Ctrl＋J」を同時に押すことで

のような画面を表示することができます。

これを使うことで、より正確な検証ができるようになりますので、コーディングの質の向上につながります。

GoogleChromeの拡張機能を使えるようにする

最後はGoogle Chromeの拡張機能です。

検証ツールの次は拡張機能？

という感じですよね。

Googleの拡張機能というのは、別途ダウンロードすることでChrome上に機能を追加するものになります。

検証ツールだけでも質の高いコーディングができるのですが、拡張機能を使えば1ピクセルのずれのないようなコーディングができるようになります。







それ以外にも便利な機能がありますので、ぜひとも活用したいものです。

詳細は以下の記事で紹介していますので、参考にしてみてください。

練習の時はそこまでの質は求めないかもしれませんが、依頼に対応するときなどは欠かすことができませんので、普段から練習して使えるようになっておきましょう。

ProgateでHTMLとCSSを学習した後の流れは以上のようになります。

Web制作を学ぶのに適したスクール

ここでは、Web制作を学ぶのに適したスクールを紹介します。

プログラミングスクールは基本有料ですので、良い印象を持っている人は少ないように感じますが、使い方次第では大きく役に立ちます。

Web制作の基礎を身に付けたい人におすすめ２つ

まず、Web制作の基礎を身に付けるのに適したスクールです。

この2つのスクールは比較的低価格で受講ができ、人気も高いスクールとなっています。






特にZeroPlus Gateは無料で受講することができるうえ、有料スクール同様のサポート体制となっていますのでおすすめです。

Web制作での副業を考えている人におすすめ５つ

Web制作での副業を考えている人のためのスクールです。





スクールならどこでも良いわけではなく、Web制作が学べるスクールを選ぶ必要があります。

Web制作がしたいのに、エンジニア転職がメインですと意味がありませんよね。

というわけで、おすすめは

となっています。




詳しい情報は以下でも紹介していますので、気になる方は確認してみてください。

まとめ【Web制作ができるようになろう】

今回は、ProgateでHTMLとCSSを学習した後にするべきことについて紹介しました。

Web制作をするためにはJavaScript（jQuery）も必要になりますので、HTML・CSSと同様の方法で学んでいくようにしましょう。

また、ドットインストールまでは多くの人が利用しますが、その後は自分で勉強方法を模索する必要があります。

• 本を購入する
• YouTubeの動画を見る
• 学習用の動画を見る
• スクールを受講する

など方法は様々ですが、自分に合った方法で成長していくようにしましょう。

おさらいとして、以下のような流れとなります。

Web制作のスキルを身に付けて、自分のやりたいことが実現できるように頑張っていきましょう！