Chia Sẻ Khóa Học Tailwind CSS Từ Đầu - Học Bằng Cách Xây Dựng Các Dự Án [Khóa 8068 A]
Tạo các layout đẹp mắt nhanh chóng và hiệu quả bằng cách sử dụng các lớp tiện ích Tailwind CSS.
Bạn sẽ học được gì:
- ✓ Học cách tạo và chỉnh sửa bố cục cực nhanh.
- ✓ Tìm hiểu các lớp tiện ích Tailwind bằng code sandbox.
- ✓ Xây dựng 5 dự án mini và 6 dự án website.
- ✓ Học cách thiết lập dev environment bằng Tailwind CLI.
- ✓ Định cấu hình các style của bạn để tạo bố cục tùy chỉnh.
Đây là một khóa học dựa trên dự án thú vị để tìm hiểu cách tạo các layout tuyệt vời bằng cách sử dụng Tailwind CSS framework và cảm thấy thoải mái khi sử dụng các utility class thay vì một thứ gì đó như Bootstrap, sử dụng component-based classes. Hãy cùng xem sơ lược cho khóa học này :
1. Sandbox:
Tôi không muốn nhảy ngay vào các dự án, mặc dù bạn chắc chắn có thể nếu bạn muốn. Vì vậy, hai phần đầu tiên, chúng ta sẽ làm việc trong một coding sandbox. Trong mỗi video mới trong các phần này, chúng tôi sẽ có một file mới để thử nghiệm và tìm hiểu tất cả về một số khía cạnh nhất định của Tailwind. Ví dụ: chúng tôi sẽ có các page/video cho màu sắc, kiểu chữ, khoảng cách, flex classes, và nhiều hơn nữa. Điều này cho phép chúng tôi tiếp cận tất cả các phần của Tailwind theo một thứ tự cụ thể, thay vì chỉ nhảy ngay vào các dự án.
2. Các Mini-Project:
Tiếp theo, chúng ta sẽ lấy những gì chúng ta học được trong môi trường sandbox và sử dụng nó để tạo một số dự án nhỏ. Đây là những thứ sẽ mất 10 - 20 phút để tạo và chúng tôi sẽ thực hiện tất cả trong một video cho mỗi dự án. Các dự án nhỏ bao gồm:
- ✓ Email Subscribe Card.
- ✓ Pricing Grids.
- ✓ Product Modal.
- ✓ Image Gallery.
- ✓ Login Modal.
Tôi thậm chí có thể thêm nhiều dự án nhỏ sau này. Những thứ này sẽ giúp bạn đỡ bỡ ngỡ bằng cách tạo ra một thứ gì đó.
3. Website Project:
Tiếp theo, chúng tôi sẽ bắt đầu làm việc trên các website landing-page lớn hơn. Điều này thực sự sẽ đưa những gì bạn học được vào bài test. Sẽ có 6 website khác nhau. Tất cả chúng đều rất hiện đại và sạch sẽ. Chúng tôi đã hợp tác với Frontend Mentor cho các thiết kế. Một số dự án sẽ có một chút javaScript cho những thứ như hamburger menu, tab và một số validation. Chúng ta hãy xem các dự án:
- ✓ Clipboard Website - Landing page sản phẩm phần mềm đơn giản. Tập trung chủ yếu vào flexbox và alignment. Một số hình ảnh nền, v.v.
- ✓ Loopstudios - Website của công ty VR với hình ảnh đẹp mắt, responsive mobile menu với một số JavaScript, gradient overlay effects.
- ✓ Shortly - Website cho một công cụ rút gọn liên kết. Chúng tôi sẽ có một responsive menu đẹp mắt và thêm một chút JavaScript để validation một số form và làm việc với DOM.
- ✓ Testimonial Grid - Một dự án mà chúng tôi tập trung vào việc sử dụng các grid class của Tailwind.
- ✓ Fylo - Trang sản phẩm có tính năng light/dark mode. Chúng tôi sẽ thêm một số JavaScript để lưu chế độ màu vào bộ nhớ local. Chúng tôi cũng sẽ có một dynamic tab component cho FAQ.
- ✓ Bookmark - Bookmark manager extension landing page. Website này sẽ có một số hình nền động, một hamburger menu và một số tab sẽ sử dụng JavaScript.
Khóa học này dành cho ai:
- ✓ Bất kỳ ai muốn trở nên tốt hơn trong việc tạo bố cục website và giao diện người dùng.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU