実践チャレンジ

1. 推し紹介ページ

好きな人・キャラを紹介するページを作ろう

⏱ 約30分 ─ HTML L1-L4

前提: HTML L1-4

2. 好きなものランキング

ランキングと比較表を作ろう

⏱ 約30分 ─ HTML L2, L4

前提: HTML L2, L4

3. 性格診断フォーム

ラジオボタンで質問に答えるフォームを作ろう

⏱ 約45分 ─ HTML L5, L6

前提: HTML L5-6

4. プロフィールカード

自己紹介カードをCSSでデザインしよう

⏱ 約45分 ─ HTML + CSS L1-L4

前提: HTML L1-6, CSS L1-4

5. カフェのメニューページ

おしゃれなメニューページを作ろう

⏱ 約60分 ─ HTML + CSS L3-L5

前提: HTML L1-6, CSS L3-5

6. 学校行事の告知ページ

Flexboxで情報カードを並べよう

⏱ 約60分 ─ HTML + CSS L3, L5

前提: HTML L1-6, CSS L3, L5

7. カウンターアプリ

+/-ボタンで数を増減させよう

⏱ 約45分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-6

8. おみくじアプリ

ランダムで運勢を表示しよう

⏱ 約45分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-6

9. タイマーアプリ

カウントダウンタイマーを作ろう

⏱ 約60分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-6

10. クイズアプリ

4択クイズアプリを作ろう

⏱ 約90分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-7

11. TODOリスト

タスクの追加・削除・完了管理を作ろう

⏱ 約90分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-7

12. 色変えボタン

ボタンで背景色を変えよう

⏱ 約45分 ─ HTML + CSS + JS

前提: HTML, CSS L1-5, JS L1-4

13. 自己紹介スライドショー

スライドで自己紹介を作ろう

⏱ 約60分 ─ HTML + CSS + JS

前提: HTML, CSS L1-5, JS L1-6

14. BMI計算機

身長と体重からBMIを計算しよう

⏱ 約60分 ─ HTML + CSS + JS

前提: HTML L1-5, CSS, JS L1-5

15. じゃんけんゲーム

CPUとじゃんけん対戦しよう

⏱ 約60分 ─ HTML + CSS + JS

前提: HTML, CSS, JS L1-6

16. 自分のプロフィールページをGitHubに公開しよう

Git, GitHub

⏱ 約30分 ─ ★★☆

前提: Git L1-3

17. ブランチで新機能を追加しよう

Git, GitHub, ブランチ

⏱ 約40分 ─ ★★★

前提: Git L1-4

18. CSSだけでカードギャラリーを作ろう

CSS, Flexbox

⏱ 約45分 ─ ★★☆

前提: CSS L1-5

19. レスポンシブなプロフィールページを作ろう

CSS, レスポンシブ

⏱ 約60分 ─ ★★★

前提: CSS L1-6