Bài 10: Thực hành – Tạo trang landing đơn giản với Tailwind CSS

🔗 Bài học khác trong chuyên mục:

Rất tốt, chúng ta đã đi qua 9 bài học đầu tiên và sắp hoàn thành Phần 1: Làm quen với Tailwind CSS. Bài cuối cùng trong phần này sẽ là một bài thực hành tổng hợp, giúp bạn vận dụng lại kiến thức từ toàn bộ phần 1 để xây dựng một trang landing đơn giản bằng Tailwind CSS.

Học lý thuyết là một chuyện, nhưng khi bắt tay vào làm, bạn mới thật sự hiểu được mình đã nắm tới đâu. Bài học hôm nay là dịp để bạn tổng kết toàn bộ phần 1: từ padding, màu sắc, typography, responsive đến trạng thái tương tác — bằng cách tự tay xây dựng một giao diện đơn giản nhưng hoàn chỉnh: một trang landing page giới thiệu dịch vụ.

Đừng lo nếu bạn cảm thấy còn hơi mơ hồ, vì mình sẽ hướng dẫn từng bước và giải thích rõ từng class sử dụng. Bài này vừa là bài thực hành, vừa là dịp ôn tập toàn bộ kiến thức đã học.

Đề bài: Tạo trang landing cho dịch vụ “Học lập trình với Tailwind”

Trang sẽ gồm:

Tiêu đề chính (Hero section)
Đoạn mô tả ngắn
Nút kêu gọi hành động (CTA)
Ảnh minh họa hoặc placeholder
Responsive đơn giản cho mobile và desktop

Bước 1: Tạo khung HTML cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Học Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
  <!-- Nội dung trang ở đây -->
</body>
</html>

Bước 2: Tạo phần Hero

<section class="min-h-screen flex items-center justify-center">
  <div class="max-w-2xl text-center px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-blue-700 mb-4">
      Học Tailwind CSS dễ hiểu và bài bản
    </h1>
    <p class="text-lg text-gray-700 leading-relaxed mb-6">
      Khóa học miễn phí giúp bạn làm chủ Tailwind CSS từ cơ bản đến nâng cao. Học bằng ví dụ thực tế, dễ nhớ, và ứng dụng được ngay.
    </p>
    <a href="#dang-ky" class="inline-block bg-blue-500 hover:bg-blue-600 text-white text-lg font-medium px-6 py-3 rounded shadow transition">
      Bắt đầu học ngay
    </a>
  </div>
</section>

Giải thích:

flex, items-center, justify-center: căn giữa nội dung theo cả hai chiều
text-4xl → md:text-5xl: responsive font
hover:bg-blue-600: hiệu ứng khi rê chuột vào nút

Bước 3: Thêm hình minh họa (hoặc placeholder)

Giả sử bạn chưa có ảnh thật, ta có thể dùng hình ảnh minh họa dạng khối:

<section class="py-12 bg-white">
  <div class="max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-8 px-4">
    <div class="flex-1">
      <img src="https://via.placeholder.com/500x300" alt="Học Tailwind" class="rounded shadow" />
    </div>
    <div class="flex-1">
      <h2 class="text-2xl font-semibold text-gray-800 mb-2">Vì sao chọn Tailwind CSS?</h2>
      <ul class="text-gray-700 space-y-2">
        <li>Viết code nhanh, rõ ràng</li>
        <li>Tùy biến linh hoạt không giới hạn</li>
        <li>Không cần nhớ cú pháp CSS dài dòng</li>
      </ul>
    </div>
  </div>
</section>

Bước 4: Tối ưu responsive

Ta đã dùng flex-col md:flex-row để xếp dọc trên mobile, ngang trên desktop
Dùng text-center, text-left md:text-center cho canh lề phù hợp
Dùng px-4, py-12, max-w-* để giới hạn độ rộng và căn chỉnh hợp lý

Bước 5: Tổng hợp lại toàn bộ trang

Bạn có thể ghép các phần trên thành một file HTML hoàn chỉnh. Khi mở trình duyệt, thử:

Rê chuột vào nút để thấy hiệu ứng
Thu nhỏ màn hình để thấy layout chuyển đổi
Đọc từng phần và xem class đã học được áp dụng như thế nào

Tổng kết kiến thức đã dùng

Kỹ năng	Class tiêu biểu
Layout	`flex`, `grid`, `items-center`
Margin, Padding	`mb-4`, `px-6`, `py-12`
Màu sắc	`text-blue-700`, `bg-white`, `hover:bg-*`
Typography	`text-xl`, `font-semibold`, `leading-relaxed`
Responsive	`md:text-5xl`, `md:flex-row`
Hover & Focus	`hover:bg-blue-600`, `focus:ring`

Tóm tắt bài học

Bạn đã thực hành một trang landing page với đầy đủ phần: tiêu đề, mô tả, nút, ảnh, responsive.
Bài thực hành giúp ôn lại toàn bộ class đã học trong phần 1.
Tailwind CSS cho phép bạn dựng bố cục nhanh, hiệu quả, đẹp và không cần viết CSS riêng.

Kết thúc phần 1

Xin chúc mừng! Bạn đã hoàn thành Phần 1: Làm quen với Tailwind CSS.

Từ những class cơ bản đến layout, màu sắc, phản hồi, và cuối cùng là ứng dụng vào thực tế — bạn đã có nền tảng vững vàng để đi tiếp.

Ở Phần 2: Xây dựng bố cục linh hoạt, chúng ta sẽ làm quen với:

Flexbox
Grid system
Canh giữa, chia cột, căn chỉnh chiều dọc
Tạo layout chuyên nghiệp, có sidebar, header, footer…

Bạn đã sẵn sàng để layout website của mình trông “ngầu” và hiện đại hơn chưa?
Hẹn bạn ở bài 11: Giới thiệu Flexbox trong Tailwind CSS để mở đầu phần 2 nhé.

Bài học trước ← Bài 9: Pseudo-class (hover, focus, active…) trong Tailwind Bài học tiếp theo Bài 11: Sử dụng Flexbox trong Tailwind CSS →