0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

Tingkatkan desain web Anda dengan CSS melalui pelajaran komprehensif di CSS Academy.

🤖 Bertenaga AI📚 40 kursus👥 100.000+ pelajar⭐ Rating 4,9
Ringkasan Kursus

CSS: Bahasa yang Menata Gaya Web

CSS mengontrol setiap detail visual halaman web — warna, tata letak, spasi, animasi, dan responsivitas. Dari sekadar lapisan presentasi sederhana, CSS telah berkembang menjadi bahasa sistem desain lengkap, dengan fitur modern seperti container queries, @layer, logical properties, dan Houdini API yang memberikan developer kontrol halus atas rendering. Track ini mencakup spektrum penuh CSS, mulai dari menulis selector pertama Anda hingga merancang sistem desain yang scalable digunakan di codebases produksi besar.

Apa yang Akan Anda Pelajari

Anda akan memulai dengan syntax, selectors, warna, dan tipografi, kemudian membangun pemahaman solid tentang box model, display properties, dan positioning. Dari sini Anda akan mendalami Flexbox dan CSS Grid untuk tata letak standar dan advanced, menerapkan responsive design dan media queries, serta menggunakan CSS variables, custom functions, dan design tokens untuk theming yang maintainable. Anda juga akan mempelajari transitions, keyframe animations, transforms, filters, blend modes, dan dark mode — plus modern tooling dengan Sass, PostCSS, dan pola CSS-in-JS. Track ditutup dengan CSS architecture menggunakan BEM, specificity dan cascade, container queries, @layer cascade layers, CSS Houdini, dan performance.

Learning Path

Empat puluh courses mencakup A1 hingga C1. Courses A1 dan A2 awal menetapkan fundamentals — selectors, box model, pseudo-classes, pseudo-elements, dan units. Courses B1 mencakup Flexbox, Grid, responsive design, animations, debugging dengan DevTools, dan CSS functions. Courses B2 meningkatkan ke Flexbox dan Grid advanced, Sass, PostCSS, CSS-in-JS, design tokens, CSS Shapes, logical properties, container queries, dan CSS Layers. Tiga courses C1 — CSS Houdini, CSS Performance, dan CSS Future — mengangani cutting edge platform.

Cara Kerjanya

Setiap course dibagi menjadi lessons singkat dan terfokus yang Anda selesaikan langsung di editor bawaan dengan feedback real-time. Tutor AI tersedia kapan saja saat Anda kesulitan, dan progression dirancang deliberately incremental sehingga setiap konsep memperkuat yang sebelumnya sebelum yang berikutnya diperkenalkan.

Mulai Belajar →

Cara Kamu Belajar

🎯
Pelajaran Interaktif
Latihan koding langsung dengan umpan balik real-time
🤖
AI Tutor
Dapatkan bantuan instan dari AI kami saat kamu stuck
💻
Editor Bawaan
Tulis dan jalankan kode langsung di browser kamu
🏆
Sertifikat
Raih sertifikat saat kamu menyelesaikan kursus
Kurikulum

40 Kursus

Setiap kursus di jalur belajar CSS Academy.

01

Sintaks dan Selektor CSS

A13 pelajaran

Pelajari sintaks dasar CSS dan cara menargetkan elemen HTML menggunakan selektor tag, class, ID, atribut, dan gabungan.

02

Warna dan Latar Belakang

A14 pelajaranPRO

Kuasai format warna CSS dan properti latar belakang untuk membuat halaman web yang kaya secara visual.

03

Tipografi dan Teks

A14 pelajaranPRO

Tata konten teks dengan font, ukuran, ketebalan, perataan, dan teknik pemuatan font khusus.

04

Model Kotak

A24 pelajaranPRO

Pahami bahwa setiap elemen HTML adalah kotak, lalu kendalikan ukuran, jarak, batas, dan bayangannya.

05

Properti Tampilan

A24 pelajaranPRO

Kendalikan aliran elemen dalam dokumen menggunakan mode tampilan block, inline, dan inline-block.

06

Dasar-Dasar Pemosisian

A24 pelajaranPRO

Keluarkan elemen dari aliran normal menggunakan nilai position CSS dan kendalikan pelapisan dengan z-index.

07

Satuan dan Nilai CSS

A24 pelajaranPRO

Kuasai satuan CSS absolut dan relatif untuk membuat tata letak yang dapat diskalakan dan responsif.

08

Pseudo-class

A24 pelajaranPRO

Targetkan elemen berdasarkan keadaan, posisi, dan hubungannya dengan elemen lain menggunakan pseudo-class.

09

Pseudo-element

A24 pelajaranPRO

Sisipkan konten dekoratif dan tata bagian tertentu dari elemen menggunakan pseudo-element CSS.

10

Dasar-Dasar Flexbox

B14 pelajaranPRO

Bangun tata letak satu dimensi dengan CSS Flexbox, sambil mengendalikan arah, perataan, dan pembungkusan.

11

Dasar-Dasar CSS Grid

B14 pelajaranPRO

Buat tata letak dua dimensi yang kuat dengan CSS Grid menggunakan track, celah, dan area templat.

12

Desain Responsif

B14 pelajaranPRO

Bangun tata letak yang beradaptasi dengan baik pada ukuran layar apa pun menggunakan lebar fluida dan teknik responsif.

13

Kueri Media

B14 pelajaranPRO

Terapkan gaya yang berbeda berdasarkan ukuran layar, orientasi, dan preferensi pengguna dengan kueri media.

14

Variabel CSS

B14 pelajaranPRO

Buat stylesheet yang mudah dipelihara dengan properti khusus yang dapat digunakan kembali dan diperbarui secara dinamis.

15

Transisi CSS

B14 pelajaranPRO

Tambahkan perubahan keadaan animasi yang halus pada properti CSS menggunakan singkatan transition dan fungsi pengaturan waktu.

16

Animasi dan Keyframe CSS

B14 pelajaranPRO

Buat animasi kompleks bertahap menggunakan @keyframes dan properti singkatan animation.

17

Transformasi CSS

B14 pelajaranPRO

Pindahkan, putar, ubah skala, dan miringkan elemen dalam ruang 2D dan 3D menggunakan fungsi transform CSS.

18

Spesifisitas dan Cascade

B14 pelajaranPRO

Pahami secara mendalam cara CSS menentukan gaya mana yang berlaku ketika beberapa aturan menargetkan elemen yang sama.

19

Fungsi CSS

B14 pelajaranPRO

Gunakan fungsi CSS yang kuat untuk perhitungan dinamis, pengukuran fluida, tata letak grid, dan manipulasi warna modern.

20

Filter dan Mode Pencampuran

B14 pelajaranPRO

Terapkan efek visual pada elemen dan gambar menggunakan filter CSS dan komposisi mode pencampuran.

21

Gulir dan Luapan

B14 pelajaranPRO

Kendalikan perilaku pengguliran, titik snap, dan pemotongan luapan untuk pengalaman pengguna yang lancar.

22

Mode Gelap dan Skema Warna

B14 pelajaranPRO

Terapkan mode gelap otomatis dan manual dengan variabel CSS, color-scheme, dan kueri media.

23

Debugging CSS dan DevTools

B14 pelajaranPRO

Kuasai DevTools peramban untuk memeriksa, men-debug, dan memahami tata letak CSS, animasi, serta gaya hasil komputasi.

24

Flexbox Lanjutan

B24 pelajaranPRO

Melampaui dasar-dasar dengan perataan Flexbox lanjutan, pengurutan, dan pola tata letak dunia nyata.

25

Grid Lanjutan

B24 pelajaranPRO

Manfaatkan seluruh kemampuan CSS Grid dengan baris bernama, penempatan otomatis, subgrid, dan pola kompleks.

26

Arsitektur CSS dan BEM

B24 pelajaranPRO

Atur basis kode CSS berukuran besar dengan pola arsitektur, konvensi penamaan, dan struktur file.

27

Bentuk CSS dan Clip-path

B24 pelajaranPRO

Buat elemen nonpersegi panjang dan bentuk pembungkus teks menggunakan clip-path dan CSS Shapes.

28

Properti Logis CSS

B24 pelajaranPRO

Tulis CSS yang tidak bergantung pada arah, sehingga berfungsi dalam bahasa kiri-ke-kanan dan kanan-ke-kiri menggunakan properti logis.

29

Kueri Kontainer

B24 pelajaranPRO

Terapkan gaya berdasarkan ukuran kontainer komponen, bukan area pandang, menggunakan kueri kontainer.

30

Lapisan CSS (@layer)

B24 pelajaranPRO

Kelola prioritas cascade CSS secara eksplisit menggunakan @layer untuk menghilangkan konflik spesifisitas dalam basis kode besar.

31

Praprosesor Sass

B24 pelajaranPRO

Tingkatkan kemampuan penulisan CSS dengan variabel, nesting, mixin, dan fungsi menggunakan praprosesor Sass.

32

PostCSS dan Peralatan CSS

B24 pelajaranPRO

Transformasikan dan optimalkan CSS dengan plugin PostCSS untuk penambahan awalan otomatis, minifikasi, dan transformasi khusus.

33

Pola CSS-in-JS

B24 pelajaranPRO

Jelajahi penataan bergaya yang tercakup dalam komponen dengan styled-components, Emotion, CSS Modules, dan Vanilla Extract.

34

Token Desain dan Pemberian Tema

B24 pelajaranPRO

Bangun sistem desain yang dapat diskalakan menggunakan token desain dan pemberian tema multimerek dengan properti khusus CSS.

35

Pengujian CSS

B24 pelajaranPRO

Pastikan kebenaran CSS dan konsistensi visual melalui pengujian regresi, pengujian unit, dan audit aksesibilitas.

36

Pola Komponen CSS

B24 pelajaranPRO

Bangun komponen antarmuka siap produksi seperti kartu, modal, menu tarik-turun, dan tab dengan teknik CSS murni.

37

Pola Tata Letak Modern

B24 pelajaranPRO

Terapkan pola tata letak tingkat lanjut di dunia nyata menggunakan teknik CSS Grid dan Flexbox modern.

38

CSS Houdini

C14 pelajaranPRO

Perluas CSS itu sendiri dengan JavaScript menggunakan API Houdini untuk properti khusus, pengecatan, dan tata letak.

39

Kinerja CSS

C14 pelajaranPRO

Optimalkan pengiriman dan kinerja rendering CSS dengan memahami alur rendering peramban.

40

Masa Depan CSS

C14 pelajaranPRO

Jelajahi perkembangan terbaru CSS dengan nesting bawaan, :has(), gaya tercakup, dan View Transitions.

FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus CSS Academy gratis?

Ya. Kamu bisa memulai kursus CSS Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar CSS?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman CSS sebelumnya.

Bagaimana cara aku belajar CSS di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan CSS Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus CSS Academy.

Bisakah aku belajar CSS di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar CSS di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Mulai CSS Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai Gratis →Jelajahi Semua Kursus