Click chuột lên hình để phóng to
Share Khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev
Mã sản phẩm:
5217458165564555830
Giới thiệu khóa học Chào các bạn, giới thiệu các bạn khóa học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev về tất tần...
Thông tin chi tiết
Giới thiệu khóa học
Chào các bạn, giới thiệu các bạn khóa học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev về tất tần tật chuyển psd thành html/css, hướng dẫn Cắt PSD sang HTML CSS toàn tập. Khóa học cắt PSD sang HTML CSS , Bài tập cắt HTML CSS 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ả.
KIẾN THỨC NHẬN ĐƯỢC TỪ KHÓA HỌC
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
Biết được cách sử dụng Gulp boilerplate do mình phát triển
Học được thêm kiến thức về Pug, viết mixin, sử dụng biến trong Pug..
Học được thêm kiến thức về Sass, viết functions, mixins, điều kiện, biến...
Đúc kết thêm được nhiều kiến thức, tips tricks trong CSS để code giao diện nhanh hơn
Có nhóm hỗ trợ trên Telegram khi bạn gặp khó khăn trong quá trình học
Nắm tốt kiến thức về Responsive để tối ưu giao diện trên các màn hình khác nhau
Và rất nhiều điều, kiến thức bổ ích khác đang chờ đợi các bạn
Bài tập cắt HTML CSS
Chuyển PSD sang HTML Bootstrap
Cắt PSD sang HTML CSS
Hướng dẫn cắt PSD sang HTML toàn tập
Export PSD to HTML
Cắt PSD sang HTML
NỘI DUNG KHÓA HỌC
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
GIẢNG VIÊN: Evondev
 |
| Share Khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev |