Hôm nay chúng ta sẽ kết hợp toàn bộ kiến thức đã học từ HTML, CSS Flexbox và JavaScript tương tác để xây dựng một sản phẩm website hoàn chỉnh đầu tay.
"Chúc mừng các em đã đi tới bài học cuối cùng của lộ trình Lập trình Web! Hôm nay, các em sẽ đóng vai trò là những nhà phát triển web thực thụ. Chúng ta sẽ cùng nhau tự thiết kế một trang web giới thiệu Câu lạc bộ Thiên văn học hoặc Vương quốc phép thuật của riêng mình, chứa đầy đủ các tính năng tương tác kỳ diệu!"
Giáo viên hướng dẫn cách tổ chức thư mục dự án sạch sẽ gồm: tệp index.html, tệp style.css ở thư mục gốc và thư mục con assets để chứa toàn bộ hình ảnh, âm thanh phục vụ dự án.
Học sinh sử dụng các thẻ ngữ nghĩa HTML5 để xây dựng cấu trúc trang và áp dụng Flexbox cho thanh menu điều hướng và dàn hàng các cột nội dung.
<header>
<nav class="menu-ngang">
<a href="#khu-vuc-game">Mini Game</a>
<a href="#khu-vuc-mat-ma">Mật Mã</a>
</nav>
</header>
<main>
<!-- Nội dung chính chia khối -->
</main>
Học sinh kết hợp viết code JavaScript để điều khiển toàn bộ các tính năng tương tác trên trang web: nút bấm phát/dừng nhạc nền, ô nhập kiểm tra mật khẩu mở rương bí mật, và nút bấm chơi game đập chuột cộng điểm.
// 1. Logic nhạc nền
function dieuKhienNhac(hanhDong) {
let nhac = document.getElementById('nhac-nen');
if (hanhDong == 'phat') { nhac.play(); }
else { nhac.pause(); }
}
// 2. Logic tính điểm game
let score = 0;
function dapChuot() {
score++;
document.getElementById('diem').innerHTML = 'Điểm: ' + score;
}
Học sinh tự do áp dụng các kỹ năng CSS đã học như: thay đổi màu sắc hài hòa, font chữ đặc biệt, hiệu ứng bo góc border-radius, bóng đổ 3D box-shadow, và đổi trỏ chuột cursor: pointer để làm trang web trở nên lộng lẫy và thu hút người dùng nhấp chuột.
Mơ tả: Tự lập trình trang web Câu lạc bộ Thiên văn học có bố cục dàn trang Flexbox ngăn nắp, chứa: thanh menu điều hướng, một mini-game đập chuột chũi tích lũy điểm số, một chiếc rương báu lượng tử yêu cầu nhập đúng mật mã để hiển thị món quà ẩn, và các nút điều khiển âm thanh nhạc nền.
bai24-1, thư mục con assets chứa toàn bộ tệp ảnh chuột chũi, ảnh rương đóng/mở và tệp nhạc nền mp3. Tạo file index.html và style.css.<header>, <nav> menu ngang, phần <main> chia thành 3 khu vực chức năng độc lập (Nhạc nền, Game đập chuột, Rương mật mã) và <footer>.style.css để dàn trang Flexbox, chỉnh màu nền tối vũ trụ huyền bí, viền neon phát sáng cho các nút bấm điều khiển, bo tròn góc cho các thẻ ảnh.<script>:
let score = 0; và lắng nghe sự kiện click chuột bằng addEventListener trên ảnh nhân vật game để tăng điểm.if-else để khi nhập đúng mật mã, rương mở ra (đổi src ảnh) và hiển thị khối quà bí mật..play() và .pause().