Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Publishing

Tailwind CSS thực tế portfolio xuất bản

[Tailwind CSS thực tế portfolio publishing] là quá trình tạo ra hơn 26 ví dụ thực tế khác nhau bằng cách sử dụng Tailwind CSS. Chúng tôi sẽ nhanh chóng tạo ra nhiều ví dụ thực tế và giải thích các lý thuyết cần thiết trong đó. Khóa học này được tạo ra dựa trên phong cách Tailwind CSS do các nhà phát triển và nhà xuất bản tạo ra.

(5.0) 4 đánh giá

90 học viên

  • codingworks
실습 중심
TailwindCSS
HTML/CSS

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

Dịch cái này sang tiếng Việt

  • Tailwind CSS được sử dụng để tạo ra nhiều ví dụ thực tế khác nhau

  • Tailwind CSS chỉ có công cụ phản hồi đơn giản cho thiết bị di động

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

  • Cải thiện sự hiểu biết của bạn về Tailwind CSS với những giải thích dễ hiểu

  • Tailwind CSS cần có kỹ năng và kết quả cho các nhà xuất bản web

  • Dễ dàng và đơn giản tạo ra ứng dụng phản hồi bằng Flex

  • Tailwind CSS để tạo nhiều loại biểu mẫu

[Tin tức cập nhật video] Tailwind CSS v4.0 đã chính thức được phát hành.

Vào ngày 22 tháng 1 năm 2025, hai video liên quan đến Tailwind CSS v4.0 đã được cập nhật và tệp hướng dẫn PDF cũng được cập nhật. Vui lòng kiểm tra video cập nhật và tệp sách giáo khoa PDF.

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

  • [Cập nhật] Cài đặt và cấu hình Tailwind CSS v4.0 CLI

  • [Cập nhật] Tùy chọn chủ đề tùy chỉnh Tailwind CSS v4.0

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

  • [Tham khảo] Thuộc tính đặc biệt của Tailwind CSS và Cấu trúc Wireframe HTML

Tailwind CSS Thực hành Portfolio Xuất bản Mở

Cải thiện kỹ năng Tailwind CSS của bạn bằng cách chỉ tạo các ví dụ thực tế!


Khóa học này sẽ hướng dẫn bạn cách tạo hơn 26 ví dụ thực tế khác nhau bằng Tailwind CSS . Chúng tôi nhanh chóng và đa dạng tạo ra các ví dụ thực tế và giải thích các lý thuyết cần thiết trong đó. Khóa học này được thiết kế tập trung vào cách tạo kiểu Tailwind CSS dành cho nhà phát triển và nhà xuất bản.

Tôi nghĩ nó sẽ giúp ích rất nhiều cho các nhà phát triển và xuất bản web trong việc tìm kiếm việc làm và thay đổi nghề nghiệp.

Tailwind CSS Thực hành Xuất bản danh mục đầu tư

Xuất bản danh mục đầu tư thực tế của Tailwind CSS chỉ bao gồm quá trình tạo ra các ví dụ thực tế . Vì vậy, bạn có thể trải nghiệm niềm vui thực sự của Tailwind CSS mà không cảm thấy nhàm chán. Khi bạn tạo từng ví dụ thực tế, kỹ năng Tailwind CSS của bạn sẽ được cải thiện và bạn có thể lưu giữ các ví dụ thực tế được tạo bằng Tailwind CSS như tác phẩm trong danh mục đầu tư cá nhân của mình.

Bạn sẽ có thể học video thực hành sản xuất Tailwind CSS Portfolio, được tạo ra với nội dung trung thực và giải thích lý thuyết có hệ thống giúp hiểu rõ hơn, tương đương với hơn 14 giờ học trên lớp .


Các tính năng chính của khóa học

  • Xây dựng hơn 26 ví dụ thực tế Tailwind CSS khác nhau (xem video xem trước đã hoàn thành)

  • Hướng dẫn này sẽ chỉ cho bạn chi tiết quá trình tạo cấu trúc khung lưới HTML .

  • Tối đa hóa khả năng xuất bản của bạn bằng cách cải thiện kỹ năng tạo cấu trúc khung HTML.

  • Cung cấp nhiều tài liệu tham khảo để hỗ trợ xuất bản web

Các phần chính của bài giảng

  1. Thiết lập môi trường Tailwind CSS CLI và ghi chú

  2. Ví dụ thực tế về Tailwind CSS - Điều hướng

  3. Ví dụ thực tế về CSS Tailwind - Thiết kế giao diện người dùng thẻ

  4. Ví dụ thực tế về Tailwind CSS - Thiết kế giao diện người dùng phần

  5. Ví dụ thực tế về CSS Tailwind - Nội dung menu tab

  6. Ví dụ thực tế về Tailwind CSS - Thiết kế biểu mẫu đăng nhập

Xếp hạng các khung CSS năm 2024

Tailwind CSS, liên tục được ưa chuộng và được xếp hạng số 1 về mức độ hài lòng trong Bảng xếp hạng CSS Frameworks, là framework CSS hot nhất thế giới hiện nay. Một trong những lý do tiêu biểu nhất khiến nó trở nên hot là bạn có thể tạo kiểu sáng tạo bằng cách sử dụng các lớp tiện ích và thời gian làm việc để tạo ra một thiết kế chất lượng tốt cũng khá nhanh.

Nói tóm lại, Tailwind CSS...

'Trong khi tạo kiểu sáng tạo

Khung CSS số 1 để giảm thời gian sản xuất'


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

Tailwind CSS chính là thứ mà các nhà phát triển cần hiện nay.

Ngoài việc được đối xử ưu đãi, giờ đây nó còn là một yêu cầu đủ điều kiện .




🚩 Các câu hỏi dự kiến ​​liên quan đến bài giảng và những điều cần đọc


H. Tôi có thể tham gia khóa học Tailwind CSS Practical Portfolio Publishing ngay mà không cần tham dự buổi giảng lý thuyết không?

  • Nếu bạn mới làm quen với Tailwind CSS, tôi khuyên bạn nên tham gia bài giảng lý thuyết [Thiết kế giao diện người dùng web tuyệt vời với Tailwind CSS] từ Coding Works và sau đó tham gia bài giảng tương ứng.

  • Nếu bạn đang học khóa học này ngay lập tức, vui lòng học trên trang web chính thức của Tailwind CSS trước và học trong khi vẫn sử dụng trang web chính thức.

  • Hướng dẫn về Tailwind CSS: Tạo giao diện người dùng web tuyệt vời với Tailwind CSS: https://inf.run/pjqKk



H. Bạn có cung cấp HTML hoàn chỉnh được tạo ra cho Tailwind CSS Practical Portfolio Publishing không?

  • Đúng. Trong phần Tải xuống tài nguyên dành cho sinh viên, bạn có thể tải xuống tệp zip chứa toàn bộ các ví dụ thực tế có trong video. (HTML, CSS, JS, hình ảnh, trang tham khảo, văn bản nguồn, PDF khung, v.v.)

  • Trước khi bắt đầu video bài giảng, hãy giải nén tệp nén đã tải xuống, xóa các tệp index.html và style.css, sau đó bắt đầu. Bạn có thể bắt đầu bằng cách tạo cấu trúc HTML cơ bản, loại trừ thư mục nguồn và hình ảnh. Nếu bạn cần tham khảo phiên bản hoàn chỉnh, bạn luôn có thể giải nén tệp và xem lại.


H. Cần có trình độ lập trình web nào trước khi tham gia khóa học?

  • Đầu tiên, bạn cần có hiểu biết cơ bản về HTML+CSS . Ví dụ, nếu bạn không hiểu các thuộc tính float và position, bạn có thể sẽ thấy khó theo dõi. Khóa học này được thiết kế dành cho những người có kỹ năng xuất bản cơ bản. Xin lưu ý!

  • Không cần có kiến ​​thức trước về jQuery hoặc JavaScript. Tuy nhiên, bạn cần phải hiểu những lý thuyết cốt lõi cần thiết của jQuery . Toàn bộ khóa học dựa trên jQuery để tạo ra các tương tác, chẳng hạn như kiểm soát lớp, điều hướng phần tử, v.v. và JavaScript được sử dụng để trải nghiệm các ví dụ, do đó bạn không cần phải lo lắng về kỹ năng JavaScript của mình.



H. Trình tự học các ví dụ có phải được học theo thứ tự từ đầu không?

  • Không cần phải tuân theo thứ tự chính xác của các nghiên cứu ví dụ. Bạn có thể bắt đầu học từ bất kỳ phần nào bạn muốn.


  • Không có mức độ khó cố định cho từng phần. Bạn có thể chọn và nghiên cứu các ví dụ mà bạn muốn học riêng lẻ.


  • [TMI] Có rất nhiều lý thuyết bạn cần biết khi nghiên cứu về xuất bản và tạo ra các ví dụ thực tế. Tôi muốn sắp xếp tất cả các phần lý thuyết và làm thành video, nhưng thực tế là có một số phần khá khó. Vui lòng điền vào các phần còn thiếu thông qua trang web chính thức của Tailwind CSS.


H. Tôi có thể tải xuống bộ ví dụ thực hành và ví dụ lý thuyết đầy đủ ở đâu?

  • Tất cả các tệp hoàn thiện (html, css, js, tệp hình ảnh, v.v.) được tạo từ video lớp học có thể được tải xuống ở phần cuối cùng (Phần 8) được hiển thị bên dưới.

    .


💻 Xem trước kết quả sản xuất ví dụ thực tế về Tailwind CSS


▲ Độ dốc CSS Tailwind


😊 Ví dụ thực tế về Tailwind CSS - Điều hướng


▲ Điều hướng - Điều hướng hàng đầu tiêu chuẩn (3 loại)


▲ Điều hướng - Điều hướng trên cùng phản hồi


▲ Điều hướng - Biểu tượng phương tiện truyền thông xã hội di chuột điều hướng


▲ Điều hướng - Chọn thả xuống tùy chỉnh


▲ Điều hướng - Biểu tượng thanh bên Điều hướng


😊 Ví dụ thực tế về CSS Tailwind - Thiết kế giao diện người dùng thẻ



▲ Thiết kế giao diện thẻ - hiệu ứng di chuột trên thẻ hình (cách sử dụng bộ chọn nhóm)


▲ Thiết kế giao diện thẻ - Sản phẩm mới Thiết kế giao diện thẻ


▲ Thiết kế giao diện thẻ - Thẻ hồ sơ Hover Flip (Lật thẻ 3D)


▲ Thiết kế giao diện người dùng thẻ - Lựa chọn gói đăng ký Apple TV (:có lớp học ảo)


😊 Ví dụ thực tế về Tailwind CSS - Thiết kế giao diện người dùng


▲ Mục Thiết kế giao diện người dùng - Biểu mẫu đăng nhập Glassmorphism


▲ Mục Thiết kế giao diện người dùng - Modal động


▲ Mục Thiết kế giao diện người dùng - Giao diện thẻ vé (Lớp học trực tuyến Frontend)


▲ Mục Thiết kế giao diện người dùng - Thiết kế bảng (Premier League)


▲ Mục Thiết kế giao diện người dùng - Nội dung Accordion với Emoji

▲ Mục Thiết kế giao diện người dùng - Màn hình Gói cước di động (Công cụ chú giải di chuột)


▲ Mục Thiết kế giao diện người dùng - Tạo chế độ tối (ft. Cách sử dụng SVG)


▲ Mục Thiết kế giao diện người dùng - Kỹ năng phản hồi Mục giới thiệu


▲ Mục Thiết kế giao diện người dùng - Mục thu nhỏ thẻ giới thiệu tin tức (Tin tức mới nhất)


▲ Mục Thiết kế giao diện người dùng - Bảng giá gói lưu trữ web (Price Plan)


▲ Mục Thiết kế giao diện người dùng - Phần giới thiệu phản hồi đám cưới (Phần giới thiệu lời chứng thực)


😊 Ví dụ thực tế về Tailwind CSS - Nội dung menu tab


▲ Nội dung menu tab - Nội dung menu tab (phương pháp CSS, phương pháp JQUERY)


▲ Nội dung menu tab - Menu tab ứng dụng hẹn hò dành cho nam và nữ


😊 Ví dụ thực tế về Tailwind CSS - Thiết kế biểu mẫu đăng nhập


▲ Hoạt ảnh nền ứng dụng di động đăng nhập


▲ Biểu mẫu liên hệ phản hồi - Biểu mẫu liên hệ


▲ Hiển thị/Ẩn biểu mẫu đăng nhập mật khẩu


▲ Biểu mẫu liên hệ xác thực CSS - Chế độ tối

Mục 1. Giới thiệu về khóa học

  • [Giới thiệu khóa học] Xuất bản danh mục đầu tư thực hành Tailwind CSS

  • [Xem trước ví dụ thực tế] Tailwind CSS Practical Portfolio Publishing

Phần 2. Thiết lập môi trường Tailwind CSS CLI và ghi chú

  • Sử dụng các lớp tiện ích CSS Tailwind trong môi trường CDN

  • Sửa đổi Tailwind CSS Config trong môi trường CDN và CLI (ft. Web Fonts)

  • Thiết lập môi trường CLI trong Tailwind CSS (ft. Node.js)

  • Sử dụng các lớp tiện ích (Thành phần) và phông chữ web trong môi trường CLI

  • Chuẩn bị tạo ví dụ thực tế và sử dụng gradient (nền, văn bản)

Phần 3. Ví dụ thực tế về Tailwind CSS - Điều hướng

  • Điều hướng - Điều hướng trên cùng tiêu chuẩn (3 loại)

  • Điều hướng - Điều hướng trên cùng đáp ứng

  • Điều hướng - Biểu tượng phương tiện truyền thông xã hội Di chuột điều hướng

  • Điều hướng - Chọn thả xuống tùy chỉnh

  • Điều hướng - Biểu tượng thanh bên Điều hướng

Phần 4. Ví dụ thực tế về CSS Tailwind - Thiết kế giao diện người dùng thẻ

  • Thiết kế giao diện thẻ - Hiệu ứng di chuột qua thẻ hình (Cách sử dụng bộ chọn nhóm)

  • Thiết kế giao diện thẻ - Sản phẩm mới Thiết kế giao diện thẻ

  • Thiết kế giao diện thẻ - Thẻ hồ sơ Hover Flip (Lật thẻ 3D)

  • Thiết kế giao diện người dùng thẻ - Lựa chọn gói đăng ký Apple TV (:có lớp học ảo)

Phần 5. Ví dụ thực tế về Tailwind CSS - Phần Thiết kế giao diện người dùng

  • Mục Thiết kế giao diện người dùng - Biểu mẫu đăng nhập Glassmorphism

  • Mục Thiết kế giao diện người dùng - Modal động

  • Thiết kế giao diện người dùng - Giao diện thẻ vé (Lớp học trực tuyến Frontend)

  • Mục Thiết kế giao diện người dùng - Thiết kế bảng (Premier League)

  • Mục Thiết kế giao diện người dùng - Nội dung Accordion với Emoji

  • Mục Thiết kế giao diện người dùng - Màn hình Gói cước di động (Công cụ chú giải di chuột)

  • Mục Thiết kế giao diện người dùng - Tạo chế độ tối (ft. Cách sử dụng SVG)

  • Mục Thiết kế giao diện người dùng - Giới thiệu mục Kỹ năng phản hồi

  • Mục Thiết kế giao diện người dùng - Tin tức Giới thiệu Thẻ Hình thu nhỏ Mục (Tin tức mới nhất)

  • Mục Thiết kế giao diện người dùng - Bảng giá gói lưu trữ web (Price Plan)

  • Phần Thiết kế giao diện người dùng - Phần giới thiệu đáp ứng đám cưới (Phần giới thiệu lời chứng thực)

Phần 6. Ví dụ thực tế về CSS Tailwind - Nội dung menu tab

  • Nội dung Menu Tab - Nội dung Menu Tab (CSS, JQUERY)

  • Nội dung Menu Tab - Ứng dụng hẹn hò dành cho nam và nữ Menu Tab

Phần 7. Ví dụ thực tế về Tailwind CSS - Thiết kế biểu mẫu đăng nhập

  • Hoạt hình nền ứng dụng di động Đăng nhập

  • Biểu mẫu liên hệ phản hồi - Biểu mẫu liên hệ

  • Hiển thị mật khẩu Ẩn biểu mẫu đăng nhập

  • Biểu mẫu liên hệ xác thực CSS (1) - Chế độ sáng

  • Biểu mẫu liên hệ xác thực CSS (2) - Chế độ tối

Mục 8. [Download] Tải xuống bản đầy đủ và tài liệu tham khảo

  • [Download] Bộ sưu tập đầy đủ các ví dụ thực tế về CSS Tailwind

  • [Tham khảo] Thuộc tính đặc biệt của Tailwind CSS và Cấu trúc Wireframe HTML

  • [Tham khảo] Cài đặt cơ bản của Visual Studio Code

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

Coding Works hiện đang giảng dạy lý thuyết xuất bản, cách sử dụng và cách tạo trang chủ danh mục đầu tư cá nhân cho hơn 300 sinh viên trong các khóa học xuất bản do chính phủ tài trợ. Đặc biệt, giảng viên này đã chuyên về xuất bản bài giảng trong nhiều năm và hướng dẫn hoàn hảo cho sinh viên trong toàn bộ quá trình chuẩn bị xin việc tại một nhà xuất bản từ A đến Z, giúp hầu hết sinh viên tìm được việc làm ngay sau khi hoàn thành khóa học. Ngoài ra, tôi đã nhận được phản hồi tích cực từ sinh viên Inflearn rằng các bài giảng liên quan đến xuất bản của tôi rất hữu ích.

Xem Phỏng vấn InFocus: https://www.inflearn.com/pages/infocus-8-20230704

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

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

  • Tailwind CSS có khả năng bổ sung thêm năng lực cạnh tranh trong việc xin việc và chuyển đổi công việc cho các nhà xuất bản

  • Tailwind CSS là công cụ mà các nhà xuất bản web muốn tiếp cận và sử dụng một cách dễ dàng và đơn giản

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

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

  • Cơ sở HTML+CSS

Xin chào
Đây là

12,544

Học viên

738

Đánh giá

2,105

Trả lời

4.9

Xếp hạng

23

Các khóa học

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

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

Tất cả

42 bài giảng ∙ (14giờ 35phú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ả

4 đánh giá

5.0

4 đánh giá

  • segun408님의 프로필 이미지
    segun408

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    강의해주시느라 너무 고생하셨습니다. 잘 봤어요!! :)

    • 코딩웍스(Coding Works)
      Giảng viên

      첫 수강평 감사드립니다. 응원할게요~!!

  • 정조윤님의 프로필 이미지
    정조윤

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    53% đã tham gia

    섣불리 판단하는 것을 좋아하지 않아 수강 100% 이후에 작성하려 했지만, 너무나 마음에 들고 성장하는 내 자신이 보여서, 코딩웍스라는 분이 참으로 대단하고 간지나게 지존처럼 보이기 시작했습니다. 저는 하나의 강의 혹은 하나의 내용의 기승전결이 명확해야 한다고 생각하는데, 이 분은 그러한 기승전결을 멋있게 풀어낸다고 생각합니다. 앞으로 맛난 거 조금만 덜 사 먹고 코딩웍스님 최신 강의에 투자하렵니다. 정말 학습하는 내내 행복해서 탭댄스를 추게 만드시는군요. 멋진 강의 훌륭한 작품 만들어 주셔서 감사합니다. 코딩웍스님도, 이 리뷰를 보신 여러분도 모두 좋은 하루 되세요!

  • 노수진님의 프로필 이미지
    노수진

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    69% đã tham gia

  • provenceblue1498님의 프로필 이미지
    provenceblue1498

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    55% đã tham gia

    나만 알고 싶은 강의네요 ^^ 재밌습니다. 감사합니다. ❤️

1.164.107 ₫

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!