Menjadi Front-End Web Developer Expert
4.89 •

Front-End Web

Front-End Web

Learning Path

Menjadi Front-End Web Developer Expert

Teknologi:

Web
Level: Profesional

Level: Profesional

Level: Profesional 110 Jam Belajar
9.240

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-enam Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 5
Belajar Tools Front-End Web Intermediate
65 Jam 4,85 Level Mahir
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 Profesional
Melanjutkan tingkat mahir. Lebih banyak studi kasus dengan praktik terbaik standar industri.
Lihat silabus

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-enam Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 5
Belajar Tools Front-End Web Intermediate
65 Jam 4,85 Level Mahir

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 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 : 100 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

Lihat semua metode ajar

Metode Ajar

  • Online - Self-paced Learning
    • Total jam belajar : 100 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

3

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Ash Shiddiqul Akbar Hidayat

Ash Shiddiqul Akbar Hidayat

Reviewer

37

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

Moch Ridwan Taufik Alamsyah
Moch Ridwan Taufik Alamsyah

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
Luthfi Alfarisi
Inggih Wicaksono
Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto

Lihat semua kontributor dan reviewer

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Ash Shiddiqul Akbar Hidayat

Ash Shiddiqul Akbar Hidayat

Nur Rizki Adi Prasetyo

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
Moch Ridwan Taufik Alamsyah

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
Luthfi Alfarisi
Inggih Wicaksono
Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto
Alvin Indra Pratama
Alfian Yusuf Abdullah
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia
  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Nanang Sutisna
Nanang Sutisna

Nanang Sutisna

- Mobile & Web Enthusiast

- External Code Reviewer at Dicoding Indonesia

Putu Jhonarendra
Putu Jhonarendra

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
Gunawan Wahyu Andreanto
Alexzander Purwoko
Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Ferdian Ahmad Rozikin
Ferdian Ahmad Rozikin

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

dos:6686df0f9e218fbb7a0a1eb49dea73d020230224162524.png Linkedin | Website | dos-e8d459176d261a1bc9f78dc03c22dcf620240630125408.png Github | dos-e8d459176d261a1bc9f78dc03c22dcf620240630125408.png Medium | dos-81e37f3f8ce298c50c6e701e10e3482120240630125304.png X

Nosef Nunggaran
Ananda Dwi Prayoga
Rosyiidah Hasnaa
Rosyiidah Hasnaa

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
Shaddam Amru

Shaddam Amru

Frontend Engineer
  • React Frontend Engineer
  • Product & UX
  • Linux Enthusiast
Muhammad Ilham Adhim
Muhammad Ilham Adhim

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga
Rian Mandala Putra
Swanddd
Fiqri ardiansyah
Samodra
Muhammad Amru Salim
YUSRIL ADRIANSYAH PUTRA
YUSRIL ADRIANSYAH PUTRA

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia
  • Front-End Web Developer
  • Back-End Web Developer
  • Javascript Enthusiast
Yudistira Arya Mutamang
Yudistira Arya Mutamang

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia
  • Front-End Web Developer
  • Cyber Security Enthusiast
Chandra Perdiansyah
Ilham Shiddiq
Muhammad Alvino Dienova
Eko Rahayu Widodo
Eko Rahayu Widodo

Eko Rahayu Widodo

Software Engineer

• Lifelong Learner.

• Let's Connect ^^.

Marcello Sebastian
Sofyan Egi Lesmana
Sofyan Egi Lesmana

Sofyan Egi Lesmana

You can reach out me on my Linkedin.

Refiandi Reza Syawaldriyansah
Shidqi Rifat Pangestu
Shidqi Rifat Pangestu

Shidqi Rifat Pangestu

Frontend Developer at Badr Interactive

- Frontend web enthusiast
- Contribute through technology </>

Fazza Razaq Amiarso
Fazza Razaq Amiarso

Fazza Razaq Amiarso

Software Engineer@WidaTech & Mentor

I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently learning and building interactive experience on the Web and Mobile.

Huge believer (and doer ofc) in learning by doing.

Personal Website: https://www.fazzaamiarso.com

Github: https://github.com/fazzaamiarso

Fauzi Kurniawan
Irenius Brayen Luhat
Irenius Brayen Luhat

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

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

Catur dari Dicoding

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer


Luthfi Alfarisi

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Inggih Wicaksono

Inggih Wicaksono

Web Developer at Erasys Consulting

- Fullstack man but currently focus on React.js

- Hacktoberfest fans @igihcksn

Agista Septiyanto

Agista Septiyanto

Product Engineer

Tim product

Alvin Indra Pratama

Alvin Indra Pratama

Frontend Developer at Antikode

  • Front-End Developer
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Nanang Sutisna

Nanang Sutisna

- Mobile & Web Enthusiast

- External Code Reviewer at Dicoding Indonesia

Putu Jhonarendra

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.

Gunawan Wahyu Andreanto

Gunawan Wahyu Andreanto

Full Stack Developer

meh
Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Ferdian Ahmad Rozikin

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

dos:6686df0f9e218fbb7a0a1eb49dea73d020230224162524.png Linkedin | Website | dos-e8d459176d261a1bc9f78dc03c22dcf620240630125408.png Github | dos-e8d459176d261a1bc9f78dc03c22dcf620240630125408.png Medium | dos-81e37f3f8ce298c50c6e701e10e3482120240630125304.png X

Nosef Nunggaran

Nosef Nunggaran

External Code Reviewer at Dicoding Indonesia

AWS Certified Solutions Architect

Ananda Dwi Prayoga

Ananda Dwi Prayoga

Android Engineer at Vidio.com

  • Android Dev
  • Web Dev
Rosyiidah Hasnaa

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

Shaddam Amru

Frontend Engineer

  • React Frontend Engineer
  • Product & UX
  • Linux Enthusiast
Muhammad Ilham Adhim

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

  • Front-end Web Developer
Rian Mandala Putra

Rian Mandala Putra

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
Swanddd

Swanddd

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
Fiqri ardiansyah

Fiqri ardiansyah

Frontend Developer at PT. SPM

HA, nice!

Take a look my portfolio

Samodra

Samodra

External Code Reviewer at Dicoding Indonesia

  • Software Engineer
Muhammad Amru Salim

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
YUSRIL ADRIANSYAH PUTRA

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia

  • Front-End Web Developer
  • Back-End Web Developer
  • Javascript Enthusiast
Yudistira Arya Mutamang

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia

  • Front-End Web Developer
  • Cyber Security Enthusiast
Chandra Perdiansyah

Chandra Perdiansyah

Frontend Web Developer Enthusiast

Lifelong Learner

Linkedin : https://www.linkedin.com/in/cperdiansyah/

Ilham Shiddiq

Ilham Shiddiq

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

  • Back-End Web Developer
  • Web Developing Enthusiast
Muhammad Alvino Dienova

Muhammad Alvino Dienova

External Reviewer at Dicoding Indonesia

Front-End Web Developer

Eko Rahayu Widodo

Eko Rahayu Widodo

Software Engineer

• Lifelong Learner.

• Let's Connect ^^.

Marcello Sebastian

Marcello Sebastian

External Code Reviewer at Dicoding Indonesia

Front-end Development Enthusiast

Sofyan Egi Lesmana

Sofyan Egi Lesmana

You can reach out me on my Linkedin.

Refiandi Reza Syawaldriyansah

Refiandi Reza Syawaldriyansah

External Reviewer Dicoding

Front-End & Javascript Enthusiast

Shidqi Rifat Pangestu

Shidqi Rifat Pangestu

Frontend Developer at Badr Interactive

- Frontend web enthusiast
- Contribute through technology </>

Fazza Razaq Amiarso

Fazza Razaq Amiarso

Software Engineer@WidaTech & Mentor

I'm a self-taught web developer focusing on making everyone can inclusively use the web. Currently learning and building interactive experience on the Web and Mobile.

Huge believer (and doer ofc) in learning by doing.

Personal Website: https://www.fazzaamiarso.com

Github: https://github.com/fazzaamiarso

Fauzi Kurniawan

Fauzi Kurniawan

External Code Reviewer at Dicoding Indonesia

Javascript enthusiast

Irenius Brayen Luhat

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.

Testimoni Siswa

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

Muhammad Khuirul Huda
Muhammad Khuirul Huda
Universitas Negeri Semarang
Menjadi Front-End Web Developer Expert
Ternyata sebuah website yang baik bukan hanya dilihat dari tampilan saja, tetapi juga performa, aksesibilitas, dan faktor lain yang sangat penting untuk diperhatikan. Melalui kelas ini, saya menjadi paham bagaimana membuat website yang baik.
Baca selengkapnya
Made Acarya Mordekhai Karang, S.T
Made Acarya Mordekhai Karang, S.T
PT. Indonesia Comnets Plus
Menjadi Front-End Web Developer Expert
Saya sangat puas dengan kelas ini, karena telah menuntun saya untuk menjadi seorang front-end developer yang gigih, teliti, disiplin, dan efisien.
Baca selengkapnya

Lihat semua testimoni

Lihat semua testimoni
Silabus
Belajar Sekarang

Silabus

Materi yang akan Anda pelajari pada kelas ini.

  • 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

  • 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

  • Tips Submission: Katalog Restoran

    0 Menit

  • Submission: Katalog Restoran

    480 Menit

  • 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 Linter dengan 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

  • 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

  • Tips Submission: Katalog Restoran + PWA

    0 Menit

  • Submission: Katalog Restoran + PWA

    600 Menit

  • 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

  • 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

  • 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

  • Rangkuman Kelas

    60 Menit

  • Ujian Akhir

    30 Menit

  • Tips Submission: Katalog Restoran PWA + Testing and Optimized

    10 Menit

  • Submission: Katalog Restoran PWA + Testing and Optimized

    660 Menit

Dicoding Logo

Dicoding Space
Jl. Batik Kumeli No.50, Sukaluyu,
Kec. Cibeunying Kaler, Kota Bandung
Jawa Barat 40123

Penghargaan

Asean Business Award 2019

Decode Ideas
Discover Potential

Tentang Kami
Blog
Reward
Showcase
Dicoding Elite
Hubungi Kami
FAQ