Khoá học hướng dẫn cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass Cùng Evondev

Bạn sẽ học được gì?

✅ Học được các bước từ phân tích thiết kế cho đến khi hoàn thành cắt giao diện

✅ Học được thêm kiến thức về Pug, viết mixin, sử dụng biến trong Pug..

✅ Đúc kết thêm được nhiều kiến thức, tips tricks trong CSS để code giao diện nhanh hơn

✅ Học được thêm kiến thức về Sass, viết functions, mixins, điều kiện, biến…

✅ Có nhóm hỗ trợ trên Telegram khi bạn gặp khó khăn trong quá trình học

Giới thiệu khóa học

Khoá học sẽ giúp bạn nâng cao kiến thức hơn và có thêm kiến thức về cắt giao diện từ PSD sang HTML CSS, với hơn 100 videos trong khoá học sẽ giúp bạn từng bước một từ cài đặt Gulp, học thêm các kiến mới về Pug, Sass đến phân tích giao diện chi tiết, cũng như học thêm nhiều vấn đề thực tế, tips tricks hay để có thể hoàn thành giao diện cực nhanh và hiệu quả.

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

Xem thêm khóa học: Khóa học HTML CSS Master – from Zero to Hero của Evondev