【Web制作編】ドットインストールはどこまで学習すればよいか？

目次

1. 1. ドットインストールで必要な学習について
   1. 1-1. ドットインストールでの学習範囲
   2. 1-2. ドットインストールでの学習時間
   3. 1-3. ドットインストールの有料はやるべき？
2. 2. ドットインストールの「Webサイトを作れるようになろう」で学ぶ内容
3. 3. ドットインストールの「Webサイトに動きをつけてみよう」で学ぶ内容
4. 4. ドットインストールの「jQuery入門」で学ぶ内容
5. 5. まとめ

1. ドットインストールで必要な学習について

HTMLコーダーを目指す人がドットインストールでどこまで学習すればよいかについて解説していきます。

ドットインストールでの学習範囲

ドットインストールで必要な学習は、レッスン一覧の中にある以下の3つです。

• 「Webサイトを作れるようになろう」
• 「Webサイトに動きをつけてみよう」
• 「jQuery入門」

上記3つのレッスンで、Web制作に必要なHTML、CSS、JavaScript、jQueryの基礎は一通り学べますので、しっかりと学習しましょう。

ドットインストールでの学習時間

次にドットインストールで必要な学習時間です。
基本的には、同じ内容を何回も繰り返す必要はありません。一度学習して理解すればOKです。
ドットインストールのそれぞれのレッスン内に記載されている動画の再生時間を合算すると、おおよそ以下の通りとなります。

合計の目安時間が 20時間34分 となりますので、1日1時間ずつ学習した場合、約20日で終わるという計算になります。

上記はあくまで動画の視聴時間となりますので、動画を見ながら実際に手を動かす場合はもっと時間がかかるでしょう。

ドットインストールの有料はやるべき？

ドットインストールは無料のレッスンと有料のレッスンに分かれています。無料のレッスンだけでは、Web制作に必要なHTML、CSS、JavaScriptの知識は学べないため、有料のレッスンもやった方が良いです。

ドットインストールの月額料金は1,000円ちょっとですので、集中して1ヶ月で学習を終えれば、学習費をかなりおさえることができます。ぜひ有料レッスンも学習しておきましょう。

2. ドットインストールの「Webサイトを作れるようになろう」で学ぶ内容

ドットインストールの「Webサイトを作れるようになろう」で学べる内容と、それぞれの目安の学習時間、学習が必須かどうかについて確認していきます。

「Web制作の準備をしよう」は、Windows か Mac お使いのPCいずれかでOKです。GitHubはこの段階では必須ではないので、余裕があれば学習しておくとよいでしょう。AOSとGLightboxも必須ではないのでスキップしてもOKです。

3. ドットインストールの「Webサイトに動きをつけてみよう」で学ぶ内容

ドットインストールの「Webサイトに動きをつけてみよう」で学べる内容と、それぞれの目安の学習時間、学習が必須かどうかについて確認していきます。

JavaScript入門の「クラス編」と「fetch API編」は、Web制作ではあまり使用しないため、スキップしてもOKです。モーダルウィンドウ、ハンバーガーメニュー、アコーディオン、タブメニュー、カルーセルは、実務ではjQueryを使用することが多いですが、元となるJavaScriptも一通り学習しておきましょう。

4. ドットインストールの「jQuery入門」で学ぶ内容

ドットインストールの「jQuery入門」で学べる内容と、それぞれの目安の学習時間、学習が必須かどうかについて確認していきます。

jQueryのレッスンは全てWeb制作で使う基礎技術ばかりですので、スキップせずに全て学習しておきましょう。

5. まとめ

Web制作を仕事にしていくことを目指している人が、ドットインストールの学習をどこまでやればよいか？について解説してきました。

ドットインストールで必要なレッスンは以下の3つです。

• 「Webサイトを作れるようになろう」
• 「Webサイトに動きをつけてみよう」
• 「jQuery入門」

上記コースの中には有料のレッスンも含まれていますが、集中して学習すれば1ヶ月で終えることも可能ですので、学習費として支払いしっかりとスキルを身につけてください。

ドットインストールは動画でのインプット学習がメインのため、一通り学習を終えたら次は手を動かす練習をしていきましょう。

HTML、CSS、JavaScript、jQueryの基礎のアウトプット練習におすすめなのが、プロゲートという学習サイトです。

プロゲートの学習範囲や学べる内容についても、本記事と同じような感じでまとめていますので、以下の記事を参考にしてみてください。

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

模写の次に何を学ぶべきか迷っていませんか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。