Belajar HTML & CSS

Perkenalan kelas

Heading dan paragraf

Kerangka dokumen dan bagian head

Elemen semantik: header, nav, main, footer

Misi: kerangka halaman Koperasi Melati

Subjudul, daftar, dan penekanan teks

Tautan absolut, relatif, dan ke bagian halaman

Gambar dan teks alternatif

Misi: halaman profil Perpustakaan Warga

Tabel data: baris, kolom, dan judul kolom

Formulir dasar: label, input, dan tombol

Validasi bawaan: rentang, pola, dan panjang isian

name, value, dan ke mana data formulir dikirim

Misi: daftar harga dan formulir pesanan

Selektor, warna, dan huruf

Kotak: padding, border, margin, dan satuan

Misi: menyusun satu halaman utuh

Model kotak: isi, padding, border, margin

Satuan px, rem, persen, dan box-sizing

Selektor atribut, kombinator, dan kelas semu struktural

overflow, text-overflow, dan object-fit

Misi: kartu pengumuman Toko Nusantara

display: flex dan arah sumbu

justify-content, align-items, gap, dan flex-wrap

Misi: kartu produk Toko Nusantara berjajar

Grid: kolom dengan grid-template-columns dan repeat

Grid responsif: minmax(), auto-fill, dan auto-fit

Misi: tata letak halaman profil

Media query dan mobile-first

Satuan relatif: em, vw, clamp(), dan min()

Misi: formulir pendaftaran yang rapi di HP

position: relative, absolute, fixed, dan sticky

z-index dan konteks penumpukan

Custom property: menyimpan warna dan jarak di satu tempat

Web font: @font-face, font-display, dan huruf cadangan

@keyframes, animation, dan transform

Misi: panel harga yang menempel dan tombol beranimasi

Merayapi, mengindeks, menyajikan

Elemen title dan meta description

Satu h1 dan hierarki heading

Maksud pencarian dan riset kata kunci

Memetakan kata kunci ke halaman

Misi: merapikan halaman jadwal perpustakaan

Teks alt dan nama berkas gambar

URL yang terbaca

Tautan internal dan teks jangkar

Tautan dari situs lain: alami, berbayar, dan spam tautan

Misi: galeri produk dan navigasi kedai

Konten duplikat, rel="canonical", dan hreflang

robots.txt dan noindex

Sitemap XML

Misi: versi cetak, situs demo, dan sitemap

Data terstruktur JSON-LD

meta viewport dan mobile-first indexing

Core Web Vitals dan HTTPS

Memeriksa satu halaman: dari perayapan sampai tautan

Misi: halaman panduan yang siap dirayapi

Aksesibilitas, disabilitas, dan teknologi bantu

WCAG 2.2: empat prinsip, tiga tingkat

HTML semantik, landmark, dan bahasa halaman

Misi: struktur halaman Bank Sampah Berseri

Teks alternatif: informatif dan dekoratif

Rasio kontras dan warna sebagai penanda

Media: takarir, transkrip, dan deskripsi audio

Misi: halaman layanan Puskesmas Mekar Sari

Navigasi papan ketik dan fokus

Formulir berkelompok dan tabel data

ARIA: aturan pemakaian, nama, dan wilayah langsung

Misi: formulir pendaftaran sanggar

Gerak, animasi, dan ukuran target

Perbesar teks dan reflow 320 CSS px

Menguji aksesibilitas: alat dan pemeriksaan manual

Misi: audit halaman promo toko buku

Dari alamat sampai byte pertama: DNS, TCP, TLS, dan TTFB

Redirect dan rantai pengalihan

Misi: audit perjalanan halaman Katering Bu Ani

Ukuran transfer, ukuran asli, dan kompresi

Jumlah permintaan, origin pihak ketiga, dan minifikasi

Cache untuk kunjungan ulang: URL bersidik dan validasi ulang

Misi: audit byte halaman Koperasi Tani Makmur

CSS dan script yang menghambat render

preconnect, preload, dan font-display

Misi: head halaman Kopi Gayo Lestari

Gambar: dimensi, loading lazy, dan format

Gambar responsif: srcset dan sizes

Core Web Vitals dari data: LCP, INP, dan CLS

Misi: audit halaman produk Kopi Gayo Lestari