Dokumen ini adalah ringkasan lengkap dari semua materi yang tersedia di situs web.dev – sumber daya resmi dari tim Chrome dan pakar web. Cocok untuk Anda yang ingin mempelajari HTML, CSS, JavaScript, performa, aksesibilitas, PWA, AI, dan tren terbaru.
🌟 Misi “Bersama-sama membuat web yang lebih baik” – web.dev membantu Anda menciptakan situs yang menarik, mudah diakses, cepat, dan aman untuk semua pengguna di berbagai browser.
🧱 1. Fondasi: Mulai dari Nol
Baru pertama belajar? web.dev punya kursus terpilih khusus pemula. Kuasai tiga pilar utama platform web:
🔹 HTML – Struktur dan Konten
Pelajari cara membuat judul, paragraf, tautan, gambar, daftar, tabel, formulir, dan menandai konten agar bermakna. HTML adalah kerangka setiap halaman web.
🔹 CSS – Tampilan dan Tata Letak
Atur warna, font, spasi, dan posisi elemen. Pahami box model, flexbox, grid, dan desain responsif agar situs Anda indah di desktop dan ponsel.
🔹 JavaScript – Interaktivitas
Buat halaman web menjadi hidup: respons tombol, validasi formulir, manipulasi konten secara dinamis. Dasar-dasar variabel, fungsi, dan logika akan dibahas tuntas.
⚙️ 2. Topik Inti Pengembangan Web Modern
🎨 Desain UI dan CSS Tingkat Lanjut
- Ruang warna & fungsi CSS baru – kini didukung semua browser, memungkinkan desain lebih hidup dan akurat.
- Eksplorasi mendalam Flexbox, CSS Grid, dan pendekatan desain responsif terkini.
⚡ Performa Web & Core Web Vitals
- LCP (Largest Contentful Paint) – optimasi gambar dan faktor server (TTFB).
- INP (Interaction to Next Paint) – metrik responsivitas terbaru (menggantikan FID). Pelajari cara mengukur dan mengoptimalkannya.
- Rekomendasi terbaik – kumpulan praktik terbaik berdasarkan data nyata.
📱 Progressive Web Apps (PWA)
- Keandalan offline – akses situs tanpa koneksi internet.
- TransformStream – kini lintas browser, untuk streaming data.
- Pola aplikasi keren – fitur papan klip, akses file, dan pola aplikasi tingkat lanjut.
♿ Aksesibilitas (a11y) – Untuk Semua
- Kontras warna – alat dan teknik menguji kontras yang mudah diakses.
- Navigasi keyboard, teks alternatif, struktur heading.
- Wawancara dengan pakar aksesibilitas Melanie Sumner.
🔐 Pembayaran dan Identitas
- Kunci sandi (passkeys) – login tanpa sandi yang lebih aman dan sederhana.
- Formulir pembayaran dan alamat – praktik terbaik untuk tingkat konversi maksimal.
🧰 3. Alat dan Sumber Daya Esensial
📊 Dasar Pengukuran Platform Web (Baseline)
Fitur yang masuk Dasar Pengukuran dijamin stabil di semua browser utama. Gunakan untuk memutuskan teknologi yang siap dipakai di proyek Anda. Setiap artikel di web.dev mencantumkan status Baseline.
📰 Blog web.dev
Update terbaru tentang fitur platform web, AI, Core Web Vitals, dan berita industri. Wajib dibaca agar tidak ketinggalan zaman.
📧 Newsletter Developer
Dapatkan ringkasan teknik dan berita terbaru langsung ke email Anda.
🤖 4. Masa Depan: AI dan Web
web.dev kini menyediakan referensi untuk membangun pengalaman web-first dengan AI. Pelajari integrasi model AI, API baru, dan cara membuat aplikasi web cerdas yang inovatif dan tetap berperforma tinggi.
✅ Ringkasan Jalur Belajar dari web.dev
- Mulai dari Dasar – HTML, CSS, JavaScript (kursus pemula).
- Perdalam Inti – UI/PCSS, performa (Core Web Vitals), PWA, aksesibilitas, pembayaran.
- Gunakan Alat – Baseline, blog, newsletter.
- Eksplorasi AI – untuk aplikasi web masa depan.
🌐 web.dev adalah mitra terbaik Anda dalam perjalanan menjadi pengembang web yang handal. Semua materi ditulis oleh pakar Chrome dan kontributor eksternal, selalu diperbarui, dan gratis. Selamat belajar!
