본문으로 건너뛰기

강좌 랜딩 페이지 만들기

중급~15 0/4 단계

학교와 공유하세요

이것이 최종 프로젝트입니다. 콘텐츠를 게임화하고, 진도를 추적하고, 적응형 경로를 구축했으니, 이제 이 모든 것을 부모님, 동료 교사, 그리고 학교 전체와 공유할 수 있는 강좌 랜딩 페이지로 완성해 보세요.

훌륭한 랜딩 페이지는 네 가지 역할을 합니다: 강좌 이름을 알리고 독자의 시선을 사로잡는 헤더, 내용을 보여주는 수업 목록, 등록을 쉽게 만드는 행동 유도 버튼, 그리고 페이지를 마무리하는 푸터입니다. 각 섹션을 순서대로 조립해 보세요.

누군가 "학생들이 무엇을 배우고 있나요?"라고 물을 때 보내줄 바로 그 페이지입니다. 정성껏 만들어서 여러분의 수업을 대신 말하게 하세요.

안내

1

그라디언트 배경, h1 태그의 강좌 제목, 한 줄 부제목이 있는 헤더 섹션을 추가하세요.

힌트: `<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 스타일의 목록 항목이 있는 수업 목록을 추가하세요.

3

등록 행동 유도 섹션을 추가하세요: '지금 등록하기' 버튼이 있는 강조된 박스입니다.

4

페이지를 마무리하는 푸터를 추가하고 강좌 출처를 표시하세요.

내 코드

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

실시간 미리보기

실시간 미리보기