Bài 30: Ghép giao diện hoàn chỉnh & tổng kết

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

Sau 29 bài học từ cơ bản đến nâng cao, bạn đã nắm vững:

Cấu trúc HTML chuẩn
Kỹ thuật CSS hiện đại (Flexbox, Grid, Responsive…)
Cách tổ chức giao diện, sử dụng biến CSS, hiệu ứng…

Giờ là lúc bạn ứng dụng toàn bộ kiến thức để dựng một trang web demo hoàn chỉnh.

1. Mục tiêu giao diện

Giao diện mẫu gồm các phần:

Phần	Đã học ở bài
Header + menu	Bài 27
Layout 2 cột	Bài 28
Footer + back-to-top	Bài 29
Hiệu ứng hover	Bài 19
Responsive	Bài 22–23
Reset + biến CSS	Bài 25–26

2. Tổ chức file dự án

project/
├── index.html
├── css/
│   ├── reset.css
│   ├── style.css
│   └── variables.css
├── js/
│   └── main.js
└── img/
    └── logo.png (nếu có)

3. Kết hợp HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Trang học HTML & CSS</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/variables.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>

  <!-- Header -->
  <header class="site-header">...</header>

  <!-- Main layout -->
  <div class="page-container">
    <main class="main-content">
      <h1>Bài viết tiêu biểu</h1>
      <p>Nội dung mẫu...</p>
    </main>
    <aside class="sidebar">
      <h2>Sidebar</h2>
      <p>Widget, link...</p>
    </aside>
  </div>

  <!-- Footer -->
  <footer class="site-footer">...</footer>

  <!-- Nút lên đầu -->
  <button id="backToTop" title="Lên đầu trang">↑</button>

  <script src="js/main.js"></script>
</body>
</html>

4. Kỹ năng kiểm tra sau khi ghép

Giao diện có bị vỡ không trên màn hình nhỏ?
Menu có hoạt động khi thu nhỏ?
Nút cuộn về đầu có hoạt động?
Có class hoặc style nào dư thừa?
Có thể dùng DevTools để kiểm tra từng breakpoint

5. Tổng kết khóa học CSS

Bạn đã đi từ:

HTML cơ bản: Thẻ, cấu trúc, semantic, form…
CSS nền tảng: Màu, font, box model, border…
Bố cục hiện đại: Flexbox, Grid
Responsive: Media queries, đơn vị linh hoạt
Tổ chức chuyên nghiệp: CSS variables, reset, normalize
Thực hành mini project: header, menu, layout, footer…

6. Hướng đi tiếp theo

Nếu bạn muốn nâng cao kỹ năng giao diện, bạn có thể học thêm:

Môn học tiếp theo	Gợi ý nội dung
CSS nâng cao	Animation nâng cao, SCSS
Tailwind CSS	Framework utility-first
JavaScript cơ bản	Tương tác động, xử lý sự kiện
HTML + CSS Projects	Làm 5–10 giao diện thật
Web thực chiến	Clone web nổi tiếng (Netflix, Spotify…)

Bài tập thực hành

Tạo một trang web cá nhân giới thiệu bản thân (hoặc dự án) với các phần:

Header (tên + menu)

Giới thiệu

Dự án hoặc bài viết

Sidebar (link mạng xã hội)

Footer

Responsive

Chúc mừng bạn đã hoàn thành khóa học HTML + CSS 30 bài một cách bài bản và có hệ thống.

Bài học trước ← Bài 29: Thiết kế footer + nút lên đầu trang