Belajar Membuat Front-End Web untuk Pemula
Topik:
Full Stack Front EndLevel: Pemula
Siswa Terdaftar
Topik:
Full Stack Front EndLevel: Pemula
Siswa Terdaftar
Kelas ini merupakan langkah ke-tiga Anda untuk menjadi React Developer.
Kelas ini merupakan langkah ke-tiga Anda untuk menjadi Front-End Web Developer.
Website sudah menjadi kebutuhan utama yang tidak bisa diabaikan. Hal ini karena website tidak hanya digunakan sebagai media informasi, tetapi bisa juga sebagai tools untuk menunjang bisnis Anda. Untuk membuat website yang memiliki fungsionalitas lebih dan interaktif, web developer perlu belajar teknik manipulasi DOM. Kelas ini membahas secara tuntas dan lengkap mengenai DOM Manipulation dan Web Storage dalam membuat website yang memiliki fungsionalitas lebih dan interaktif.
Kelas ini merupakan langkah ke-tiga Anda untuk menjadi React 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
3Curriculum Developer yang membangun kelas ini:
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Gregorius Sebastian
Course Contributor at Dicoding
Reviewer
40Code 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
Jimmy
External Code Reviewer at Dicoding Indonesia
Malvian Dwi Haryanto
External Code Reviewer at Dicoding Indonesia
Software Engineer | Web Enthusiast
Amril Hakim Sihotang
External Code Reviewer at Dicoding Indonesia
Arief Turbagus Nuril
Mobile App Developer at SALT 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
Gregorius Sebastian
Course Contributor at Dicoding
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
Jimmy
External Code Reviewer at Dicoding Indonesia
Malvian Dwi Haryanto
External Code Reviewer at Dicoding Indonesia
Software Engineer | Web Enthusiast
Amril Hakim Sihotang
External Code Reviewer at Dicoding Indonesia
Arief Turbagus Nuril
Mobile App Developer at SALT Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Product Engineer
Tim product
khairul anas
External Code Reviewer at Dicoding Indonesia
• Dicoding Graduate
• Flutter Developer
• Mobile & Web Enthusiast
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
Mellania Permata Sylvie
External Reviewer Machine Learning di Dicoding
Information system student, Machine Learning Enthusiasm, and Tensorflow Developer Certified
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
Academy Code Reviewer at Dicoding Indonesia
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
Swanddd
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Frontend Developer at PT. SPM
HA, nice!
Take a look my portfolio
Farhan Rafly Fahrezi Saepulloh
Frontend Engineer
If the physics says it is allowed, the engineers will find a way.
Samodra
External Code Reviewer at Dicoding Indonesia
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Hasan Ismail Abdulmalik
Software Engineering Student at College of Vocational Studies IPB University
I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Abraham Bulyan Zebua
make something from nothing
I love design and make new things especially for make an app and my desire is to make apps looks nice and friendly for user not just nice for eye but easy to use
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.
Kevin Jonathan
External Code Reviewer at Dicoding Indonesia
Research Assistant at Waseda University | Apple Developer Academy Alumni
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@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
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.
Muhammad Zainul Hakim
Developer
Learning the web tech.
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
Jimmy
External Code Reviewer at Dicoding Indonesia
Malvian Dwi Haryanto
External Code Reviewer at Dicoding Indonesia
Software Engineer | Web Enthusiast
Amril Hakim Sihotang
External Code Reviewer at Dicoding Indonesia
Arief Turbagus Nuril
Mobile App Developer at SALT Indonesia
Inggih Wicaksono
Web Developer at Erasys Consulting
- Fullstack man but currently focus on React.js
- Hacktoberfest fans @igihcksn
Agista Septiyanto
Product Engineer
Tim product
khairul anas
External Code Reviewer at Dicoding Indonesia
• Dicoding Graduate
• Flutter Developer
• Mobile & Web Enthusiast
Dimas Maulana Dwi Saputra
Curriculum Developer at Dicoding Indonesia
Alexzander Purwoko
Code Reviewer at Dicoding Indonesia
Mellania Permata Sylvie
External Reviewer Machine Learning di Dicoding
Information system student, Machine Learning Enthusiasm, and Tensorflow Developer Certified
Ni Luh Putu Anita Dewi
Muhammad Nazar Alwi
External Code Reviewer at Dicoding Indonesia
Ivan Andrianto
Academy Code Reviewer at Dicoding Indonesia
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
Swanddd
External Code Reviewer at Dicoding Indonesia
Fiqri ardiansyah
Frontend Developer at PT. SPM
HA, nice!
Take a look my portfolio
Farhan Rafly Fahrezi Saepulloh
Frontend Engineer
If the physics says it is allowed, the engineers will find a way.
Samodra
External Code Reviewer at Dicoding Indonesia
YUSRIL ADRIANSYAH PUTRA
External Code Reviewer at Dicoding Indonesia
Hasan Ismail Abdulmalik
Software Engineering Student at College of Vocational Studies IPB University
I am a web developer who is interested in both backend and frontend development. I have been teaching myself web development and am familiar with programming languages such as HTML, CSS, JavaScript, PHP and Python as well as frameworks like Laravel, Django, React and Node.js. I am eager to gain practical experience and contribute to the development of high-quality websites and software.
Yudistira Arya Mutamang
External Code Reviewer at Dicoding Indonesia
Ilham Shiddiq
External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.
Abraham Bulyan Zebua
make something from nothing
I love design and make new things especially for make an app and my desire is to make apps looks nice and friendly for user not just nice for eye but easy to use
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.
Kevin Jonathan
External Code Reviewer at Dicoding Indonesia
Research Assistant at Waseda University | Apple Developer Academy Alumni
Seprian Dani
External Academy Code Reviewer at Dicoding Indonesia
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@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
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.
Muhammad Zainul Hakim
Developer
Learning the web tech.
Muhammad Raka Sondara
Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.
Berikut 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
25 Menit
25 Menit
10 Menit
15 Menit
20 Menit
15 Menit
Mempelajari penerapan BOM dan DOM pada halaman website. Selain itu, modul ini mengajarkan teknik pemanipulasian DOM menggunakan JavaScript.
Pendahuluan Browser Object Model dan Document Object Model
10 Menit
Cara JavaScript Mengontrol Website dan Browser
25 Menit
Menjalankan JavaScript di Website
25 Menit
Browser Environment
25 Menit
Pendahuluan Browser Object Model (BOM)
20 Menit
Anggota BOM: Method alert
25 Menit
Anggota BOM: Method prompt
25 Menit
Anggota BOM: console
25 Menit
Cara Memanggil Anggota BOM
30 Menit
Pendahuluan Document Object Model (DOM)
15 Menit
DOM Tree
20 Menit
Mencari DOM (Mendapatkan DOM)
35 Menit
Membuat Elemen HTML
25 Menit
Mengubah Konten HTML - Menyiapkan Konten
25 Menit
Mengubah Konten HTML - Memanipulasi Atribut Melalui setAttribute()
30 Menit
Mengubah Konten HTML - Memanipulasi Konten Melalui innerText, innerHTML, dan style.property
35 Menit
Menambahkan Elemen HTML ke DOM
25 Menit
Rangkuman Browser Object Model & Document Object Model
35 Menit
Kuis Browser Object Model dan Document Object Model
20 Menit
Mempelajari penerapan event dalam menciptakan interaktifitas pada HTML element.
Pendahuluan Interaktif dengan Event
10 Menit
Apa Itu Event
10 Menit
Macam-Macam Event
30 Menit
Menambahkan Event Handler - Menyiapkan Halaman Website
25 Menit
Menambahkan Event Handler - Membuat event handler onload
25 Menit
Menambahkan Event Handler - Membuat event handler onclick
25 Menit
Menambahkan Event Handler - Menerapkan event handler inline
25 Menit
Menambahkan Event Handler - Menerapkan event handler dengan addEventListener()
30 Menit
Menambahkan Custom Event
35 Menit
Membangkitkan Custom Event
35 Menit
Event Bubbling dan Capturing
35 Menit
Pengenalan ke Form
20 Menit
Form Event
30 Menit
Input Event: Menyiapkan Halaman Web
25 Menit
Input Event: onInput, onFocus, dan onBlur
35 Menit
Input Event: onChange, onCopy, dan onPaste
35 Menit
Input Event: Hasil Akhir
25 Menit
Membuat Aplikasi Todo Apps
20 Menit
Mengunduh Starter Project, Membuat Berkas JavaScript, dan Menampilkan Todo pada Console
35 Menit
Menampilkan Item Todo dan Menandai Todo Selesai
35 Menit
Menampilkan Item Todo yang Selesai dan Menghapus Todo
35 Menit
Ikhtisar Interaktif dengan Event
35 Menit
Kuis Interaktif dengan Event
20 Menit
Mengetahui web storage, tipe web storage, dan belajar menggunakan localStorage dalam untuk menyimpan data yang persisten.
Pengenalan Penyimpanan Data dengan Web Storage
15 Menit
Pengertian dan Fungsi Web Storage
25 Menit
Macam-Macam Web Storage dan Cara Mengetahui Dukungan Web Storage
30 Menit
Local Storage
25 Menit
Session Storage
25 Menit
Pengantar Latihan: Membuat Permainan Tebak Angka “123”
10 Menit
Implementasi Web Storage - Menambahkan Item Storage
25 Menit
Implementasi Web Storage - Mengakses Item Storage
25 Menit
Implementasi Web Storage - Memodifikasi Item Storage
45 Menit
Implementasi Web Storage - Menghapus Item Storage
25 Menit
Implementasi Web Storage - Menyimpan Data Kompleks pada Storage menggunakan objek JSON
40 Menit
Mengimplementasikan Web Storage ke Proyek Todo Apps
20 Menit
Menambahkan Metode Manipulasi Data Web Storage
35 Menit
Menambahkan Fungsi Memuat Data Ketika Todo Apps Dibuka
35 Menit
Tantangan!
25 Menit
Ikhtisar Penyimpanan Data dengan Web Storage
30 Menit
Kuis Web Storage
20 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
60 Menit
Membuat aplikasi front-end web yang interaktif serta memiliki fitur penyimpanan menggunakan web storage.
Submission: Membangun Bookshelf App
900 Menit