Chương 1: Giới thiệu và cài đặt các công cụ
Bài 1: Lời cám ơn, hướng dẫn và giới thiệu khoá học
Bài 2: Các khái niệm cơ bản
Bài 3: Cài đặt Gulp boilerplate
Bài 4: Tìm hiểu cơ bản về Gulp boilerplate
Bài 5: Tìm hiểu file layout trong Pug
Bài 6: Xử lý các lỗi hay gặp khi làm việc với Pug
Bài 7: Kiến thức cơ bản về Pug cho người mới
Bài 8: Mixins trong Pug
Bài 9: Biến trong Pug
Bài 10: Điều kiện trong Pug
Bài 11: Tìm hiểu cấu trúc thư mục styles của Sass
Bài 12: Tạm kết chương 1

Chương 2: Phân tích tổng quan thiết kế
Bài 13: Giới thiệu chương 2
Bài 14: Phân tích màu sắc
Bài 15: Phân tích kiểu chữ
Bài 16: Phân tích khoảng cách
Bài 17: Thiết lập code cơ bản ban đầu
Bài 18: Hướng dẫn cắt ảnh trong Photoshop
Bài 19: Tạm kết chương 2

Chương 3: Phân tích và code block Header
Bài 20: Phân tích tổng quan Header
Bài 21: Code block header cơ bản
Bài 22: Code block header top phần 1
Bài 23: Code block header top phần 2
Bài 24: Code block header top phần 3
Bài 25: Code block header content phần 1
Bài 26: Code block header content phần 2
Bài 27: Code block header content phần 3
Bài 28: Responsive block header phần 1
Bài 29: Responsive block header phần 2
Bài 30: Responsive block header phần 3
Bài 31: Responsive block header phần 4
Bài 32: Responsive block header phần 5
Bài 33: Tối ưu menu trên màn hình điện thoại
Bài 34: Tối ưu code Pug với mixin
Bài 35: Viết mixin size với Sass
Bài 36: Viết mixin absolute center với Sass

Chương 4: Phân tích và code block About
Bài 37: Phân tích tổng quan block About
Bài 38: Code block box với mixin
Bài 39: Hoàn thành block Box
Bài 40: Code HTML block About phần 1
Bài 41: Code HTML block About phần 2
Bài 42: Code Sass block About phần 1
Bài 43: Code Sass block About phần 2
Bài 44: Hướng dẫn viết mixin responsive và mixin flexbox
Bài 45: Làm responsive block About
Bài 46: Áp dụng CSS Scroll snap vào layout
Bài 47: Tối ưu code Pug thành mixin
Bài 48: Tối ưu code block About

Chương 5: Phân tích và code block Number
Bài 49: Code block number phần 1
Bài 50: Code block number phần 2

Chương 6: Phân tích và code block Service
Bài 51: Phân tích và code HTML
Bài 52: Code giao diện với Sass phần 1
Bài 53: Code giao diện với Sass phần 2
Bài 54: Code Responsive phần 1
Bài 55: Code Responsive phần 2
Bài 56: Tối ưu code cho block Service

Chương 7: Phân tích và code block Device
Bài 57: Code block device phần 1
Bài 58: Code block device phần 2

Chương 8: Phân tích và code block Wedo
Bài 59: Phân tích và code HTML
Bài 60: Code Sass phần 1
Bài 61: Code Sass phần 2
Bài 62: Code Sass phần 3
Bài 63: Code Sass phần 4
Bài 64: Code Sass phần 5

Chương 9: Phân tích và code block Quote
Bài 65: Phân tích và code block quote phần 1
Bài 66: Phân tích và code block quote phần 2
Bài 67: Phân tích và code block quote phần 3

Chương 10: Phân tích và code block Team
Bài 68: Phân tích và code block Team phần 1
Bài 69: Phân tích và code block Team phần 2
Bài 70: Phân tích và code block Team phần 3
Bài 71: Phân tích và code block Team phần 4
Bài 72: Phân tích và code block Team phần 5
Bài 73: Phân tích và code block Team phần 6
Bài 74: Phân tích và code block Brands

Chương 11: Phân tích và code block Work
Bài 75: Phân tích và code block Work phần 1
Bài 76: Phân tích và code block Work phần 2
Bài 77: Phân tích và code block Work phần 3
Bài 78: Phân tích và code block Work phần 4
Bài 79: Phân tích và code block Work phần 5
Bài 80: Phân tích và code block Work phần 6

Chương 12: Phân tích và code block People
Bài 81: Phân tích và code block People phần 1
Bài 82: Phân tích và code block People phần 2
Bài 83: Phân tích và code block People phần 3
Bài 84: Phân tích và code block People phần 4
Bài 85: Phân tích và code block People phần 5

Chương 13: Phân tích và code block Story
Bài 86: Phân tích và code block Story phần 1
Bài 87: Phân tích và code block Story phần 2
Bài 88: Phân tích và code block Story phần 3
Bài 89: Phân tích và code block Story phần 4
Bài 90: Phân tích và code block Story phần 5

Chương 14: Phân tích và code block Footer
Bài 91: Phân tích và code block Footer phần 1
Bài 92: Phân tích và code block Footer phần 2
Bài 93: Phân tích và code block Footer phần 3
Bài 94: Phân tích và code block Footer phần 4
Bài 95: Phân tích và code block Footer phần 5
Bài 96: Phân tích và code block Footer phần 6

Chương 15: Chèn thư viện slick slider
Bài 97: Sử dụng slick slider vào dự án phần 1
Bài 98: Sử dụng slick slider vào dự án phần 2
Bài 99: Sử dụng slick slider vào dự án phần 3

Chương 16: Tối ưu code và testing
Bài 100: Tối ưu nội dung dự án
Bài 101: Testing dự án trên các trình duyệt và fix lỗi
Bài 102: Object là gì ? Object cho người mới
Bài 103: Áp dụng object vào mixin trong pug
Bài 104: Tìm hiểu object trong Sass
Bài 105: Áp dụng object vào mixin trong Sass
Bài 106: Tối ưu mixin hoverEffect

Chương 17: Git, Github và deploy dự án cho người mới
Bài 107: Git là gì ? Github là gì ?
Bài 108: Cài đặt Git và tạo tài khoản Github
Bài 109: Đưa dự án lên github toàn tập
Bài 110: Deploy dự án bằng Vercel toàn tập