独学でWeb制作学ぶ!本ではなく動画で勉強するメリット

独学でWeb制作を学びたい!という人はとても多いです。

しかし、Web制作の勉強は挫折する人も多いです。

今回は私が考える挫折しにくい学習ステップから、
実践的なHTML+CSSコーディングのトレーニングを紹介します。

本から勉強に入ると挫折しやすい

Web制作を勉強する方法は大きく分けると4つあります。

  • 動画講座
  • オンラインスクール
  • スクールに通う

これを学習難易度にすると。

学習難易度(高 → 低)
本 > 動画講座 > オンラインスクール > スクールに通う

この通りで、本で勉強するのはもっとも難易度が高い方法となります。

未経験者が本で挫折する理由

プログラミングの勉強は「新しい言語を覚えるようなもの」と言われることがあります。

初めて英語を勉強する時に、文法の細かい説明はスルーして、まずは簡単な発音から入ると思いますが、

それと同じくWeb制作やプログラミングの勉強も、
初めは細かいところはスルーして進めるのが習得へのカギとなります。

他にも初心者が本の勉強で問題なる事があります。

本で勉強することの問題点

  • 最初はスルーしても良い部分も、きっちり順序立てて説明している
  • 文章を読むというのは音声を聞くよりも疲れる
  • 本のコードが途中をスキップして進んでしまい理解できなくなる

本でWeb制作を勉強するときは、ほとんどが未知の知識になるため、よくわからない説明を読み進めていく事になります。

本の勉強で一番多い挫折パターンが、理解出来す先に進めなくなるパターンです。

また最初はゆっくりと進んでいたのに、いきなり大量のコードの登場で理解できなくなるパターンもあります。

書籍は全体のページ数は決まっているのかと急に難易度が上がったり、コード自体に誤りがあり先に進めなくなることが割と良くあります。

Web制作を動画で学ぶ

私がおすすめするWeb制作の勉強法は、動画講座をメインにするのがおすすめです。

最初は本を買わず、動画講座が一通り終わってから次のステップで購入します。

動画で勉強するメリット

  • 動画は勝手に進むので難しい話は、頭が勝手にスルーしている
  • コードを書く時は、動画と一緒に進めていくので理解しやすい
  • ネット環境があれば気軽に初められる

人間は調子の良いもので、難しい話とかは勝手に頭がスルーしていきます。

Webの勉強の場合は、後々必要と思ったら見返すなりすれば良いです。

そもそも動画講座はあまり難しい話はせず、実際のコードを書きながら進めていくものが多いです。

HTML+CSSの勉強ステップ

Web制作の基本となるHTML+CSSの勉強方法。

この勉強はハードルの低い動画講座から始まり、最後はネットに上がっているサイトをキャプチャしてコーディングする、実践トレーニングまでを説明します。

サイトをキャプチャしてのコーディング訓練は就職・転職をしたいのであれば面接でアピール出来ますのでおすすめです。

  1. 勉強1:HTMLのタグなどの基礎を学ぶ(Progateで学ぶ)
  2. 勉強2:自分のPCで実際に作りながら学ぶ(ドットインストールで学ぶ)
  3. 勉強3:本を購入して知識を補足
  4. 勉強4:実践トレーニグ(サイトをキャプチャしてコーディング練習)

勉強1:HTMLのタグなどの基礎を学ぶ(Progateで学ぶ)

まずはProgateでHTML基本のタグなどを勉強していきます。

ここでは基礎のHTMLタグを覚えながらHTMLコードを書いていく練習となります。

Progate | プログラミングの入門なら基礎から学べるプロゲート

Progateの良いところはブラウザに打ち込んてで勉強する方式のため、ブラウザだけあれば進められます。
初心者が勉強に入りやすい学習サービスです。

無料と有料(プレミアム会員/月980円)の動画がありますが、HTML+CSSについては無料版講座だけで十分です。
動画講座で必要な素材は、無料会員登録が必要なので登録しておきましょう。

勉強2:自分のPCで実際に作りながら学ぶ(ドットインストールで学ぶ)

次にドットインストールで自分のPCに.htmlファイルなどを作りながら勉強していきます。

Progateは初心者にもわかりやすくサービスですが、自分のPC上で作っていないため実務とは程遠いです。

ドットインストールでは、より実際の作業に近い形での勉強となります。
ここでは自分のPCで上にhtmlファイルなどをつくり、ブラウザで閲覧できる状態にしていきます。

ドットインストール | 3分動画でマスターするプログラミング動画サイト

ドットインストールの講座

レッスン一覧の「ホームページを作れるようになろう」の無料講座を一から進めます。
ドットインストール レッスン一覧

ドットインストール「ホームページを作れるようになろう」無料講座
HTML/CSSの学習環境を整えよう [Windows編] (全4回)
HTML/CSSの学習環境を整えよう [macOS編] (全4回)
HTML入門 (全15回)
CSS入門 (全17回)
HTML基礎文法入門 (全30回)
CSS基礎文法入門 (全37回)
CSSレイアウト入門 (全15回)
実践!ウェブサイトを作ろう (全16回)
CSSで吹き出しを作ろう (全8回)

おそらくこれだけでも結構時間がかかると思います。

ドットインストールでは実務で使うようなエディタの準備も動画にあるため、
とても勉強になります。

勉強3:本を購入して知識を補足

一通りHTMLの知識がついたら書籍を購入します。
動画だと情報が偏っているため、そこを補強するために情報が網羅されているものがおすすめです。

基礎がわかっている状態であれば、本のコードを書き写すなどしなくても、目を通すだけでも理解できるようになっています。

その中で実際にコードにしてみたものがあったら実際にコードとして書いてみる、という流れで進めます。

勉強4:実践トレーニグ(サイトをキャプチャしてコーディング練習)

最後にHTMLとCSSの実践トレーニングとして、
実際のサイトをスクリーンショットを撮り、コーディングしていく勉強方法をやっていきます。

実務ではデザイナーからpsdのデザインデータをもらいますが、
その代わりにスクリーンショットを使うと、実践的なコーディングが勉強できます。

この勉強にはPhotoshopが必要になります。
PhotoshopはWeb制作をするのであれば必須ですので、ライセンス契約しておきたいです。

30日であれば体験版もあります。

Adobe Photoshop 980円/月〜

サイトをキャプチャしてコーディング練習する流れ

  • アニメーションの無い企業サイトをスクリーンショットで保存
  • 作るのはTOPページ・カテゴリーページ・記事ページの3つ
  • コーディングが終わったら、元のスクリーンショットと比較してうまくコーディング出来ているかチェック

就職のため面接を受けるのであれば、このキャプチャコーディングは実践に近いトレーニングなので、面接でアピールするポイントにしても良いと思います。

その場合は、レンタルサーバーでベーシック認証かけて一般公開しないように注意してください。

プログラミングの勉強方法

HTMLとCSSを勉強したらプログラミングの勉強として、JavaScriptかPHPを学ぶのも良いです。

基本は、Progateとドットインストールで学ぶ流れは同じですが、プログラミングの場合はHTMLよりは習得が難しいです。

そのあたりも含めて、プログラミング学習方法の記事に書いています。

【プログラミングの学習方法】転職やフリーランスとして働くためのプログラミング

人気記事

【プログラミングスクール選び方】未経験者が本気でWebエンジニアになるには

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。