Kursus Tailwind CSS

Pelajaran 1 • Menginstal dan Mengonfigurasi Tailwind

Memandu instalasi CLI, integrasi PostCSS, dan penggunaan CDN. Peserta didik menghasilkan lingkungan kerja lokal yang siap untuk semua latihan selanjutnya.

Pelajaran 2 • Filosofi Inti Tailwind CSS

Mengeksplorasi batasan desain Tailwind, default opini, dan sistem desain berbasis batasan. Menghubungkan filosofi dengan peningkatan produktivitas praktis yang akan dialami peserta didik.

Pelajaran 3 • Apa Itu CSS Utility-First

Mendefinisikan gaya utility-first dan membedakannya dengan framework berbasis komponen. Menetapkan dasar konseptual untuk setiap keputusan Tailwind yang dibuat selama kursus.

Pelajaran 4 • File Konfigurasi Tailwind

Memperkenalkan struktur tailwind.config.js, jalur konten, dan kunci tema. Mempersiapkan peserta didik untuk menyesuaikan Tailwind tanpa merusak default-nya.

Pelajaran 1 • Utilitas Lebar, Tinggi, dan Ukuran

Mengeksplorasi kelas ukuran tetap, pecahan, viewport, dan berbasis konten. Peserta didik mengukur kontainer dan gambar dengan benar di berbagai konteks tata letak.

Pelajaran 2 • Utilitas Tampilan dan Visibilitas

Mencakup kelas blok, inline, flex, grid, sembunyi, dan visibilitas. Peserta didik mengontrol rendering elemen dan teknik penyembunyian yang aman untuk aksesibilitas.

Pelajaran 3 • Utilitas Margin dan Padding

Mengajarkan kelas margin dan padding terarah termasuk varian pintasan dan sumbu. Peserta didik menerapkan spasi ke elemen UI nyata dengan presisi.

Pelajaran 4 • Memahami Skala Spasi

Mencakup skala spasi berbasis rem default Tailwind dan bagaimana token numerik dipetakan ke nilai piksel. Menyediakan model mental yang diperlukan untuk keputusan margin dan padding yang konsisten.

Pelajaran 1 • Dasar-Dasar Palet Warna Tailwind

Memperkenalkan struktur palet default, penomoran bayangan, dan peran warna semantik. Peserta didik memilih pasangan warna yang dapat diakses menggunakan skala bawaan Tailwind.

Pelajaran 2 • Ukuran Font dan Tinggi Baris

Memetakan skala ukuran teks Tailwind ke peran tipografis dan menjelaskan default tinggi baris yang berpasangan. Peserta didik menetapkan hierarki visual yang jelas di UI mana pun.

Pelajaran 3 • Menyesuaikan dan Memperluas Warna

Mendemonstrasikan penambahan warna merek, variabel CSS, dan alias semantik dalam konfigurasi. Peserta didik memelihara sistem warna yang dapat diskalakan di seluruh proyek besar.

Pelajaran 4 • Spasi Huruf dan Perataan Teks

Mengajarkan utilitas tracking, perataan teks, dan transformasi teks untuk kontrol tipografis yang presisi. Peserta didik memoles judul dan teks isi hingga standar profesional.

Pelajaran 1 • Membangun Komponen Flex Nyata

Menerapkan semua utilitas flex untuk membangun bilah navigasi, objek media, dan tata letak footer. Peserta didik mengkonsolidasikan pengetahuan flex melalui konstruksi komponen langsung.

Pelajaran 2 • Flex Grow, Shrink, dan Basis

Menjelaskan utilitas flex-grow, flex-shrink, dan flex-basis serta interaksinya. Peserta didik membangun kolom fluida yang mengubah ukuran secara prediktif di bawah beban konten yang berbeda.

Pelajaran 3 • Utilitas Urutan dan Perataan Mandiri

Mengajarkan kelas urutan dan penimpaan perataan per-item untuk pengaturan flex yang kompleks. Peserta didik mengatur ulang elemen visual tanpa mengubah struktur DOM.

Pelajaran 4 • Perataan dan Justifikasi

Mencakup utilitas justify-content, align-items, align-self, dan align-content. Peserta didik memusatkan, mendistribusikan, dan meregangkan item secara presisi di tata letak flex mana pun.

Pelajaran 1 • Perataan di Dalam Grid

Menerapkan justify-items, align-items, justify-self, dan align-self dalam konteks grid. Peserta didik memposisikan konten sel secara independen dari ukuran trek.

Pelajaran 2 • Pengaturan Kontainer Grid

Mengaktifkan konteks grid dan mendefinisikan templat kolom dan baris menggunakan kelas Tailwind. Peserta didik memahami bagaimana definisi templat mengontrol semua penempatan anak.

Pelajaran 3 • Membangun Tata Letak Grid Nyata

Membangun shell dasbor, galeri gambar, dan tata letak halaman editorial menggunakan utilitas grid. Peserta didik menerapkan pengetahuan grid ke struktur halaman berkualitas produksi.

Pelajaran 4 • Rentang Kolom dan Baris

Mencakup utilitas col-span, row-span, dan full-span untuk menempatkan item di beberapa trek. Peserta didik membuat tata letak asimetris yang mematahkan pola grid seragam.

Pelajaran 1 • Peralihan Tata Letak Responsif

Beralih antara tata letak flex dan grid pada titik henti yang berbeda untuk struktur adaptif. Peserta didik membangun komponen yang merestrukturisasi diri tanpa JavaScript.

Pelajaran 2 • Prefiks Titik Henti Tailwind

Mencakup prefiks sm, md, lg, xl, dan 2xl serta ambang piksel defaultnya. Peserta didik menerapkan prefiks titik henti ke kelas utilitas mana pun dengan percaya diri.

Pelajaran 3 • Prinsip Desain Mobile-First

Menetapkan pemikiran mobile-first dan menjelaskan mengapa titik henti Tailwind adalah lebar-minimum. Peserta didik membingkai ulang keputusan desain untuk memulai dari viewport terkecil.

Pelajaran 4 • Titik Henti Kustom dan Konfigurasi Layar

Menambahkan titik henti khusus proyek dan menimpa default di kunci konfigurasi layar. Peserta didik menyesuaikan sistem responsif Tailwind dengan spesifikasi desain apa pun.

Pelajaran 1 • Varian Grup dan Rekan

Mengajarkan pola group-hover dan peer-checked untuk gaya yang dipicu induk dan dipicu saudara. Peserta didik membangun menu dropdown dan kotak centang kustom tanpa JavaScript.

Pelajaran 2 • Varian Status Formulir

Menerapkan varian required, invalid, valid, dan checked untuk menata status validasi formulir. Peserta didik memberikan umpan balik visual yang jelas untuk input pengguna tanpa CSS kustom.

Pelajaran 3 • Utilitas Transisi dan Animasi

Menambahkan transisi halus dan animasi keyframe menggunakan kelas utilitas bawaan Tailwind. Peserta didik meningkatkan interaktivitas dengan gerakan berperforma tinggi yang ramah GPU.

Pelajaran 4 • Status Aktif, Dikunjungi, dan Dinonaktifkan

Mencakup varian aktif, dikunjungi, dinonaktifkan, dan placeholder untuk penataan formulir dan tautan yang lengkap. Peserta didik menangani semua status interaktif dalam satu alur kerja kelas utilitas.

Pelajaran 1 • Nilai Arbitrer dan Variabel CSS

Menggunakan notasi kurung siku untuk nilai satu kali dan mengintegrasikan properti kustom CSS ke dalam utilitas. Peserta didik keluar dari skala default ketika spesifikasi desain menuntut presisi.

Pelajaran 2 • Optimasi Kinerja dan Bundle

Mengaudit ukuran output CSS, mengonfigurasi jalur konten secara presisi, dan menerapkan pola safelist. Peserta didik mengirimkan stylesheet sekecil mungkin tanpa mengorbankan penggunaan kelas dinamis.

Pelajaran 3 • Implementasi Mode Gelap

Mengonfigurasi mode gelap berbasis kelas dan berbasis media serta menerapkan varian gelap di seluruh UI. Peserta didik menyampaikan tema terang dan gelap lengkap dari satu stylesheet.

Pelajaran 4 • Menulis Plugin Tailwind Kustom

Membangun plugin utilitas, komponen, dan varian kustom menggunakan API plugin Tailwind. Peserta didik memperluas kemampuan Tailwind untuk memenuhi persyaratan unik proyek apa pun.