Layout, desain responsif, dan teknik CSS modern.
CSS adalah yang membuat halaman web tampil bagus. Pelajari CSS itu apa, cara kerja rule dan selector, tiga cara menambahkannya ke halaman, dan tulis style pertamamu — dijelaskan sederhana, dari nol.
Selector adalah cara CSS memilih elemen mana yang dikenai sebuah rule. Pelajari selector element, class, dan id, cara menggabungkannya, pseudo-class seperti :hover, dan bagaimana cascade memutuskan rule mana yang menang.
Warna adalah salah satu bagian CSS yang paling berdampak. Pelajari cara menentukan warna — nama, hex, RGB, HSL — plus transparansi, warna background, gradien, dan gambar background.
Setiap elemen di CSS adalah kotak dengan content, padding, border, dan margin. Kuasai box model — dan box-sizing — dan kamu akhirnya akan paham cara kerja ukuran dan jarak yang sebenarnya.
Sebagian besar halaman web adalah teks, jadi menatanya dengan baik sangat penting. Pelajari font-family, font-size, ketebalan, line-height, perataan, dan cara memakai web font kustom seperti Google Fonts.
Flexbox adalah perkakas CSS modern untuk mengatur elemen dalam baris atau kolom, memberi jarak, dan meratakannya. Pelajari property container dan item, dengan tata letak praktis seperti navbar dan konten rata tengah.
CSS Grid mengatur elemen dalam baris DAN kolom sekaligus — pas untuk tata letak halaman dan kisi kartu. Pelajari grid-template-columns, satuan fr, gap, repeat(), dan perbandingan Grid dengan Flexbox.
Desain responsif membuat satu website tampil bagus di ponsel, tablet, dan desktop. Pelajari media query, breakpoint, pendekatan mobile-first, dan satuan lentur yang membuat tata letak beradaptasi.
CSS punya banyak satuan untuk mengatur ukuran — px, em, rem, persen, sampai satuan viewport. Pahami apa yang sebenarnya diukur tiap satuan, bagaimana hubungannya, dan mana yang tepat dipakai di tata letak nyata.
Property display menentukan bagaimana sebuah elemen berperilaku dalam tata letak — apakah menumpuk, sejajar dengan teks, atau menjadi container flex maupun grid. Pelajari setiap nilai umum dan kapan tepatnya kamu memakainya.
Property position menentukan di mana sebuah elemen benar-benar muncul di halaman. Pelajari positioning static, relative, absolute, fixed, dan sticky, cara kerja offset top/right/bottom/left, serta apa arti 'konteks positioning' yang sebenarnya.
z-index menentukan elemen mana yang muncul di depan saat saling bertumpuk. Pelajari cara kerja penumpukan, kenapa z-index kadang tidak berfungsi, apa itu stacking context, dan cara membereskan bug-nya.
Saat isi konten lebih besar dari kotaknya, property overflow yang menentukan nasibnya — dipotong, di-scroll, atau dibiarkan meluber. Pahami visible, hidden, scroll, auto, sumbu x/y, dan jebakan yang sering bikin bingung.
Property box-sizing menentukan apakah padding dan border ikut dihitung ke dalam width sebuah elemen. Pelajari content-box vs border-box, kenapa border-box jadi standar modern, dan bagaimana satu baris menyelesaikan kejutan klasik di CSS.
Saat dua aturan CSS menyasar elemen yang sama, mana yang menang? Pelajari cara specificity dihitung, bagaimana ID, class, dan tag bersaing, di mana posisi !important serta inline style, dan cara menulis CSS yang gampang ditimpa.
Pseudo-class seperti :hover, :focus, dan :nth-child membuatmu bisa memberi style ke elemen berdasarkan keadaan atau posisinya — tanpa JavaScript sama sekali. Pelajari sintaks, yang paling berguna, dan pola nyata yang benar-benar kepakai.
Pseudo-element seperti ::before, ::after, ::first-letter, dan ::placeholder memungkinkan kamu menata bagian elemen yang tidak pernah kamu tulis di HTML. Pelajari sintaks, property content, dan pola praktis yang benar-benar sering dipakai.
Variabel CSS membuatmu menyimpan sebuah nilai sekali saja lalu memakainya di mana-mana. Pelajari cara mendeklarasikan custom property, membacanya dengan var(), memberi fallback, mengatur scope, dan mengganti seluruh tema cukup dengan satu nilai.
Biar CSS yang menghitung untukmu. Pelajari cara calc() mencampur satuan, bagaimana min() dan max() memilih nilai yang pas, dan cara clamp() membangun ukuran cair yang mulus di antara batas bawah dan batas atas.
Transition CSS mengubah perubahan style yang mendadak jadi animasi yang halus. Pelajari property transition, timing function, apa yang bisa dan tidak bisa dianimasikan, serta cara membuat efek hover dan state yang rapi.
Pelajari property transform CSS untuk menggeser, memutar, memperbesar, dan memiringkan elemen tanpa mengganggu tata letak. Membahas fungsi transform, transform-origin, menggabungkan transform, 3D, dan tips performa.
Lebih jauh dari transition dengan animasi @keyframes CSS. Pelajari cara mendefinisikan keyframes, mengatur durasi dan perulangan, menggabungkan beberapa animasi, dan membuat gerakan mulus sepenuhnya lewat CSS — tanpa JavaScript sama sekali.
Bayangan bikin halaman terasa berdimensi dan rapi. Pelajari box-shadow dan text-shadow sampai tuntas — tiap nilai dijelaskan, inset shadow, bayangan berlapis, efek glow, dan pola di balik kartu, tombol, serta efek elevasi.
Gradient CSS membuat warna berbaur halus tanpa perlu gambar. Pelajari linear-gradient, radial-gradient, dan conic-gradient, color stop, sudut, transparansi, plus pola praktis seperti tombol dan teks gradien.
Kata panjang, URL, dan string tanpa spasi gampang merusak tata letak. Pelajari white-space, overflow-wrap, word-break, hyphens, text-overflow ellipsis, dan line-clamp agar teks tetap rapi di dalam kotak apa pun.
Setelah hafal berbagai property CSS, kemampuan berikutnya adalah menulis CSS yang tetap bersih saat proyek membesar. Pelajari penamaan, penataan file, cascade, custom property, dan kebiasaan yang menjaga stylesheet tetap waras.