PricingLoginStart free
Tailwind CSS Academy logo
HTMLWebTahap A1 → B222 bahasa

Tailwind CSS Academy

Kuasai rangka kerja CSS berasaskan utiliti yang dipercayai oleh OpenAI, Vercel dan Shopify. Pelajari setiap utiliti, reka bentuk responsif, mod gelap, animasi dan pengoptimuman untuk produksi. Laluan pembelajaran CoddyKit yang merangkumi 30 kursus pendek dan 120 pelajaran interaktif, dengan tutor kecerdasan buatan 24/7 di sisi anda.

Kursus
30
Pelajaran
120
Langkah interaktif
1,559
Percuma untuk bermula
Kursus 1
Kurikulum

30 kursus dalam laluan ini

Setiap kursus dalam laluan Tailwind CSS Academy, mengikut urutan pembelajaran. Kursus pertama adalah percuma.

1

A14 pelajaranPercuma

Kenali falsafah berteraskan utiliti di sebalik Tailwind CSS dan fahami perbezaannya daripada rangka kerja CSS tradisional seperti Bootstrap. Pelajari cara menyediakan Tailwind dalam projek dan menuli…

  1. 1CSS Berteraskan Utiliti Diterangkan
  2. 2Memasang dan Mengkonfigurasi Tailwind
  3. 3Halaman Tailwind Pertama Anda
  4. +1 lagi
Mula belajar secara percuma
2

A14 pelajaranPRO

Kuasai set utiliti tipografi Tailwind yang kaya untuk mengawal saiz fon, ketebalan, ketinggian baris, jarak huruf dan penjajaran teks. Pelajari cara menghasilkan teks yang mudah dibaca dan menarik se…

  1. 1Saiz Fon dan Ketebalan Fon
  2. 2Warna Teks dan Kelegapan
  3. 3Ketinggian Baris dan Jarak Huruf
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
3

A14 pelajaranPRO

Terokai palet warna Tailwind yang luas dan pelajari cara menggunakan warna latar belakang, kecerunan serta imej latar belakang. Fahami cara menggunakan pengubah suai kelegapan dan mencipta permukaan…

  1. 1Palet Warna Tailwind
  2. 2Kecerunan Latar Belakang
  3. 3Pengubah Kelegapan dan Warna
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
4

A14 pelajaranPRO

Pelajari skala jarak Tailwind yang konsisten untuk menambah margin dan padding pada mana-mana unsur. Fahami pintasan berarah serta margin negatif untuk mengawal reka letak dengan tepat.

  1. 1Skala Jarak Tailwind
  2. 2Utiliti Ruang Dalam
  3. 3Utiliti Ruang Luar dan Ruang Luar Automatik
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
5

A14 pelajaranPRO

Gunakan reka letak CSS Flexbox melalui utiliti flex Tailwind tanpa menulis satu baris CSS tersuai pun. Bina reka letak mendatar dan menegak, kawal penjajaran serta urus pembalutan dengan mudah.

  1. 1Mendayakan Flex dan Arah
  2. 2Penjajaran Kandungan dan Item
  3. 3Pertumbuhan, Pengecutan dan Asas Flex
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
6

A24 pelajaranPRO

Manfaatkan CSS Grid melalui utiliti grid Tailwind untuk membina reka letak dua dimensi yang kompleks. Takrifkan lajur, baris dan kawasan menggunakan nama kelas yang mudah serta kawal penempatan item…

  1. 1Menentukan Lajur Grid
  2. 2Rentangan Lajur dan Baris
  3. 3Baris Grid dan Peletakan Automatik
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
7

A24 pelajaranPRO

Kawal dimensi unsur menggunakan utiliti lebar, tinggi, kekangan minimum/maksimum dan nisbah aspek Tailwind. Bina komponen responsif serta bersaiz tetap dengan yakin.

  1. 1Utiliti Lebar
  2. 2Utiliti Tinggi
  3. 3Kekangan Minimum dan Maksimum
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
8

A24 pelajaranPRO

Gayakan tepi dan kedalaman unsur dengan utiliti sempadan serta bayang-bayang Tailwind. Pelajari cara menambah bucu bulat, mengawal ketebalan dan warna sempadan serta menggunakan bayang kotak untuk me…

  1. 1Lebar dan Warna Sempadan
  2. 2Jejari Sempadan dan Bucu Bulat
  3. 3Bayang Kotak
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
9

A24 pelajaranPRO

Tambahkan interaktiviti pada UI dengan menggunakan gaya secara bersyarat ketika layang, fokus, aktif, dilumpuhkan dan keadaan pseudo yang lain. Pelajari sistem awalan variasi Tailwind untuk mengawal…

  1. 1Varian Apungan dan Aktif
  2. 2Varian Fokus dan Fokus Kelihatan
  3. 3Varian Dilumpuhkan dan Ruang Tanda
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
10

A24 pelajaranPRO

Bina reka letak yang menyesuaikan diri dengan mana-mana saiz skrin menggunakan titik henti responsif yang mengutamakan peranti mudah alih dalam Tailwind. Gunakan kelas utiliti yang berbeza pada lebar…

  1. 1Sistem Titik Henti Tailwind
  2. 2Tataletak Responsif dengan Flex dan Grid
  3. 3Tipografi dan Jarak Responsif
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
11

B14 pelajaranPRO

Laksanakan mod gelap dalam aplikasi web anda menggunakan variasi gelap terbina dalam Tailwind. Pelajari perbezaan strategi kelas dengan strategi media dan bina komponen UI yang kelihatan menarik dala…

  1. 1Strategi Mod Gelap
  2. 2Menggunakan Varian Gelap
  3. 3Membina Togol Mod Gelap
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
12

B14 pelajaranPRO

Manfaatkan sepenuhnya kuasa Tailwind dengan menguasai fail tailwind.config.js. Pelajari cara melanjutkan tema lalai, menambah nilai tersuai, mengkonfigurasi laluan kandungan dan mengurus pemalam.

  1. 1Anatomi tailwind.config.js
  2. 2Laluan Kandungan dan Pembersihan
  3. 3Melanjutkan berbanding Menggantikan Tema
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
13

B14 pelajaranPRO

Sesuaikan Tailwind dengan jenama anda dengan menambah warna tersuai, mengintegrasikan Google Fonts dan mentakrifkan skala jarak tersuai. Bina bahasa reka bentuk khusus projek yang masih memanfaatkan…

  1. 1Menambah Warna Tersuai
  2. 2Keluarga Fon Tersuai
  3. 3Nilai Jarak Tersuai
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
14

B14 pelajaranPRO

Pelajari bila dan cara menggunakan arahan @apply Tailwind untuk mengekstrak corak utiliti berulang menjadi kelas CSS yang boleh diguna semula. Seimbangkan pendekatan berteraskan utiliti dengan keperl…

  1. 1Fungsi @apply dan Masa Menggunakannya
  2. 2Mencipta Kelas Komponen Boleh Guna Semula
  3. 3Menyusun CSS Tersuai dengan Lapisan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
15

B14 pelajaranPRO

Tambahkan gerakan lancar pada UI menggunakan utiliti peralihan dan animasi terbina dalam Tailwind. Pelajari cara mengawal tempoh, pelonggaran dan kelewatan, serta menggunakan animasi bingkai utama un…

  1. 1Utiliti Peralihan
  2. 2Tempoh dan Pelancaran
  3. 3Animasi Kerangka Kunci Terbina Dalam
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
16

B14 pelajaranPRO

Bina primitif UI yang kemas dan boleh diguna semula menggunakan kelas utiliti Tailwind. Pelajari corak standard untuk butang dengan variasi, kad dengan pengepala serta pengaki dan lencana maklumat ke…

  1. 1Varian dan Keadaan Butang
  2. 2Corak Komponen Kad
  3. 3Komponen Lencana dan Tag
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
17

B14 pelajaranPRO

Bina bar navigasi responsif dan bar sisi boleh runtuh menggunakan utiliti Tailwind. Pelajari cara mengendalikan menu hamburger mudah alih dan mencipta navigasi melekat yang kekal ketika pengguna mena…

  1. 1Membina Bar Navigasi Responsif
  2. 2Navigasi Lekat dan Tetap
  3. 3Tataletak Bar Sisi Menegak
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
18

B14 pelajaranPRO

Gayakan unsur borang yang boleh dicapai dan menarik menggunakan utiliti Tailwind. Pelajari cara mencipta input teks, pilihan, kotak tanda, butang radio dan reka letak borang lengkap dengan keadaan pe…

  1. 1Menggayakan Medan Teks dan Kawasan Teks
  2. 2Menu Pilihan dan Kotak Tandaan
  3. 3Corak Tataletak Borang
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
19

B14 pelajaranPRO

Bina corak UI tindanan seperti modal, dialog dan menu jatuh bawah menggunakan Tailwind serta JavaScript minimum. Pelajari kedudukan, susunan z-index dan peralihan buka/tutup yang lancar.

  1. 1Struktur Dialog Modal
  2. 2Animasi Buka dan Tutup Modal
  3. 3Komponen Menu Lungsur
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
20

B14 pelajaranPRO

Fahami enjin Just-In-Time Tailwind dan cara enjin itu menjana hanya CSS yang anda gunakan. Pelajari cara mengoptimumkan himpunan produksi, menganalisis saiz output dan menulis kelas yang boleh dikesa…

  1. 1Cara Enjin JIT Berfungsi
  2. 2Menyenaraikan Kelas Dinamik dengan Selamat
  3. 3Menganalisis dan Mengurangkan Saiz Bundle
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
21

B24 pelajaranPRO

Wujudkan sistem token reka bentuk yang kukuh dalam konfigurasi Tailwind untuk membolehkan tema berbilang jenama yang konsisten. Petakan token primitif kepada token semantik dan bina bahasa reka bentu…

  1. 1Token Primitif berbanding Semantik
  2. 2Tema Berasaskan Pemboleh Ubah CSS
  3. 3Strategi Tema Berbilang Jenama
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
22

B24 pelajaranPRO

Integrasikan Tailwind CSS ke dalam aplikasi React dan Next.js menggunakan persediaan rasmi. Pelajari amalan terbaik untuk menggunakan utiliti dalam JSX, mengurus kelas bersyarat dan menyusun gaya dal…

  1. 1Menyediakan Tailwind dalam Next.js
  2. 2Kelas Bersyarat dalam React
  3. 3Varian Komponen dengan CVA
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
23

B24 pelajaranPRO

Gabungkan Tailwind CSS dengan Headless UI untuk membina komponen tanpa gaya yang boleh dicapai sepenuhnya. Gunakan kelas Tailwind anda sendiri pada menu, dialog, kotak gabungan dan peralihan sambil m…

  1. 1Pengenalan kepada Headless UI
  2. 2Menggayakan Menu dan Senarai Jatuh Headless UI
  3. 3Membina Dialog yang Boleh Diakses
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
24

B24 pelajaranPRO

Luaskan fungsi Tailwind dengan menulis pemalam tersuai yang menambah utiliti, komponen dan variasi baharu. Pelajari API pemalam untuk merangkum logik gaya yang boleh diguna semula dan dikongsi merent…

  1. 1API Pemalam Tailwind
  2. 2Menambah Utiliti Tersuai melalui Pemalam
  3. 3Menambah Varian Tersuai melalui Pemalam
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
25

B24 pelajaranPRO

Bina komponen UI yang memenuhi piawaian kebolehcapaian WCAG menggunakan utiliti Tailwind untuk kontras warna, pengurusan fokus dan sokongan pembaca skrin. Tulis struktur HTML serta gaya Tailwind yang…

  1. 1Kontras Warna dan Teks yang Mudah Dibaca
  2. 2Penunjuk Fokus dan Navigasi Papan Kekunci
  3. 3Atribut ARIA dan Pembaca Skrin
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
26

B24 pelajaranPRO

Amalkan amalan terbaik profesional untuk menggunakan Tailwind CSS dalam aplikasi produksi. Pelajari pengauditan himpunan, strategi penyusunan kelas, pelintasan kod dan teknik pengoptimuman prestasi y…

  1. 1Mengaudit Keluaran CSS Anda
  2. 2Pengisihan Kelas dan Pemalam Prettier
  3. 3Lint Tailwind dengan ESLint
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
27

B24 pelajaranPRO

Gunakan semua yang dipelajari setakat ini untuk membina halaman pendaratan pemasaran yang lengkap dan responsif dari awal, hanya menggunakan Tailwind CSS. Sertakan bahagian wira, ciri, testimoni, har…

  1. 1Bahagian Utama dan Navigasi
  2. 2Bahagian Ciri dan Bukti Sosial
  3. 3Bahagian Jadual Harga
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
28

B24 pelajaranPRO

Bina antara muka papan pemuka pentadbir yang lengkap menggunakan Tailwind CSS. Bina bar sisi, bar atas, kad statistik, jadual data dan widget ruang letak carta dalam reka letak yang padu serta respon…

  1. 1Rangka Papan Pemuka dan Bar Sisi
  2. 2Bar Atas dan Denai Navigasi
  3. 3Kad Statistik dan Widget KPI
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
29

B24 pelajaranPRO

Terokai cara Tailwind sesuai dengan strategi seni bina CSS yang lebih luas dan digunakan dalam projek berskala besar. Pelajari cara menyusun fail, menstruktur lapisan komponen serta menggabungkannya…

  1. 1Penyusunan Fail dan Folder
  2. 2Berfungsi Bersama CSS Legasi
  3. 3Modul CSS dan Tailwind
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
30

B24 pelajaranPRO

Gabungkan semua kemahiran daripada laluan ini untuk membina sistem reka bentuk berasaskan Tailwind yang lengkap. Takrifkan token, bina pustaka komponen, tulis pemalam dan dokumentasikan sistem untuk…

  1. 1Merancang Sistem Reka Bentuk
  2. 2Membina Lapisan Token dan Konfigurasi
  3. 3Pembinaan Pustaka Komponen
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
CoddyKit PRO

Dapatkan akses kepada kesemua 30 kursus dalam laluan ini dan semua laluan lain

Tutor AI, peperiksaan pensijilan dan sijil. Berfungsi di laman web, iOS dan Android.

Lihat semua pelan
Tahunan$29.90 / tahunKira-kira $2.49 sebulanBayar sekaliSeumur hidup$69.99 sekaliTiada pembaharuan. PRO selama-lamanya.
Gambaran Keseluruhan Kursus

Penguasaan Tailwind CSS

Kuasai rangka kerja CSS berasaskan utiliti yang dipercayai oleh OpenAI, Vercel dan Shopify. Pelajari setiap utiliti, reka bentuk responsif, mod gelap, animasi dan pengoptimuman untuk produksi. Laluan ini merangkumi 30 kursus mini progresif daripada pemula sepenuhnya (A1) hingga tahap lanjutan (B2), dengan pelajaran ringkas dan kuiz pantas untuk mengukuhkan setiap konsep.

Apa yang Akan Anda Pelajari

Anda akan bermula dengan asas dan meningkat kepada topik pertengahan serta lanjutan, dengan setiap kursus dibina berdasarkan kursus sebelumnya. Setiap pelajaran bersifat praktikal, disertai contoh sebenar dan tutor AI yang tersedia apabila anda memerlukan bantuan.

Cara Kursus Ini Berfungsi

Setiap kursus dibahagikan kepada empat pelajaran yang berfokus. Lengkapkan beberapa pelajaran sehari dan anda akan menguasai seluruh laluan dalam beberapa minggu, bukan bulan.

Alat

Berlatih dengan AI, bukan sekadar membaca

Tingkatkan pembelajaran anda dengan alat dan ciri berkuasa AI

Sembang AIBerbual dengan tutor AITanya Soalan SuperDapatkan jawapan bertaraf pakarPROCipta PelajaranPembina pelajaran berkuasa AIPROMulakan Peperiksaan PensijilanDapatkan sijil andaPROMulakan CabaranUji kemahiran anda

Cara Anda Belajar

  1. 01

    Pelajaran Interaktif

    Latihan pengekodan amali dengan maklum balas masa nyata

  2. 02

    Tutor AI

    Dapatkan bantuan segera daripada AI kami apabila anda buntu

  3. 03

    Penyunting Terbina Dalam

    Tulis dan jalankan kod terus dalam pelayar anda

  4. 04

    Sijil

    Dapatkan sijil selepas melengkapkan kursus

Terus meneroka

Laluan pembelajaran berkaitan

Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Web Accessibility Academy logoWeb Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.
FAQ

Soalan Lazim

Adakah kursus Tailwind CSS Academy percuma?

Ya. Anda boleh memulakan kursus Tailwind CSS Academy secara percuma dan mengikuti pelajaran interaktifnya tanpa sebarang bayaran. Langganan PRO pilihan membuka akses kepada alat kecerdasan buatan lanjutan dan sijil yang boleh dikongsi.

Adakah saya memerlukan pengalaman terdahulu untuk mempelajari HTML?

Tidak. Kursus ini bermula dengan asas dan beralih secara beransur-ansur kepada topik yang lebih maju, jadi anda boleh bermula walaupun tanpa pengalaman terdahulu dalam HTML.

Bagaimanakah saya akan mempelajari HTML di CoddyKit?

Anda belajar melalui amali. Pelajaran interaktif yang ringkas menggabungkan penerangan yang jelas dengan latihan pengekodan praktikal yang berjalan dalam masa nyata, manakala tutor kecerdasan buatan 24/7 memberikan bantuan yang diperibadikan apabila anda menghadapi kesukaran.

Adakah saya mendapat sijil selepas menamatkan Tailwind CSS Academy?

Ya. Pelajar PRO boleh menduduki peperiksaan dan memperoleh sijil tamat kursus yang boleh dikongsi, lengkap dengan kod yang boleh disahkan untuk kursus Tailwind CSS Academy.

Bolehkah saya mempelajari HTML melalui telefon saya?

Ya. CoddyKit tersedia di web dan sebagai aplikasi asli iOS serta Android, jadi anda boleh mempelajari HTML pada mana-mana peranti dan kemajuan anda disegerakkan merentas semua peranti.

Berapakah kos CoddyKit PRO?

Kursus pertama dalam Tailwind CSS Academy adalah percuma. CoddyKit PRO membuka akses kepada setiap kursus: $5.90 seminggu, $7.90 sebulan, $29.90 setahun atau $69.99 sekali untuk akses seumur hidup tanpa pembaharuan.

Berapa lama masa yang diperlukan untuk melengkapkan Tailwind CSS Academy?

Tailwind CSS Academy mempunyai 30 kursus dan 120 pelajaran. Kebanyakan pelajaran mengambil masa kira-kira 5–10 minit, jadi keseluruhan laluan ini memerlukan sekitar 14 jam latihan amali, mengikut rentak anda sendiri.

Mulakan Tailwind CSS Academy Sekarang

Sertai ribuan pelajar yang menguasai pengaturcaraan melalui pelajaran berkuasa kecerdasan buatan.

Mula belajar secara percumaSemak Semua Kursus