Giới thiệu học phần
Học phần Nền tảng Web cung cấp kiến thức nền tảng để xây dựng một trang web hoàn chỉnh bằng HTML, CSS và JavaScript thuần, không phụ thuộc framework. Trang này minh hoạ lại nội dung giới thiệu học phần đã có từ Buổi 1, được tổ chức lại bằng cấu trúc thư mục nhiều cấp từ Buổi 3 và nay được dựng bố cục bằng Flexbox ở Buổi 4.
Khu vực này (.noi-dung-chinh) và khu vực bên cạnh
(.sidebar) nằm trong một Flexbox container .layout-chinh,
cột nội dung rộng hơn cột sidebar nhờ flex: 3 1 600px so với
flex: 1 1 240px.
Mục tiêu buổi học
- Phân biệt được display block, inline và inline-block.
- Dựng được bố cục nhiều cột bằng Flexbox container và Flexbox item.
- Đặt được phần tử ở vị trí tuỳ ý bằng position relative/absolute/sticky/fixed.
- Nhúng được nội dung từ trang khác bằng iframe mà không phá vỡ bố cục.
Nội dung học phần
Buổi 1
HTML cơ bản, semantic HTML, bảng dữ liệu, nhúng media.
Buổi 2
CSS cơ bản: 3 cách nhúng, selector, Box Model, đơn vị đo.
Buổi 3
Selector nâng cao, pseudo-class/pseudo-element, đường dẫn nhiều cấp.
Buổi 4 (đang học)
Chia layout: display, positioning, Flexbox, iframe.
Buổi 5
Thiết kế form nhập liệu, kiểm tra dữ liệu phía trình duyệt.
Lịch trình học phần
Cách 1: dùng thẻ table (Buổi 1)
| Buổi học | Chủ đề | Ghi chú |
|---|---|---|
| Buổi 1 | HTML cơ bản, semantic HTML | Đã hoàn thành |
| Buổi 2 | CSS cơ bản | Đã hoàn thành |
| Buổi 3 | Selector nâng cao, liên kết nâng cao | Đã hoàn thành |
| Buổi 4 | Chia layout (Flexbox, display, positioning) | Đang học |
| Buổi 5 | Thiết kế form | Sắp tới |