Menjadi Front-End Web Developer Expert

Tools

Dibantu
Dibantu

Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.

Lihat forum diskusi Tanya mentor

Modul kelas Menjadi Front-End Web Developer Expert dalam bentuk cetak (buku) ataupun elektronik sudah didaftarkan ke Dirjen HKI, Kemenkumham RI. Segala bentuk penggandaan dan atau komersialisasi, sebagian atau seluruh bagian, baik cetak maupun elektronik terhadap modul kelas Menjadi Front-End Web Developer Expert tanpa izin formal tertulis kepada pemilik hak cipta akan diproses melalui jalur hukum.

Hak cipta dilindungi oleh Undang-Undang © Dicoding 2017 - 2024.

Dengan lanjut ke materi berikutnya, Anda menyetujui adanya informasi hak cipta di atas terhadap materi-materi dalam kelas ini.

Dibantu
Dibantu

Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.

Lihat forum diskusi Tanya mentor

Catatan Belajar

ini konten buat note nanti
Keyboard Shortcut
1
Next/prev modul

Membantu untuk mempermudah navigasi antar modul.

Tekan
CTRL / CTRL
2
Mencari Konten

Membantu menemukan konten dengan lebih cepat.

Tekan
CTRL/
3
Melihat daftar modul

Membantu melihat modul lebih cepat.

Tekan
CTRLM
Adaptive Reading

Tema

Terang
Hangat
Gelap

Jenis Font

Ukuran Font

Lebar Bacaan

Medium-width
Full-width
Daftar Modul

0% Selesai

0/8
Persetujuan Hak Cipta (Gratis)
Pengenalan Kelas (Gratis)
Prasyarat Kelas (Gratis)
Prasyarat Tools (Gratis)
Mekanisme Belajar (Gratis)
Forum Diskusi (Gratis)
Glosarium (Gratis)
Daftar Referensi (Gratis)
0/19
Pengenalan Mobile First Approach
Persiapan Proyek Latihan
Chrome DevTools
Mengatur Viewport, Penggunaan Relative U...
Latihan: Mengatur Viewport, Penggunaan R...
Responsive Layout
Media Query
Breakpoint
Grid Layout Module
Grid Tracks
Fraction Unit dan Repeat Notation
Grid Lines
Gutters
Latihan: Menerapkan Responsive Layout
Optimalisasi Teks
Off Canvas Menu
Latihan: Menerapkan Teks Optimisasi dan...
Rangkuman Mobile First Approach
Kuis Mobile First Approach
0/19
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
Rangkuman Aksesibilitas
Kuis Aksesibilitas
0/2
Tips Submission: Katalog Restoran
Submission: Katalog Restoran
0/21
Pengenalan JavaScript Clean Code
Style Guide
Code Conventions
ESLint
Menggunakan ESLint
Memasang ESLint
Mengaudit Kode
Integrasi Linter dengan IDE
Clean Code
Prinsip Membuat Variables
Membuat Function dengan Baik
Implementasi Function yang Dihindari
Objek dan Struktur Data
Classes
SOLID: Single Responsibility Principle,...
SOLID: Liskov Substitution Principle, In...
Concurrency
Error Handling
Comments
Rangkuman JavaScript Clean Code
Kuis JavaScript Clean Code
0/57
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
Workbox
Implementasi Precache Terhadap Resources
Runtime Caching Resources
Latihan: Offline Capability dengan Workb...
IndexedDB
Dasar Penggunaan IndexedDB
Membuat/Membuka Database dan Object Stor...
Operasi CRUD pada IndexedDB
Latihan: IndexedDB
Menyiapkan Fungsi Operations DB
Menambahkan Tombol Like pada Halaman Det...
Memberikan Fungsionalitas pada Tombol Li...
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
Web Push Notification
Latihan: Ubah Build-Tools Menjadi Inject...
Latihan: Push Notification
Rangkuman Progressive Web Apps
Kuis Progressive Web Apps
0/2
Tips Submission: Katalog Restoran + PWA
Submission: Katalog Restoran + PWA
0/45
Pengantar Pengujian Otomatis
Perkenalan Pengujian Otomatis
Tipe-Tipe Testing
Framework Automation Testing
Kasus 1: Segitiga Apa Aku
Menyiapkan Ruangan Uji
TDD Menggunakan Jest
Hijau Pertama
Segitiga Sama Sisi
Segitiga Sama Kaki
Segitiga Sembarang
Plot Twist
Ringkasan Segitiga Apa Aku
Kasus 2: Testing Aplikasi
Strategi 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
Akhirnya Tiba yang Kucari
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
Perkenalkan, saya CodeceptJS
Membekukan waktu
Jangan Sampai Salah Nama
Sebuah Pencarian
Ini Bukan Selamat Tinggal
Jangan Menyerah di Hadapan Masalah
Rangkuman Automation Testing
Kuis Automation Testing
0/26
Pengenalan Web Performance
Mengapa Kecepatan Penting
Apa itu Kecepatan
Web Vitals
Largest Contentful Paint
First Input Delay
Cumulative Layout Shift
Cara Mengukur LCP, FID, dan CLS
Image Optimization
Kompresi Gambar
Latihan: Kompresi Gambar
Ubah GIF ke Video
Latihan: Ubah Gif ke Video
Image Responsive
Latihan: Image Responsive
WebP Image
Latihan: WebP Image
Menggunakan Lazy Loading Image
Practice: Lazy Loading Image
Optimisasi Bundle
Bundle Analyzer
Latihan: Bundle Analyzer
Code Splitting
Latihan: Code Splitting
Rangkuman Web Performance
Kuis Web Performance
0/13
Pendahuluan Continuous Integration & Con...
Pengelolaan Source Code
Pengertian dan Manfaat CI/CD
Platform untuk CI/CD
Pengantar Latihan: Penerapan CI/CD Mengg...
Latihan: Memasang Git
Latihan: Membuat Akun GitHub
Latihan: Membuat Remote Repository di Gi...
Latihan: Membuat CI Pipeline menggunakan...
Latihan: Membuat Akun Netlify
Latihan: Membuat CD Pipeline menggunakan...
Rangkuman Deployment dengan CI/CD
Kuis Deployment dengan CI/CD
0/2
Rangkuman Kelas
Ujian Akhir
0/2
Tips Submission: Katalog Restoran PWA +...
Submission: Katalog Restoran PWA + Testi...

Persetujuan Hak Cipta

Pengenalan Kelas
Person in front laptop

Platform mentoring Dicoding menghubungkan mentor dengan mentee, membangun hubungan berkelanjutan untuk mengembangkan karir developer.

Pelajari lebih lanjut