Tạo kiểu UI web tuyệt vời với Tailwind CSS

Khóa học [Tạo UI Web tuyệt đẹp với Tailwind CSS] bao gồm 19 giờ học kỹ lưỡng về Tailwind CSS v3.4.1 - framework hot nhất hiện nay, từ lý thuyết đến thực hành xây dựng website responsive thực tế. Thời lượng học dài không đồng nghĩa với một khóa học tốt. Tuy nhiên, tôi tự tin khẳng định đây là một khóa học vừa có thời lượng dài vừa có chất lượng tốt. Đặc biệt, vì khóa học đi sâu vào chi tiết toàn bộ lý thuyết Tailwind CSS trong suốt 8 giờ 30 phút, nên ngay cả những người còn thiếu kiến thức nền tảng về CSS cũng có thể học tập một cách đầy đủ. Khóa học này được xây dựng tập trung vào kỹ năng styling Tailwind CSS dành cho cả nhà phát triển (Developer) và người thiết kế giao diện (Publisher).

(5.0) 30 đánh giá

337 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

TailwindCSS
TailwindCSS
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
TailwindCSS
TailwindCSS
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

5.0

5.0

pcdoomco4

8% đã tham gia

Lần này, một bài giảng mới ra đời và tôi đã mua nó. Như luôn được chứng minh bằng chi tiết của các bài giảng, tôi cảm thấy Coding Works là câu trả lời đúng, ít nhất là đối với các khóa học liên quan đến webpub, vì các bài giảng được dạy một cách rất chi tiết, theo cách mà chúng ta hãy đi đến tận cùng của câu chuyện. thay vì chỉ lướt qua bề mặt. Không cần phải tìm kiếm các bài giảng của những người hướng dẫn khác. Nếu bạn cảm thấy rằng kỹ năng của mình chắc chắn sẽ được cải thiện khi tham gia đúng bài giảng này, bạn không thể không trở thành một người hâm mộ Coding Works.

5.0

Thomas

100% đã tham gia

Nó đã giúp tôi rất nhiều.

5.0

My Dream

100% đã tham gia

Bài giảng này đã giúp ích rất nhiều cho tôi. Tôi giới thiệu nó cho bất kỳ ai quan tâm đến Tailwind CSS. Cá nhân tôi muốn yêu cầu một bài giảng ứng dụng thực tế TailwindCSS. Giống như "SCSS(SASS)+FLEX thực tế dự án web đáp ứng" Xin vui lòng cho một bài giảng thực tế. (Tôi nghĩ CSS Tailwind là CSS hoàn hảo đối với tôi. ^^)

Bạn sẽ nhận được điều này sau khi học.

  • Học tập và ứng dụng lý thuyết cốt lõi của Tailwind CSS một cách hệ thống

  • Sử dụng Flex và Grid dễ dàng và thuận tiện với Tailwind CSS

  • Các lớp tiện ích Tailwind và tất cả thuộc tính CSS

  • Thực hành tạo ví dụ thực tế sử dụng Tailwind CSS

  • Hiểu rõ lý thuyết CSS thông qua những giải thích dễ hiểu

  • Nhà phát hành web cần kỹ năng và thành quả thực tế với Tailwind CSS

  • Tạo trang web phản hồi giới thiệu hồ sơ năng lực & sơ yếu lý lịch kinh nghiệm bằng Tailwind CSS

[Tin tức cập nhật video] Tailwind CSS v4.0 đã chính thức ra mắt.

Vào ngày 22 tháng 1 năm 2025, 2 video liên quan đến Tailwind CSS v4.0 đã được cập nhật, đồng thời tệp giáo trình PDF cũng đã được cập nhật. Vui lòng kiểm tra video cập nhật và tệp giáo trình PDF.

▼ Danh sách cập nhật video

  • [업데이트] Tailwind CSS v4.0 CLI 설치 및 환경 설정

  • [업데이트] Tailwind CSS v4.0 커스텀 테마 환경 설정

▼ Danh sách cập nhật giáo trình

  • [Tải xuống] Những điều cần lưu ý & Lý thuyết cốt lõi để thành thạo Tailwind CSS

Tạo kiểu Web UI tuyệt đẹp với Tailwind CSS

'Nội dung và ví dụ phong phú với 19 giờ học chất lượng'

'8 giờ 30 phút học lý thuyết Tailwind CSS được hướng dẫn bởi chuyên viên xuất bản web dày dặn kinh nghiệm'

'Xây dựng các ví dụ thực hành để hoàn thiện lý thuyết và xây dựng trang web phản hồi (responsive)'

'Phương pháp giảng dạy không sao chép mã từ trang web chính thức mà tự tay lập trình mọi thứ'

'Tài liệu PDF do Coding Works biên soạn bao gồm từ cách cài đặt Tailwind CSS, thiết lập môi trường cho đến tất cả các lý thuyết'

Bảng xếp hạng CSS Frameworks năm 2023

Tailwind CSS, cái tên liên tục duy trì được sức hút và đứng đầu về mức độ hài lòng trong bảng xếp hạng CSS Frameworks, hiện đang là CSS framework "hot" nhất trên toàn thế giới. Tôi tin rằng lý do tiêu biểu nhất khiến nó trở nên phổ biến chính là khả năng tạo ra những phong cách thiết kế sáng tạo bằng cách sử dụng các utility class, đồng thời thời gian để tạo ra một thiết kế chất lượng cao cũng cực kỳ nhanh chóng.

🎯Trang web chính thức của Tailwind CSS: https://tailwindcss.com/

Nguồn hình ảnh: OSS Insight (https://ossinsight.io/collections/css-framework/)

Tailwind CSS là gì?

Là một CSS framework định hướng Utility-First, nó hiển thị các thuộc tính CSS một cách trực quan thông qua các class, giúp việc sử dụng trở nên nhanh chóng và hiệu quả.

Hầu hết tất cả các thuộc tính CSS cần thiết cho việc tạo kiểu giao diện người dùng web đều được định nghĩa sẵn dưới dạng các lớp tích hợp (built-in classes), vì vậy bạn chỉ cần kết hợp các lớp đã định sẵn đó một cách hợp lý khi sử dụng.

Vì vậy, ưu điểm nổi bật là bạn có thể tập trung tốt hơn và làm việc nhanh hơn vì có thể tạo kiểu ngay trên tệp HTML mà không cần phải xem riêng tệp CSS.

  • Utility-First : Sử dụng các lớp tiện ích (utility classes) đã được thiết lập sẵn để tạo kiểu ngay trong mã HTML

  • Ví dụ, nếu bạn muốn tạo một thẻ div có margin 4 (1rem), padding 2 (0.5rem), căn giữa văn bản và gạch chân, bạn chỉ cần đưa các tên lớp đã được Tailwind thiết lập sẵn một cách trực quan, tức là các utility class, vào trong class. <div class="m-4 p-2 text-center underline">...</div>

  • Trong phương pháp CSS truyền thống, chúng ta đã thực hiện như dưới đây.

  • div { margin: 1rem; padding: 0.5rem; text-align: center; text-decoration: underline; }

So sánh mã Tailwind CSS và CSS thông thường

▲ Giả sử khi tạo UI như trên


▲ Mã nguồn theo phong cách CSS thông thường


▲ Mã nguồn theo phương thức Tailwind CSS


Phong cách tạo kiểu của Tailwind CSS là...

Phương pháp CSS truyền thống gây ra sự bất tiện khi phải chuyển đổi qua lại giữa tệp HTML và tệp CSS để tạo kiểu, nhưng với phương pháp Tailwind CSS, bạn có thể tạo kiểu trong khi chỉ cần nhìn vào mã HTML như ví dụ trên.

Phương pháp Tailwind CSS mang lại cùng một kết quả định dạng nhưng có ưu điểm lớn là độ tập trung cao và tốc độ nhanh vì chỉ cần nhìn vào mã HTML so với phương pháp CSS truyền thống. compared to traditional CSS methods.


Điều mà Coding Works từng coi là nhược điểm lớn nhất của Tailwind CSS trước khi chuẩn bị bài giảng

Khoảng một năm trước khi chuẩn bị cho bài giảng Tailwind CSS, sau khi xem một vài video trên YouTube để tìm hiểu Tailwind CSS là gì, với tư cách là một người làm nghề xuất bản web (publisher), tôi đã có 2 nỗi lo lắng.

Nỗi lo đầu tiên là mặc dù nó tốt thật đấy, nhưng việc lặp đi lặp lại các tên class giống nhau thật quá kém năng suất và làm cho HTML trở nên lộn xộn.. Hơn nữa, vì sử dụng lặp lại các tên class giống nhau nên khi chỉnh sửa không thể sửa một lần là xong mà phải sửa đúng bằng số lượng đã sử dụng... Tôi đã nghĩ rằng liệu nó có thực sự phù hợp để dùng trong thực tế không...

Tuy nhiên, trong quá trình chuẩn bị bài giảng một cách nghiêm túc, tôi đã tìm tòi kỹ lưỡng trên trang web chính thức và vì hầu như không có tài liệu tiếng Hàn nên tôi đã nghiên cứu sâu hơn thông qua các tài liệu và bài giảng của YouTuber nước ngoài. Từ đó, tôi nhận ra rằng những lo lắng trên là vô căn cứ và bản thân đã vội vàng phán xét khi chưa tìm hiểu kỹ. Chúng ta có thể tối thiểu hóa việc sử dụng lặp đi lặp lại các class name bằng cách sử dụng selector con (child selector) như dưới đây. Trong trường hợp sửa đổi theo cách dùng selector con của Tailwind CSS, bạn chỉ cần chỉnh sửa một lần duy nhất tại phần tử cha của các nút bấm.


Nỗi lo thứ hai là với CSS thông thường, ta có thể tạo ra một phong cách tốt rồi dễ dàng tái sử dụng bằng cách chèn tên class vào những nơi cần thiết, nhưng với Tailwind CSS thì liệu có làm được như vậy không... Tôi đã lo rằng nếu vậy thì khi làm việc thực tế sẽ rất bất tiện. Nói cách khác, tôi đã nghĩ rằng không thể tái sử dụng phong cách. Tuy nhiên, như ví dụ dưới đây, bạn có thể sử dụng các component của Tailwind CSS để tái sử dụng phong cách y hệt như CSS thông thường.

Tôi cũng từng như vậy, nhưng hy vọng bạn đừng chỉ nhìn vào những nhược điểm của Tailwind CSS qua các bài blog hay video ngắn trên YouTube mà quay lưng lại với nó như tôi đã từng. Nếu bạn tìm hiểu sâu hơn một chút, bạn sẽ thấy đây là một CSS Framework khá tốt... Nó cho phép bạn thực hiện các kiểu dáng CSS chi tiết và sáng tạo, đồng thời khả năng sử dụng Tailwind CSS sẽ trở thành một lợi thế cạnh tranh rất tốt khi xin việc hoặc chuyển việc.

Sự khác biệt so với các CSS framework khác

Việc cố gắng thay đổi thiết kế trong các khung làm việc CSS truyền thống như Bootstrap hoặc Semantic UI thường rất khó khăn để chỉnh sửa chi tiết và hiệu quả cũng rất thấp. Ngay cả khi muốn sửa đổi một thiết kế đơn giản, bạn cũng phải thực hiện một cách khó khăn thông qua công cụ dành cho nhà phát triển. Tuy nhiên, Tailwind CSS được thiết kế ngay từ đầu để cho phép tạo kiểu giao diện người dùng web với mức độ tự do cao.

Nói cách khác, trong khi các CSS framework truyền thống khiến các trang web khác nhau trông có vẻ giống nhau, thì với Tailwind CSS, bạn có thể tạo ra các phong cách trang web hoàn toàn khác biệt tùy theo người thực hiện.


Nói ngắn gọn về Tailwind CSS thì..

'Vừa tạo kiểu sáng tạo vừa

Framework CSS số 1 giúp rút ngắn thời gian sản xuất'

Bất chấp một vài nhược điểm, Tailwind CSS vẫn sở hữu những ưu điểm và sức hấp dẫn vô cùng lớn


😊Ưu điểm của Tailwind CSS

  • Có thể rút ngắn thời gian phát triển nhờ tốc độ phát triển nhanh chóng.

  • Không cần phải lo lắng về việc đặt tên class.

  • Có thể tập trung làm việc trong khi chỉ cần nhìn vào HTML.

  • Dễ dàng áp dụng hệ thống thiết kế có tính nhất quán.

  • Việc xây dựng bố cục đáp ứng (responsive layout) cực kỳ đơn giản.

  • Có thể khắc phục mã HTML lộn xộn bằng cách sử dụng các component.

  • Dễ dàng bảo trì.

  • Tính độc lập của framework (có thể sử dụng kết hợp với các framework khác) ví dụ: Bootstrap + Tailwind CSS

😞Nhược điểm của Tailwind CSS

  • Cần thời gian và nỗ lực để đạt đến một trình độ nhất định, vì vậy có Learning Curve (đường cong học tập). (Đặc biệt là đối với các nhà phát triển)

  • Các bài giảng học tập được sản xuất bằng tiếng Hàn rất thiếu nên khó tìm kiếm thông tin.


  • Các tên class giống nhau được sử dụng lặp đi lặp lại trong mã HTML.
    - Phần này có thể khắc phục đáng kể nhược điểm đó thông qua bài giảng bằng cách sử dụng bộ chọn con & cháu theo phương thức của Tailwind CSS.

  • Độ phụ thuộc vào tài liệu chính thức khá cao trong giai đoạn đầu cho đến khi trở nên quen thuộc.

  • Tiện lợi và nhanh chóng nhưng mã HTML trở nên dài dòng khiến khả năng đọc hiểu mã nguồn bị giảm đi đáng kể.

  • Có sự bất tiện khi phải tạo môi trường cài đặt CLI và phải biên dịch.

Hỏi) Đối tượng của khóa học Tailwind CSS là nhà phát triển hay người dàn trang web (web publisher)?

A) Đối tượng học viên bao gồm cả lập trình viên và người làm web publisher. Ngoài ra, các nhà thiết kế web, thiết kế UI/UX đã có nền tảng HTML+CSS cơ bản cũng thuộc đối tượng của khóa học này.

  1. Mặc dù việc học lý thuyết Tailwind CSS có một chút khó khăn (Learning Curve), nhưng lộ trình học tập không cao như bạn nghĩ. Một khi đã nắm vững lý thuyết Tailwind CSS, khi bắt tay vào thực hiện các ví dụ xuất bản UI web thực tế, bạn sẽ thấy mọi việc diễn ra vô cùng trôi chảy và nhanh chóng.

  2. Kỹ năng sử dụng Tailwind CSS và thành quả từ việc dàn trang (publishing) bằng Tailwind CSS không chỉ nâng cao năng lực cạnh tranh của các nhà phát triển, mà còn là lợi thế cạnh tranh cho mọi nhóm ngành nghề có nhiệm vụ liên quan đến dàn trang. Lý do kỹ năng sử dụng Tailwind CSS mang lại lợi thế cạnh tranh lớn hơn cho các nhà phát triển là vì họ không nhất thiết phải là nhóm chuyên trách việc dàn trang. Tuy nhiên, nếu một nhà phát triển có thể dàn trang tốt, lại còn đẹp và nhanh chóng, thì họ sẽ có sức cạnh tranh vượt trội hơn cả các Web Publisher chuyên nghiệp.

  3. Khả năng vận dụng Tailwind CSS được cho là ưu tiên hơn so với các CSS Framework truyền thống như Bootstrap. Đó là bởi vì tùy thuộc vào năng lực của người tạo, Tailwind CSS cho phép thiết kế CSS một cách tỉ mỉ và chi tiết.

Sau khi hoàn thành khóa học Tailwind CSS, bạn có thể tạo ra những sản phẩm như thế này


▲ Thiết kế UI thẻ (0) - Tạo Chế độ tối (ft. SVG)

▲ Card UI Design - Crew Contact List

▲ Card UI Design - Real State Price

▲ Section UI Design - Subscribe Form

▲ Section UI Design - Meet the team

▲ Section UI Design - Login Form

▲ Tạo bảng đẹp bằng thẻ table và thẻ div (ft. Lý thuyết giả lớp kiểm tra thứ tự)

▲ Giới thiệu sơ yếu lý lịch & Portfolio dành cho nhà phát triển và người thiết kế giao diện (Publisher) Tailwind CSS - Xây dựng trang web phản hồi (Responsive Web)

🚩Đặc điểm khóa học Tailwind CSS của Coding Works

  • Khóa học Tailwind CSS được giảng dạy bởi người làm nghề xuất bản web (publisher) giàu kinh nghiệm

  • Nội dung và thời lượng học tập phong phú suốt 19 giờ dựa trên các nội dung và ví dụ thực tế đầy đủ.

  • Phương pháp tự tay lập trình mọi thứ từ đầu trong lớp học thay vì sao chép mã từ trang web chính thức của Tailwind CSS

  • Bao gồm tất cả các nội dung lý thuyết của Tailwind CSS, giải thích chi tiết từng phần riêng biệt sau đó vừa thực hành coding vừa học tập.

  • Dựa trên lý thuyết Tailwind CSS, tạo ra các ví dụ thực hành UI web đa dạng và đẹp mắt, làm hài lòng cả những người làm publisher có kinh nghiệm.

  • Tạo trang web hồ sơ năng lực (resume) phản hồi bằng Tailwind CSS để phục vụ việc tìm việc và nâng cao năng lực cạnh tranh cho lập trình viên và người làm nghề publisher (kết quả học tập thực tế)

  • Tài liệu giáo trình PDF do Coding Works biên soạn, bao gồm từ cài đặt Tailwind CSS CLI đến thiết lập môi trường và tất cả các lý thuyết.

  • Bài học xây dựng cấu trúc HTML Wireframe để xuất bản sơ yếu lý lịch kinh nghiệm có tính phản hồi (responsive)

  • Khóa học Tailwind CSS được thiết kế dành cho các nhà phát triển và nhà xuất bản web (publisher)

👍Lý do thời lượng buổi học dài
Giống như khi giảng dạy tại các học viện do nhà nước tài trợ, Coding Works tin rằng để có kỹ năng xuất bản web (publishing) tốt, nhất thiết phải có các bước thực hiện một cách hệ thống. Vì vậy, tôi nghĩ tỷ trọng của các bài học lý thuyết buộc phải cao. Ai cũng cảm thấy các bài học lý thuyết thật nhàm chán. Tuy nhiên, nếu bạn thực hành làm ví dụ mà không có sự hiểu biết về lý thuyết thì kỹ năng của bạn sẽ không thể tiến bộ được.

👍Phương pháp tự tay viết code thay vì sao chép code
Điều tối kỵ nhất khi học CSS Framework chính là sao chép mã HTML từ trang web chính thức rồi chỉnh sửa từng phần. Nếu làm như vậy, bạn sẽ không hiểu được cấu trúc HTML của CSS Framework đó và việc học sẽ không thực sự hiệu quả. Vì vậy, ngay cả khi học Framework, bạn nhất định phải tự tay gõ từng dòng mã một. Có như vậy thì kỹ năng của bạn mới tiến bộ được.

👍Bài học tạo cấu trúc HTML Wireframe
Để tạo các ví dụ thực tế và sơ yếu lý lịch kinh nghiệm có tính năng phản hồi (responsive), chúng ta sẽ học cách tạo cấu trúc HTML wireframe thông qua việc thực hành trực tiếp. Trong trường hợp của Tailwind CSS, vì hầu như không sử dụng tên class tùy chỉnh, nên bạn cần phải tạo cấu trúc HTML wireframe thật tốt để không mắc lỗi khi chèn các tên class của Tailwind CSS.

👍Lý do thực hiện sản phẩm cuối cùng là Sơ yếu lý lịch kinh nghiệm tương thích (Responsive)
Mọi quá trình học tập đều cần có một sản phẩm cuối cùng. Có như vậy bạn mới cảm nhận được thành tựu và trải nghiệm việc áp dụng các lý thuyết đã học vào thực tế là rất quan trọng về mặt kỹ năng. Đó là lý do tại sao chúng ta thực hiện bản sơ yếu lý lịch kinh nghiệm tương thích.

📖 Giáo trình Tailwind CSS (PDF) do Coding Works biên soạn

Giáo trình Tailwind CSS (PDF) bao gồm tổng cộng 45 trang. Tôi đã tổng hợp những cốt lõi thực sự cần thiết từ nội dung đồ sộ trên trang chủ chính thức của Tailwind CSS một cách dễ hiểu nhất. Giáo trình không chỉ bao gồm nội dung lý thuyết mà còn chứa đựng các chi tiết về Tailwind CSS Styling, từ cài đặt ban đầu, cài đặt CLI và thiết lập môi trường cho các dự án thực tế, cho đến cấu trúc wireframe HTML.

Trang web chính thức của Tailwind CSS được viết bằng tiếng Anh và đặc biệt là có một lượng lớn nội dung không thực sự cần thiết, nên nếu bạn học lý thuyết thông qua trang web chính thức này, mức độ tập trung sẽ giảm sút và rất dễ làm mất đi động lực học tập.


📖 Cung cấp bản hoàn thiện và tài liệu tham khảo

Trong các tiết học lý thuyết, chúng tôi cung cấp các hạng mục cốt lõi, bản hoàn thiện của các ví dụ thực hành, cùng với bản hoàn thiện web phản hồi giới thiệu hồ sơ năng lực & sơ yếu lý lịch kinh nghiệm lập trình viên. Ngoài ra, danh sách các trang web hữu ích cho việc xuất bản (publishing) cũng được tổng hợp và cung cấp. Tiết học lý thuyết sẽ được giảng dạy dựa trên giáo trình Tailwind CSS (PDF) do Coding Works tự biên soạn.

Tất cả tài liệu có thể được tải xuống tại [Section 5. Tải xuống tài liệu tham khảo cho học viên].


Lưu ý trước khi học

  • Vì bắt buộc phải sử dụng Tailwind CSS IntelliSense, vui lòng sử dụng Visual Studio Code làm trình soạn thảo văn bản.

  • Nếu đối tượng của khóa học là những người làm nghề xuất bản web (publisher) đã có kinh nghiệm, bạn có thể xem các bài học lý thuyết với tốc độ nhanh và chuyển sang phần thực hành ví dụ thực tế. Tuy nhiên, nếu đối tượng là các nhà phát triển hoặc người làm xuất bản web còn thiếu kiến thức cơ bản, tôi khuyến khích bạn nên học tập phần lý thuyết một cách kỹ lưỡng.

  • Trước khi bắt đầu bài học ví dụ thực tế, bạn hãy giải nén tệp [Tailwind CSS(v3.4.1) Lý thuyết và Bản hoàn thiện ví dụ thực tế], xóa hết các nội dung trong từng thư mục riêng biệt và chỉ để lại thư mục images rồi tiến hành theo bài học.

Kiến thức tiên quyết

  • Bạn chỉ cần có kiến thức cơ bản về HTML+CSS là được.

Lưu ý

  • Nội dung về việc cài đặt và sử dụng Tailwind CSS trong các framework JavaScript như React hoặc Vue sẽ không được đề cập trong khóa học này.

  • Xin lỗi, nhưng khi bạn đặt câu hỏi liên quan đến việc sử dụng Tailwind CSS trong môi trường React hoặc Vue, tôi không thể trả lời được vì tôi không am hiểu về môi trường React hay Vue.

  • Tôi sẽ rất biết ơn nếu bạn chỉ đặt các câu hỏi liên quan đến Tailwind CSS đã được học trong lớp và các câu hỏi về thuộc tính cũng như cách sử dụng CSS thông thường.

Cách sử dụng Visual Studio Code

Khóa học này <SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma> là khóa học được thực hiện bằng Visual Studio Code. Visual Studio Code là một chương trình miễn phí không giới hạn sử dụng. Tất cả các video bài giảng đều được giải thích dựa trên Visual Studio Code.

Vui lòng xem video YouTube của Coding Works dưới đây để làm quen với cách sử dụng cơ bản trước khi bắt đầu học <Phần 1. [Lý thuyết cốt lõi Tailwind CSS] Xử lý các yếu tố cơ bản (phiên bản 3.4.1)>.

  • Cách sử dụng và thiết lập môi trường Visual Studio Code (Xem video)

  • Cách sử dụng Emmet trong Visual Studio Code (Xem video)

  • Cách cài đặt và sử dụng các Extension thiết yếu cho Visual Studio Code (Xem video)

  • Ngăn chặn Full Reload khiến trang bị cuộn lên trên khi chỉnh sửa CSS trong Visual Studio Code (Xem video)

Tải xuống Visual Studio Code từ trang web chính thức (Nhấp vào đây)

  • Video hướng dẫn cài đặt Live Sass Compiler Extension không có trên YouTube nhưng bạn nhất định phải cài đặt nó.

  • Trước khi học lý thuyết, nếu bạn cài đặt các tiện ích mở rộng (extension) bắt buộc và thực hành đơn giản trước, bạn sẽ có thể theo dõi buổi học suôn sẻ hơn nhiều.

🖐Các câu hỏi thường gặp

Nếu bạn có bất kỳ câu hỏi nào khác ngoài những câu hỏi dự kiến dưới đây, vui lòng để lại tại bảng câu hỏi của cộng đồng khóa học, tôi sẽ cố gắng hết sức để giải đáp.

Q) Cần có kiến thức nền tảng về HTML+CSS ở mức độ nào?
Chỉ cần có kinh nghiệm sử dụng HTML+CSS ở mức cơ bản là bạn có thể theo kịp khóa học và đạt được kỹ năng cũng như kết quả như mong đợi.

Hỏi: Có lưu ý nào liên quan đến việc học (môi trường cần chuẩn bị, các lưu ý khác, v.v.) không?
Nội dung bài học rất nhiều và tiến độ diễn ra khá nhanh. Tuy nhiên, tôi sẽ không lướt qua mà không giải thích đầy đủ, thay vào đó tôi sẽ giải thích một cách chi tiết. Tôi tin rằng các bạn sẽ theo kịp tốt. Trước khi bắt đầu các tiết học lý thuyết, hãy chắc chắn rằng bạn đã nắm vững cách sử dụng cơ bản của Visual Studio Code.

Và nếu có thể, bạn nên trang bị môi trường hai màn hình. Đối với các bài học lý thuyết thì không sao, nhưng ở phần cuối khi làm trang web phản hồi cho sơ yếu lý lịch kinh nghiệm, việc sử dụng một màn hình có thể sẽ hơi bất tiện.

Q) Tôi hoàn toàn chưa có kinh nghiệm sử dụng CSS Frameworks thì có sao không?
Hoàn toàn không sao cả. Vì Tailwind CSS có hệ thống khác biệt hoàn toàn so với các framework truyền thống, nên bạn cứ coi như mình đang học cách làm publishing thông thường là được.

Hỏi) Tôi nên làm gì nếu muốn học thêm lý thuyết CSS trong khi đang nghe giảng?
Trong trường hợp này, vì kênh YouTube của Coding Works bao quát hầu hết các lý thuyết CSS, nếu cần thiết, bạn có thể tìm kiếm và học các mục mình muốn trên kênh YouTube của Coding Works.

Vui lòng kết hợp học cùng với các video bài giảng lý thuyết trên kênh YouTube Coding Works Publishing. Tất nhiên không phải tất cả các video lý thuyết đều có trên kênh YouTube, nhưng hầu hết các video lý thuyết quan trọng đều có sẵn. Vì có rất nhiều video, nên để tìm kiếm video, bạn nên tìm theo ví dụ dưới đây.

Kênh YouTube Coding Works Publishing: https://www.youtube.com/codingworks

Giới thiệu người chia sẻ kiến thức

[Styling Web UI tuyệt đẹp với Tailwind CSS] Khóa học được tạo bởi Coding Works, người đã và đang giảng dạy lý thuyết xuất bản, ứng dụng và xây dựng trang web danh mục cá nhân cho hơn 300 học viên trong các khóa học xuất bản do chính phủ tài trợ cho đến nay. Đặc biệt, đây là giảng viên chuyên về giảng dạy xuất bản trong nhiều năm, hướng dẫn hoàn hảo mọi quá trình chuẩn bị tìm việc làm cho người xuất bản từ A đến Z để hầu hết học viên có thể tìm được việc làm ngay sau khi kết thúc khóa học. Ngoài ra, thông qua việc thực hiện các bài giảng liên quan đến xuất bản trên Inflearn, giảng viên cũng nhận được đánh giá là đã giúp ích rất nhiều cho các học viên trên Inflearn.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người cần học lý thuyết cốt lõi và ứng dụng Tailwind CSS một cách hệ thống

  • Nhà phát triển muốn tiếp cận và sử dụng CSS một cách đơn giản và dễ dàng

  • Nhà phát triển giao diện (Publisher) cần bổ sung kỹ năng sử dụng Tailwind CSS để tăng khả năng cạnh tranh khi tìm việc hoặc nhảy việc.

  • Những ai muốn tạo sơ yếu lý lịch cho sự nghiệp lập trình viên có tính năng phản hồi (responsive)

  • Những người muốn tạo sơ yếu lý lịch kinh nghiệm Web Publisher theo dạng responsive (tương thích mọi thiết bị)

Cần biết trước khi bắt đầu?

  • Cơ bản về HTML+CSS

Xin chào
Đây là codingworks

13,045

Học viên

784

Đánh giá

2,122

Trả lời

4.9

Xếp hạng

23

Các khóa học

■ [Hiện tại] Giảng viên Publishing & Front-end được nhà nước hỗ trợ kinh phí
■ [Hiện tại] Freelance Front-end Publisher
■ [Hiện tại] Vận hành kênh YouTube 'Coding Works' chuyên về HTML+CSS+JQUERY Publishing
■ Giảng viên Web Publishing tại Green Computer Academy
■ Giảng viên Web Publishing tại The Joeun Computer Academy
■ Giảng viên Web Publishing tại Ezen Computer Academy
■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng dạy Portfolio thiết kế Web UI/UX
■ Giảng dạy lớp chứng chỉ thực hành Kỹ thuật viên Thiết kế Web
■ Thiết kế UI/UX và Publishing Front-end tại Easy & Edu

 

🌏Danh sách bài giảng CodingWorks trên Inflearn - https://www.inflearn.com/users/@codingworks
🌏Thứ tự học các bài giảng CodingWorks trên Inflearn (Lộ trình học tập) - https://www.inflearn.com/blogs/2351
🌏Blog Publishing CodingWorks trên Inflearn - https://www.inflearn.com/users/@codingworks/blogs
🌏Kênh YouTube Publishing của CodingWorks - https://www.youtube.com/codingworks
🟣Xem phỏng vấn CodingWorks trên Inflearn In-focus: https://www.inflearn.com/pages/infocus-8-20230704

Thêm

Chương trình giảng dạy

Tất cả

52 bài giảng ∙ (19giờ 29phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

30 đánh giá

5.0

30 đánh giá

  • jungsik님의 프로필 이미지
    jungsik

    Đánh giá 43

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Cảm ơn bạn đã làm việc chăm chỉ.

    • codingworks
      Giảng viên

      Cảm ơn bạn đã xem xét của bạn. Bạn đã đạt được 100% chỉ sau chưa đầy một tuần kể từ khi khóa học khai giảng. Bạn thật tuyệt vời!!

  • pcdoomco44801님의 프로필 이미지
    pcdoomco44801

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    8% đã tham gia

    Lần này, một bài giảng mới ra đời và tôi đã mua nó. Như luôn được chứng minh bằng chi tiết của các bài giảng, tôi cảm thấy Coding Works là câu trả lời đúng, ít nhất là đối với các khóa học liên quan đến webpub, vì các bài giảng được dạy một cách rất chi tiết, theo cách mà chúng ta hãy đi đến tận cùng của câu chuyện. thay vì chỉ lướt qua bề mặt. Không cần phải tìm kiếm các bài giảng của những người hướng dẫn khác. Nếu bạn cảm thấy rằng kỹ năng của mình chắc chắn sẽ được cải thiện khi tham gia đúng bài giảng này, bạn không thể không trở thành một người hâm mộ Coding Works.

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá đầu tiên của bạn!!

  • ds4odk님의 프로필 이미지
    ds4odk

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Bài giảng này đã giúp ích rất nhiều cho tôi. Tôi giới thiệu nó cho bất kỳ ai quan tâm đến Tailwind CSS. Cá nhân tôi muốn yêu cầu một bài giảng ứng dụng thực tế TailwindCSS. Giống như "SCSS(SASS)+FLEX thực tế dự án web đáp ứng" Xin vui lòng cho một bài giảng thực tế. (Tôi nghĩ CSS Tailwind là CSS hoàn hảo đối với tôi. ^^)

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá của bạn!!

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    Đánh giá 46

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    Nó đã giúp tôi rất nhiều.

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá của bạn ~

  • twozeronine님의 프로필 이미지
    twozeronine

    Đánh giá 6

    Đánh giá trung bình 4.8

    4

    100% đã tham gia

    Kể cả khi các bạn xem bài giảng thực hành và làm theo thì vẫn có một số sai sót. Ngoài ra, nếu trong bài giảng thực tế có thay đổi thì bạn chỉnh sửa lại nhưng mình vẫn xem lại đoạn code đang làm, cửa sổ web, bài giảng. video và mã nguồn của video bài giảng trên 4 màn hình cùng một lúc. Tôi cảm thấy rất mệt mỏi khi phải xem nó một lúc. Tôi nghĩ sẽ tốt hơn nếu nội dung bài giảng được sắp xếp tuần tự. Tuy nhiên, đây thực sự là một khóa học tốt để học CSS tailwind.

    • codingworks
      Giảng viên

      Cảm ơn bạn đã đánh giá của bạn ~

Khóa học khác của codingworks

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

1.608.475 ₫