|
Bài 1.1: Giới thiệu về chương trình Responsive Mastery |
Bài 1.2: Cách vào nhóm hỗ trợ kèm cặp |
Bài 1.3: 5 bước học hiệu quả chương trình |
Bài 1.4: Tư duy học tập đỉnh cao |
Bài 1.5: Phần mềm viết code nên dùng |
Bài 1.6: Cấu trúc thư mục Responsive Mastery |
Phần 2: Nhập môn Responsive Web Design |
Bài 2.1: Vai trò của responsive trong thế giới website + demo apple |
Bài 2.2: Cách kiểm tra responsive trên trình duyệt |
Bài 2.3: Cách kiểm tra Responsive với Add on Resizer |
Bài 2.4: Bật chế độ website chạy trên đa thiết bị (viewport) |
Bài 2.5: 2 tiến trình xử lý Responsive(Mobile First và PC First) |
Bài 2.6: Phân chia code Responsive với Css3 |
Bài 2.7: Ghi đè Css trong Responsive |
Bài 2.8: Query Media cho Mobile First |
Bài 2.9: Query Media cho Pc First |
Phần 3: Layout Responsive |
Bài 3.1: Tư duy responsive layout |
Bài 3.2: Sử dụng max-width trong Responsive |
Bài 3.3: Sử dụng dụng đơn vị % cho layout Responsive |
Bài 3.4: Kích thước width, height viewport |
Bài 3.5: Bài tập: Thay đổi layout website đa thiết bị |
Bài 3.6: Hướng dẫn: #1. Tạo cấu trúc html |
Bài 3.7: Hướng dẫn: #2. Thiết lập layout trên mobile |
Bài 3.8: Hướng dẫn #3: Thay đổi bố cục theo Mobile First |
Bài 3.9: Hướng dẫn: #4. Thay đổi layout website theo Pc First |
|
Bài 4.1: Tư duy responsive cho text |
Bài 4.2: Cách triển khai responsive dành cho text |
Bài 4.3: Đơn vị tương đối EM trong font size responsive |
Bài 4.4: Đơn vị tương đối REM trong font size responsive |
Bài 4.5: Bài tập 2: Responsive tiêu đề website |
Bài 4.6: Hướng dẫn bài tập 2: Responsive tiêu đề |
Phần 5: Images Responsive |
Bài 5.1: Tư duy responsive cho hình ảnh |
Bài 5.2: Triển khai responsive cho hình ảnh |
Phần 6: Spacing Responsive |
Bài 6.1: Tư duy tối ưu padding, margin Responsive |
Bài 6.2: Cách triển khai tối ưu padding, margin Responsive |
Phần 7: Ẩn hiện phần tử trong responsive |
Bài 7.1: Tư ẩn hiện phần tử trong responsive |
Bài 7-2: Cách triển khai ẩn hiện phần tử Mobile First |
Phần 8: Navbar Repsonsive |
Bài 8.1: Tư duy navbar responive |
Bài 8.2: Demo Navbar Responsive |
Bài 8.3: Checklist thực hiện dự án |
Bài 8.4: #1. Tạo cấu trúc file thư mục |
Bài 8.5: #2. Tạo các file css và import vào html |
Bài 8.6: #3. Thêm reset css vào dự án |
Bài 8.7: #4. Định nghĩa class dùng chung |
Bài 8.8: #5. Tạo cấu trúc html của website |
Bài 8.9: #6. Style css navbar-brand |
Bài 8.10: #7. Style main menu |
Bài 8.11: #8. Style css download button |
Bài 8.12: #9. Style wp-content |
Bài 8.13: #10. Fixed menu |
Bài 8.14: #11. Tư duy áp dụng mobile first responsive giao diện |
Bài 8.15: #12. Ẩn phần tử không cần thiết ở thiết bị nhỏ |
Bài 8.16: #13. Xuất hiện icon navabar-toggle trên thiết bị nhỏ |
Bài 8.17: #14. Tạo repsonsive menu |
Bài 8.18: #15. Phân tích sự kiện khi bấm vào navbar toggle |
Bài 8.19: #16. Xử lý sự kiện khi bấm vào navbar toggle |
Bài 8.20: #17. Tự động ẩn menu khi resize và scroll |
Bài 8.21: #18. Tổng kết và tối ưu |
Phần 9: Menu đa cấp Responsive |
Bài 9.1: Giới thiệu responsive menu đa cấp website |
Bài 9.2: Thiết lập checklist thực hiện chức năng |
Bài 9.3: Tạo html của sub-menu |
Bài 9.4: Định dạng hiển thị cho sub-menu |
Bài 9.5: Xử lý hover ẩn hiện sub menu |
Bài 9.6: Tạo sub menu responsive |
| Bài 9.7: Định dạng hiển thị sub menu responsive |
| Bài 9.8: Ý tưởng ẩn hiện sub menu |
| Bài 9.9: Tạo responsive menu toggle |
| Bài 9.10: Xử lý js ẩn hiện menu |
| Bài 9.11: Ẩn sub menu khi resize và scroll |
| Bài 9.12: Tổng kết khoá học |
