Step 1: HTMLの構造を理解しよう

2時間

1-1なぜHTMLを学ぶのかLESSON15分

1-2HTMLの基本構造LESSON25分

1-3タグの仕組みを理解しようLESSON25分

1-4ブラウザの開発者ツールを使おうLESSON25分

1-5HTML基本用語を覚えようLESSON15分

1-6理解度チェックQUIZ15分

Step 2: 基本タグで文章を作ろう

4時間

2-1見出しタグを使おうLESSON30分

2-2段落とテキスト装飾LESSON30分

2-3リストを作ろうLESSON30分

2-4テーブルでデータを表示しようLESSON30分

2-5演習：自己紹介ページの骨組みを作ろうEXERCISE90分

2-6チェックポイントQUIZ30分

Step 3: リンクと画像を配置しよう

4時間

3-1リンクを作ろうLESSON30分

3-2画像を表示しようLESSON30分

3-3セマンティックHTMLを使おうLESSON30分

3-4フォームの基本を知ろうLESSON30分

3-5演習：複数ページのサイトを作ろうEXERCISE90分

3-6チェックポイントQUIZ30分

Step 4: CSSで見た目を整えよう

4時間

4-1CSSとは何かLESSON30分

4-2セレクタを使い分けようLESSON30分

4-3色とフォントを設定しようLESSON30分

4-4ボックスモデルを理解しようLESSON30分

4-5演習：自己紹介ページをデザインしようEXERCISE90分

4-6チェックポイントQUIZ30分

Step 5: レイアウトの基本を覚えよう

4時間

5-1displayプロパティを理解しようLESSON30分

5-2FlexboxでレイアウトしようLESSON30分

5-3レスポンシブデザインの基本LESSON30分

5-4演習：レイアウトを整えようEXERCISE90分

5-5レイアウト実践練習LESSON30分

5-6チェックポイントQUIZ30分

Step 6: 自己紹介ページを完成させよう

2時間

6-1総合演習：自己紹介サイトの完成EXERCISE90分

6-2卒業クイズQUIZ30分