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ả.
PSD là gì?
PSD là viết tắt của “Photoshop Document”. Đây là định dạng file của phần mềm chỉnh sửa ảnh Adobe Photoshop. File PSD bao gồm đầy đủ thông tin về lớp, đường viền, màu sắc và các yếu tố khác của hình ảnh. Do đó, file PSD cung cấp cho người dùng khả năng chỉnh sửa hình ảnh với độ chính xác cao hơn so với các định dạng hình ảnh khác. Tuy nhiên, file PSD thường có kích thước lớn và không thể được chia sẻ hoặc sử dụng trực tiếp trên các trình duyệt web.?
HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo nên các trang web. HTML cho phép tạo cấu trúc, định dạng và kết nối các phần tử trên trang web.
CSS là gì?
CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để tạo ra các hiệu ứng định dạng cho trang web, bao gồm màu sắc, font chữ, kích thước và vị trí của các phần tử.
Gulp là gì?
Gulp là một công cụ quản lý luồng công việc (workflow) trong lập trình web. Gulp giúp tối ưu hóa mã nguồn, tạo các tệp tin đầu ra (output files) và kiểm tra lỗi để tạo ra các trang web nhanh hơn và hiệu quả hơn.
Pug là gì?
Pug là một ngôn ngữ template được sử dụng để tạo ra các trang web. Pug cho phép tạo ra mã HTML theo cấu trúc đơn giản hơn và đồng thời cũng tạo ra các trang web tối ưu hơn.
Sass là gì?
Sass là một ngôn ngữ định dạng kiểu cho CSS. Sass cho phép tạo ra các stylesheet (tập tin CSS) đơn giản hơn và tiết kiệm thời gian hơn bằng cách sử dụng các biến, hàm và module trong CSS.
Bạn sẽ nhận được ở Khoá học hướng dẫn cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass
- 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
Nội dung học tập Khoá học hướng dẫn cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass
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 code hơn với global class
Chương 17: Git và github 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: Các lệnh cơ bản cần biết trong git
- Bài 110: Repository github cho người mới
- Bài 111: Đưa dự án lên github
- Bài 112: Lưu ý khi làm việc với git nên biết
Chương 18: Deploy dự án lên mạng bằng Vercel hoặc Github Pages
- Bài 113: Deploy dự án toàn tập
Có nhóm hỗ trợ khi gặp khó khăn khi học hay không ?
Có nhóm hỗ trợ trên Telegram khi bạn gặp khó khăn trong quá trình học
Có được hỗ trợ 1 kèm 1 hay không ?
Vì số lượng học viên đông nên mình chỉ hỗ trợ trong nhóm Telegram
Khoá học này phù hợp cho ai ?
Khoá học này phù hợp cho những bạn đã có kiến thức nền tảng về HTML CSS và Sass muốn học cắt PSD sang HTML CSS để nâng cao trình độ hơn nữa
Học xong khoá này thì tôi có thể làm được gì ?
Học xong khoá này bạn sẽ nắm được quy trình từng bước phân tích thiết kế cho đến khi hoàn thành giao diện, ngoài ra còn biết sử dụng Gulp, Pug và Sass tốt để có thể hoàn thành giao diện một cách tối ưu và nhanh nhất
Tôi chưa có nền tảng cơ bản thì học ở đâu trước ?
Đừng lo lắng, mình cũng có xây dựng khoá học HTML CSS cơ bản cho người mới nếu bạn chưa có kiến thức tại link này nha: evondev.com/khoa-hoc-html-css
Tôi chưa có kiến thức về Sass thì mua học được không ?
Bạn có thể xem trước video này để nắm kiến thức cơ bản để có thể học khoá học này tốt nhất nhé: https://www.youtube.com/watch?v=77QwgOBOg7Y&ab_channel=evondev
