Chia sẻ khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev

[masp]khoa_hoc_evondev[/masp]

[giaban]0đ[/giaban]

[tinhtrang]Còn hàng[/tinhtrang]

[chitiet]

Share khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass 

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

Chào các bạn, Minutop xin 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  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ọc05:30
• Bài 2: Các khái niệm cơ bản03:27
• Bài 3: Cài đặt Gulp boilerplate02:57
• Bài 4: Tìm hiểu cơ bản về Gulp boilerplate04:23
• Bài 5: Tìm hiểu file layout trong Pug04:29
• Bài 6: Xử lý các lỗi hay gặp khi làm việc với Pug07:11
• Bài 7: Kiến thức cơ bản về Pug cho người mới03:56
• Bài 8: Mixins trong Pug07:43
• Bài 9: Biến trong Pug03:41
• Bài 10: Điều kiện trong Pug05:11
• Bài 11: Tìm hiểu cấu trúc thư mục styles của Sass05:15
• Bài 12: Tạm kết chương 101:13

Chương 2: Phân tích tổng quan thiết kế

• Bài 13: Giới thiệu chương 201:30
• Bài 14: Phân tích màu sắc05:46
• Bài 15: Phân tích kiểu chữ05:59
• Bài 16: Phân tích khoảng cách04:30
• Bài 17: Thiết lập code cơ bản ban đầu04:46
• Bài 18: Hướng dẫn cắt ảnh trong Photoshop08:44
• Bài 19: Tạm kết chương 202:01

Chương 3: Phân tích và code block Header

• Bài 20: Phân tích tổng quan Header04:47
• Bài 21: Code block header cơ bản07:15
• Bài 22: Code block header top phần 105:15
• Bài 23: Code block header top phần 206:32
• Bài 24: Code block header top phần 305:39
• Bài 25: Code block header content phần 107:09
• Bài 26: Code block header content phần 207:04
• Bài 27: Code block header content phần 311:55
• Bài 28: Responsive block header phần 108:05
• Bài 29: Responsive block header phần 208:22
• Bài 30: Responsive block header phần 309:34
• Bài 31: Responsive block header phần 407:00
• Bài 32: Responsive block header phần 503:52
• Bài 33: Tối ưu menu trên màn hình điện thoại03:50
• Bài 34: Tối ưu code Pug với mixin09:06
• Bài 35: Viết mixin size với Sass07:42
• Bài 36: Viết mixin absolute center với Sass07:41

Chương 4: Phân tích và code block About

• Bài 37: Phân tích tổng quan block About05:27
• Bài 38: Code block box với mixin07:52
• Bài 39: Hoàn thành block Box06:51
• Bài 40: Code HTML block About phần 105:48
• Bài 41: Code HTML block About phần 203:59
• Bài 42: Code Sass block About phần 107:22
• Bài 43: Code Sass block About phần 204:21
• Bài 44: Hướng dẫn viết mixin responsive và mixin flexbox10:04
• Bài 45: Làm responsive block About07:51
• Bài 46: Áp dụng CSS Scroll snap vào layout07:06
• Bài 47: Tối ưu code Pug thành mixin09:03
• Bài 48: Tối ưu code block About08:27

Chương 5: Phân tích và code block Number

• Bài 49: Code block number phần 108:19
• Bài 50: Code block number phần 209:25

Chương 6: Phân tích và code block Service

• Bài 51: Phân tích và code HTML05:26
• Bài 52: Code giao diện với Sass phần 108:28
• Bài 53: Code giao diện với Sass phần 206:54
• Bài 54: Code Responsive phần 106:20
• Bài 55: Code Responsive phần 206:38
• Bài 56: Tối ưu code cho block Service04:55

Chương 7: Phân tích và code block Device

• Bài 57: Code block device phần 110:43
• Bài 58: Code block device phần 207:00

Chương 8: Phân tích và code block Wedo

• Bài 59: Phân tích và code HTML07:46
• Bài 60: Code Sass phần 108:06
• Bài 61: Code Sass phần 206:16
• Bài 62: Code Sass phần 307:39
• Bài 63: Code Sass phần 406:50
• Bài 64: Code Sass phần 507:33

Chương 9: Phân tích và code block Quote

• Bài 65: Phân tích và code block quote phần 105:59
• Bài 66: Phân tích và code block quote phần 209:55
• Bài 67: Phân tích và code block quote phần 309:32

Chương 10: Phân tích và code block Team

• Bài 68: Phân tích và code block Team phần 109:34
• Bài 69: Phân tích và code block Team phần 211:50
• Bài 70: Phân tích và code block Team phần 309:11
• Bài 71: Phân tích và code block Team phần 409:33
• Bài 72: Phân tích và code block Team phần 510:58
• Bài 73: Phân tích và code block Team phần 609:54
• Bài 74: Phân tích và code block Brands03:12

Chương 11: Phân tích và code block Work

• Bài 75: Phân tích và code block Work phần 108:52
• Bài 76: Phân tích và code block Work phần 211:29
• Bài 77: Phân tích và code block Work phần 306:47
• Bài 78: Phân tích và code block Work phần 408:56
• Bài 79: Phân tích và code block Work phần 507:27
• Bài 80: Phân tích và code block Work phần 611:55

Chương 12: Phân tích và code block People

• Bài 81: Phân tích và code block People phần 107:49
• Bài 82: Phân tích và code block People phần 207:03
• Bài 83: Phân tích và code block People phần 308:30
• Bài 84: Phân tích và code block People phần 406:36
• Bài 85: Phân tích và code block People phần 505:01

Chương 13: Phân tích và code block Story

• Bài 86: Phân tích và code block Story phần 107:28
• Bài 87: Phân tích và code block Story phần 208:17
• Bài 88: Phân tích và code block Story phần 305:07
• Bài 89: Phân tích và code block Story phần 408:42
• Bài 90: Phân tích và code block Story phần 511:50

Chương 14: Phân tích và code block Footer

• Bài 91: Phân tích và code block Footer phần 109:40
• Bài 92: Phân tích và code block Footer phần 213:07
• Bài 93: Phân tích và code block Footer phần 306:25
• Bài 94: Phân tích và code block Footer phần 406:38
• Bài 95: Phân tích và code block Footer phần 510:49
• Bài 96: Phân tích và code block Footer phần 606:22

Chương 15: Chèn thư viện slick slider

• Bài 97: Sử dụng slick slider vào dự án phần 108:35
• Bài 98: Sử dụng slick slider vào dự án phần 210:52
• Bài 99: Sử dụng slick slider vào dự án phần 312:59

Chương 16: Tối ưu code và testing

• Bài 100: Tối ưu nội dung dự án12:46
• Bài 101: Testing dự án trên các trình duyệt và fix lỗi15:31
• Bài 102: Object là gì ? Object cho người mới03:10
• Bài 103: Áp dụng object vào mixin trong pug05:13
• Bài 104: Tìm hiểu object trong Sass03:49
• Bài 105: Áp dụng object vào mixin trong Sass12:45
• Bài 106: Tối ưu mixin hoverEffect06:38

Chương 17: Git, Github và deploy dự án cho người mới

• Bài 107: Git là gì ? Github là gì ?03:10
• Bài 108: Cài đặt Git và tạo tài khoản Github04:19
• Bài 109: Đưa dự án lên github toàn tập08:35
• Bài 110: Deploy dự án bằng Vercel toàn tập08:05

GIẢNG VIÊN: Evondev - một Frontend Developer

Đánh giá khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev: 

Đây là khóa học html đầ tiền trong combo 2 khóa html của evondev. bộ khóa học minutop đánh giá rất cao về chất lượng, tính chuyên môn, chi tiết và rõ ràng. Khóa học giúp cho các bạn mới bắt đầu có nền tảng rất cơ bản, đi từ gốc thay vì đi từ ngọn. Giusp các bạn có nền tảng tốt về thiết kế web. Chúc các bạn thành công

[/chitiet]

Chia sẻ khoá học cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass của Evondev