Dự án: Landing Page

Dự án thứ ba: một landing page (trang đích). Đây là trang quảng bá một sản phẩm hay dịch vụ, và nó chỉ nhắm MỘT mục tiêu: khiến người xem làm một hành động (đăng ký, dùng thử…). Vì thế cả trang được dựng để dẫn dắt người xem theo một mạch tới hành động đó. Bản đồ trang nhìn rất khác hai dự án trước - nó là một cột nhiều khúc:

• ▸Landing page nhắm MỘT mục tiêu/hành động duy nhất.
• ▸Bố cục một cột nhiều khúc: hero, các section, form, footer.
• ▸CTA (lời kêu gọi hành động) là trung tâm, lặp lại nhiều lần.

Khu trên cùng gọi là hero - thứ người xem thấy đầu tiên. Dùng <header> chứa h1 là thông điệp chính (ngắn, rõ lợi ích), một câu phụ, và một CTA chính.

<header>
  <h1>Học HTML trong 2 tuần cùng Mèo Ham Học</h1>
  <p>Khoá học tương tác, miễn phí, tiếng Việt.</p>
  <a href="#dang-ky">Đăng ký học ngay</a>
</header>

• ▸hero = header chứa h1 thông điệp chính + câu phụ + CTA.
• ▸h1 nói rõ lợi ích, không phải tên thương hiệu suông.
• ▸Đây là h1 duy nhất của cả trang.

CTA (Call To Action - lời kêu gọi hành động) là nút/liên kết mời người dùng làm điều mèo con muốn. Câu hỏi quan trọng: dùng button hay a? Luật cũ từ bài Liên kết, ảnh & đa phương tiện: button cho hành động TRÊN trang; a để ĐI tới một khu/trang khác.

Mẹo hay trên landing: cho CTA là a href="#dang-ky" để bấm vào là trang cuộn tới phần tử có id="dang-ky" - một liên kết nội bộ trong cùng trang.

<!-- CTA cuộn xuống form -->
<a href="#dang-ky">Đăng ký ngay</a>

<!-- ... ở xa phía dưới ... -->
<form id="dang-ky">
  <!-- các trường đăng ký -->
</form>

Giữa hero và footer là một loạt <section> dẫn người xem theo mạch thuyết phục: lợi ích, cách hoạt động, đánh giá của người dùng. Mỗi section một h2. Khép lại bằng <form> đăng ký - vẫn đủ label gắn for/id và required như ở bài Bảng & biểu mẫu (form) - và mang id để CTA nhảy tới.

<main>
  <section>
    <h2>Vì sao nên học?</h2>
    <p>Tương tác, dễ hiểu, có sơ đồ minh hoạ.</p>
  </section>

  <section>
    <h2>Học thế nào?</h2>
    <p>Mỗi bài một mục tiêu, làm bài tập tự kiểm.</p>
  </section>

  <form id="dang-ky">
    <label for="email">Email nhận khoá học</label>
    <input type="email" id="email" required />
    <button type="submit">Đăng ký</button>
  </form>
</main>

• ▸Các section xếp theo mạch thuyết phục, mỗi section một h2.
• ▸form đăng ký có id để CTA dạng a href="#id" nhảy tới.
• ▸form vẫn đủ label + required như đã học, dù chưa CSS.

Thành thật mà nói: landing page là loại trang phụ thuộc CSS nhiều nhất để trông lung linh - hero nền lớn, nút bắt mắt, section xen kẽ màu. Khi chưa có CSS, landing của mèo con sẽ rất mộc. Nhưng đó chính là lúc câu thần chú của khoá đúng nhất: cấu trúc đúng trước, đẹp sau.

Chạy checklist tự kiểm trước khi coi là xong:

• ▸Hero là header chứa đúng một h1 (thông điệp chính của trang).
• ▸Mỗi section thuyết phục có một h2; không nhảy cóc cấp.
• ▸CTA chọn đúng thẻ: button (hành động) hoặc a href="#id" (nhảy tới khu).
• ▸Form đăng ký có id, mỗi input có label, ô bắt buộc có required.
• ▸head có title + meta description (và Open Graph nếu muốn share).