Struktur HTML
Hello World
Elemen Umum
Teks & Heading
Heading 1
...Heading 6
Paragraph text
Bold ItalicLink & Gambar
List
- Item
- First
Form
Tipe Input
Select & Textarea
HTML Semantik
| <header> | Konten pengantar atau container navigasi |
| <nav> | Link navigasi |
| <main> | Konten utama halaman (satu per halaman) |
| <section> | Pengelompokan konten berdasarkan tema |
| <article> | Konten mandiri |
| <aside> | Sidebar atau konten sampingan |
| <footer> | Footer untuk section atau halaman |
| <figure> | Gambar/diagram dengan caption |
| <figcaption> | Caption untuk |
Selector CSS
Selector Dasar
| element | p { } — semua elemen |
| .class | .card { } — selector class |
| #id | #main { } — selector id |
| * | Selector universal (semua elemen) |
Kombinator
| A B | Keturunan (B di dalam A) |
| A > B | Anak langsung saja |
| A + B | Sibling bersebelahan (B tepat setelah A) |
| A ~ B | Sibling umum (B setelah A) |
Pseudo-class
| :hover | Mouse di atas elemen |
| :focus | Elemen mendapat fokus |
| :first-child | Anak pertama dari parent |
| :nth-child(n) | Anak ke-n (2n = genap, odd = ganjil) |
Box Model
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
Shorthand
| margin: 10px | Semua sisi |
| margin: 10px 20px | Atas/bawah | kiri/kanan |
| margin: 10px 20px 15px | Atas | kiri/kanan | bawah |
| margin: 10px 20px 15px 5px | Atas | kanan | bawah | kiri |
Flexbox
Container
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
Properti Item
| flex: 1 | Tumbuh mengisi ruang yang tersedia |
| flex-grow: 2 | Rasio pertumbuhan relatif terhadap sibling |
| flex-shrink: 0 | Jangan menyusut di bawah basis |
| flex-basis: 200px | Ukuran awal sebelum tumbuh/menyusut |
| align-self: flex-end | Override perataan container |
| order: -1 | Urutan visual (default 0) |
Grid
Container
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
Penempatan Item
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
Positioning
| static | Alur default (tanpa properti offset) |
| relative | Offset dari posisi normal |
| absolute | Offset dari ancestor ter-position terdekat |
| fixed | Offset dari viewport (tetap saat scroll) |
| sticky | Relative hingga ambang scroll, lalu fixed |
Contoh
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
Media Query
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
Breakpoint Umum
| 480px | Ponsel kecil |
| 768px | Tablet |
| 1024px | Desktop kecil / tablet landscape |
| 1280px | Desktop |