Menjadi Front-End Web Developer Expert
Teknologi:
WebLevel: Profesional
Siswa Terdaftar
Teknologi:
WebLevel: Profesional
Siswa Terdaftar
Kelas ini merupakan langkah ke-enam Anda untuk menjadi Front-End Web Developer.
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.
Kelas ini merupakan langkah ke-enam Anda untuk menjadi Front-End Web Developer.
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
Lihat semua peralatan belajarKelas 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)
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
Lihat semua metode ajar
Lihat semua metode ajarKontributor
3Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Ash Shiddiqul Akbar Hidayat
Reviewer
37Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
Motto: "What We Learn When We Learn By Doing?" Roger C. Schank
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Lihat semua kontributor dan reviewer
Lihat semua kontributor dan reviewerKontributor kelas
Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Ash Shiddiqul Akbar Hidayat
Nur Rizki Adi Prasetyo
Curriculum Developer at Dicoding Indonesia
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Moch Ridwan Taufik Alamsyah
R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
Motto: "What We Learn When We Learn By Doing?" Roger C. Schank
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Alvin Indra Pratama
Frontend Developer at Antikode
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Nanang Sutisna
- Mobile & Web Enthusiast
- External Code Reviewer at Dicoding Indonesia
Putu Jhonarendra
Programmer
Seorang Programmer dari Bali, Indonesia yang memiliki pengalaman lebih dari 3 tahun mengembangkan aplikasi web. Aplikasi yang dibuat telah dipakai di lembaga pendidikan dan instansi pemerintah.
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
Ferdian Ahmad Rozikin
Frontend Engineer & External Code Reviewer
Experienced Frontend Engineer Crafting Immersive Digital Experiences: Elevate Your Team's Web Development Capabilities with Innovation, Precision, and a Proven Track Record
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Rosyiidah Hasnaa
Frontend Developer
Applied Bachelor of Informatics Engineering from Politeknik Elektronika Negeri Surabaya. I have experience building a website using html, css, bootstrap, and javascript and making a responsive website. I enjoy learning about front-end developers in my free time. An eager and conscientious person who works well in team environments. I'm looking for opportunities in front-end web development.
Let's connect with me on linkedin.com/in/syiidahasnaa
Shaddam Amru
Frontend Engineer
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Rian Mandala Putra
External Code Reviewer at Dicoding Indonesia
Swanddd
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Frontend Developer at PT. SPM
HA, nice!
Take a look my portfolio
Samodra
External Code Reviewer at Dicoding Indonesia
Muhammad Amru Salim
External Code Reviewer at Dicoding Indonesia
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Chandra Perdiansyah
Frontend Web Developer Enthusiast
Lifelong Learner
Linkedin : https://www.linkedin.com/in/cperdiansyah/
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Muhammad Alvino Dienova
External Reviewer at Dicoding Indonesia
Front-End Web Developer
Eko Rahayu Widodo
Software Engineer
• Lifelong Learner.
• Let's Connect ^^.
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
You can reach out me on my Linkedin.
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Shidqi Rifat Pangestu
Frontend Developer at Badr Interactive
- Frontend web enthusiast
- Contribute through technology </>
Fazza Razaq Amiarso
Software Engineer & Mentor
I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently transitioning from React to Svelte. Interested on learning Interactive Story Telling with Data Visualization.
Personal Website:Â https://www.fazzaamiarso.com
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Irenius Brayen Luhat
Self-employed
Seorang pembelajar dan pengembang web. Saya adalah seorang antusias Javascript, saya mendedikasikan banyak waktu belajar saya di sini. Kenali lebih jauh dengan mengunjung website profil saya.
Moch Ridwan Taufik Alamsyah
R&D Engineer at Citra Sabda Abadi, External Code Reviewer at Dicoding Indonesia
- Full Stack Development Enthusiast
- Mobile Development Enthusiast
- Machine Learning Enthusiast
- IoT Enthusiast
Motto: "What We Learn When We Learn By Doing?" Roger C. Schank
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Product Engineer at Dicoding
Alvin Indra Pratama
Frontend Developer at Antikode
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Nanang Sutisna
- Mobile & Web Enthusiast
- External Code Reviewer at Dicoding Indonesia
Putu Jhonarendra
Programmer
Seorang Programmer dari Bali, Indonesia yang memiliki pengalaman lebih dari 3 tahun mengembangkan aplikasi web. Aplikasi yang dibuat telah dipakai di lembaga pendidikan dan instansi pemerintah.
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Gunawan Wahyu Andreanto
Full Stack Developer
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
Ferdian Ahmad Rozikin
Frontend Engineer & External Code Reviewer
Experienced Frontend Engineer Crafting Immersive Digital Experiences: Elevate Your Team's Web Development Capabilities with Innovation, Precision, and a Proven Track Record
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Rosyiidah Hasnaa
Frontend Developer
Applied Bachelor of Informatics Engineering from Politeknik Elektronika Negeri Surabaya. I have experience building a website using html, css, bootstrap, and javascript and making a responsive website. I enjoy learning about front-end developers in my free time. An eager and conscientious person who works well in team environments. I'm looking for opportunities in front-end web development.
Let's connect with me on linkedin.com/in/syiidahasnaa
Shaddam Amru
Frontend Engineer
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Rian Mandala Putra
External Code Reviewer at Dicoding Indonesia
Swanddd
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Frontend Developer at PT. SPM
HA, nice!
Take a look my portfolio
Samodra
External Code Reviewer at Dicoding Indonesia
Muhammad Amru Salim
External Code Reviewer at Dicoding Indonesia
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Chandra Perdiansyah
Frontend Web Developer Enthusiast
Lifelong Learner
Linkedin : https://www.linkedin.com/in/cperdiansyah/
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Muhammad Alvino Dienova
External Reviewer at Dicoding Indonesia
Front-End Web Developer
Eko Rahayu Widodo
Software Engineer
• Lifelong Learner.
• Let's Connect ^^.
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
You can reach out me on my Linkedin.
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Shidqi Rifat Pangestu
Frontend Developer at Badr Interactive
- Frontend web enthusiast
- Contribute through technology </>
Fazza Razaq Amiarso
Software Engineer & Mentor
I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently transitioning from React to Svelte. Interested on learning Interactive Story Telling with Data Visualization.
Personal Website:Â https://www.fazzaamiarso.com
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Irenius Brayen Luhat
Self-employed
Seorang pembelajar dan pengembang web. Saya adalah seorang antusias Javascript, saya mendedikasikan banyak waktu belajar saya di sini. Kenali lebih jauh dengan mengunjung website profil saya.
Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.
Lihat semua testimoni
Lihat semua testimoniBerikut adalah beberapa pertanyaan yang paling sering ditanyakan.
Materi yang akan Anda pelajari pada kelas ini.
Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.
5 Menit
10 Menit
10 Menit
15 Menit
10 Menit
5 Menit
5 Menit
5 Menit
Memahami pendekatan mobile-first, serta belajar membangun website yang responsif menggunakan CSS Grid System, Media Query, dan Off Screen Canvas melalui pendekatan Mobile First.
Pengenalan Mobile First Approach
10 Menit
Persiapan Proyek Latihan
25 Menit
Chrome DevTools
20 Menit
Mengatur Viewport, Penggunaan Relative Unit, Ukuran Elemen.
30 Menit
Latihan: Mengatur Viewport, Penggunaan Relative Unit, Ukuran Elemen
40 Menit
Responsive Layout
25 Menit
Media Query
25 Menit
Breakpoint
20 Menit
Grid Layout Module
25 Menit
Grid Tracks
25 Menit
Fraction Unit dan Repeat Notation
30 Menit
Grid Lines
25 Menit
Gutters
15 Menit
Latihan: Menerapkan Responsive Layout
40 Menit
Optimalisasi Teks
15 Menit
Off Canvas Menu
40 Menit
Latihan: Menerapkan Teks Optimisasi dan Off Canvas Menu
40 Menit
Rangkuman Mobile First Approach
30 Menit
Kuis Mobile First Approach
15 Menit
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.
Pengenalan Aksesibilitas
20 Menit
Aksesibilitas Keyboard
20 Menit
Mencoba Focus
20 Menit
Kuis: Mencoba Focus
5 Menit
Focusable Element
20 Menit
Focus Order
20 Menit
Tab Index
20 Menit
Styling Focus
10 Menit
Aksesibilitas Konten
20 Menit
Affordances dan Semantics
15 Menit
Screen Reader
30 Menit
Mencoba Screen Reader
20 Menit
Kuis: Mencoba Screen Reader
5 Menit
Skip to Content
20 Menit
Heading dan Landmarks
20 Menit
Label
15 Menit
Teks Alternatif
20 Menit
Rangkuman Aksesibilitas
30 Menit
Kuis Aksesibilitas
15 Menit
Membangun aplikasi web statis bertema Movie Catalogue dengan mengimplementasikan materi-materi yang telah dipelajari sebelumnya.
Submission: Katalog Restoran
480 Menit
Belajar prinsip-prinsip penulisan kode JavaScript dengan benar berdasarkan senior software engineer Robert C. Martin yang diadopsi dari bukunya berjudul Clean Code.
Pengenalan JavaScript Clean Code
15 Menit
Style Guide
20 Menit
Code Conventions
25 Menit
ESLint
10 Menit
Menggunakan ESLint
25 Menit
Memasang ESLint
20 Menit
Mengaudit Kode
15 Menit
Integrasi Editor/IDE
20 Menit
Clean Code
10 Menit
Prinsip Membuat Variables
25 Menit
Membuat Function dengan Baik
20 Menit
Implementasi Function yang Dihindari
20 Menit
Objek dan Struktur Data
20 Menit
Classes
25 Menit
SOLID: Single Responsibility Principle, Open/Closed Principle
20 Menit
SOLID: Liskov Substitution Principle, Interface Segregation Principle, Dependencies Inversion Principle
25 Menit
Concurrency
20 Menit
Error Handling
10 Menit
Comments
15 Menit
Rangkuman JavaScript Clean Code
30 Menit
Kuis JavaScript Clean Code
15 Menit
Belajar membuat website yang progressive sehingga website memiliki sifat native seperti installable, offline capability, dan lainnya.
Pengantar Progressive Web Apps
10 Menit
Mengenal Progressive Web Apps (PWAs)
15 Menit
Kelebihan dan Kekurangan PWA(s)
15 Menit
Komponen Pembentuk PWA(s)
20 Menit
Web Architecture
15 Menit
Application Shell
10 Menit
Latihan: Application Shell
30 Menit
Memasang Dependencies
30 Menit
Menetapkan Code Style
20 Menit
Membuat Struktur Folder
25 Menit
Konfigurasi Webpack
35 Menit
Membuat Application Shell
40 Menit
Konfigurasi Drawer
40 Menit
Membuat URL Router Sederhana
40 Menit
Melakukan Request dari API
25 Menit
Menampilkan Konten dari API
40 Menit
Web App Manifest
20 Menit
Latihan: Web App Manifest
40 Menit
Service Worker
15 Menit
Apa yang Bisa Dilakukan Service Worker?
15 Menit
Registration
15 Menit
Siklus Hidup Service Worker
25 Menit
Event pada Service Worker
20 Menit
Latihan: Service Worker
35 Menit
Cache API
15 Menit
Dasar Penggunaan Cache API
10 Menit
Menambahkan Resource ke Cache
10 Menit
Mencari dan Menghapus Cache
10 Menit
Caching Strategies
20 Menit
Latihan: Cache API
25 Menit
Menerapkan Cache pada Service Worker
30 Menit
Workbox
25 Menit
Implementasi Precache Terhadap Resources
25 Menit
Runtime Caching Resources
25 Menit
Latihan: Offline Capability dengan Workbox
35 Menit
IndexedDB
15 Menit
Dasar Penggunaan IndexedDB
10 Menit
Membuat/Membuka Database dan Object Store
15 Menit
Operasi CRUD pada IndexedDB
15 Menit
Latihan: IndexedDB
10 Menit
Menyiapkan Fungsi Operations DB
20 Menit
Menambahkan Tombol Like pada Halaman Detail
25 Menit
Memberikan Fungsionalitas pada Tombol Like
35 Menit
Menampilkan Data dari Database
20 Menit
WebSocket
10 Menit
Membuka Koneksi WebSocket
10 Menit
Mengirim Data ke WebSocket Server
10 Menit
Mendapatkan Data dari WebSocket Server
10 Menit
Menutup Koneksi WebSocket
10 Menit
Latihan: Web Socket
25 Menit
Notifikasi
15 Menit
Latihan: Notifikasi
25 Menit
Web Push Notification
40 Menit
Latihan: Ubah Build-Tools Menjadi InjectManifest (Workbox)
40 Menit
Latihan: Push Notification
80 Menit
Rangkuman Progressive Web Apps
30 Menit
Kuis Progressive Web Apps
15 Menit
Melanjutkan pengembangan Movie Catalogue dengan menerapkan PWA dan Clean Code.
Submission: Katalog Restoran + PWA
600 Menit
Belajar penerapan testing seperti Unit Test, Integration Test, dan End to End Test pada website yang dibuat, serta belajar menggunakan DevTools untuk debugging.
Pengantar Pengujian Otomatis
10 Menit
Perkenalan Pengujian Otomatis
30 Menit
Tipe-Tipe Testing
25 Menit
Framework Automation Testing
25 Menit
Kasus 1: Segitiga Apa Aku
20 Menit
Menyiapkan Ruangan Uji
20 Menit
TDD Menggunakan Jest
30 Menit
Hijau Pertama
35 Menit
Segitiga Sama Sisi
20 Menit
Segitiga Sama Kaki
40 Menit
Segitiga Sembarang
15 Menit
Plot Twist
35 Menit
Ringkasan Segitiga Apa Aku
10 Menit
Kasus 2: Testing Aplikasi
10 Menit
Strategi Menyukai Sebuah Film
20 Menit
Kutangkap Bugs Dengan Jaring Pengaman
60 Menit
Ketika Pikiranku Berubah
15 Menit
TODO Harus Dikerjakan
25 Menit
Jagalah Kebersihan
30 Menit
Ringkasan Testing Aplikasi
10 Menit
Kasus 3: Berkolaborasi Dengan Benar
10 Menit
Yang Mengikat Kita
15 Menit
Aku Bergantung Pada Bayanganmu
30 Menit
Ringkasan Berkolaborasi Dengan Benar
10 Menit
Kasus 4: Mencari Film Yang Disukai
10 Menit
Membangun Fitur Menggunakan TDD
60 Menit
Jangan Bertele-tele
45 Menit
Rahasia Seorang Mata-Mata
50 Menit
Aku Suka Apa Yang Aku Lihat
45 Menit
Ketika Hampa
15 Menit
Akhirnya Tiba yang Kucari
15 Menit
Tak Semuanya Perlu Diketahui
25 Menit
Kau Tak Perlu Tahu Rahasiaku
30 Menit
Plot Twist
70 Menit
Memperbaiki dia yang terlupakan
60 Menit
Ringkasan Mencari Film yang Disukai
10 Menit
Kasus 5: End-to-End Testing
15 Menit
Perkenalkan, saya CodeceptJS
45 Menit
Membekukan waktu
30 Menit
Jangan Sampai Salah Nama
20 Menit
Sebuah Pencarian
40 Menit
Ini Bukan Selamat Tinggal
15 Menit
Jangan Menyerah di Hadapan Masalah
10 Menit
Rangkuman Automation Testing
30 Menit
Kuis Automation Testing
15 Menit
Belajar menggunakan web auditor untuk mengetahui sejauh mana performa website yang dibuat, dan mengoptimalkan performa website berdasarkan hasil yang diperoleh.
Pengenalan Web Performance
10 Menit
Mengapa Kecepatan Penting
10 Menit
Apa itu Kecepatan
20 Menit
Web Vitals
10 Menit
Largest Contentful Paint
15 Menit
First Input Delay
15 Menit
Cumulative Layout Shift
15 Menit
Cara Mengukur LCP, FID, dan CLS
20 Menit
Image Optimization
10 Menit
Kompresi Gambar
15 Menit
Latihan: Kompresi Gambar
30 Menit
Ubah GIF ke Video
20 Menit
Latihan: Ubah Gif ke Video
40 Menit
Image Responsive
15 Menit
Latihan: Image Responsive
35 Menit
WebP Image
15 Menit
Latihan: WebP Image
30 Menit
Menggunakan Lazy Loading Image
15 Menit
Practice: Lazy Loading Image
30 Menit
Optimisasi Bundle
15 Menit
Bundle Analyzer
10 Menit
Latihan: Bundle Analyzer
25 Menit
Code Splitting
20 Menit
Latihan: Code Splitting
35 Menit
Rangkuman Web Performance
30 Menit
Kuis Web Performance
15 Menit
Belajar mendeploy aplikasi ke production secara otomatis, aman, dan cepat menggunakan teknik Continuous Integration dan Continuous Deployment.
Pendahuluan Continuous Integration & Continuous Deployment
10 Menit
Pengelolaan Source Code
30 Menit
Pengertian dan Manfaat CI/CD
30 Menit
Platform untuk CI/CD
30 Menit
Pengantar Latihan: Penerapan CI/CD Menggunakan GitHub Action dan Netlify
10 Menit
Latihan: Memasang Git
30 Menit
Latihan: Membuat Akun GitHub
40 Menit
Latihan: Membuat Remote Repository di GitHub
30 Menit
Latihan: Membuat CI Pipeline menggunakan GitHub Action
80 Menit
Latihan: Membuat Akun Netlify
20 Menit
Latihan: Membuat CD Pipeline menggunakan Netlify
70 Menit
Rangkuman Deployment dengan CI/CD
30 Menit
Kuis Deployment dengan CI/CD
15 Menit
Mengingat kembali seluruh materi-materi yang dipelajari melalui rangkuman serta melakukan validasi kepemahaman dan ingatan melalui ujian akhir.
Rangkuman Kelas
60 Menit
Ujian Akhir
30 Menit
Memvalidasi kemampuan prinsip Automation Testing dan Web Performance dengan membuat proyek website restaurant PWA yang testable dan high performance.
Submission: Katalog Restoran PWA + Testing and Optimized
660 Menit