강의

멘토링

로드맵

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á

398 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,006

Học viên

1,415

Đánh giá

637

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á

  • hjux님의 프로필 이미지
    hjux

    Đánh giá 20

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    楽しくよく受講しました!講義以上に良いです👍 講義カリキュラムも気に入り、 普段楽しんでいたジムコーディング様のYouTubeを通じて講義力もよく知っていたので、この講義を受講することになりました。 単にTailwindCSS文法だけを説明するのではなく レスポンシブな作業のように、実践にすぐに適用できる重要な部分を詳しく扱っていただき、特に役に立ちました。 実践も単純なUI制作ではなく、ポートフォリオやアドミンサイトなどのプロジェクトに進んで、とても有益でした。 私は講義を聞くたびに、復習のために常に学習内容を整理する方ですが、きれいによく準備された講義の教案のおかげで、楽に講義に完全に集中できた部分も学習する立場で良かったです☺️ 理論を超えて、TailwindCSSを活用した効率的なUI制作方法を学ぶことができ、 実際のプロジェクトに適用しながら、TailwindCSSに慣れました! おかげで今後TailwindCSSを積極的に活用し、実務ですぐに適用できるスキルを身につけたという点で本当に満足ですね。 良い講義ありがとうございます! 💪

    • gymcoding
      Giảng viên

      丁寧な受講評ありがとうございました! 🙇‍♂️ 実務にすぐに適用できるように、カリキュラムとプロジェクトを構成した意図がうまく伝えられたようで、とても嬉しいです💪 これからも実務に役立つ講義でお会いしましょう~! ありがとうございます☺️

  • gaabi12040988님의 프로필 이미지
    gaabi12040988

    Đánh giá 18

    Đánh giá trung bình 5.0

    5

    93% đã tham gia

    Vue3の全過程を受講し、間もなく新しいプロジェクトのためにtailwindコースも受講しました。やはり簡潔で正確な説明のおかげで簡単に理解できました。いつもお体に気をつけて、なさることすべてがうまくいきますように。

    • gymcoding
      Giảng viên

      ありがとうございます〜!🙂

  • ugw2ad9280님의 프로필 이미지
    ugw2ad9280

    Đánh giá 5

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Tailwind CSSを初めて学んで使ってみたのですが、適切な講義だったと思います。いくつかのサンプルコードと2つのプロジェクトを通じて、この技術に慣れるのに十分でした!

    • gymcoding
      Giảng viên

      貴重な受講レビューありがとうございます! 👍

  • myvisual8764님의 프로필 이미지
    myvisual8764

    Đánh giá 8

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    • gymcoding
      Giảng viên

      ありがとうございます~!👍

  • kbba785883님의 프로필 이미지
    kbba785883

    Đánh giá 32

    Đánh giá trung bình 4.8

    5

    33% đã tham gia

    本当に最高の名講義です。

    • gymcoding
      Giảng viên

      ありがとうございます!

928.196 ₫

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!