TỔNG QUAN KHÓA HỌC
“LÀM WEB HOÀN CHỈNH VỚI HTML, CSS, JAVASCRIPT” Thời lượng: 12 buổi × 90 phút
I. MỤC TIÊU KHÓA HỌC
- Học sinh hiểu và sử dụng HTML, CSS, JS để tạo website từ đầu
- Biết cách xây dựng layout, giao diện, hiệu ứng, và tương tác
- Có thể thiết kế và triển khai một dự án web cá nhân (portfolio, landing page, blog...)
- Phát triển kỹ năng học qua dự án thực tế, tự học từ tài liệu nước ngoài, dùng công cụ chuyên nghiệp
II. ĐỐI TƯỢNG HỌC
- Học sinh từ 12–18 tuổi
- Đã biết sử dụng máy tính cơ bản
- Chưa cần biết lập trình trước đó
- Có khả năng làm việc độc lập và theo nhóm
III. NỘI DUNG KHÓA HỌC (12 BUỔI)
| Buổi | Chủ đề | Kết quả đạt được |
|---|---|---|
| 1 | HTML cơ bản | Tạo trang giới thiệu bản thân |
| 2 | HTML nâng cao + thực hành layout | Làm form đăng ký, bảng thông tin |
| 3 | CSS cơ bản: màu, font, class, id | Trang giới thiệu có style cá nhân |
| 4 | Box model + Flexbox | Chia layout 2–3 cột linh hoạt |
| 5 | CSS nâng cao: hover, transition | Giao diện web sống động, đẹp mắt |
| 6 | Dự án Mini 1: Giới thiệu sản phẩm | Web có layout, style, nội dung thật |
| 7 | JavaScript cơ bản: biến, sự kiện, DOM | Làm nút ẩn/hiện, đổi theme, xử lý click |
| 8 | Form validation và xử lý input | Cảnh báo khi điền sai, phản hồi người dùng |
| 9 | Dự án Mini 2: Landing Page tương tác | Web có nội dung, hiệu ứng, xử lý bằng JS |
| 10 | Responsive web + media query | Web xem tốt trên cả điện thoại và máy tính |
| 11 | Tự làm Portfolio cá nhân | Web giới thiệu cá nhân có thông tin, liên kết |
| 12 | Tổng kết + Deploy web online | Đăng web lên GitHub Pages hoặc Netlify |
IV. PHƯƠNG PHÁP GIẢNG DẠY
- Học qua dự án thật → làm trước, giải thích sau
- Cung cấp mẫu web để phân tích và bắt chước
- Khuyến khích sáng tạo, tự chọn màu, bố cục, nội dung
- Học sinh được chấm điểm theo checklist chuyên nghiệp
V. SẢN PHẨM CUỐI KHÓA
Mỗi học sinh sẽ có:
- 1 website cá nhân (Portfolio)
- 2 website nhỏ (giới thiệu sản phẩm, landing page)
- Tài khoản GitHub chứa toàn bộ project đã deploy online
VI. CÔNG CỤ HỌC TẬP
- VS Code + Live Server
- Trình duyệt Chrome
- Figma (để xem mẫu web nếu cần)
- GitHub Pages / Netlify
VII. ĐỊNH HƯỚNG PHÁT TRIỂN SAU KHÓA HỌC
- Tiếp tục học JavaScript nâng cao (API, animation, game)
- Làm web kết hợp framework: React, Tailwind, Vue
- Học lên lập trình web backend (Node.js, Firebase, PHP...)
- Tham gia các cuộc thi web design hoặc lập trình
GỢI Ý TÀI LIỆU THAM KHẢO
- https://developer.mozilla.org/en-US/
- https://roadmap.sh/frontend
- https://css-tricks.com
- https://javascript.info
| Buổi | Chủ đề chính | Mục tiêu | Nội dung chi tiết | Bài tập |
|---|---|---|---|---|
| 1 | Biến, kiểu dữ liệu, toán tử | Nắm vững cú pháp cơ bản JS | var, let, const, kiểu dữ liệu, toán tử so sánh, logic | Viết chương trình kiểm tra số chẵn/lẻ, tuổi hợp lệ |
| 2 | Câu điều kiện & vòng lặp | Thành thạo if, switch, for, while | if-else, switch, for, while, do-while | In bảng cửu chương, kiểm tra số nguyên tố |
| 3 | Hàm trong JavaScript | Hiểu cách khai báo & gọi hàm | Hàm thường, arrow function, tham số mặc định, return | Viết hàm kiểm tra số nguyên tố, tính tổng dãy số |
| 4 | Mảng và các phương thức | Sử dụng thành thạo map, filter, reduce | Mảng, duyệt mảng, các hàm xử lý mảng | Lọc số chẵn/lẻ, tính trung bình mảng |
| 5 | Đối tượng & Object nâng cao | Quản lý dữ liệu dạng đối tượng | Object literal, truy xuất, thêm/xóa key, destructuring | Tạo object học sinh, quản lý danh sách |
| 6 | Hàm callback & Closure | Hiểu cách JS xử lý hàm nội | Callback, closure, scope | Viết hàm tạo bộ đếm (counter) bằng closure |
| 7 | DOM cơ bản | Làm việc với HTML bằng JS | getElementById, querySelector, thao tác DOM, sự kiện | Làm form đơn giản: nhập tên, in ra greeting |
| 8 | DOM nâng cao & Form | Biết cách xử lý form bằng JS | DOM event (submit, keyup), validation cơ bản | Form tính chỉ số BMI |
| 9 | Bất đồng bộ & Fetch API | Gửi HTTP request trong JS | Promise, async/await, fetch | Gọi API giả (JSONPlaceholder), hiển thị danh sách |
| 10 | Tổng ôn JS + Mini Project | Củng cố kiến thức JS cơ bản | Ôn lại toàn bộ phần JS | Làm mini project: To-do List đơn giản |
| 11 | Làm quen TypeScript | Hiểu sự khác biệt JS/TS | Kiểu dữ liệu trong TS, type alias, union, tuple, enum | Chuyển project todo JS sang dùng TS |
| 12 | Interface & Function TS | Sử dụng type & interface đúng cách | Interface, optional property, function với TS | Viết function kiểm tra dữ liệu học sinh |
| 13 | Class và OOP trong TS | Viết class theo kiểu TS | Class, access modifier, kế thừa, constructor | Tạo class Student, Classroom |
| 14 | Generic trong TS | Viết hàm tổng quát linh hoạt | Generic function, generic class, extends, constraint | Tạo DataStore<T> lưu nhiều loại dữ liệu |
| 15 | Tổng ôn TypeScript | Củng cố kiến thức OOP & type | Tổng kết các kiến thức TS đã học | Viết ứng dụng quản lý sản phẩm nhỏ |
| 16 | Làm quen React & JSX | Hiểu cấu trúc component | Create React App, JSX, render component | Hello World component, hiển thị biến |
| 17 | Props & State | Truyền dữ liệu và thay đổi dữ liệu | props, useState, sự kiện (event handler) | Counter App: nút tăng giảm |
| 18 | Component nâng cao | Hiểu danh sách, điều kiện | map, key, conditional rendering, ternary | Hiển thị danh sách sản phẩm |
| 19 | useEffect & Fetch API | Tích hợp dữ liệu bên ngoài | useEffect, fetch dữ liệu từ API | Gọi API user, hiển thị danh sách người dùng |
| 20 | Form & Input Control | Xử lý form React | Controlled component, onChange, validation | Form nhập thông tin người dùng |
| 21 | React Router DOM | Tạo SPA nhiều trang | react-router-dom, Routes, Link, useParams | Tạo 2 trang: Home / Detail |
| 22 | React + TS cơ bản | Sử dụng TypeScript trong React | Định nghĩa type cho props, state, FC | Todo App viết lại với React + TS |
| 23 | Tổng kết & Hoàn thiện project | Kết hợp kiến thức JS, TS, React | Làm project: Blog/Todo App hoàn chỉnh | Thêm chức năng xoá/sửa/lọc |
| 24 | Thuyết trình và triển khai | Thuyết trình & deploy sản phẩm | Hướng dẫn triển khai lên Vercel/Netlify | Thuyết trình sản phẩm nhóm/cá nhân |