Khóa Học Phát Triển Web 101

🤖 Tổng Quan

Khóa học giúp học sinh làm quen với lập trình web thông qua HTML và CSS – hai ngôn ngữ nền tảng để xây dựng và thiết kế trang web. Thông qua các bài học thực hành và dự án sáng tạo, học sinh sẽ học cách tạo ra giao diện web sinh động, trực quan và mang đậm dấu ấn cá nhân.

Kết quả đạt được:

Nắm vững cú pháp và cách sử dụng HTML & CSS.
Tự tay xây dựng một website cơ bản từ đầu.
Hoàn thành dự án cuối khóa thể hiện khả năng sáng tạo và vận dụng kiến thức đã học.

Kỹ năng đạt được:

Thiết kế và bố cục trang web bằng HTML.
Trang trí, định dạng nội dung bằng CSS.
Tổ chức nội dung hợp lý và tạo trải nghiệm người dùng cơ bản.
Tư duy logic, khả năng giải quyết vấn đề qua lập trình.
Thực hành công nghệ một cách sáng tạo và có định hướng.

📚 Học viên sẽ được học gì?

Cách hoạt động và cấu trúc cơ bản của một trang web
Viết văn bản, tạo danh sách, tiêu đề, đoạn văn bằng HTML
Chèn hình ảnh, video, âm thanh vào trang web
Tạo bảng, liên kết nội bộ và liên kết ngoài
Tổ chức bố cục bằng thẻ div, class, id
Trang trí website bằng màu sắc, font chữ, căn chỉnh nội dung
Sử dụng Box Model để định dạng phần tử
Thực hành qua 14 dự án nhỏ gắn với bài học
Hoàn thành 2 dự án lớn: Thư viện ảnh cá nhân, phiên bản Instagram đơn giản tự thiết kế.
Thuyết trình dự án cá nhân.

Nội Dung Khóa Học

Khóa Học Phát Triển Web 101 (12 Buổi)
- Mục tiêu: Học sinh hiểu được cấu trúc cơ bản của một trang web và vai trò của HTML.
  Biết tạo một trang HTML đơn giản.
  Nội dung: Khái niệm website, trình duyệt và vai trò của HTML.
  Cấu trúc cơ bản của một file HTML.
  Thẻ <!DOCTYPE html>, <html>, <head>, <body>, <title>, <p>.
  Hoạt động: Quan sát ví dụ về một trang web thực tế.
  Viết trang HTML đầu tiên có tiêu đề và một đoạn văn giới thiệu.
  Thảo luận: Trang web hoạt động như thế nào?
- Mục tiêu: Học sinh sử dụng thành thạo các thẻ văn bản cơ bản trong HTML.
  Nội dung: Thẻ tiêu đề (<h1> – <h6>), đoạn văn (<p>), ngắt dòng (<br>).
  Định dạng văn bản: in đậm (<strong>), in nghiêng (<em>), gạch chân (<u>).
  Hoạt động: Soạn một trang web giới thiệu bản thân với định dạng văn bản đẹp mắt.
  Trò chơi ghép thẻ HTML với nội dung đúng.
- Mục tiêu: Học sinh biết cách trình bày nội dung dạng danh sách và tạo liên kết.
  Nội dung: Thẻ danh sách: <ul>, <ol>, <li>.
  Tạo liên kết bằng thẻ <a>, thuộc tính href.
  Hoạt động: Viết danh sách sở thích cá nhân có chèn liên kết đến trang ngoài (YouTube, Wikipedia).
  Trò chơi kéo – thả thứ tự đúng của danh sách HTML.
- Mục tiêu: Học sinh biết cách chèn hình ảnh và phương tiện vào website.
  Nội dung: Thẻ <img>, <video>, <audio> và các thuộc tính cơ bản (src, width, controls, v.v.).
  Hoạt động: Tạo một “trang yêu thích” gồm hình ảnh, video và nhạc.
  Trò chơi sửa lỗi HTML có liên quan đến hình ảnh/video sai cú pháp.
- Mục tiêu: Học sinh biết tổ chức bố cục web với div, class, id.
  Nội dung: Thẻ <div>, thuộc tính class, id và cách dùng trong CSS.
  Tổ chức các phần: header, content, footer.
  Hoạt động: Làm một trang có bố cục 3 phần: đầu trang, nội dung, chân trang.
  Ghép hình bố cục web với mã HTML tương ứng.
- Mục tiêu: Học sinh sử dụng bảng để tổ chức và trình bày thông tin.
  Nội dung: Thẻ <table>, <tr>, <th>, <td>.
  Tạo bảng thời khóa biểu hoặc danh sách bạn bè.
  Hoạt động: Làm dự án nhỏ: Tạo bảng thời khóa biểu cho tuần học.
  Trò chơi điền đúng thẻ HTML còn thiếu trong bảng.
- Mục tiêu: Học sinh biết cách làm đẹp trang web bằng CSS.
  Nội dung: Cách viết CSS: nội dòng, trong thẻ <style>.
  Màu sắc, font chữ, căn lề, cỡ chữ.
  Hoạt động: Tô màu, đổi font, điều chỉnh bố cục trang giới thiệu cá nhân.
  Thử thách: Thiết kế lại trang web cũ theo mẫu.
- Mục tiêu: Học sinh hiểu và áp dụng Box Model để điều chỉnh bố cục đẹp mắt.
  Nội dung: Các thành phần: margin, padding, border, content.
  Căn chỉnh phần tử bằng CSS.
  Hoạt động: Trực quan hóa Box Model bằng màu sắc.
  Dự án mini: thiết kế một “thẻ thông tin cá nhân” cân đối và đẹp mắt.
- 🎯 Mục Tiêu Tạo tranh pixel art bằng HTML div và CSS.
  Thực hành làm lưới, tô màu, tạo hình nhân vật và bản đồ trò chơi.
  Áp dụng kỹ thuật CSS để xây dựng giao diện trò chơi đơn giản.
  📚 Nội Dung Ôn lại thẻ div, tô màu bằng CSS.
  Vẽ tranh bằng cách tạo lưới ô vuông.
  Làm 3 phần: Pixel Art cơ bản: Tạo 4 ô vuông có viền, thêm màu, tạo lưới 2×2.
  Project 11 – Space Invaders: Tạo nhân vật pixel kiểu game cổ điển.
  Project 12 – Game World Creator: Xây bản đồ trò chơi bằng lưới.
  🛠️ Hoạt Động Giới thiệu pixel art, cho xem ví dụ (siêu anh hùng, game cổ điển).
  Học sinh làm từng module theo hướng dẫn trong trình soạn thảo mã.
  Vẽ thiết kế trên giấy ô vuông (5×5, 6×6), sau đó mã hóa lại bằng HTML/CSS.
- 🎯 Mục Tiêu Tự tạo trang web thư viện ảnh theo chủ đề.
  Ứng dụng các thẻ HTML & CSS đã học mà không cần hướng dẫn chi tiết.
  📚 Nội Dung Tổ chức nội dung theo bố cục rõ ràng, có chủ đề.
  🛠️ Hoạt Động Thảo luận các chủ đề ảnh (thiên nhiên, động vật…).
  Tạo trang web thư viện ảnh với tiêu đề, bố cục ảnh rõ ràng, có thể thêm mô tả hoặc liên kết.
  Làm thêm một thư viện ảnh khác + viết truyện ngắn minh họa cho ảnh.
- 🎯 Mục Tiêu Tạo thư viện ảnh có biểu tượng “thích” giống Instagram.
  Thực hành bố cục ảnh, thêm biểu tượng tương tác.
  Nhận biết an toàn và đạo đức trên mạng xã hội.
  📚 Nội Dung Ôn lại HTML: img, div, a… Dùng biểu tượng (pictogram) như 👍 hoặc ❤️.
  🛠️ Hoạt Động Thảo luận về an toàn mạng xã hội.
  Tự tạo trang ảnh có tương tác (chọn chủ đề, thêm nút thích).
- 🎯 Mục Tiêu Học sinh hoàn thiện một dự án web cá nhân theo chủ đề đã chọn.
  Rèn luyện kỹ năng tổng hợp kiến thức và thuyết trình.
  Thể hiện tư duy sáng tạo và khả năng lập trình độc lập.
  📚 Nội Dung Chọn lại một trong các chủ đề đã học (ví dụ: Thư viện ảnh, Pixel Art, Mạng xã hội đơn giản, Game World…).
  Tự thiết kế và xây dựng một trang web hoàn chỉnh.
  Chuẩn bị phần trình bày (cấu trúc, điểm nổi bật, quá trình làm, điều học được).
  🛠️ Hoạt Động Học sinh hoàn thiện dự án cuối cùng.
  Lần lượt chia sẻ sản phẩm với lớp (có thể chiếu màn hình hoặc demo trực tiếp).
  Nhận xét từ giáo viên và các bạn.
  Nhìn lại hành trình học và sự tiến bộ.