ROADMAP MENJADI FRONTEND WEB DEVELOPER

Salah satu pilihan karir yang bisa kamu ambil dari dunia pemrograman adalah menjadi seorang Web Frontend Developer.

Video penjelasan roadmap frontend

Kalau kamu senang dengan belajar lewat video, berikut videonya

Ilustrasi roadmap frontend developer

Berikut gambar yang bisa menvisualisasikan peta perjalanan menjadi seorang frontend developer.

Tenang saja, kita akan membahasnya satu persatu di bagian bawah nanti.

Skill apa saja yang dibutuhkan

Secara garis besar, ada 3 skill dasar yang kamu butuhkan:

• HTML
• CSS
• Javascript

Tentu ada banyak detail yang akan kita jabarkan satu per satu.

Pada beberapa kasus (pekerjaan), kadang ada yang membutuhkan orang fokus pada bagian HTML dan CSS (hanya tampilan). Namun tidak jarang yang harus menyertakan keahlian Javascript.

Bisa HTML dan CSS saja sudah bisa membuka lowongan pekerjaan untuk kamu.

Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Skill Detail

Skill HTML yang diperlukan

• Mengerti dasar HTML
• Menulis HTML Semantik
• Bisa membuat berbagai elemen/komponen HTML (table, form, gambar, dll.)
• Mengerti aksesibilitas pada web
• Dasar dasar SEO

Skill CSS yang diperlukan

• Mengerti dasar CSS
• Bisa membuat berbagai macam layout
• Bisa membuat design responsif
• Bisa mengkonversi desain menjadi kode HTML-CSS

Skill Javascript yang diperlukan

• Mengerti dasar bahasa program Javascript
• Mengerti konsep DOM
• Bisa membuat situs yang interaktif
• Bisa berinteraksi dengan HTML dan CSS lewat Javascript
• Bisa berinteraksi dengan API dari Server (Ajax)

Skill umum yang diperlukan

Skill-skill berikut bisa jadi opsional bergantung di mana kamu akan bekerja. Namun secara umum familiar dengan berbagai konsep ini akan sangat membantu kamu dalam berkarir sebagai seorang frontend developer.

• Menggunakan Version control system seperti GIT
• Familiar dengan Git hosting seperti Github (bisa mengupload dan mengupdate kode)
• Familiar Hosting kode pada server (bisa via control panel atau FTP)
• Familiar Hosting kode dengan platform serverless (Github pages, Vercel, Netlify, etc..)
• Menggunakan build tools (linter, task runner, etc.)
• Test (pengujian) kode otomatis

Pengembangan masing masing skill

Berikut adalah pendalaman dari masing-masing skill. Biasanya teknologi yang kamu perlukan tergantung dengan tempat kamu bekerja.

CSS

Menggunakan CSS Framework

Contoh: (Bootstrap, Foundation, Bulma, Tailwind) CSS Framework adalah beberapa komponen yang sudah jadi yang siap dipakai.

Menggunakan CSS pre processors

Contoh: (SASS, LESS) Memudahkan kamu untuk menulis CSS yang lebih rapi dan mudah dikelola

Javascript

Dunia javascript sangatlah luas. Materi yang kamu butuhkan akan mengikuti dengan pilihan karir dan tempat kamu bekerja. Kamu tidak perlu panik harus mempelajari semuanya sekaligus.

Setiap contoh yang ada beberapa adalah opsi, tidak harus mempelajari semuanya.

Menggunakan Javascript framework/Library

Contoh: (React, Vue, Svelte) Semakin banyak komponen dan kompleks interasi situs kamu, terutama yang berada di satu halaman, akan terbantu dengan Javascript framework

Menggunakan package manager

Contoh: (NPM, Yarn, PNPM) Mengelola package-package yang dibutuhkan jadi lebih mudah dengan ini. Terutama memudahkan proyek untuk diinstall di berbagai tempat dengan satu konfigurasi file yang sama.

Menggunakan Typescript

Di beberapa proyek atau tim sudah menggunakan type checker (agar kode lebih aman dari segi konsistensi dan mencegah kesalahan dasar) seperti typescript.

Familiar dengan beberapa konsep

Ketika bekerja dengan suatu Javascript framework/library, biasanya ada beberapa konsep yang akan kamu temukan.

• Static Site Generator (Hugo, Astro, Jekyll, etc..)
• Server side rendering
• SPA (Single Page Application)

Auto test

Ketika situs aplikasi yang kamu buat semakin semakin besar, perlu membuat program untuk menguji fungsi-fungsi atau tampilannya secara otomatis, agar pada saat ada perubahan kode tidak mengubah fungsi sebelumnya yang sudah berjalan.

• Contoh Unit test: Vitest, Jest
• Contoh End to End test: Playwright, Cypress

Apa itu web frontend developer?

Web frontend developer adalah seorang profesional yang bertanggung jawab dalam pengembangan antarmuka pengguna (User Interface - UI) dan juga User experience (kenyamanan serta interaksi) untuk situs web atau aplikasi web.

Mereka bertanggung jawab untuk mengubah design menjadi kode yang bisa dipakai dan mengembangkan interaksi pengguna pada halaman web.

Baca lebih detail apa itu frontend developer

Apa saja tugas seorang frontend developer?

Beberapa tanggung jawab utama dari seorang web frontend developer adalah:

1. Mengembangkan Antarmuka Pengguna

Merancang dan mengembangkan elemen-elemen UI seperti menu, tombol, form, dan lain-lain. Biasanya juga mentranslasi desain yang sudah dibuat oleh web designer.

2. Mengimplementasikan Desain

Mengkonversi desain grafis (biasanya dalam bentuk PSD atau Sketch files) menjadi kode HTML, CSS, dan JavaScript.

3. Membuat Halaman Web Responsif

Mengembangkan halaman web yang dapat menyesuaikan tampilannya pada berbagai ukuran layar dan perangkat.

4. Interaksi dan Animasi

Mengimplementasikan interaksi dan animasi pada halaman web untuk meningkatkan pengalaman pengguna.

5. Optimasi Performa

Mengoptimalkan kode untuk meningkatkan performa situs web, seperti mengurangi waktu pemuatan dan mengoptimalkan penggunaan sumber daya.

6. Pengujian dan Debugging

Melakukan pengujian pada berbagai browser dan perangkat untuk memastikan bahwa situs web bekerja dengan baik dan tanpa kesalahan.

7. Mengintegrasikan API

Mengintegrasikan API (Application Programming Interface) dari backend atau layanan eksternal lainnya.

Informasi Teknologi

HTML (HyperText Markup Language)

HTML adalah bahasa standar yang digunakan untuk membuat halaman web. Bahasa ini menggunakan “tag” yang diletakkan di dalam tanda kurung sudut (< >) untuk mendefinisikan elemen-elemen berbeda pada halaman web, seperti judul, paragraf, gambar, tautan, dan lain-lain.

Ini adalah video singkat yang menjelaskan apa itu HTML.

Setiap halaman web pada dasarnya adalah dokumen HTML yang berisi struktur dan konten dari halaman tersebut, seperti teks dan gambar.

Informasi detail apa itu HTML

CSS (Cascading Style Sheets)

CSS adalah bahasa yang digunakan untuk mengendalikan tampilan halaman web yang dibuat dengan HTML. CSS memungkinkan Kamu untuk mengatur warna, font, ukuran, jarak, dan banyak aspek desain lainnya dari elemen-elemen pada halaman web. Dengan menggunakan CSS, Kamu bisa membuat halaman web yang lebih menarik dan mudah untuk dibaca.

Informasi detail apa itu CSS

JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. JavaScript memungkinkan Kamu untuk membuat elemen pada halaman web yang bisa merespon tindakan pengguna, seperti klik, input teks, dan lain-lain. Misalnya, Kamu bisa menggunakan JavaScript untuk memvalidasi form, memuat konten baru tanpa harus memuat ulang halaman, atau membuat animasi pada halaman web.

Informasi detail apa itu Javascript

Git

Git adalah sistem pengontrolan versi (Version Control System) yang digunakan untuk mengelola perubahan pada dokumen, kode program, dan set informasi lainnya selama waktu.

Git digunakan untuk mencatat perubahan yang terjadi pada file, sehingga Anda dapat kembali ke versi sebelumnya jika diperlukan. Hal ini sangat penting dalam pengembangan perangkat lunak karena memungkinkan banyak developer untuk bekerja pada proyek yang sama tanpa mengganggu pekerjaan orang lain.

Kesimpulan

Seorang web frontend developer biasanya bekerja dengan seorang web designer untuk mengimplementasikan desain mereka dan seorang web backend developer untuk mengintegrasikan dengan server-side logic. Keahlian yang umumnya diperlukan untuk menjadi seorang web frontend developer adalah pengetahuan mendalam tentang HTML, CSS, dan JavaScript, dan seringkali pengalaman dengan beberapa framework atau library seperti React.js, Angular, atau Vue.js.