Belajar Frontend - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Frontend! Series ini akan membawa kalian menguasai peran Frontend Developer — profesi yang membangun antarmuka pengguna (UI) di web — mulai dari HTML/CSS/JavaScript, TypeScript & framework modern, styling & design system, testing & performa, hingga AI-native frontend dan edge computing. Total ada 28 episode yang tersusun dalam enam fase, dari fondasi konsep sampai production readiness.

Sebelum menulis kode pertama, ada skill dasar dan perangkat yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena frontend bekerja di tiga lapisan sekaligus: struktur (HTML), presentasi (CSS), dan perilaku (JavaScript). Kalian juga bekerja di ekosistem tooling modern — bundler, linter, framework — yang semuanya berjalan di atas Node.js dan Git. Tanpa fondasi ini, kalian akan kesulitan saat kita masuk ke React di episode 8 dan Next.js di episode 9.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan browser, editor, runtime, dan Git, lalu memverifikasi environment untuk pertama kali. Sebagai studi kasus yang akan menemani seluruh series, kita pakai TokoKita — aplikasi toko online sederhana dengan katalog produk, halaman detail, keranjang, dan checkout — agar setiap konsep punya konteks nyata.

#Skill Dasar yang Wajib Dimiliki

#HTML, CSS, dan JavaScript Dasar

Kalian tidak perlu jago dulu, tetapi wajib mengenal tiga bahasa web:

• HTML untuk struktur: <header>, <nav>, <article>, <button>.
• CSS untuk tampilan: selektor, box model, display, flex.
• JavaScript untuk interaksi: variabel, fungsi, array, object.

Latihan kecil: buka halaman web favorit kalian, lalu dengan view-source (atau devtools) tebak bagian mana yang HTML, CSS, dan JS. Episode 3 sampai 5 akan mengasah ketiganya secara sistematis.

#Pola Pikir UX Dasar

Frontend bukan sekadar "membuat tampilan". Kalian menerjemahkan desain menjadi produk yang cepat, accessible, dan interaktif. Biasakan bertanya: "apakah pengguna bisa menyelesaikan tugasnya tanpa kebingungan?" Pemahaman UX ini yang membedakan implementer biasa dari frontend engineer yang baik — dan akan kita dalami terus di sepanjang series.

#Familiar dengan Browser DevTools

DevTools adalah "stetoskop" frontend. Di episode 2 kalian akan menginspeksi rendering, di episode 12 mengukur performa, di episode 15 mengaudit aksesibilitas. Karena itu pastikan kalian tahu lokasi panel-panelnya:

Elements   → inspeksi & edit DOM/CSS secara live
Console    → log, error, dan eksekusi JavaScript
Network    → lihat request HTTP, status, dan timing
Performance→ rekam & analisis rendering/jank
Lighthouse → audit otomatis (perf, a11y, SEO)

#CLI, Git, dan Logika Pemrograman

Mayoritas tooling frontend dijalankan dari terminal: npm install, git commit, bun dev. Kalian wajib nyaman dengan shell dasar — berpindah direktori, menjalankan perintah, membaca output error. Logika pemrograman (variabel, kondisi, perulangan, fungsi) juga wajib karena hampir semua episode membangun kode di atasnya.

#Perangkat Software yang Disiapkan

#Browser Modern (Chrome atau Firefox)

Gunakan browser modern dengan DevTools lengkap. Chrome dan Firefox sama-sama bagus; konsistensi di seluruh series lebih penting daripada memilih "yang terbaik". Buka dan pin DevTools kalian (F12) supaya terbiasa.

#VS Code

VS Code adalah editor paling umum di ekosistem frontend. Install plus beberapa ekstensi penting:

Prettier - Code formatter       → format otomatis
ESLint                          → linting JavaScript/TypeScript
Tailwind CSS IntelliSense       → autocomplete Tailwind (episode 10)
MDX                             → preview file .mdx

#Node.js & Package Manager

Node.js adalah runtime yang menjalankan semua tooling (Vite, Next.js, TypeScript). Wajib versi LTS saat ini. Cara terbaik mengelola versi adalah nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
nvm install --lts
nvm use --lts
node -v

Untuk package manager, npm sudah termasuk bawaan Node.js dan cukup untuk series ini. pnpm atau bun boleh dipakai sebagai alternatif — kita bahas perbandingannya di episode 14.

#Git

Git adalah sistem version control yang dipakai semua tim. Install dan konfigurasi identitas dasar:

git --version
git config --global user.name "Nama Kalian"
git config --global user.email "email@contoh.com"

Kalian juga butuh akun GitHub (atau GitLab) untuk praktik workflow di episode 7.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

node -v
npm -v
git --version
which code

Semuanya harus mencetak versi tanpa error. Jika code tidak dikenali, berarti CLI VS Code belum diaktifkan — buka VS Code, tekan Ctrl+Shift+P, jalankan "Shell Command: Install 'code' command in PATH".

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• Skill: dasar HTML/CSS/JavaScript, pola pikir UX, CLI & Git, dan logika pemrograman.
• Tool: browser modern, VS Code + ekstensi, Node.js LTS, Git, dan akun GitHub.
• Case study: aplikasi toko online TokoKita yang akan dipakai di semua episode.
• Verifikasi: node -v, npm -v, git --version, dan CLI code berfungsi.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Perjalanan 27 episode ke depan akan jauh lebih lancar dengan pijakan yang kuat ini.

#Penutup

Inti yang harus dibawa pulang:

• Frontend bekerja di tiga lapisan — HTML, CSS, JavaScript — plus tooling modern di atas Node.js dan Git.
• Siapkan browser devtools sebagai "stetoskop" kerja harian, VS Code sebagai editor, dan Node.js LTS sebagai runtime.
• Gunakan studi kasus TokoKita agar semua praktik di series ini konkret dan konsisten.
• Verifikasi environment sebelum lanjut agar tidak tersendat di episode-episode berikutnya.

Di episode 1 selanjutnya kita akan membahas peran, tanggung jawab, dan jalur karir frontend developer di 2026 — dari menerjemahkan desain menjadi UI yang cepat dan accessible, hingga bagaimana peran ini berevolusi mengorkestrasi komponen, data, dan AI di sisi klien & edge. Pastikan environment kalian sudah siap, karena perjalanan Belajar Frontend baru saja dimulai!