Menjadi Front-End Web Developer Expert

4.88 •

Front-End Web

Learning Path

Menjadi Front-End Web Developer Expert

Teknologi:

Web

Level: Mahir - Profesional

Level: Mahir - Profesional 90 Jam Belajar

4.077

Siswa Terdaftar

Pelajari teknik-teknik expert serta modern dalam membangun website yang optimal pada seluruh perangkat, terutama pada perangkat mobile.

Belajar Sekarang

Informasi kelas Lihat silabus

Learning Path Front-End Web Developer

Kelas ini merupakan langkah ke-empat Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 3

Belajar Fundamental Front-End Web Development

70 Jam 4,87 Level Pemula - Menengah

Apa yang akan Anda dapatkan

Sertifikat

Dapatkan sertifikat standar industri setelah menyelesaikan kelas ini.

Code Review

Kode yang Anda kerjakan akan di-review secara komprehensif oleh Reviewer.

Forum Diskusi

Diskusikan materi belajar dengan siswa lainnya.

Modul Tutorial

Materi bacaan elektronik disajikan dengan bahasa yang mudah dipahami.

Submission

Uji kemampuan teknis Anda dengan mengerjakan tugas submission.

Level Mahir
Menguasai materi dan latihan tingkat lanjut. Kelas ini mensyaratkan sejumlah penguasaan landasan pengetahuan yang baik.

Level Profesional
Melanjutkan tingkat mahir. Lebih banyak studi kasus dengan praktik terbaik standar industri.

Deskripsi

Saat ini, banyak website aktif dirancang untuk tampak optimal hanya pada perangkat desktop. Namun faktanya, kini pengguna website didominasi oleh smartphone. Dengan begitu, Web Developer dituntut untuk mampu membangun website yang dapat beradaptasi pada smartphone dengan baik. Perusahaan seperti Tokopedia, Twitter, dan Facebook berhasil mengembangkan website yang nyaman diakses pada perangkat smartphone. Hal ini bisa tercapai dengan memperhatikan aspek mobile friendly, accessibility, dan optimization.

Web Developer saat ini harus mampu menyajikan website yang optimal pada perangkat smartphone.
Web merupakan platform yang dapat diakses melalui banyak macam perangkat. Hal ini menjadi keuntungan jika Anda mengembangkan aplikasi berbasis Web.
Aplikasi yang dibangun menggunakan web memiliki kecanggihan layaknya aplikasi native Android atau iOS.
Website adalah platform yang dijangkau oleh Search Engine seperti Google Search, sehingga website cocok sebagai media promosi bisnis atau konten.
Mengembangkan website termasuk pengembangan yang mudah di-maintenance dan mudah untuk dipublikasi.

Target dan Sasaran Siswa

Kelas ini ditujukan untuk seorang Front-End Web Developer yang ingin mengembangkan website yang optimal, mudah digunakan, serta canggih ketika diakses oleh seluruh perangkat terutama smartphone.
Kelas dapat diikuti oleh siswa yang melek IT sehingga wajib memiliki dan dapat mengoperasikan komputer dengan baik.
Siswa diharapkan sudah mampu mengembangkan aplikasi web di sisi Front-End, menguasai HTML, CSS, dan JavaScript serta sudah familier dengan Webpack sebagai module bundler.
Siswa harus bisa belajar mandiri, berkomitmen, benar-benar punya rasa ingin tahu, dan tertarik pada subjek materi, karena sebaik apa pun materi kelas ini, tidak akan berguna tanpa keseriusan siswa untuk belajar, berlatih, dan mencoba.
Di akhir kelas, siswa dapat membuat aplikasi front-end web yang responsif, memiliki aksesibilitas yang baik, mudah di-maintenance, memiliki sifat native, dapat diuji, dan memiliki performa yang baik.

Selengkapnya

Sembunyikan

Learning Path

Kelas ini merupakan langkah ke-empat Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 3

Belajar Fundamental Front-End Web Development

70 Jam 4,87 Level Pemula - Menengah

Peralatan Belajar

Spesifikasi minimal perangkat:

Prosesor

Intel Dual Core (Rekomendasi Core i3 ke atas)

Tools yang dibutuhkan untuk belajar:

Teks Editor (VSCode, Atom, atau Emacs)

Lihat semua peralatan belajar

Peralatan Belajar

Spesifikasi minimal perangkat

Kelas ini membutuhkan spesifikasi perangkat seperti berikut:

RAM

2GB (Rekomendasi 4GB)

Layar

1366 x 768 (Rekomendasi Full HD 1920 x 1080)

Sistem Operasi

Windows, Linux, MacOS

Prosesor

Intel Dual Core (Rekomendasi Core i3 ke atas)

Tools

Kelas ini membutuhkan beberapa tools berikut:

Teks Editor (VSCode, Atom, atau Emacs)

Web Browser (Google Chrome atau Mozilla Firefox)

Command Line (Terminal atau cmd)

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 90 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 63 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi
- Evaluasi pembelajaran: Submission (proyek akhir) berupa web app katalog restoran dengan experience dan fungsionalitas yang baik ketika diakses pada perangkat mobile
- Sertifikat kompetensi

Lihat semua metode ajar

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 90 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 63 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdiskusi
- Evaluasi pembelajaran: Submission (proyek akhir) berupa web app katalog restoran dengan experience dan fungsionalitas yang baik ketika diakses pada perangkat mobile
- Sertifikat kompetensi

Kontributor

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Ash Shiddiqul Akbar Hidayat

Dicoding CTO

Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Dimas Catur Wibowo

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Latif Sulistyo

External Code Reviewer at Dicoding Indonesia

Full Stack Web Developer
"Work hard, pray harder!"

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Ash Shiddiqul Akbar Hidayat

Dicoding CTO

Tim Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Dimas Catur Wibowo

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Latif Sulistyo

External Code Reviewer at Dicoding Indonesia

Full Stack Web Developer
"Work hard, pray harder!"

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

Agista Septiyanto

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Alfian Yusuf Abdullah

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Associate Android Developer
React Developer
AWS Certified Cloud Practitioner

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Microsoft Certified: Azure Fundamental
Android, Web & IoT Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

Ananda Dwi Prayoga

External Code Reviewer at Dicoding Indonesia

Fullstack Web Dev
Fullstack Android Dev
UI/UX enthusiast

Galang Ekayudha Permana

External Code Reviewer at Dicoding Indonesia

Fullstack Developer

Shaddam Amru Hasibuan

Developer Specialist at SMEsHub Indonesia

Javascript/React Developer
Google Cloud Architect
AR/VR Enthusiast

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Ikhsan Fauji

External Code Reviewer at Dicoding Indonesia

Full Stack Engineer

Rian Mandala Putra

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Chandra Septian

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast
Front-End Developer

Samodra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Cyber Security Enthusiast

Agustinus Yohannes

External Code Reviewer at Dicoding Indonesia

Front End Web Developer
Blockchain Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Dimas Catur Wibowo

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Latif Sulistyo

External Code Reviewer at Dicoding Indonesia

Full Stack Web Developer
"Work hard, pray harder!"

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

Agista Septiyanto

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Alfian Yusuf Abdullah

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Associate Android Developer
React Developer
AWS Certified Cloud Practitioner

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Microsoft Certified: Azure Fundamental
Android, Web & IoT Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

Ananda Dwi Prayoga

External Code Reviewer at Dicoding Indonesia

Fullstack Web Dev
Fullstack Android Dev
UI/UX enthusiast

Galang Ekayudha Permana

External Code Reviewer at Dicoding Indonesia

Fullstack Developer

Shaddam Amru Hasibuan

Developer Specialist at SMEsHub Indonesia

Javascript/React Developer
Google Cloud Architect
AR/VR Enthusiast

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Ikhsan Fauji

External Code Reviewer at Dicoding Indonesia

Full Stack Engineer

Rian Mandala Putra

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Chandra Septian

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast
Front-End Developer

Samodra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Cyber Security Enthusiast

Agustinus Yohannes

External Code Reviewer at Dicoding Indonesia

Front End Web Developer
Blockchain Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Testimoni Siswa

Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.

Ahmad Mishbahul Munir

PT. Sentra Vidya Utama

Menjadi Front-End Web Developer Expert

Melalui kelas Menjadi Front-End Web Developer Expert saya belajar bagaimana membuat front-end web mulai dari mempersiapkan konsep dasar hingga menjadikannya PWA, melakukan testing dan belajar meningkatkan performa web. Terima kasih Dicoding, menurut saya materinya sangat bagus dan menarik.

Baca selengkapnya

Irwanto Siregar

PT. Indomarco Prismatama

Menjadi Front-End Web Developer Expert

Terjun ke dunia Web Development saya pertama kali belajar PHP/Back-End. Memperoleh kesempatan beasiswa IDCamp rasanya sangat senang dan bangga. Berkat kelas Front-End disini saya jadi memahami apa itu Mobile First Approach, Testing-debugging, Web Performance dan masih banyak lainnya dimana itu saling melengkapi untuk dapat membangun web profesional melalui teknologi yang ada saat ini. Terimakasih IDCamp 2020 X Dicoding Indonesia. Developer Handal Untuk Indonesia Digital.

Baca selengkapnya

Lihat semua testimoni

Testimoni Siswa

Ahmad Mishbahul Munir

PT. Sentra Vidya Utama

Menjadi Front-End Web Developer Expert

Irwanto Siregar

PT. Indomarco Prismatama

Menjadi Front-End Web Developer Expert

Raden Fariz Insan Purnama

Telkom University

Menjadi Front-End Web Developer Expert

Gokil kelasnya, sempet ditolak beberapa kali, bukannya makin males tapi malah makin tertantang buat nyelesaiin ahaha. Kelas ini juga cocok banget buat yang mau eksplorasi, karena disini diajarkan membuat codebase yang versi kita banget, jdi kita bebas tuh mau ngedesign base nya kaya gimana. Gokil dah pokoknya mantap ngga sia sia belajar di kelas ini, sangat bermanfaat dan menyenangkan ????????????

Ahmad Mishbahul Munir

PT. Sentra Vidya Utama

Menjadi Front-End Web Developer Expert

Irwanto Siregar

PT. Indomarco Prismatama

Menjadi Front-End Web Developer Expert

Raden Fariz Insan Purnama

Telkom University

Menjadi Front-End Web Developer Expert

Punya pertanyaan seputar kelas ini?

Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.

Bagaimana cara memasukkan token Academy? Aturan membuat pertanyaan di forum diskusi kelas Bagaimana cara mencetak sertifikat kelulusan kelas?

Lihat semua FAQ

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Persiapan Belajar

Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.

7 Artikel

65 menit

Persetujuan Hak Cipta
Prasyarat Kelas
Prasyarat Tools
Mekanisme Belajar
Forum Diskusi
Glosarium
Daftar Referensi

Pengenalan Kelas

Menjelaskan tentang pentingnya membuat website yang optimal untuk diakses oleh berbagai perangkat, khususnya smartphone yang mendominasi pengguna internet.

2 Artikel

20 menit

Pengenalan Kelas Menjadi Front-End Web Developer Expert
Materi Menjadi Front-End Web Developer Expert

Mobile First Approach

Memahami pendekatan mobile-first, serta belajar membangun website yang responsif menggunakan CSS Grid System, Media Query, dan Off Screen Canvas melalui pendekatan Mobile First.

17 Artikel

450 menit

Pengenalan Mobile First Approach
Persiapan Proyek Latihan
Chrome DevTools
Mengatur Viewport, Penggunaan Relative Unit, Ukuran Elemen.
Latihan: Mengatur Viewport, Penggunaan Relative Unit, Ukuran Elemen
Responsive Layout
Media Query
Breakpoint
Grid Layout Module
Grid Tracks
Fraction Unit dan Repeat Notation
Grid Lines
Gutters
Latihan: Menerapkan Responsive Layout
Teks Optimisasi
Off Canvas Menu
Latihan: Menerapkan Teks Optimisasi dan Off Canvas Menu

Aksesibilitas

Belajar aspek aksesibilitas web seperti focus, semantic HTML, tab order, label, alternative teks, serta penggunaan screen reader agar website yang dikembangkan dapat diakses oleh siapa pun.

15 Artikel
1 Submission
2 Ujian

790 menit

Pengenalan Aksesibilitas
Aksesibilitas Keyboard
Mencoba Focus
Kuis: Mencoba Focus
Focusable Element
Focus Order
Tab Index
Styling Focus
Aksesibilitas Konten
Affordances dan Semantics
Screen Reader
Mencoba Screen Reader
Kuis: Mencoba Screen Reader
Skip to Content
Heading dan Landmarks
Label
Teks Alternatif
Submission: Katalog Restoran

JavaScript Clean Code

Belajar prinsip-prinsip penulisan kode JavaScript dengan benar berdasarkan senior software engineer Robert C. Martin yang diadopsi dari bukunya berjudul Clean Code.

19 Artikel

360 menit

Pengenalan JavaScript Clean Code
Style Guide
Code Conventions
ESLint
Menggunakan ESLint
Memasang ESLint
Mengaudit Kode
Integrasi Editor/IDE
Clean Code
Prinsip Membuat Variables
Membuat Function dengan Baik
Implementasi Function yang Dihindari
Objek dan Struktur Data
Classes
SOLID: Single Responsibility Principle, Open/Closed Principle
SOLID: Liskov Substitution Principle, Interface Segregation Principle, Dependencies Inversion Principle
Concurrency
Error Handling
Comments

Progressive Web Apps

Belajar membuat website yang progressive sehingga website memiliki sifat native seperti installable, offline capability, dan lainnya.

48 Artikel
1 Submission

1620 menit

Pengantar Progressive Web Apps
Mengenal Progressive Web Apps (PWAs)
Kelebihan dan Kekurangan PWA(s)
Komponen Pembentuk PWA(s)
Web Architecture
Application Shell
Latihan: Application Shell
Memasang Dependencies
Menetapkan Code Style
Membuat Struktur Folder
Konfigurasi Webpack
Membuat Application Shell
Konfigurasi Drawer
Membuat URL Router Sederhana
Melakukan Request dari API
Menampilkan Konten dari API
Web App Manifest
Latihan: Web App Manifest
Service Worker
Apa yang Bisa Dilakukan Service Worker?
Registration
Siklus Hidup Service Worker
Event pada Service Worker
Latihan: Service Worker
Cache API
Dasar Penggunaan Cache API
Menambahkan Resource ke Cache
Mencari dan Menghapus Cache
Caching Strategies
Latihan: Cache API
Menerapkan Cache pada Service Worker
IndexedDB
Dasar Penggunaan IndexedDB
Membuat/Membuka Database dan Object Store
Operasi CRUD pada IndexedDB
Latihan: IndexedDB
Menyiapkan Fungsi Operations DB
Menambahkan Tombol Like pada Halaman Detail
Memberikan Fungsionalitas pada Tombol Like
Menampilkan Data dari Database
WebSocket
Membuka Koneksi WebSocket
Mengirim Data ke WebSocket Server
Mendapatkan Data dari WebSocket Server
Menutup Koneksi WebSocket
Latihan: Web Socket
Notifikasi
Latihan: Notifikasi
Submission: Katalog Restoran + PWA

Automation Testing

Belajar penerapan testing seperti Unit Test, Integration Test, dan End to End Test pada website yang dibuat, serta belajar menggunakan DevTools untuk debugging.

38 Artikel

985 menit

Pengenalan Testing Automatis
Kasus 1: Segitiga Apa Aku
Test Drive Development (TDD) Menggunakan Jasmine
Hijau Pertama
Segitiga Sama Sisi
Segitiga Sama Kaki
Plot Twist
Ringkasan Segitiga Apa Aku
Kasus 2: Testing Aplikasi
Menyukai Sebuah Film
Kutangkap Bugs Dengan Jaring Pengaman
Ketika Pikiranku Berubah
TODO Harus Dikerjakan
Jagalah Kebersihan
Ringkasan Testing Aplikasi
Kasus 3: Berkolaborasi Dengan Benar
Yang Mengikat Kita
Aku Bergantung Pada Bayanganmu
Ringkasan Berkolaborasi Dengan Benar
Kasus 4: Mencari Film Yang Disukai
Membangun Fitur Menggunakan TDD
Jangan Bertele-tele
Rahasia Seorang Mata-Mata
Aku Suka Apa Yang Aku Lihat
Ketika Hampa
Yang Kucari Akhirnya Tiba
Tak Semuanya Perlu Diketahui
Kau Tak Perlu Tahu Rahasiaku
Plot Twist
Memperbaiki dia yang terlupakan
Ringkasan Mencari Film yang Disukai
Kasus 5: End-to-End Testing
Kenalkan, saya Codecept
Membekukan waktu
Jangan Sampai Salah Nama
Sebuah Pencarian
Ringkasan Testing Automatis
Saran dalam Penerapan TDD

Web Performance

Belajar menggunakan web auditor untuk mengetahui sejauh mana performa website yang dibuat, dan mengoptimalkan performa website berdasarkan hasil yang diperoleh.