Roadmap Belajar Web Development

Pemula sering kebingungan di tengah banyaknya teknologi: HTML, React, Laravel, Docker, TypeScript, dan seterusnya. Roadmap ini menyusunnya menjadi tahapan berurutan sehingga kamu selalu tahu langkah berikutnya. Estimasi waktu bersifat perkiraan untuk belajar 1-2 jam per hari; setiap orang berbeda.

Prinsip: kuasai fondasi, bangun proyek di tiap tahap, baru naik. Jangan lompat tahap hanya karena teknologi di tahap berikutnya tampak lebih menarik.

Tahap 0: Persiapan (1 minggu)

• Pasang editor kode (VS Code) dan browser dengan DevTools.
• Pelajari dasar komputer yang dipakai sehari-hari: folder, file, terminal.
• Pahami cara kerja web secara garis besar: browser meminta halaman, server mengirim HTML.

Tahap 1: Fondasi web: HTML & CSS (3-5 minggu)

Pelajari:

• HTML semantik (header, main, section, article), form, tabel, gambar, tautan.
• CSS: selector, box model, warna, tipografi, Flexbox dan Grid.
• Desain responsif: media query dan pendekatan mobile-first.
• Dasar aksesibilitas (alt teks, kontras, label form).

Proyek: halaman profil pribadi, lalu klon landing page sederhana yang responsif.

Tahap 2: JavaScript (6-8 minggu)

Pelajari:

• Variable, tipe data, operator, kondisi, perulangan, function.
• Array dan object beserta method modern (map, filter, reduce).
• DOM dan event: mengubah halaman saat pengguna berinteraksi.
• Asynchronous: Promise, async/await, fetch untuk memanggil API.
• ES6+: modul, destructuring, template literal.

Proyek: daftar tugas, aplikasi cuaca dari API publik, kuis interaktif. Latihan terstruktur tersedia di course JavaScript Dasar KelasIT.

Tahap 3: Alat kerja wajib (2 minggu, berjalan paralel)

• Git & GitHub: commit, branch, merge, pull request. Lihat Belajar Git dan GitHub.
• Terminal/command line dasar.
• npm dan pengelola paket.
• Debugging dengan DevTools.

Proyek: unggah semua proyek sebelumnya ke GitHub dengan README yang jelas.

Tahap 4: Pilih jalur

Setelah fondasi kuat, pilih satu fokus utama.

Jalur A: Frontend

1. Framework UI: React (paling banyak lowongan), atau Vue/Svelte.
2. State management dan routing.
3. TypeScript untuk kode yang lebih aman.
4. CSS framework (Tailwind) dan komponen UI.
5. Testing (Vitest/Jest, Playwright) dan performa web.

Proyek: dashboard dengan data dari API, toko online sisi klien.

Jalur B: Backend

1. Satu bahasa backend: PHP (Laravel), Node.js (Express/NestJS), Python (Django/FastAPI), atau Go.
2. Database relasional: SQL, relasi, index, transaksi. Mulai dari Mengenal Database MySQL untuk Pemula.
3. REST API: Belajar REST API dari Dasar.
4. Autentikasi dan otorisasi, validasi, keamanan dasar (OWASP Top 10).
5. Testing unit dan integrasi.

Proyek: API blog/toko dengan login, CRUD, dan dokumentasi.

Jalur C: Fullstack

Ambil inti Jalur A dan B, tetapi bangun satu proyek dari ujung ke ujung: frontend memanggil API buatanmu sendiri, dengan database dan autentikasi.

Tahap 5: Deployment dan operasional (3-4 minggu)

• Dasar Linux dan server (VPS), SSH, permission.
• Web server (Nginx), HTTPS (Let's Encrypt), domain dan DNS.
• Variabel lingkungan dan konfigurasi produksi.
• Docker dasar.
• CI/CD sederhana dengan GitHub Actions.
• Pemantauan dan log. Lihat Deploy Laravel ke Server.

Proyek: deploy proyek terbaikmu ke internet dengan domain dan HTTPS.

Tahap 6: Praktik profesional (berkelanjutan)

• Struktur kode bersih, prinsip SOLID, design pattern dasar.
• Code review: membaca dan memberi masukan.
• Dokumentasi, penulisan commit yang baik.
• Struktur data dan algoritma dasar untuk wawancara teknis.
• Keamanan, performa, dan observabilitas.

Linimasa ringkas

Waktu nyata bergantung pada konsistensi, latar belakang, dan seberapa banyak kamu membangun, bukan hanya menonton.

Mengisi portofolio

Idealnya 3-5 proyek yang berbeda sifatnya:

1. Situs statis responsif.
2. Aplikasi JavaScript yang memakai API.
3. Aplikasi CRUD penuh dengan database dan login.
4. Proyek kolaborasi atau kontribusi open-source kecil.
5. Satu proyek yang menyelesaikan masalah nyata di sekitarmu.

Setiap proyek: demo live, repositori rapi, README yang menjelaskan masalah, teknologi, dan cara menjalankannya.

Kesalahan yang sebaiknya dihindari

• Tutorial hell: terus menonton tanpa membangun apa pun.
• Berganti teknologi setiap minggu karena takut ketinggalan tren.
• Melewati JavaScript murni dan langsung ke framework.
• Mengabaikan dasar HTTP, database, dan keamanan.
• Tidak pernah deploy. Proyek yang hanya hidup di laptop tidak bisa dibuktikan.
• Belajar sendirian terus. Bergabunglah dengan komunitas, minta masukan.

Sumber belajar yang baik

• Dokumentasi resmi (MDN Web Docs untuk HTML/CSS/JS, dokumentasi framework).
• Latihan interaktif dan proyek terpandu di KelasIT.
• Komunitas lokal dan forum untuk bertanya.

Kesimpulan

Roadmap ini intinya: HTML/CSS → JavaScript → Git → satu jalur (frontend, backend, atau fullstack) → deployment → praktik profesional, dengan proyek nyata di setiap tahap. Mulailah dari tahap yang sesuai kemampuanmu hari ini, bangun sesuatu minggu ini, dan ulangi.