Bài 11. Dự án: landing page khóa học với Bootstrap 5

Một số khái niệm

Một landing page điển hình gồm các khối theo thứ tự thuyết phục: Hero (lời hứa chính + nút hành động) → Lợi ích → Nội dung/sản phẩm → Bằng chứng (cảm nhận, số liệu) → Bảng giá → FAQ → Kêu gọi hành động lần cuối → Footer.

Hero và tính năng

<nav class="navbar navbar-expand-sm bg-body border-bottom sticky-top"><div class="container"><a class="navbar-brand fw-bold text-success" href="#">Tự Học Tin</a><a class="btn btn-success btn-sm ms-auto" href="#dk">Đăng ký</a></div></nav>
<section class="py-5 text-center text-white" style="background:linear-gradient(135deg,#2e7d32,#00838f)"><div class="container">
  <span class="badge text-bg-light mb-3">Miễn phí · 12 bài</span>
  <h1 class="fw-bold">Làm chủ Bootstrap 5 trong 2 tuần</h1>
  <p class="lead opacity-75 mx-auto" style="max-width:560px">Dựng giao diện responsive đẹp, nhanh, có dự án thực tế.</p>
  <a href="#dk" class="btn btn-light btn-lg px-4 me-2">Bắt đầu học</a><a href="#nd" class="btn btn-outline-light btn-lg">Xem nội dung</a></div></section>
<section class="py-4 bg-body-tertiary" id="nd"><div class="container"><div class="row g-3 text-center">
  <div class="col-sm-4"><div class="p-3 bg-body rounded-4 shadow-sm h-100"><i class="bi bi-grid-3x3-gap fs-2 text-success"></i><h6 class="mt-2">Lưới 12 cột</h6><p class="small text-body-secondary mb-0">Bố cục mọi màn hình</p></div></div>
  <div class="col-sm-4"><div class="p-3 bg-body rounded-4 shadow-sm h-100"><i class="bi bi-puzzle fs-2 text-primary"></i><h6 class="mt-2">Thành phần</h6><p class="small text-body-secondary mb-0">Navbar, modal, card...</p></div></div>
  <div class="col-sm-4"><div class="p-3 bg-body rounded-4 shadow-sm h-100"><i class="bi bi-palette fs-2 text-warning"></i><h6 class="mt-2">Tùy biến</h6><p class="small text-body-secondary mb-0">Màu, font thương hiệu</p></div></div>
</div></div></section>

Bảng giá và đăng ký

<section class="py-4"><div class="container"><div class="row g-3 align-items-stretch">
  <div class="col-md-4"><div class="card h-100 text-center"><div class="card-body"><h6>Tự học</h6><p class="display-6 fw-bold">0đ</p><ul class="list-unstyled small text-body-secondary"><li>12 bài học</li><li>Ví dụ trực quan</li></ul></div><div class="card-footer bg-transparent border-0 pb-3"><a class="btn btn-outline-success w-100">Chọn</a></div></div></div>
  <div class="col-md-4"><div class="card h-100 text-center border-success border-2 shadow"><div class="card-header bg-success text-white">Phổ biến</div><div class="card-body"><h6>Có hướng dẫn</h6><p class="display-6 fw-bold">199k</p><ul class="list-unstyled small text-body-secondary"><li>Chấm dự án</li><li>Hỏi đáp nhóm</li></ul></div><div class="card-footer bg-transparent border-0 pb-3"><a class="btn btn-success w-100">Chọn</a></div></div></div>
  <div class="col-md-4"><div class="card h-100 text-center"><div class="card-body"><h6>Lớp học</h6><p class="display-6 fw-bold">Liên hệ</p><ul class="list-unstyled small text-body-secondary"><li>Cho nhóm, trường học</li></ul></div><div class="card-footer bg-transparent border-0 pb-3"><a class="btn btn-outline-success w-100">Liên hệ</a></div></div></div>
</div>
<form class="row g-2 mt-3 p-3 bg-body-tertiary rounded-4" id="dk" onsubmit="return false"><div class="col-sm-5"><input class="form-control" placeholder="Họ tên"></div><div class="col-sm-5"><input class="form-control" type="email" placeholder="Email"></div><div class="col-sm-2 d-grid"><button class="btn btn-success">Đăng ký</button></div></form>
</div></section>

Kiểm tra trước khi hoàn thành

• Thử ở 360px, 768px, 1280px: không thanh cuộn ngang, chữ không quá nhỏ.
• Nút và liên kết có nội dung rõ (“Đăng ký học”, không chỉ “Bấm vào đây”).
• Ảnh có alt, màu đủ tương phản, có trạng thái focus.
• Chạy Lighthouse, tối ưu ảnh, chỉ nạp phần Bootstrap cần thiết.