Responsive Mastery: Xây dựng website chạy trên đa thiết bị (Laptop, Ipad, Iphone...) - Unitop

Share Khóa học Responsive Mastery: Xây dựng website chạy trên đa thiết bị(Laptop, Ipad, Iphone…) của giảng viên Phan Văn Cương

Bạn Sẽ Học Được Gì?

✅ Bạn làm chủ được quy trình chuyển website chạy PC sang chạy trên đa thiết bị như tablet, iphone, ipad, TV

✅ Bạn có được thuật toán tạo mọi loại menu website chạy trên nhiều thiết bị khác nhau

✅ Bạn nắm được cách dàn khung website phù hợp trên đa thiết bị

✅ Bạn sở hữu một công cụ không thể thiếu trong front-end web -> giúp bạn có lương cao

Giới Thiệu Khóa Học 

Nội Dung Khóa Học 

Phần 1: Khởi động
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
Phần 4: Responsive Text
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