コース紹介ページを作ろう
学校全体でシェアしよう
いよいよ集大成です。コンテンツをゲーム化し、進捗を追跡し、アダプティブな学習パスを構築してきました。今度はそれをコース紹介ページにまとめて、保護者・同僚・学校全体とシェアしましょう。
優れた紹介ページには4つの役割があります。コース名を示して読者を引きつけるヘッダー、内容を見せるレッスン一覧、登録を簡単にする登録への呼びかけ(CTA)、そしてページを締めくくるフッターです。各セクションを順番に組み立てていきましょう。
「生徒たちは何に取り組んでいるの?」と聞かれたとき、このページを送ればすべて伝わります。丁寧に作って、クラスの代弁者にしましょう。
手順
グラデーション背景・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 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
レッスン一覧を追加しましょう。「学べること」という見出しと、rounded-xl のリストアイテムを持つ ul を作ります。
登録への呼びかけを追加しましょう。「今すぐ登録」ボタンを含む目立つボックスを作ります。
ページを締めくくるフッターを追加して、コースのクレジットを入れましょう。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:グラデーション背景・h1でのコースタイトル・1行のサブタイトルを持つヘッダーセクションを追加しましょう。