コンテンツへスキップ

コース紹介ページを作ろう

中級~15 0/4 ステップ

学校全体でシェアしよう

いよいよ集大成です。コンテンツをゲーム化し、進捗を追跡し、アダプティブな学習パスを構築してきました。今度はそれをコース紹介ページにまとめて、保護者・同僚・学校全体とシェアしましょう。

優れた紹介ページには4つの役割があります。コース名を示して読者を引きつけるヘッダー、内容を見せるレッスン一覧、登録を簡単にする登録への呼びかけ(CTA)、そしてページを締めくくるフッターです。各セクションを順番に組み立てていきましょう。

「生徒たちは何に取り組んでいるの?」と聞かれたとき、このページを送ればすべて伝わります。丁寧に作って、クラスの代弁者にしましょう。

手順

1

グラデーション背景・h1でのコースタイトル・1行のサブタイトルを持つヘッダーセクションを追加しましょう。

ヒント: `<header class="bg-gradient-to-br from-indigo-900 via-gray-900 to-gray-900 py-20 px-6 text-center">` の中に `<h1>` を入れてみましょう。

どこに書けばいい?

<!-- Assemble your course landing page here -->

11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。

2

レッスン一覧を追加しましょう。「学べること」という見出しと、rounded-xl のリストアイテムを持つ ul を作ります。

3

登録への呼びかけを追加しましょう。「今すぐ登録」ボタンを含む目立つボックスを作ります。

4

ページを締めくくるフッターを追加して、コースのクレジットを入れましょう。

あなたのコード

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

ライブプレビュー

ライブプレビュー