Web制作

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

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

ぶたっち

ブログ運営を追求するために日々ブログの勉強をしています。
『プログラミングスクールでWeb制作を勉強→Web制作会社でインターン→ブログにはまる』
TwitterやInstgramでも毎日ブログに関する情報を発信しています。

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


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



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



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


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



ポイント

  • Progateの後に何を勉強すれば良いかわからない人
  • Web制作のスキルを身に付けて、サイトを作れるようになりたい人
  • HTML・CSSの次に何を学ぶべきか知りたい人



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


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



合わせて読みたい



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

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



おそらく

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




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



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



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


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




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



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





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




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



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



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



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




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



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




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

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




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




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




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



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



ということで



ポイント

  • ProgateでJavaScript(jQuery)を学ぶ
  • ドットインストールでスキルを上達させる
  • GoogleChromeの検証ツールを使えるようにする
  • GoogleChromeの拡張機能を使えるようにする



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


ProgateでJavaScript(jQuery)を学ぶ



まずは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)というものになります。




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





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




ドットインストールでVScodeの解説動画の画像




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







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







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




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




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


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



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




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



いきなり何のこと?




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




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







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



この状態ですと


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




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






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






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




Google Chromeの検証ツールの参考例の図




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




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



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


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



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


という感じですよね。


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




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







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



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



合わせて読みたい






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



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



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

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



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



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


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


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



ポイント

  • ZeroPlus Gate:30日間の学習でWeb制作の基礎を身に付ける。無料で受講可能。
  • SAMURAI TERAKOYA:月額2,980円から受講可能。大手プログラミングスクール侍エンジニアのサブスク。



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






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




合わせて読みたい


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


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





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




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




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



ポイント

  • テックアカデミー:通過率10%を通った現役のエンジニアから指導してもらえるプログラミングスクール
  • テックアイエス:地方の生徒にも対応しており、楽しく成長することができるプログラミングスクール
  • Raise Tech:副業向けのコースに加え、プラスαのスキル習得までしやすいプログラミングスクール
  • テックブースト:月額制になっており、カスタマイズもできるため自分好みの受講が可能なプログラミングスクール
  • Code Camp:Webデザイン寄りの副業関連のコースから、本格的な開発まで学ぶことができるプログラミングスクール



となっています。




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



合わせて読みたい



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

Web制作ができるようになろう



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



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



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



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




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



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




ポイント

  • ProgateでJavaScript(jQuery)を学ぶ
  • ドットインストールでスキルを上達させる
  • GoogleChromeの検証ツールを使えるようにする
  • GoogleChromeの拡張機能を使えるようにする




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

  • この記事を書いた人
  • 最新記事

ぶたっち

ブログ運営を追求するために日々ブログの勉強をしています。
『プログラミングスクールでWeb制作を勉強→Web制作会社でインターン→ブログにはまる』
TwitterやInstgramでも毎日ブログに関する情報を発信しています。

-Web制作