Học sinh THCS học làm web: HTML, CSS, JavaScript bắt đầu từ đâu

Học làm web cho học sinh nên bắt đầu bằng HTML (nội dung), rồi đến CSS (trang trí, bố cục), sau cùng mới là JavaScript (hành động). Thứ tự này giúp con thấy kết quả ngay trên trình duyệt từ buổi đầu, ít gặp lỗi khó hiểu. Với một học sinh THCS gõ phím quen, khoảng bốn tuần luyện đều là đủ để làm xong trang web đầu tiên của mình.

Vì sao làm web là bước hợp lý cho học sinh THCS

Trang web là sản phẩm con mở được trên điện thoại của bố mẹ, gửi được cho bạn bè. Với tuổi THCS, cảm giác “người khác xem được thứ mình làm” là động lực mạnh hơn mọi lời khuyên.

Làm web cũng dạy những thói quen dùng cả đời: chia nội dung thành phần, đặt tên rõ ràng, sửa từng lỗi nhỏ. Con học được cách máy đọc chữ theo đúng quy tắc, thiếu một dấu > là trang hiển thị sai.

Nếu con chưa từng lập trình, hãy đọc trước bài Trẻ mấy tuổi học lập trình được. Nếu con đã quen Python, bài Khi nào chuyển từ Scratch sang Python giúp phụ huynh xem con đang ở chặng nào.

HTML, CSS, JavaScript khác nhau thế nào

So sánh dễ nhớ nhất là xây một ngôi nhà:

Lớp	Làm gì	Ví dụ trong nhà
HTML	Tiêu đề, đoạn văn, ảnh, đường link	Khung nhà, các phòng
CSS	Màu, cỡ chữ, khoảng cách, bố cục	Sơn tường, nội thất
JavaScript	Bấm nút, đổi chữ, chấm điểm câu trả lời	Điện, công tắc

Nhà không có khung thì không sơn được. Tương tự, CSS và JavaScript đều cần một trang HTML để bám vào. Đó là lý do HTML luôn đi trước.

Video ngắn dưới đây giải thích trình duyệt lấy trang web về như thế nào, xem cùng con trước buổi đầu là vừa.

Lộ trình 4 tuần học HTML CSS cho người mới

Mỗi tuần 3 buổi, mỗi buổi 40–60 phút là nhịp vừa sức với học sinh đang đi học.

Tuần 1: HTML cơ bản. Thẻ tiêu đề h1, h2, đoạn văn p, danh sách ul và li, ảnh img, đường link a. Cuối tuần, con có một trang giới thiệu bản thân chỉ có chữ và một tấm ảnh.

Tuần 2: CSS màu và chữ. Đổi màu nền, màu chữ, phông chữ, cỡ chữ. Con học cách chọn phần tử bằng tên thẻ và bằng class. Trang tuần 1 bắt đầu “có màu”.

Tuần 3: CSS bố cục. Khoảng cách margin, padding, viền border, xếp các ô cạnh nhau bằng display: flex. Con thử thu nhỏ cửa sổ trình duyệt để xem trang trên điện thoại trông ra sao.

Tuần 4: JavaScript đầu tiên. Một nút bấm đổi lời chào, một câu đố hiện kết quả đúng hay sai. Chỉ cần biến, if và sự kiện bấm chuột, những ý con đã gặp ở Scratch.

Đừng vội chuyển tuần nếu con chưa tự làm lại được bài của tuần trước mà không nhìn mẫu. Chậm mà chắc vẫn nhanh hơn học vội rồi phải học lại.

Làm ngay được: trang web đầu tiên trong 30 phút

Con chỉ cần máy tính có trình duyệt và một trình soạn thảo. VS Code miễn phí, chạy trên Windows, macOS và Linux; Notepad có sẵn trên Windows cũng dùng được.

1. Tạo thư mục trang-cua-em, bên trong tạo tệp index.html.
2. Gõ (không chép dán) đoạn sau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <title>Trang của em</title>
  <style>
    body { font-family: sans-serif; background: #ebf4fc; }
    h1 { color: navy; }
    .so-thich { background: white; padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>Xin chào, mình là An</h1>
  <p>Mình học lớp 7 và thích vẽ.</p>
  <ul class="so-thich">
    <li>Vẽ truyện tranh</li>
    <li>Đá bóng</li>
  </ul>
  <button onclick="alert('Cảm ơn bạn đã ghé!')">Bấm thử</button>
</body>
</html>

3. Lưu tệp, rồi bấm đúp để mở bằng trình duyệt.
4. Đổi tên, sở thích thành của con. Đổi navy thành crimson hay green, lưu lại và tải lại trang.

Thử thách thêm: thêm một ảnh bằng thẻ img; thêm mục “Món ăn yêu thích”; đổi chữ trên nút.

Tên “An” trong ví dụ chỉ là tên mẫu. Dòng meta charset="utf-8" giúp chữ tiếng Việt có dấu hiển thị đúng; nếu thấy chữ bị lỗi, đó là dòng đầu tiên cần kiểm tra.

Lỗi hay gặp và cách con tự sửa

• Quên đóng thẻ. Mở <p> mà không có </p> khiến đoạn sau bị dính vào. Dạy con thói quen gõ thẻ đóng ngay khi gõ thẻ mở.
• Sai chính tả thuộc tính CSS. colour thay cho color thì trình duyệt bỏ qua, không báo lỗi. Khi màu “không ăn”, hãy đọc lại từng chữ.
• Lưu nhưng không tải lại trang. Trình duyệt vẫn hiện bản cũ. Bấm tải lại sau mỗi lần lưu.
• Đường dẫn ảnh sai. Tệp ảnh phải nằm đúng thư mục và tên viết đúng hoa thường.

Phụ huynh không cần biết code vẫn hỗ trợ được bằng một câu hỏi: “Con vừa sửa dòng nào, trước đó trang thế nào?” Câu hỏi này dạy con thói quen gỡ lỗi từng bước.

Học xong HTML, CSS thì đi tiếp đâu

Khi con đã làm được vài trang, bước tiếp theo là một dự án có mục đích: trang giới thiệu câu lạc bộ, thiệp sinh nhật cho bạn, trang ôn từ vựng cho em. Dự án thật buộc con tự quyết định bố cục, chọn màu, viết nội dung, thay vì chép mẫu.

Song song, nên để con tiếp tục Python hoặc làm quen JavaScript sâu hơn. Danh sách 8 dự án Python nhỏ cho học sinh THCS là gợi ý tốt cho những tuần con muốn đổi gió.

Smart Pens dạy làm web như thế nào

Trong lộ trình Lập trình cho trẻ của Smart Pens, chặng Web dành cho học sinh 12–15 tuổi (lớp 7–10): con tự làm trang web giới thiệu bản thân hoặc dự án, rồi đăng lên mạng để chia sẻ. Một ví dụ sản phẩm cuối chặng là trang thiệp sinh nhật làm bằng HTML và CSS. Lớp học trực tiếp tại trung tâm ở Ngũ Hành Sơn, Đà Nẵng. Nếu con đã thích bài tập 30 phút ở trên, phụ huynh có thể đăng ký học thử để con làm web cùng các bạn.