0Pricing
Frontend Academy icon

Frontend Academy

HTMLFrontendWebBeginner

Kembangkan website yang memukau secara visual dan responsif dengan Frontend Development Academy.

🤖 Bertenaga AI📚 41 kursus👥 100.000+ pelajar⭐ Rating 4,9
Ringkasan Kursus

Bangun Spektrum Lengkap Frontend Modern

Frontend development adalah disiplin mengubah kode menjadi semua yang dilihat dan diinteraksikan pengguna di browser — struktur HTML, presentasi CSS, perilaku JavaScript, dan framework serta tooling yang menyatukannya pada skala produksi. Track ini mencakup stack lengkap: dari cara web mengirimkan halaman hingga menulis aplikasi React dan Vue yang type-safe, mengoptimalkan performa, dan mendeploy melalui pipeline CI/CD.

Yang Akan Anda Pelajari

Anda akan memulai dengan fondasi HTML, CSS, dan JavaScript, kemudian menguasai TypeScript, DOM dan Browser APIs, responsive design, dan pola ES6+ termasuk async programming dan modules. Setelah itu Anda melanjutkan ke React (hooks, pola advanced, Next.js SSR) dan Vue 3 (Composition API, Nuxt 3 SSR), state management, frontend testing, arsitektur CSS, dan interface real-time dengan WebSockets. Track ditutup dengan optimasi web performance, keamanan frontend, design systems, dan frontend CI/CD dan DevOps.

Learning Path

Empat puluh satu course mencakup level A1 hingga C2. Course A1 dan A2 membangun fondasi — cara kerja web, semantic markup, CSS animations, Git, dan pengenalan TypeScript. Course B1 dan B2 membangun kompetensi profesional: CSS Layout Mastery, JavaScript Modules and Build Tools, fundamentals React dan Vue 3, integrasi API, Progressive Web Apps, dan Server-Side Rendering dengan Next.js dan Nuxt 3. Course C1 menangani kebutuhan level senior: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, Frontend Architecture, Design Systems and Component Libraries, Frontend Security, dan Frontend CI/CD dan DevOps. Track berakhir di C2 dengan Senior Frontend Engineering, yang mengkonsolidasikan semuanya menjadi praktik production-grade.

Cara Kerjanya

Setiap course dibagi menjadi lesson singkat dan hands-on yang Anda selesaikan di code editor bawaan dengan feedback real-time. Tutor AI tersedia kapan saja Anda mengalami kesulitan, dan setiap konsep diperkuat melalui exercise yang mencerminkan perilaku browser dan framework sebenarnya daripada contoh yang dibuat-buat.

Mulai Belajar →

Cara Kamu Belajar

🎯
Pelajaran Interaktif
Latihan koding langsung dengan umpan balik real-time
🤖
AI Tutor
Dapatkan bantuan instan dari AI kami saat kamu stuck
💻
Editor Bawaan
Tulis dan jalankan kode langsung di browser kamu
🏆
Sertifikat
Raih sertifikat saat kamu menyelesaikan kursus
Kurikulum

41 Kursus

Setiap kursus di jalur belajar Frontend Academy.

01

Selamat Datang di Pengembangan Frontend

A13 pelajaran

Pahami pekerjaan frontend yang sebenarnya, alasan bidang ini menjadi salah satu karier teknologi yang paling banyak diminati dan kreatif, s…

02

Cara Kerja Web

A14 pelajaranPRO

Pahami dasar-dasar web: cara peramban meminta halaman, fungsi DNS, cara kerja HTTP, dan apa yang terjadi saat Anda mengetikkan URL. Setelah…

03

Dasar-Dasar HTML untuk Frontend

A14 pelajaranPRO

Pelajari blok pembangun setiap halaman web. Tulis dokumen HTML5 yang valid menggunakan elemen semantik, susun konten dengan judul dan dafta…

04

Dasar-Dasar CSS untuk Frontend

A14 pelajaranPRO

Tata HTML Anda dengan percaya diri. Pelajari cara kerja cascade dan spesifisitas, terapkan warna dan tipografi, kuasai model kotak, serta k…

05

Dasar-Dasar JavaScript

A14 pelajaranPRO

Tulis program JavaScript pertama Anda. Pelajari cara mendeklarasikan variabel, bekerja dengan tipe data primitif, mendefinisikan fungsi, da…

06

Alat Pengembang dan Alur Kerja

A14 pelajaranPRO

Bekerjalah seperti pengembang frontend profesional. Kuasai Chrome DevTools untuk memeriksa dan men-debug, konfigurasikan VSCode dengan ekst…

07

Pengenalan TypeScript

A24 pelajaranPRO

Tambahkan tipe ke JavaScript dan temukan bug sebelum mencapai browser. Pelajari sistem tipe TypeScript, beri anotasi pada variabel dan fung…

08

DOM dan API Peramban

A24 pelajaranPRO

Jadikan HTML Anda interaktif dengan JavaScript. Pilih elemen, dengarkan peristiwa, baca dan ubah konten, serta buat atau hapus elemen secar…

09

Dasar-Dasar Desain Responsif

A24 pelajaranPRO

Buat tata letak yang berfungsi pada ukuran layar apa pun. Pelajari tag meta viewport, gunakan Flexbox dan Grid untuk tata letak yang fleksi…

10

Formulir HTML dan Markup Semantik

A24 pelajaranPRO

Perdalam pengetahuan HTML Anda. Buat formulir yang sepenuhnya aksesibel dengan atribut ARIA, gunakan seluruh jenis input HTML5, manfaatkan…

11

JavaScript: Array, Objek, dan ES6+

A24 pelajaranPRO

Tingkatkan kemampuan JavaScript Anda dengan sintaks modern dan metode bawaan yang andal. Manipulasi array dengan map, filter, dan reduce, l…

12

Alur Kerja Git dan Kolaborasi

A24 pelajaranPRO

Gunakan Git secara efektif sebagai pengembang frontend. Pelajari perintah inti untuk menyimpan pekerjaan, pahami percabangan untuk pengemba…

13

Variabel, Transisi, dan Animasi CSS

A24 pelajaranPRO

Hidupkan antarmuka dengan gerakan CSS. Gunakan properti khusus untuk token desain yang mudah dipelihara, tambahkan transisi halus pada peru…

14

Penguasaan Tata Letak CSS

B14 pelajaranPRO

Lampaui dasar-dasar untuk benar-benar menguasai tata letak CSS. Pelajari perataan dan pembungkusan Flexbox secara mendalam, manfaatkan area…

15

Modul JavaScript dan Alat Build

B14 pelajaranPRO

Pahami rantai alat JavaScript modern. Gunakan sintaks modul ES, kelola paket dengan npm, jalankan server pengembangan instan dengan Vite, d…

16

Pendalaman Tipe dan Antarmuka TypeScript

B14 pelajaranPRO

Pelajari sistem tipe TypeScript secara lebih mendalam. Tulis fungsi generik yang dapat digunakan ulang, gunakan tipe utilitas untuk menguba…

17

Dasar-Dasar React

B14 pelajaranPRO

Buat aplikasi React pertama Anda. Pahami sintaks JSX, susun UI dari komponen fungsional, teruskan data dengan props, dan kelola status loka…

18

React: useEffect dan Pengambilan Data

B14 pelajaranPRO

Sinkronkan komponen React dengan sistem eksternal. Pelajari cara kerja useEffect, ambil data dari API saat komponen dimuat, tampilkan statu…

19

Dasar-Dasar Vue 3

B14 pelajaranPRO

Buat aplikasi Vue 3 pertama Anda menggunakan Komponen Satu File. Pelajari Options API, direktif inti, serta cara berkomunikasi antara kompo…

20

Aksesibilitas untuk Frontend

B14 pelajaranPRO

Bangun antarmuka yang dapat digunakan semua orang. Pahami tingkat kesesuaian WCAG, gunakan HTML semantik sebagai dasar aksesibilitas, terap…

21

JavaScript: Pemrograman Asinkron

B24 pelajaranPRO

Kuasai JavaScript asinkron dari dasar. Pahami loop peristiwa, beralih dari pola callback ke Promise, dan tulis kode async/await yang rapi d…

22

React: Hook Lanjutan

B24 pelajaranPRO

Kuasai seluruh API hook React. Bagikan data tanpa meneruskan props berulang kali menggunakan useContext, kelola status kompleks dengan useR…

23

Vue 3: Composition API dan Reaktivitas

B24 pelajaranPRO

Manfaatkan sepenuhnya kemampuan Vue 3 dengan Composition API. Gunakan ref dan reactive untuk status reaktif, computed dan watch untuk nilai…

24

Manajemen Status

B24 pelajaranPRO

Kelola status seluruh aplikasi secara efektif. Pelajari Redux Toolkit untuk React, Zustand yang ringan sebagai alternatif sederhana, Pinia…

25

Pengujian Frontend

B24 pelajaranPRO

Tulis pengujian otomatis untuk kode frontend Anda. Siapkan Jest, uji komponen React dengan Testing Library, uji komponen Vue, serta tirukan…

26

Arsitektur CSS

B24 pelajaranPRO

Tulis CSS yang dapat berkembang. Pelajari konvensi penamaan BEM untuk selektor yang mudah diprediksi, batasi cakupan gaya dengan Modul CSS,…

27

Integrasi API dan REST

B24 pelajaranPRO

Hubungkan frontend Anda ke API backend. Gunakan Fetch API bawaan untuk semua metode HTTP, tambahkan Axios untuk pencegat dan URL dasar, tan…

28

Rendering Sisi Server: Next.js

B24 pelajaranPRO

Bangun aplikasi React siap produksi dengan Next.js. Pahami Pages Router dan App Router modern, bedakan Komponen Server dan Klien, pilih str…

29

Rendering Sisi Server: Nuxt 3

B24 pelajaranPRO

Bangun aplikasi Vue full-stack dengan Nuxt 3. Gunakan perutean berbasis file dan impor otomatis untuk menghilangkan kode berulang, ambil da…

30

Aplikasi Web Progresif

B24 pelajaranPRO

Ubah situs web menjadi pengalaman seperti aplikasi. Tulis Manifest Aplikasi Web agar dapat dipasang, daftarkan Service Worker untuk dukunga…

31

WebSockets dan Frontend Real-Time

B24 pelajaranPRO

Bangun antarmuka pengguna real-time. Gunakan API WebSocket bawaan, integrasikan pustaka klien Socket.io, terima peristiwa yang dikirim serv…

32

Peralatan Frontend Modern

B24 pelajaranPRO

Kuasai rantai alat JavaScript yang berkembang pesat. Perluas Vite dengan plugin dan gunakan untuk SSR, pahami cara esbuild mencapai kecepat…

33

Optimasi Kinerja Web

C14 pelajaranPRO

Buat situs Anda cepat dan ukur peningkatannya. Pahami Core Web Vitals, jalankan audit Lighthouse, optimalkan gambar untuk web, serta kurang…

34

TypeScript Lanjutan untuk Frontend

C14 pelajaranPRO

Dorong TypeScript hingga batas kemampuannya. Buat tipe dengan tipe literal templat, beri anotasi pada komponen dan hook React dengan generi…

35

Pola Lanjutan React

C14 pelajaranPRO

Tulis kode React seperti yang dilakukan pembuat pustaka. Buat komponen gabungan yang didukung Context, gunakan render props dan HOC untuk b…

36

Pola Lanjutan Vue

C14 pelajaranPRO

Kuasai pola Vue 3 lanjutan yang digunakan dalam aplikasi profesional. Bagikan logika di seluruh pohon komponen dengan provide/inject, muat…

37

Arsitektur Frontend

C14 pelajaranPRO

Rancang aplikasi frontend yang dapat berkembang untuk tim besar. Terapkan Atomic Design pada hierarki komponen, kelola banyak paket dengan…

38

Sistem Desain dan Pustaka Komponen

C14 pelajaranPRO

Buat dan pelihara pustaka komponen bersama. Dokumentasikan komponen di Storybook, definisikan token desain dengan Style Dictionary, beri ve…

39

Keamanan Frontend

C14 pelajaranPRO

Lindungi pengguna Anda dari ancaman keamanan web. Cegah XSS dengan pengodean keluaran dan Content Security Policy, lindungi dari CSRF denga…

40

CI/CD Frontend dan DevOps

C14 pelajaranPRO

Otomatiskan penyampaian frontend Anda. Tulis alur kerja GitHub Actions untuk memeriksa gaya, menguji, dan melakukan build setiap kali ada p…

41

Rekayasa Frontend Tingkat Senior

C24 pelajaranPRO

Bekerjalah pada tingkat senior. Hadapi wawancara desain sistem dengan kerangka kerja khusus frontend, bangun budaya peninjauan kode yang se…

FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus Frontend Academy gratis?

Ya. Kamu bisa memulai kursus Frontend Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar HTML?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman HTML sebelumnya.

Bagaimana cara aku belajar HTML di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan Frontend Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus Frontend Academy.

Bisakah aku belajar HTML di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar HTML di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Mulai Frontend Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai Gratis →Jelajahi Semua Kursus