プログラミング独学ロードマップ

🎒 中学生（プログラミング初めて）

STEP 0 → 1（HTML）→ 2（CSS）→ 5（チャレンジ）の最短ルート。まずはWebページを作る楽しさを体験しよう。

→ HTMLコースから始める

📝 高校生（情報Ⅰ対策したい）

STEP 0 → 3（JavaScript）→ ドリル の集中ルート。変数・条件分岐・繰り返しを重点的に学べます。共通テストの擬似言語（DNCL）は採点つきのトレース練習で対策できます。

→ 情報Ⅰ DNCLトレース練習（14問） · → JavaScriptコース

🌐 Webサイトを作りたい人

STEP 0 → 1（HTML）→ 2（CSS）→ 6（公開）の実践ルート。最短で自分のサイトをインターネットに公開できます。

→ HTMLコースへ · → GitHub Pages 公開ガイド

STEP 0 — 環境準備（約30分）

VS Code（無料エディタ）とGoogle Chromeをインストールします。

📖 VS Codeのインストール方法

STEP 1 — HTML基礎（7レッスン・約3.5時間）

見出し・段落・リンク・画像・リスト・表・フォームなど、Webページの骨格を作ります。

📖 HTMLとは？ · 初めてのWebページ

📚 HTML · タグ

STEP 2 — CSS基礎（6レッスン・約3時間）

色・フォント・余白・Flexbox・レスポンシブデザインでページをデザインします。

📖 CSSとは？ · Flexbox入門

📚 セレクタ · Flexbox

STEP 3 — JavaScript基礎（7レッスン・約3.5時間）

変数・条件分岐・関数・DOM操作で、ページに動きをつけます。最後はToDoアプリを作ります。

📖 JavaScriptとは？ · 変数入門

📚 変数 · 関数

STEP 4 — 問題ドリル（全200問・各30分）

HTML・CSS・JavaScript・Git 各50問のドリルで知識を定着させます。

STEP 5 — 実践チャレンジ（19課題・各30分〜2時間）

完成イメージを見ながら、ステップバイステップで作品を作ります。

📖 作品アイデア10選

STEP 6 — GitHub Pages 公開（約1時間）

作った作品を無料でインターネットに公開します。進め方は2通りあります。

🚀 かんたん公開：ファイルをアップロードするだけ（Git不要）
→ GitHub Pages ガイドへ

🔧 しっかり公開：バージョン管理（Git）ごと身につける・7レッスン
→ Gitコースへ

📚 リポジトリ · コミット

STEP 7 — 自由課題（自分のペース）

テーマを自分で決めて、オリジナル作品を作ります。