Trong bài học đầu tiên của khóa học thú vị và thực hành này, học viên sẽ bắt đầu xây dựng một trang web đáp ứng (responsive) cho Khu bảo tồn động vật hoang dã Harmony từ con số không. Họ sẽ tìm hiểu các nguyên tắc thiết kế web quan trọng, bao gồm xây dựng cấu trúc HTML cơ bản, tạo các thành phần chính của bố cục trang web, làm chủ lưới Flexbox và nhiều hơn nữa. Sau bài học này, học viên sẽ sẵn sàng bước vào giai đoạn tiếp theo của dự án, nơi họ sẽ triển khai khả năng đáp ứng cho trang web.
Trong bài học này, học viên sẽ nâng cấp trang web sơ khai từ buổi trước bằng cách thêm các yếu tố thiết kế đáp ứng. Họ sẽ áp dụng chiến lược “mobile-first” và thực hành sử dụng media queries để điều chỉnh giao diện trang web cho nhiều thiết bị khác nhau. Ngoài ra, họ sẽ tận dụng sức mạnh của CSS Flexbox để tạo bố cục dạng lưới linh hoạt cho các phần của trang web.
Trong bài học này, học viên sẽ xây dựng trang “Động vật hoang dã” cho trang web của khu bảo tồn. Họ sẽ tích hợp từng loài động vật vào trang web, cung cấp tên và mô tả ngắn gọn cho từng loài. Trong quá trình học, học viên sẽ ôn lại nhiều nguyên tắc quan trọng của Flexbox, bao gồm căn chỉnh nội dung, quấn phần tử (wrapping) và sắp xếp các phần tử trong lưới.
Trong bài học cuối cùng này, học viên sẽ hoàn thành trang web của Khu bảo tồn động vật hoang dã Harmony bằng cách xây dựng trang “Giới thiệu”. Trang này sẽ cung cấp thông tin chi tiết về tổ chức và hiển thị thông tin giá vé. Trong suốt quá trình thực hành, học viên sẽ củng cố kiến thức về căn chỉnh nội dung, sử dụng bộ chọn con trong CSS, điều chỉnh luồng phần tử, cũng như sử dụng keyframes để tạo hiệu ứng hoạt hình cho các phần tử.
Trong bài học này, học viên sẽ khởi động một dự án mới mang tên “Chiến dịch Rồng”, một trò chơi phòng thủ tháp (tower defense), nơi người chơi nhấp vào các tòa tháp để bảo vệ vương quốc khỏi sự tấn công của rồng. Trong buổi học này, học viên sẽ đặt nền móng cho trò chơi bằng cách tạo giao diện game và trang web đi kèm. Họ sẽ củng cố kiến thức về HTML và CSS, bao gồm các thành phần bố cục trang web và cách sử dụng biến CSS.
Trong bài học này, học viên tiếp tục phát triển trò chơi “Chiến dịch Rồng”. Họ sẽ tập trung vào việc thêm menu bắt đầu và tạo hiệu ứng hoạt hình cho rồng khi chúng di chuyển trên màn hình sau khi người chơi nhấn nút bắt đầu. Đây là cơ hội để học viên củng cố kiến thức về CSS animations, sự kiện click trong jQuery, mảng trong JavaScript và các chủ đề quan trọng khác.
Trong bài học này, học viên sẽ tiếp tục phát triển trò chơi “Chiến dịch Rồng”, lần này tập trung vào việc xác định va chạm giữa rồng, lâu đài và mũi tên. Trong quá trình này, họ sẽ ôn lại cách phát hiện va chạm trong JavaScript, xác định vị trí và kích thước của phần tử, làm chủ sự kiện click và ẩn phần tử khi cần thiết.
Trong bài học cuối cùng này, học viên sẽ hoàn thiện trò chơi “Chiến dịch Rồng” bằng cách thêm điều kiện thắng/thua và hệ thống theo dõi điểm cao. Họ sẽ sử dụng câu lệnh điều kiện để xác định xem người chơi có bị thua khi máu giảm xuống dưới ngưỡng quy định hay không, hoặc có chiến thắng nếu sống sót cho đến khi hết thời gian. Ngoài ra, học viên sẽ học cách lưu điểm số của người chơi vào bộ nhớ cục bộ của trình duyệt (local storage) và truy xuất dữ liệu này khi trang tải lại.
Trong bài học này, học viên sẽ bắt đầu phát triển ứng dụng web có tên “Pixel Pals”. Đây là một ứng dụng bao gồm hệ thống đăng nhập và trò chơi nuôi thú ảo, giúp học viên nâng cao kỹ năng thiết kế giao diện web. Trọng tâm của buổi học này là xây dựng nền tảng trang web và triển khai hệ thống đăng nhập, bao gồm sử dụng biến CSS, hộp nhập liệu HTML, các thành phần bố cục trang web cơ bản và kỹ thuật Flexbox.
Trong bài học này, học viên sẽ đạt được cột mốc quan trọng trong quá trình phát triển ứng dụng Pixel Pals bằng cách triển khai hệ thống đăng nhập. Người dùng có thể đăng ký và đăng nhập vào tài khoản của họ nhờ vào việc sử dụng local storage để lưu trữ dữ liệu một cách an toàn. Ngoài ra, học viên cũng sẽ tìm hiểu cách xử lý giá trị đầu vào, thao tác với đối tượng trong JavaScript và hiển thị nội dung động dựa trên tương tác của người dùng.
Trong bài học này, học viên sẽ mở rộng ứng dụng Pixel Pals bằng cách thêm phần nuôi thú ảo, phần này sẽ xuất hiện sau khi người dùng đăng nhập. Quá trình này bắt đầu bằng việc thiết lập màn hình trò chơi, sau đó cho phép người dùng chọn thú cưng từ danh sách thả xuống (dropdown menu). Khi người dùng chọn thú cưng, hình ảnh tương ứng sẽ được cập nhật bằng jQuery, đồng thời thêm cơ chế cho ăn bằng cách nhấn nút. Đây là cơ hội để học viên ôn lại các khái niệm quan trọng như tạo dropdown menu, lấy giá trị nhập vào và thao tác thuộc tính động của phần tử.
Trong buổi học cuối cùng của khóa học, học viên sẽ hoàn thiện ứng dụng Pixel Pals bằng cách thêm hệ thống thống kê của thú cưng. Họ sẽ triển khai chức năng lưu và tải dữ liệu thú cưng, đảm bảo rằng thông tin của thú cưng sẽ được cập nhật mỗi khi người dùng đăng nhập. Trong quá trình này, học viên sẽ củng cố kiến thức về truy xuất và chỉnh sửa đối tượng JavaScript được lưu trữ trong local storage, thay đổi thuộc tính của phần tử, và cập nhật nội dung động của các phần tử hiển thị.