Semua track

Roadmap Belajar

CSS Modern

Styling, layout Flexbox/Grid, sampai animasi.

9 bab70 modul±332 menit0%
Mulai dari awal
1

Bab 1

Pondasi CSS

Cara memakai CSS, sintaks, selektor, specificity, cascade, satuan, dan warna.

1.Pengenalan CSS dan Cara PakaiPemula
2.Sintaks Aturan CSSPemula
3.Selektor Dasar: Elemen, Class, IDPemula
4.Selektor KombinasiPemula
5.Selektor AtributPemula
6.Spesifisitas: Siapa yang MenangPemula
7.Cascade dan InheritancePemula
8.Satuan CSS: px, em, rem, %Pemula
9.Warna di CSSPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
2

Bab 2

Box Model

Margin, padding, border, outline, box-shadow, dan cara kerja box-sizing.

10.Box ModelPemula
11.Margin: Jarak LuarPemula
12.Padding: Jarak DalamPemula
13.BorderPemula
14.Border Radius: Sudut MembulatPemula
15.OutlinePemula
16.Box ShadowPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
3

Bab 3

Background dan Tipografi

Background, font, ukuran dan spasi teks, font custom, text-shadow, dan white-space.

17.BackgroundPemula
18.Styling Teks DasarPemula
19.Font FamilyPemula
20.Ukuran dan Ketebalan FontPemula
21.Line Height dan SpasiPemula
22.Font KustomPemula
23.Text ShadowPemula
24.White Space dan Text OverflowPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
4

Bab 4

Layout dan Positioning

Display, menyembunyikan elemen, position, z-index, float, dan overflow.

25.Display: Block, Inline, Inline-BlockPemula
26.Menyembunyikan ElemenPemula
27.Position: Static dan RelativePemula
28.Position: Absolute, Fixed, StickyMenengah
29.Z-Index dan StackingMenengah
30.Float dan ClearMenengah
31.OverflowMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
5

Bab 5

Flexbox

Dari container, alignment, wrap, properti item, gap, sampai studi kasus nyata.

32.Flex ContainerMenengah
33.Justify dan AlignMenengah
34.Flex WrapMenengah
35.Properti Flex ItemMenengah
36.Gap di FlexboxMenengah
37.Studi Kasus: NavbarMenengah
38.Studi Kasus: Kartu ProdukMenengah
39.Studi Kasus: Centering SempurnaMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
6

Bab 6

CSS Grid

Grid container, gap, penempatan item, areas, auto-fill/fit, dan kapan memakai grid vs flexbox.

40.Grid ContainerMenengah
41.Gap di GridMenengah
42.Penempatan Grid ItemMenengah
43.Grid Template AreasMenengah
44.Grid Auto: Fill, Fit, DenseMahir
45.Grid vs FlexboxMenengah
46.Studi Kasus: Galeri FotoMenengah
47.Studi Kasus: Layout HalamanMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
7

Bab 7

Desain Responsif

Media query, mobile-first, strategi breakpoint, gambar dan tipografi responsif, container queries.

48.Media QueryPemula
49.Mobile FirstMenengah
50.Strategi BreakpointMenengah
51.Gambar ResponsifMenengah
52.Tipografi ResponsifMenengah
53.Container QueriesMahir
54.Studi Kasus: Landing ResponsifMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
8

Bab 8

Animasi dan Interaksi

Transisi, transform, keyframes, properti animation, dan pseudo-class.

55.Transisi CSSMenengah
56.Transform 2DMenengah
57.Keyframes DasarMenengah
58.Properti AnimationMenengah
59.Studi Kasus: Animasi LoadingMahir
60.Pseudo-ClassMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
9

Bab 9

Fitur Modern dan Proyek

Pseudo-element, variabel CSS, fungsi matematika, filter, object-fit, plus 3 proyek dan cheat sheet.

61.Pseudo-ElementMenengah
62.Variabel CSSMenengah
63.Calc, Clamp, Min, MaxMahir
64.Filter CSSMenengah
65.Backdrop FilterMenengah
66.Object Fit dan Object PositionPemula
67.Proyek: Kartu ProfilMenengah
68.Proyek: Landing PageMahir
69.Proyek: Dashboard AdminMahir
70.Cheat Sheet CSSPemula
Kuis 5 soal terbuka di modul terakhir bab ini.