Login

Làm landing page responsive từ đầu: hướng dẫn từng bước cho người mới

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Landing page là trang đơn giới thiệu một sản phẩm hay dịch vụ, và là bài thực hành tuyệt vời để rèn HTML, CSS và tư duy responsive. Bài này hướng dẫn bạn dựng một landing page gồm phần đầu trang, tính năng, và lời kêu gọi hành động, chạy tốt từ điện thoại đến màn hình lớn.

Cấu trúc một landing page

Trước khi viết code, hãy phác thảo các khối nội dung. Một landing page cơ bản thường có:

  1. Header: logo và menu ngắn.
  2. Hero: tiêu đề lớn, mô tả một câu và nút kêu gọi.
  3. Features: ba đến sáu lợi ích chính.
  4. CTA: lời kêu gọi cuối trang.
  5. Footer: thông tin liên hệ.

Bước 1: HTML ngữ nghĩa

Dùng các thẻ như header, main, section, footer thay vì toàn div. Cách này giúp trình đọc màn hình và công cụ tìm kiếm hiểu cấu trúc trang tốt hơn.

<header class="site-header">
  <a class="logo" href="#">MyBrand</a>
  <nav><a href="#features">Tính năng</a> <a href="#contact">Liên hệ</a></nav>
</header>
<main>
  <section class="hero">
    <h1>Quản lý công việc dễ dàng hơn</h1>
    <p>Một công cụ gọn nhẹ giúp bạn tập trung vào điều quan trọng.</p>
    <a class="btn" href="#contact">Dùng thử ngay</a>
  </section>
  <section id="features" class="features">
    <article class="card"><h2>Nhanh</h2><p>Thao tác chỉ với vài cú nhấp.</p></article>
    <article class="card"><h2>Gọn</h2><p>Giao diện sạch, không rối mắt.</p></article>
    <article class="card"><h2>Linh hoạt</h2><p>Dùng được trên mọi thiết bị.</p></article>
  </section>
</main>
<footer id="contact">Liên hệ: hello@example.com</footer>

Đừng quên thẻ <meta name="viewport" content="width=device-width, initial-scale=1"> trong head. Thiếu dòng này, trình duyệt di động sẽ thu nhỏ cả trang và responsive không hoạt động.

Bước 2: CSS theo hướng mobile first

Mobile first nghĩa là viết style cho màn hình nhỏ trước, rồi dùng media query để mở rộng cho màn hình lớn. Cách này thường cho code gọn hơn so với thu nhỏ từ giao diện desktop.

* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, sans-serif; line-height: 1.6; color: #222; }

.site-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.site-header nav a { margin-left: 16px; text-decoration: none; color: #333; }

.hero { text-align: center; padding: 64px 20px; background: linear-gradient(135deg, #5b8def, #8e5bef); color: #fff; }
.hero h1 { font-size: 2rem; margin-bottom: 12px; }
.btn { display: inline-block; margin-top: 20px; padding: 12px 24px; background: #fff; color: #5b43d6; border-radius: 8px; text-decoration: none; font-weight: 600; }

.features { display: grid; gap: 16px; padding: 40px 20px; }
.card { padding: 20px; border: 1px solid #e5e7eb; border-radius: 12px; }

footer { text-align: center; padding: 24px; background: #111; color: #ddd; }

@media (min-width: 768px) {
  .hero h1 { font-size: 3rem; }
  .features { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; }
}

Bước 3: Kiểm tra responsive

Mở trang trong Chrome, bấm F12 rồi chọn biểu tượng thiết bị di động để xem ở nhiều kích thước. Kéo thay đổi chiều rộng và để ý chỗ nào bố cục bị vỡ. Điểm ngắt 768px chỉ là gợi ý, hãy đặt điểm ngắt ở nơi nội dung của bạn thật sự cần thay đổi.

Những lỗi người mới hay gặp

  • Quên box-sizing: border-box, khiến phần tử bị tràn khỏi khung.
  • Đặt chiều rộng cố định bằng pixel thay vì dùng max-width và phần trăm.
  • Chữ quá nhỏ trên điện thoại, nên giữ cỡ chữ nội dung khoảng 16px trở lên.
  • Nút bấm quá bé, khó chạm bằng ngón tay.
  • Độ tương phản giữa chữ và nền thấp, khó đọc.

Mẹo để landing page thuyết phục hơn

Một trang đẹp chưa chắc đã hiệu quả. Hãy tự hỏi: người lạ vào trang có hiểu trong năm giây sản phẩm này làm gì không? Tiêu đề nên nói về lợi ích với người dùng thay vì mô tả tính năng khô khan. Chỉ nên có một lời kêu gọi chính, lặp lại ở đầu và cuối trang, để người xem không bị phân tâm bởi quá nhiều lựa chọn. Ảnh nên được nén nhỏ, thêm thuộc tính alt mô tả và thuộc tính loading="lazy" cho các ảnh nằm ở xa phần đầu trang. Cuối cùng, kiểm tra tốc độ tải bằng công cụ trong DevTools, vì trang chậm sẽ mất người xem trước khi họ kịp đọc.

Kết luận

Landing page là dự án nhỏ nhưng dạy bạn rất nhiều: ngữ nghĩa HTML, Flexbox, Grid, media query và tư duy thiết kế cho nhiều thiết bị. Hãy thử đổi màu sắc, thêm phần bảng giá hoặc ý kiến khách hàng để biến nó thành bản của riêng bạn.

Nếu bạn muốn học thiết kế web một cách có hệ thống, hãy khám phá các khóa học tại codebem.com để có lộ trình rõ ràng hơn.

author_photo
Nguyễn Đình Cường

0 comment