
Belajar Fundamental Front-End Web Development
Teknologi:
WebLevel: Pemula - Menengah
Siswa Terdaftar
Teknologi:
WebLevel: Pemula - Menengah
Siswa Terdaftar
Kelas ini merupakan langkah ke-empat Anda untuk menjadi Front-End Web Developer.
Website saat ini sudah menjadi kebutuhan utama yang tidak bisa diabaikan. Seluruh sektor bisnis dapat memanfaatkan website sebagai alat untuk promosi, bertukar informasi, dll. Pada Juni 2021 berdasarkan sumber Internet Live Stats terdapat lebih dari 1,8 milyar website yang aktif. StackShare, salah satu komunitas developer terbesar di Amerika, menyatakan terdapat ribuan produk internasional termasuk AirBnB, Instagram, dan Gitlab telah menggunakan Web Component, Build Tools (seperti Webpack), dan AJAX.Â
Kelas ini merupakan langkah ke-empat Anda untuk menjadi Front-End Web Developer.
Peralatan Belajar
Spesifikasi minimal perangkat:
Prosesor
Intel Celeron (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
1GB (Rekomendasi 2GB)
Layar
1366 x 768 (Rekomendasi Full HD 1920 x 1080)
Sistem Operasi
Windows, Linux, MacOS
Prosesor
Intel Celeron (Rekomendasi Core i3 ke atas)
Kelas ini membutuhkan beberapa tools berikut:
Teks Editor (VSCode, Atom, atau Emacs)
Web Browser (Google Chrome atau Mozilla Firefox)
Metode Ajar
Lihat semua metode ajar
Lihat semua metode ajarKontributor
2Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Nur Rizki Adi Prasetyo
Curriculum Developer at Dicoding Indonesia
Reviewer
31Code Reviewer yang akan me-review tugas dan kode Anda:
Nasrul Gunawan
Sr. Backend Engineer at Stockbit
Khofidin
IT & Traceability Manager at Austrex
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Tio Misbaqul Irawan
External Code Reviewer at Dicoding Indonesia
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
Nur Rizki Adi Prasetyo
Curriculum Developer at Dicoding Indonesia
Tim Reviewer
Code Reviewer yang akan me-review tugas dan kode Anda:
Nasrul Gunawan
Sr. Backend Engineer at Stockbit
Khofidin
IT & Traceability Manager at Austrex
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Tio Misbaqul Irawan
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
Code Reviewer at Dicoding Indonesia
Alvin Indra Pratama
Product Engineer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Abdul Malik
Self-employed
Ni Luh Putu Anita Dewi
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Rosyiidah Hasnaa
Front End Enthusiast, Undergraduate at Politeknik Elektronika Negeri Surabaya
Final Year Student of Informatics Engineering at 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 Hasibuan
Front-end Engineer at Smeshub
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Celvine Adi Putra
Rian Mandala Putra
External Code Reviewer at Dicoding Indonesia
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Yusril Adriansyah Putra
External Code Reviewer at Dicoding Indonesia
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
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Fazza Razaq Amiarso
Web Developer & Open Source Maintainer
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://fazzaamiarso.me
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Gunawan Wahyu Andreanto
Full Stack Developer
Nasrul Gunawan
Sr. Backend Engineer at Stockbit
Khofidin
IT & Traceability Manager at Austrex
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
External Code Reviewer at Dicoding Indonesia
Tio Misbaqul Irawan
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
Code Reviewer at Dicoding Indonesia
Alvin Indra Pratama
Product Engineer at Dicoding Indonesia
Alfian Yusuf Abdullah
Head of Reviewer at Dicoding Indonesia
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko Widiantoro
Code Reviewer at Dicoding Indonesia
Ni Luh Putu Anita Dewi
Nosef Nunggaran
External Code Reviewer at Dicoding Indonesia
AWS Certified Solutions Architect
Ananda Dwi Prayoga
Android Engineer at Vidio.com
Rosyiidah Hasnaa
Front End Enthusiast, Undergraduate at Politeknik Elektronika Negeri Surabaya
Final Year Student of Informatics Engineering at 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 Hasibuan
Front-end Engineer at Smeshub
Muhammad Ilham Adhim
Front-End Web Developer
Muhammad Rifki Erlangga
External Code Reviewer at Dicoding Indonesia
Celvine Adi Putra
Rian Mandala Putra
External Code Reviewer at Dicoding Indonesia
Tatang Kuswandi
External Code Reviewer at Dicoding Indonesia
Yusril Adriansyah Putra
External Code Reviewer at Dicoding Indonesia
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
Marcello Sebastian
External Code Reviewer at Dicoding Indonesia
Front-end Development Enthusiast
Sofyan Egi Lesmana
External Code Reviewer at Dicoding Indonesia
You can reach out me on my Linkedin.
Refiandi Reza Syawaldriyansah
External Reviewer Dicoding
Front-End & Javascript Enthusiast
Fazza Razaq Amiarso
Web Developer & Open Source Maintainer
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://fazzaamiarso.me
Github: https://github.com/fazzaamiarso
Fauzi Kurniawan
External Code Reviewer at Dicoding Indonesia
Javascript enthusiast
Gunawan Wahyu Andreanto
Full Stack Developer
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.
2 Menit
6 Menit
15 Menit
15 Menit
10 Menit
Forum Diskusi
20 Menit
Materi yang Dipelajari
12 Menit
Glosarium
10 Menit
Daftar Referensi
5 Menit
Belajar menerapkan sintaks terbaru pada JavaScript seperti block scope variable, template literals, destructuring object and array, spread operator dan rest parameters, arrow function, classes, promise hingga JavaScript module.
Pendahuluan ECMAScript 6
15 Menit
Menjalankan Potongan Kode
15 Menit
Persiapan Proyek Latihan
20 Menit
Deklarasi Variabel
25 Menit
Latihan: Deklarasi Variabel
5 Menit
Solusi: Deklarasi Variabel
25 Menit
Template Literals
25 Menit
Latihan: Template literals
10 Menit
Solusi: Template literals
15 Menit
Destructuring Object dan Array
25 Menit
Destructuring Object
30 Menit
Destructuring Array
30 Menit
Latihan: Destructuring Object
15 Menit
Solusi: Destructuring Object
15 Menit
Spreading Operator dan Rest Parameter
30 Menit
Function
10 Menit
Arrow Function Expression
20 Menit
Regular Function versus Arrow Function
25 Menit
Parameter dan Block Body pada Arrow Function
25 Menit
Keyword this pada Arrow Function
30 Menit
Default Parameters
10 Menit
Latihan: Arrow Function
5 Menit
Solusi: Arrow Function
25 Menit
Class
15 Menit
Apa itu Class pada JavaScript
30 Menit
Constructor
15 Menit
Instance
25 Menit
Property Accessor
25 Menit
Method
20 Menit
Inheritance
50 Menit
Static Method
25 Menit
Latihan: Class
5 Menit
Solusi: Class
25 Menit
Promise
10 Menit
setTimeout
20 Menit
Callback Function
45 Menit
Apa itu Promise
5 Menit
Membuat Objek Promise
30 Menit
Fungsi onFulfilled dan onRejected
30 Menit
onRejected menggunakan Catch Method
20 Menit
Promise Berantai
30 Menit
Promise All
25 Menit
Sintaks Async/Await
35 Menit
Menangani onRejected menggunakan async/await
20 Menit
Promise berantai menggunakan async/await
30 Menit
Latihan: Promise
10 Menit
Solusi: Promise
55 Menit
Module
20 Menit
Ekspor dan Impor Modul pada Node.js
35 Menit
Ekspor banyak Nilai pada Node.js
30 Menit
ES6 Module
5 Menit
Sintaks Ekspor dan Impor pada ES6 Module
40 Menit
Latihan: Module
15 Menit
Solusi: Module
40 Menit
Rangkuman ECMAScript 6
15 Menit
Belajar membangun component UI website yang bersifat reusable dan encapsulated dengan custom element dan shadow DOM.
Pendahuluan Web Components
20 Menit
Apa itu Web Component
20 Menit
Custom Element
20 Menit
Menulis Custom Element Pertama
40 Menit
Siklus Hidup dari Custom Element
40 Menit
Atribut dan Method pada Custom Element
30 Menit
Mengamati Nilai Atribut
40 Menit
Menerapkan Styling pada Custom Element tanpa Shadow DOM
25 Menit
Menangani Data yang Kompleks
40 Menit
Nested Custom Element
30 Menit
Latihan: Menerapkan Custom Element pada proyek Club Finder
10 Menit
Solusi: Membuat app-bar Component
35 Menit
Solusi: Membuat search-bar Component
40 Menit
Solusi: Membuat club-list dan club-item Component
50 Menit
Shadow DOM
15 Menit
Apa itu Shadow DOM
15 Menit
Dasar Penggunaan Shadow DOM
35 Menit
Penggunaan Shadow DOM pada Web Component
35 Menit
Latihan: Menerapkan Shadow DOM pada Proyek Club Finder
10 Menit
Solusi: Menerapkan Shadow DOM pada Proyek Club Finder
50 Menit
Rangkuman Web Component
15 Menit
Menguji pemahaman peserta mengenai materi ECMAScript 6 dan Web Component melalui kuis.
Knowledge Check: ECMAScript 6 dan Web Component
60 Menit
Belajar menambahkan, menghapus, dan menggunakan package JavaScript yang tersedia di NPM serta membedakan peranan dari development dependencies dan production dependencies.
Pendahuluan Package Manager
5 Menit
Apa itu Package Manager
15 Menit
Memasang Node.js dan NPM
35 Menit
Memulai Menggunakan NPM
25 Menit
Membuat Proyek JavaScript menggunakan NPM
30 Menit
Memasang Package dan Mengenal berkas package.json
30 Menit
Menggunakan Package yang Terpasang pada Browser
30 Menit
Menjalankan Runner Scripts
25 Menit
Menghapus Package yang Terpasang
20 Menit
Cakupan Package
25 Menit
Rangkuman Node Package Manager
15 Menit
Belajar penerapan module bundler sebagai build tools bagi aplikasi web untuk membundel berkas-berkas JavaScript menjadi satu berkas statis yang siap rilis dan optimal.
Pendahuluan Module Bundler
10 Menit
Apa itu Webpack
20 Menit
Core Concepts
15 Menit
Entry
15 Menit
Output
15 Menit
Loaders
10 Menit
Plugin
30 Menit
Mode
20 Menit
Memasang dan Menggunakan Webpack
40 Menit
Membuat Berkas Konfigurasi
35 Menit
Menggunakan Loader
50 Menit
Menggunakan Plugin
40 Menit
Webpack Dev Server
25 Menit
Mengonfigurasi Webpack berdasarkan Environment
35 Menit
Latihan: Menerapkan Webpack pada Club Finder
5 Menit
Solusi: Menerapkan Webpack pada Club Finder
40 Menit
Rangkuman Webpack
15 Menit
Menguji pemahaman peserta mengenai materi Package Manager dan Module Bundler melalui kuis.
Knowledge Check: Node Package Manager dan Webpack
60 Menit
Belajar transaksi data melalui protokol HTTP/HTTPS menggunakan Fetch API, baik menggunakan method GET, POST, PUT, maupun DELETE.
Pendahuluan Asynchronous JavaScript Request
10 Menit
HTTP Request
10 Menit
Web APIs
10 Menit
CORS
15 Menit
Mencoba Web API menggunakan Postman
35 Menit
JavaScript Object Notation (JSON)
25 Menit
Persiapan Proyek Latihan
25 Menit
AJAX menggunakan XHR
25 Menit
Header dan Body Request menggunakan XHR
25 Menit
Latihan AJAX menggunakan XHR pada Dicoding Books
10 Menit
Melengkapi Fungsi getBook
25 Menit
Melengkapi Fungsi insertBook
25 Menit
Melengkapi Fungsi updateBook
25 Menit
Melengkapi Fungsi removeBook
25 Menit
AJAX menggunakan Fetch
5 Menit
Dasar Penggunaan Fetch
30 Menit
Mengubah Method, Menetapkan Header Property, dan Menetapkan Data pada Body Request menggunakan Fetch
30 Menit
Latihan AJAX menggunakan Fetch
5 Menit
Mengubah fungsi getBook
25 Menit
Mengubah fungsi insertBook
25 Menit
Mengubah fungsi updateBook
25 Menit
Mengubah fungsi deleteBook
25 Menit
Latihan: Menerapkan Fetch pada Proyek Club Finder
10 Menit
Solusi: Menerapkan Fetch pada Proyek Club Finder
50 Menit
Rangkuman Asynchronous JavaScript And XML
50 Menit
Knowledge Check: JavaScript Asynchronous Request
15 Menit
Menguji pemahaman peserta dalam membuat aplikasi front-end web dengan kode JavaScript standar ES6, menerapkan Web Components, Webpack, dan menampilkan data dinamis dari Web API menggunakan AJAX.
Rangkuman Kelas
60 Menit
Submission: Membuat Aplikasi Web dengan ES6, Custom Element, NPM, Module Bundler, dan AJAX
800 Menit