Học phần 4 / 12
Kỹ thuật chia bố cục trang Web đa cột bằng CSS Flexbox
Tiến độ học phần của bạn: 68% (Đã hoàn thành 17/25 bài học).
Đồ án thực hành
Capstone: Dựng giao diện tòa soạn tin tức
Vận dụng Flexbox container chia 3 cột chính và tối thiểu 6 thẻ nội dung co giãn linh hoạt.
Thời lượng ước tính: 4 giờ thực hành
Lý thuyết
Bài giảng: Cơ chế flex-grow và flex-basis
Phân tích cách trình duyệt tính toán kích thước thực tế khi màn hình thay đổi.
Thời lượng: 25 phút video
Thực hành
Lab 4.1: Căn chỉnh trục chéo với align-self
Tùy biến vị trí một thẻ con độc lập khác biệt với trục chung của container.
Thời lượng: 40 phút bài tập
Thực hành
Lab 4.2: Thay đổi trật tự bằng order
Đưa thông báo khẩn hoặc deal khuyến mãi lên đầu trang mà không sửa HTML gốc.
Thời lượng: 30 phút bài tập
Trắc nghiệm
Quiz: Phân biệt inline-block và display none
15 câu hỏi ôn tập về luồng hiển thị phần tử trong mô hình khối chuẩn W3C.
Thời lượng: 15 phút
Hạn nộp gấp
BTVN Buổi 4 Lần 1: Hoàn thiện 8 mã đề
Nộp mã nguồn đúng thời hạn, kiểm tra ràng buộc không dùng CSS Grid hay float.
Hạn chót: 23:59 ngày maiGhi chú giáo viên: Bài nộp phải tuân thủ chuẩn semantic HTML5.