강의

멘토링

로드맵

BEST
Programming

/

Front-end

Hoàn toàn làm chủ TailwindCSS: Từ danh mục đầu tư đến quản trị!

Từ giới thiệu về TailwindCSS đến đào tạo thực tế chỉ trong một bài giảng! Thiết kế đáp ứng từ bố cục bố cục cho hai dự án! Chế độ tối! Hãy học nó một cách hoàn hảo.

(4.8) 46 đánh giá

415 học viên

  • gymcoding
실습 중심
포트폴리오
HTML/CSS
TailwindCSS
JavaScript
Responsive Web

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

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

  • Phương pháp phát triển nhanh chóng và tiện lợi bằng cách sử dụng Prettier, IntelliSense và Snippets

  • Cách tạo kiểu phông chữ, màu sắc, nền và viền

  • Sắp xếp và căn chỉnh bố cục bằng Flexbox và Grid

  • Sử dụng Breakpoints của TailwindCSS để thực hiện thiết kế web phản hồi

  • Thiết kế và triển khai phong cách Dark Mode

  • Cách làm cho giao diện người dùng của bạn sống động hơn với các hiệu ứng chuyển tiếp và hoạt ảnh

  • Danh mục đầu tư và trang quản trị! Phương pháp sử dụng thực tế thông qua tổng cộng hai dự án

Làm chủ TailwindCSS: Tạo danh mục đầu tư và trang quản trị

TailwindCSS là một framework giao diện người dùng (UI) dựa trên tiện ích, hữu ích cho cả nhà phát triển và nhà thiết kế front-end. Nó tận dụng các lớp tiện ích để xây dựng giao diện người dùng (UI) một cách nhanh chóng và hiệu quả , giảm thiểu mã không cần thiết và tối đa hóa năng suất .

TailwindCSS đang ngày càng được sử dụng rộng rãi trong các giao diện người dùng tạo sinh (generative UI) và được nhiều nhà phát triển áp dụng . Phương pháp tiếp cận dựa trên tiện ích của nó cho phép cấu hình giao diện người dùng nhanh chóng và linh hoạt, đồng thời hỗ trợ các thay đổi giao diện người dùng động, cải thiện đáng kể năng suất và khả năng bảo trì.

#1 Sự hài lòng về Khung CSS

Việc sử dụng TailwindCSS đang gia tăng 🆙

TailwindCSS vượt trội về tối ưu hóa hiệu suấtchỉ những lớp được sử dụng mới được đưa vào tệp triển khai cuối cùng . Được chứng minh là có thể sử dụng ngay cả trên các nền tảng lớn như Netflix , đây là một công cụ thiết yếu cho các nhà phát triển đang tìm kiếm tốc độ tải nhanh và triển khai giao diện người dùng hiệu quả .

TailwindCSS được sử dụng trong Vercel V0

Netflix Top 10 (với TailwindCSS)

"TailwindCSS là một framework thiết yếu giúp theo kịp các xu hướng phát triển mới nhất, vì vậy bạn nhất định phải học nó."

Video giới thiệu bài giảng trên YouTube của Jim Coding 👍

Sau khi tham gia bài giảng, bạn sẽ có thể tạo ra những kết quả như thế này.

Một danh mục đầu tư gọn gàng thể hiện kỹ năng của tôi một cách nhanh chóng

Hoàn thiện thiết kế trang web portfolio đơn giản nhưng tinh tế với TailwindCSS. Tạo một trang web thiết thực với chế độ tối và thiết kế responsive.

Công cụ quản lý hiệu quả, bảng điều khiển quản trị

Tạo một trang quản trị sẵn sàng sử dụng. Triển khai các thành phần giao diện người dùng cần thiết cho công cụ quản lý của bạn, chẳng hạn như thanh bên, bảng điều khiển và giao diện bảng, trực tiếp với TailwindCSS.

Sau khi hoàn thành khóa học này, bạn sẽ hiểu rõ TailwindCSS , từ kiến thức cơ bản đến ứng dụng thực tế . Bạn sẽ có thể thành thạo bố cục, căn chỉnh giao diện người dùng, thiết kế đáp ứng và chế độ tối , đồng thời tích lũy kỹ năng ứng dụng thực tế bằng cách tạo danh mục đầu tưtrang quản trị . Hơn nữa, bạn sẽ học được tư duy giải quyết vấn đề, giúp bạn tự tin phát triển giao diện người dùng của riêng mình .

Nội dung học tập

Trước khi bắt đầu: Tối ưu hóa môi trường phát triển của bạn!

Tìm hiểu cách thiết lập và tối ưu hóa các công cụ cần thiết để phát triển hiệu quả.

Kiến thức cơ bản về TailwindCSS: Nắm vững các nguyên tắc cơ bản về kiểu dáng!

Tìm hiểu các phương pháp tạo kiểu cơ bản của TailwindCSS, bao gồm Kiểu chữ, Màu sắc và Khoảng cách (Lề, Đệm, Khoảng cách).

Bậc thầy bố cục! Flexbox & Lưới

Tìm hiểu cách xây dựng hiệu quả nhiều bố cục khác nhau bằng Flexbox và Grid.

Thiết kế đáp ứng: Hoàn hảo cho mọi thiết bị!

Dễ dàng triển khai thiết kế web đáp ứng cho nhiều kích thước màn hình khác nhau với TailwindCSS.

Chuyển tiếp & Hoạt ảnh: Giao diện người dùng sống động!

Nâng cao trải nghiệm của người dùng bằng cách áp dụng hiệu ứng chuyển tiếp và hoạt hình vào UI của bạn.

Chế độ tối: Áp dụng chế độ tối đang thịnh hành!

Tìm hiểu cách triển khai chế độ tối nhanh chóng và dễ dàng bằng TailwindCSS.

Thực hành! Hoàn thiện danh mục đầu tư của bạn

Chúng tôi sẽ xây dựng một trang web danh mục đầu tư mà bạn có thể sử dụng trong công việc và áp dụng TailwindCSS vào thực tế.

Tạo một trang quản trị thực tế!

Tạo bảng điều khiển quản trị và các thành phần UI của riêng bạn để tạo ra một trang web có thể áp dụng ngay vào thực tế.

Phân phối dễ dàng! Ứng dụng thực tế

Tìm hiểu cách triển khai các dự án đã hoàn thành trong thực tế thông qua Github Pages.

Bắt đầu với TailwindCSS với React và Vue

Tìm hiểu cách thiết lập TailwindCSS trong React và Vue và nhanh chóng triển khai vào dự án của bạn.

Tài liệu học tập

  • Cung cấp ghi chú bài giảng

  • Mã nguồn học tập TailwindCSS được cung cấp

  • Mã nguồn hoàn chỉnh được cung cấp cho trang web danh mục đầu tư

  • Đã cung cấp mã nguồn hoàn chỉnh cho trang quản trị

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

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

  • HTML và CSS cơ bản nhưng muốn học cách phát triển UI hiệu quả hơn

  • TailwindCSS dành cho những nhà phát triển mới bắt đầu

  • Những người gặp khó khăn với bố cục và vị trí giao diện người dùng

  • Các nhà thiết kế và phát triển muốn sử dụng TailwindCSS trong thực tế

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

  • HTML&CSS

Xin chào
Đây là

25,186

Học viên

1,442

Đánh giá

642

Trả lời

4.9

Xếp hạng

17

Các khóa học

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

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

Tất cả

45 bài giảng ∙ (5giờ 5phú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ả

46 đánh giá

4.8

46 đánh giá

  • Hyungjin님의 프로필 이미지
    Hyungjin

    Đánh giá 20

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    재밌게 잘 수강했습니다! 강의 넘 좋아요 👍 강의 커리큘럼도 마음에 들었고, 평소에 즐겨보던 짐코딩님의 유튜브를 통해 강의력도 잘 알고 있었기 때문에 이 강의를 수강하게 되었습니다. 단순히 TailwindCSS 문법만 설명하는 게 아니라 반응형 작업처럼 실무에 바로 적용할 수 있는 핵심적인 부분들을 자세히 다뤄주셔서 특히 유용했습니다. 실습 또한 단순한 UI 제작이 아니라 포트폴리오와 어드민 사이트 같은 프로젝트로 진행해서 너무 유익했습니다. 저는 강의를 들을 때마다 복습을 위해 항상 학습 내용을 정리하는 편인데, 깔끔하게 잘 준비된 강의 교안 덕분에 편하게 강의에 온전히 집중할 수 있었던 부분도 학습하는 입장에서 좋았습니다.☺️ 이론을 넘어서 TailwindCSS를 활용한 효율적인 UI 제작 방법을 배울 수 있었고, 실제 프로젝트에 적용해보면서 TailwindCSS에 익숙해졌어요! 덕분에 앞으로 TailwindCSS를 적극적으로 활용하며 실무에서 바로 적용할 수 있는 스킬을 익혔다는 점에서 정말 만족스럽네요. 좋은 강의 감사합니다! 💪

    • 짐코딩
      Giảng viên

      정성스러운 수강평 정말 감사드립니다! 🙇‍♂️ 실무에 바로 적용할 수 있도록 커리큘럼과 프로젝트를 구성한 의도가 잘 전달된 것 같아 너무 기뻐요 💪 앞으로도 실무에 도움 되는 강의로 찾아뵙겠습니다~! 감사합니다 ☺️

  • gaabi1204님의 프로필 이미지
    gaabi1204

    Đánh giá 18

    Đánh giá trung bình 5.0

    5

    93% đã tham gia

    Vue3 전 과정을 수강하고 곧 새로운 프로젝트를 위해 tailwind 과정도 수강을 했습니다. 역시 깔끔하고 정확한 설명 덕분에 쉽게 이해를 했습니다. 늘 건강하시고 하시는 모든 일들이 잘 풀리시길 바랍니다.

    • 짐코딩
      Giảng viên

      감사합니다~! 🙂

  • ugw2ad님의 프로필 이미지
    ugw2ad

    Đánh giá 5

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Tailwind CSS를 처음 배워보고 사용해봤는데, 적절한 강의였던 것 같아요. 여러 예제 코드와 두 개의 프로젝트를 통해 이 기술에 익숙해지기에 충분했습니다!

    • 짐코딩
      Giảng viên

      소중한 수강평 감사합니다~! 👍

  • 이용구님의 프로필 이미지
    이용구

    Đánh giá 10

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    • 짐코딩
      Giảng viên

      감사합니다~! 👍

  • foxball님의 프로필 이미지
    foxball

    Đánh giá 32

    Đánh giá trung bình 4.8

    5

    33% đã tham gia

    최고의 명강의 입니다.

924.964 ₫

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

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!