I - Các Kỹ Thuật Front-end Cơ Bản & Nâng Cao:
1. Dự án Natours - Giới thiệu dự án (phần 1):
1.1. Giới thiệu dự án.
1.2. Xây dựng Header
1.3. Tạo hiệu ứng chuyển động đặc biệt trong CSS3
1.4. Tạo các Button có hiệu ứng phức tạp.
2. Tìm hiểu nâng cao về HTML/CSS.
2.1. Ba cốt lõi trong việc code HTML, CSS tốt.
2.2. Chuyển px sang rem 1 cách hiệu quả.
2.3. Cấu trúc, thành phần và cách đặt tên class (BEM) trong HTML & CSS
2.4. Triển khai BEM cho dự án Natours.
3. Kỹ thuật nâng cao: Giới thiệu về Sass & NPM
3.1. Sass là gì.
3.2. Variables & Nesting
3.3. Mixin, Extends & Functions.
3.4. Cài đặt Sass qua NPM packages.
3.5. Viết và biên dích Sass qua NPM scripts
3.6. Cấu hình tự động Reload trang web khi có sự thay đổi file code.
4. Dự án Natours: sử dụng CSS nâng cao và Sass (phần 2):
4.1. Giới thiệu project.
4.2. Convert CSS của phần 1 sang Sass: Variables & Nesting.
4.3. Thực hiện cấu trúc CSS với Sass.
4.4. Các nguyên tắc cơ bản trong Responsive Design & các loại Layout.
4.5. Xây dựng Grid tùy chỉnh với Floats (ko dung CSS Framework)
4.6. Cắt HTML/CSS cho phần About.
4.7. Cắt HTML/CSS cho phần Features.
4.8. Cắt HTML/CSS cho phần Tours.
4.9. Cắt HTML/CSS cho phần Stories.
4.10. Cắt HTML/CSS cho phần Booking.
4.11. Cắt HTML/CSS cho phần Footer.
4.12. Cắt HTML/CSS cho phần Navigation.
4.13. Làm Popup bằng Pure CSS.
5. Dự án Natours: Responsive Design (Phần 3)
5.1. Giới thiệu về Mobile-First và Desktop-First; Breakpoints.
5.2. Ưu điểm của Sass Mixin trong Media Queries.
5.3. Media Queries: base, typo & layouts.
5.4. Media Queries: Layout, About & features Sections.
5.5. Media Queries: tours, stories & booking sections.
5.6. Responsive Image và xử lý ảnh để tối ưu tốc độ load trang.
5.7. Tổng kết dự án Natours
6. Dự án Trillo: Làm chủ CSS3 Flexbox trong xây dựng layout.
6.1. Tại sao nên xử dụng CSS3 Flexbox
6.2. Flexbox cơ bản: Flex container, Flex items & more…
6.3. Giới thiệu dự án: cấu hình dự án và các thuộc tính tuỳ chỉnh.
6.4. Xây dựng bố cục tổng thể (overall layout) của trang.
6.5. Cắt HTML/CSS cho phần Header.
6.6. Cắt HTML/CSS cho phần navigation.
6.7. Cắt HTML/CSS cho phần hotel Overview.
6.8. Cắt HTML/CSS cho phần Description.
6.9. Cắt HTML/CSS cho phần User Reviews.
6.10. Cắt HTML/CSS cho phần Header.
6.11. Code Media Queries.
6.12. Tổng kết dự án Trillo.
7. Giới thiệu cơ bản về CSS Grid Layouts
7.1. Tại sao nên sử dụng CSS Grid.
7.2. Tự tạo Grid Layout ko dung CSS Framework.
7.3. Các kỹ thuật trong việc xây dựng Grid Layout.
8. Dự án Nexter: làm chủ CSS Grid Layout trong dự án thức tế.
8.1. Giới thiệu và cài đặt dự án.
8.2. Xây dựng bố cục tổng thể.
8.3. Cắt HTML/CSS cho phần features.
8.4. Cắt HTML/CSS cho phần Story.
8.5. Cắt HTML/CSS cho phần Homes.
8.6. Cắt HTML/CSS cho phần Gallery
8.7. Cắt HTML/CSS cho phần Footer.
8.8. Cắt HTML/CSS cho phần Realtors.
8.9. Tối ưu giao diện trên các thiết bị.
8.10. Tổng kết dự án.