Langkah 1
Jalur belajar
Roadmap Frontend Developer
Kursus gratis dalam urutan yang benar-benar dibutuhkan seorang front end developer: HTML untuk struktur, CSS untuk layout, JavaScript untuk perilaku, TypeScript untuk keamanan, React dan Next.js untuk aplikasi sungguhan, Git untuk merilis, dan delapan proyek untuk membuktikannya. Setiap pelajaran berjalan di browser, dan setiap kursus sebelum langkah proyek diakhiri dengan sertifikat gratis.
710,880+ pelajar terdaftar di seluruh kursus ini
804 pelajaran823 tantangan3,183 soal kuis
- Ramah pemula
Bantuan coding dengan AI
Pelajaran interaktif yang praktis
Narasi audio di setiap pelajaran
Kuis untuk menguji pemahamanmu
Sertifikat jalur di akhir, plus 13 di sepanjang jalan
Jalur front end developer, langkah demi langkah
Setiap langkah adalah kursus Coddy yang sudah ada. Ikuti secara berurutan, atau langsung masuk ke yang belum kamu kuasai; progresmu disimpan per kursus.
- 1
- 2Langkah 2
CSS: layout dan desain
Mulai langkah iniMulaiSelector, box model, warna dan tipografi, lalu flexbox, grid, layout responsif, transisi, dan animasi dalam dua bagian. Di langkah inilah halaman mulai terlihat seperti yang biasa kamu pakai.Mulai2 bagian, berurutan - 3Langkah 3
JavaScript, seluruh bahasanyaHalaman khusus
Mulai langkah iniMulaiDasar-dasar, logika dan alur kontrol, lalu objek dan class, dalam tiga bagian. Pekerjaan front end adalah pekerjaan JavaScript; setiap framework setelah langkah ini hanyalah cara untuk mengaturnya, dan baru bisa dipahami setelah bahasanya dikuasai.MulaiHalaman khusus3 bagian, berurutan - 4Langkah 4
JavaScript di browser
Mulai langkah iniMulaiDOM, event, mengambil data, dan membangun halaman interaktif tanpa framework, lalu pola front end yang praktis. Di sinilah HTML, CSS, dan JavaScript menjadi satu: halaman yang merespons orang yang memakainya.Mulai2 bagian, berurutan - 5Langkah 5
TypeScriptHalaman khusus
Mulai langkah iniMulaiTipe, interface, generics, dan error dari compiler sebagai alat bantu. Hampir setiap codebase React profesional memakai TypeScript, jadi TypeScript datang tepat sebelum framework-nya, bukan sebagai tambahan di belakang.MulaiHalaman khusus - 6Langkah 6
React dan Next.jsHalaman khusus
Mulai langkah iniMulaiKomponen, props, state, hooks, dan rendering, lalu Next.js untuk routing, memuat data, dan aplikasi sungguhan. Framework yang paling banyak disebut di lowongan front end, diajarkan setelah bahasa yang dipakai untuk menulisnya.MulaiHalaman khusus2 bagian, berurutan - 7Langkah 7
Git dan version controlHalaman khusus
Mulai langkah iniMulaiCommit, branch, merge, menyelesaikan konflik, dan remote. Setiap pekerjaan front end dan setiap proyek portofolio berada di repository Git; mempelajarinya di sini berarti proyek di langkah berikutnya dirilis seperti pekerjaan sungguhan.MulaiHalaman khusus - 8Langkah 8
Proyek: bangun yang pernah kamu lihat
Mulai langkah iniMulaiLatihan flexbox dan selector, latihan DOM dan array method, lalu proyek nyata: kartu profil Coddy, halaman Instagram, halaman masuk Netflix, dan image slider. Masing-masing adalah bagian portofolio yang bisa dibuka perekrut.Mulai8 kursus, berurutan- CSS Flexbox: Kursus LengkapHanya html15 pelajaran
- Selector CSSHanya html15 pelajaran
- Metode DOM JavaScriptHanya html13 pelajaran
- Metode array di JavaScriptHanya javascript18 pelajaran
- Tiruan Kartu Profil Coddy | Proyek front-endHanya html26 pelajaran24 tantangan1 proyek
- Klon Halaman Instagram | Proyek Front-EndHanya html16 pelajaran14 tantangan1 proyek
- Klon Halaman Masuk Netflix | Proyek Front-endHanya html19 pelajaran18 tantangan1 proyek
- Slider | Proyek Front-endHanya html23 pelajaran22 tantangan1 proyek
Yang kamu dapatkan
Semua yang kamu pakai untuk belajar coding
Belajar sambil praktik
Tulis kode sungguhan, query database, buat website, dan kuasai prompt AI. Pelajaran interaktif kami mencakup setiap keterampilan yang dibutuhkan developer modern.
playground.js
Editor kode
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Tes #1
Tes #2
Tes #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Bangun streakmu
Tetap konsisten dan lihat progresmu bertumbuh! Pantau kebiasaan coding harianmu, lindungi streakmu dengan hari beku, dan raih hadiah karena hadir setiap hari.
12 hari streak
Kembali besok untuk menjaga streakmu!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Gandakan atau hangus
Hari ke-5 dari 7
Pembeku Streak
2 left
Coding di mana saja
Bawa perjalanan coding-mu ke mana saja! Tanpa setup, tanpa unduhan: cukup buka dan mulai coding. Tersedia di iOS, Android, dan Web dengan rating bintang 4,9.
7
250
5
Variabel
Lanjutkan
4.9
Rating
Kamu tidak sendirian
Bersaing di papan peringkat global, ajak teman untuk mendapat hadiah, dan rayakan kemenangan satu sama lain. Coding lebih seru bersama teman!
Liga Challenger7 teratas naik
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Zona promosiSemua cara belajar
Baca, dengarkan, uji dirimu, tanya AI, atau cari lagi apa pun yang sudah kamu pelajari. Setiap pelajaran menyesuaikan diri denganmu.
Pengenalan variabel
Audio
Variabel adalah wadah bernama yang menyimpan nilai yang bisa kamu pakai lagi nanti di programmu.
Di Python, kamu membuatnya dengan menulis nama, tanda sama dengan, lalu nilai yang ingin kamu simpan.
Nilainya bisa berubah seiring waktu. Menetapkan ulang nama itu cukup membuatnya menunjuk ke nilai baru.
1xSarah
Dapatkan sertifikat
Dapatkan sertifikat untuk setiap kursus yang kamu selesaikan. Tambahkan ke profil LinkedIn dan CV-mu untuk menunjukkan keahlian coding-mu kepada pemberi kerja.
Sertifikat PenyelesaianDengan ini menyatakan bahwaBudi Santosotelah berhasil menyelesaikanDasar Python
Dasar Python
TanggalJan 2026
Tambahkan ke LinkedInKenapa belajar front end development di Coddy
- Kamu melihat halaman yang kamu bangun. Setiap pelajaran HTML, CSS, dan JavaScript tampil langsung di browser di samping kodemu, jadi selector yang salah atau flexbox yang rusak terlihat di detik kamu menulisnya, bukan di screenshot di akhir.
- Urutan yang tepat, dan JavaScript tidak dilewati. Kebanyakan kursus front end terburu-buru dari HTML ke framework; jalur ini memberi JavaScript tiga bagian penuh sebelum React, karena sebuah framework baru bisa dipahami setelah bahasa di baliknya dikuasai.
- Petunjuk AI yang membaca markup dan kodemu. Saat layout rusak atau komponen tidak muncul, Bugsy melihat apa yang kamu tulis dan mengarahkanmu ke perbaikannya tanpa memberikan jawabannya.
- Proyek yang bisa dibuka perekrut. Langkah terakhir adalah delapan proyek nyata, tiruan halaman yang sudah kamu kenal, masing-masing menjadi bagian portofolio yang bisa dibagikan, ditambah sertifikat gratis untuk setiap kursus di tujuh langkah pertama.
Pertanyaan umum tentang menjadi front end developer
Bagaimana cara menjadi front end developer?
Front end developer adalah orang yang membangun bagian website yang dilihat dan dipakai pengguna. Pelajari HTML, CSS, dan JavaScript sampai cukup baik untuk membangun halaman dari file kosong, tambahkan TypeScript dan satu framework (React adalah pilihan yang aman), pelajari Git, lalu bangun tiga atau empat proyek nyata tanpa tutorial dan taruh secara online. Itulah jalur ini, dalam urutan itu. Proyeknya lebih penting daripada sertifikatnya: portofolio front end adalah satu-satunya hal yang bisa dinilai hiring manager dalam tiga puluh detik.
Sebaiknya belajar HTML, CSS, atau JavaScript dulu?
HTML dulu, lalu CSS, lalu JavaScript, dan berikan waktu paling banyak untuk JavaScript. HTML butuh beberapa minggu dan CSS sebulan untuk terasa nyaman; JavaScript adalah bahasa pemrograman yang utuh dan menjadi tempat sebagian besar front end developer otodidak mengambil jalan pintas. Jalur ini memberinya tiga bagian ditambah satu bagian tentang DOM sebelum framework apa pun muncul.
Apakah aku perlu TypeScript untuk menjadi front end developer?
Untuk pekerjaan, hampir selalu: sebagian besar codebase React dan Next.js profesional ditulis dengan TypeScript, dan lowongan yang menyebut "JavaScript" biasanya dalam praktiknya berarti TypeScript. Langkahnya pendek setelah JavaScript-mu kuat, itulah kenapa TypeScript berada tepat sebelum React di jalur ini, bukan di akhir.
React, Vue, atau Angular: framework mana yang sebaiknya dipelajari?
React, kecuali pekerjaan tertentu yang kamu incar meminta yang lain. React punya lowongan paling banyak dengan selisih jauh, ekosistem terbesar, dan Next.js di atasnya adalah yang dipakai untuk membangun sebagian besar situs production baru. Idenya, yaitu komponen, state, props, dan rendering, bisa dipindahkan ke Vue dan Angular nanti dalam satu atau dua minggu. Jalur ini mengajarkan React dan Next.js.
Berapa lama waktu yang dibutuhkan untuk belajar front end development?
Sekitar enam sampai sembilan bulan dengan satu jam sehari untuk mencapai level junior dengan portofolio. Di jalur ini, HTML dan CSS butuh enam sampai delapan minggu bersama-sama, JavaScript dua sampai tiga bulan, TypeScript dua minggu, React dan Next.js enam minggu, dan langkah proyek selama kamu terus membangun. Angka yang penting adalah proyek yang selesai, bukan pelajaran yang selesai.
Apakah jalur ini membahas testing, aksesibilitas, atau state management?
Tidak sebagai kursus tersendiri, dan kami lebih suka mengatakannya terus terang daripada menggembungkan halaman ini. Markup semantik, fondasi halaman yang aksesibel, adalah bagian dari langkah HTML, dan penanganan state bawaan React juga dibahas; kursus testing, aksesibilitas yang lebih mendalam, dan library state ada di roadmap kurikulum dan akan masuk ke jalur ini sebagai langkah baru saat dirilis.
Bisakah aku mendapat pekerjaan front end hanya dengan kursus gratis?
Bisa, kalau kursusnya menghasilkan portofolio, itulah alasan jalur ini diakhiri dengan delapan proyek. Yang diseleksi perusahaan adalah halaman buatanmu yang bisa mereka buka, riwayat Git yang menunjukkan kamu yang membangunnya, dan wawancara di mana kamu bisa menjelaskan sebuah layout dan sebuah komponen. Ketiganya didapat dari jalur ini; tidak ada yang butuh bootcamp berbayar.
Apakah aku mendapat sertifikat untuk jalur Frontend Developer?
Ya. Selesaikan setiap langkah dan kamu akan mendapat satu sertifikat gratis untuk seluruh jalur Frontend Developer. Sertifikat ini mencantumkan setiap kursus yang kamu selesaikan di sepanjang jalan, dan menautkan sertifikat masing-masing kursus, sehingga siapa pun bisa memeriksa setiap keterampilan yang disebutkannya. Kamu bisa menambahkannya ke profil LinkedIn-mu. Ini adalah sertifikat penyelesaian dari Coddy, bukan kualifikasi terakreditasi.
