Học HTML & CSS cơ bản: lộ trình 30 ngày cho người mới bắt đầu

Mọi trang web bạn từng truy cập, từ Facebook đến trang tin tức, đều được xây dựng trên hai nền tảng: HTML để tạo nội dung và CSS để trang trí. Tin vui là đây cũng là hai thứ dễ học nhất trong thế giới lập trình. Chỉ cần mỗi ngày 1 giờ, sau 30 ngày bạn hoàn toàn có thể tự làm một trang web cá nhân hoàn chỉnh.

HTML và CSS là gì?

Hãy tưởng tượng trang web là một ngôi nhà. HTML (HyperText Markup Language) là phần khung: tường, cửa, phòng ốc. CSS (Cascading Style Sheets) là phần nội thất: màu sơn, ánh đèn, cách sắp xếp đồ đạc. Còn JavaScript, thứ bạn sẽ học sau, là hệ thống điện giúp ngôi nhà "hoạt động".

Chuẩn bị công cụ

• Trình duyệt: Chrome hoặc Firefox, kèm bộ công cụ DevTools (nhấn F12).
• Trình soạn thảo code: Visual Studio Code, miễn phí và rất nhiều tiện ích.
• Một thư mục để chứa bài tập, ví dụ hoc-web.

Tuần 1: Làm quen với HTML

Tạo file index.html và gõ (đừng copy!) đoạn code sau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Trang web đầu tiên của tôi</title>
</head>
<body>
  <h1>Xin chào, tôi là Minh</h1>
  <p>Tôi đang học lập trình web tại <a href="https://hocfree.vn">HọcFree</a>.</p>
  <img src="avatar.jpg" alt="Ảnh đại diện">
</body>
</html>

Trong tuần đầu, hãy học các thẻ quan trọng nhất: tiêu đề h1 đến h6, đoạn văn p, liên kết a, hình ảnh img, danh sách ul/ol/li, bảng table và biểu mẫu form.

Tuần 2: HTML ngữ nghĩa

Thay vì dùng div cho mọi thứ, HTML5 cung cấp các thẻ có ý nghĩa như header, nav, main, article, aside và footer. Chúng giúp Google hiểu trang web của bạn tốt hơn (tốt cho SEO) và hỗ trợ người khiếm thị dùng trình đọc màn hình.

Tuần 3: CSS cơ bản

CSS hoạt động theo công thức: chọn phần tử rồi khai báo thuộc tính.

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
}

h1 {
  color: #f04e23;
  font-size: 2.5rem;
}

.the-bai-viet {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

Hãy nắm thật chắc Box Model (margin, border, padding, content), vì 80% lỗi giao diện của người mới đến từ việc chưa hiểu khái niệm này.

Tuần 4: Flexbox, Grid và Responsive

Đây là tuần thú vị nhất. Flexbox giúp sắp xếp phần tử theo một hàng hoặc một cột, còn Grid giúp chia bố cục hai chiều. Kết hợp với @media, trang web của bạn sẽ hiển thị đẹp trên cả điện thoại lẫn máy tính.

.danh-sach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .danh-sach { grid-template-columns: 1fr; }
}

Dự án cuối khóa

Hai ngày cuối cùng, hãy tự làm một trang hồ sơ cá nhân gồm giới thiệu bản thân, kỹ năng, dự án và thông tin liên hệ. Sau đó đưa nó lên mạng miễn phí bằng GitHub Pages, như cách chúng tôi hướng dẫn trong bài làm website miễn phí với GitHub Pages.

Mẹo: Đừng cố nhớ hết mọi thẻ và thuộc tính. Lập trình viên chuyên nghiệp vẫn tra cứu MDN Web Docs hằng ngày. Điều quan trọng là bạn hiểu khi nào cần dùng cái gì.