Belajar Fundamental Front-End Web Development
Teknologi:
WebLevel: Menengah
Siswa Terdaftar
Teknologi:
WebLevel: 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
39Code 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
Nasrul Gunawan
Elixir Backend Developer at Global IT Support
Khofidin
IT & Traceability Manager at Austrex
Catur dari Dicoding
Code Reviewer at Dicoding Indonesia
Luthfi Alfarisi
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:
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
Nasrul Gunawan
Elixir Backend Developer at Global IT Support
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
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
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
Celvine Adi Putra
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
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.
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
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
Nasrul Gunawan
Elixir Backend Developer at Global IT Support
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
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
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
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
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
Celvine Adi Putra
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
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.
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
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.
Modul ini mengenalkan sistem belajar di kelas secara umum dari mulai Persetujuan Hak Cipta, Pengenalan Kelas, Prasyarat Kemampuan, Prasyarat Tools, Mekanisme Belajar, Forum Diskusi, Glosarium, hingga Daftar Referensi.
4 Menit
20 Menit
15 Menit
15 Menit
15 Menit
20 Menit
15 Menit
5 Menit
Modul ini mengenalkan penerapan dan pentingnya peran HTML form dalam mendapatkan data dari user.
Pengantar HTML Form Lanjutan
15 Menit
Pendalaman Elemen Form
25 Menit
Pendalaman Form Field
50 Menit
Pendalaman Atribut Form Field
30 Menit
Validasi Data
55 Menit
Pentingnya Auto Completion
35 Menit
Styling Form
50 Menit
Lebih Maju dengan JavaScript
40 Menit
Semantik Itu Penting
20 Menit
Best Practice dalam Membangun Form
50 Menit
Pengantar Studi Kasus: Club Finder App
15 Menit
Studi Kasus: Pencarian untuk Club Finder App
60 Menit
Rangkuman HTML Form Lanjutan
15 Menit
Kuis HTML Form Lanjutan
30 Menit
Modul ini mengajarkan penerapan tata letak menggunakan teknik yang lebih lanjut dan kompleks, yaitu CSS grid.
Pengantar CSS Grid
15 Menit
Kenalkan, Saya CSS Grid
15 Menit
Flexbox vs CSS Grid
50 Menit
Latihan: Memulai dengan CSS Grid
40 Menit
Terminologi Grid
30 Menit
Grid Container dan Grid Item
25 Menit
Inspeksi CSS Grid Layout
20 Menit
Tentukan Kolom dan Barismu
30 Menit
Hal Spesial untuk Anda yang Spesial
40 Menit
Mengatur Posisi
30 Menit
Penuh Kendali dengan Grid Template
35 Menit
Alignment
35 Menit
Studi Kasus: Mengatur Layout pada Club Finder App
30 Menit
Rangkuman Layouting dengan CSS Grid
15 Menit
Kuis Layouting dengan CSS Grid
30 Menit
Modul ini mempelajari penerapan Web component dalam aplikasi web untuk menyediakan elemen yang sesuai dengan kebutuhan dan dapat digunakan kembali di banyak tempat.
Pengantar Web Component
15 Menit
Apa Itu Web Component
35 Menit
Latihan: Menulis Custom Element Pertama
25 Menit
Define dan Render Custom Element
25 Menit
Siklus Hidup
25 Menit
Handling Custom Attribute
30 Menit
Aku Suka Keindahan
30 Menit
Nested Custom Element
30 Menit
Tantangan: Styling dan Custom Attribute pada ImageFigure
40 Menit
Pengantar Shadow DOM
20 Menit
Dia Adalah Shadow DOM
30 Menit
Dasar Penggunaan Shadow DOM
45 Menit
Shadow DOM untuk Web Component
35 Menit
Fleksibel dengan Slot Element
35 Menit
Tantangan: Shadow DOM dan Slot pada ImageFigure
40 Menit
Lebih Lanjut dalam Shadow DOM
40 Menit
Mudah dengan Template Element
35 Menit
Studi Kasus: Bangun Komponen pada Club Finder App
60 Menit
Rangkuman Web Component
15 Menit
Kuis Web Component
30 Menit
Modul ini mencakup tugas yang perlu diselesaikan siswa untuk dapat melanjutkan perjalanan pembelajaran kelasnya.
Tips Submission: Proyek Pertama
15 Menit
Submission: Membangun Notes App
720 Menit
Modul ini membahas teknik pengelolaan packages yang membantu pembangungan aplikasi web.
Pendahuluan Package Manager
10 Menit
npm sebagai Package Manager
20 Menit
Memasang Node.js dan npm
30 Menit
Memulai dengan npm
25 Menit
Membangun Proyek JavaScript dengan npm
25 Menit
Memasang Package dan Mengenal Berkas package.json
35 Menit
Menggunakan Package yang Terpasang pada Browser
35 Menit
Menjalankan Runner Scripts
20 Menit
Hapus Instalasi Package
20 Menit
Package Scope
25 Menit
Rangkuman Package Manager untuk Aplikasi Web
15 Menit
Kuis Package Manager untuk Aplikasi Web
30 Menit
Modul ini membahas tentang cara membundel seluruh kode JavaScript, baik kode sendiri maupun packages, agar dapat digunakan pada tahap production.
Pendahuluan Module Bundler
15 Menit
Apa Itu webpack
20 Menit
Konsep Inti
20 Menit
Entry Point
15 Menit
Output
15 Menit
Loaders
25 Menit
Plugin
25 Menit
Mode
20 Menit
Memasang dan Menggunakan Webpack
30 Menit
Membuat Berkas Konfigurasi
25 Menit
Menggunakan Loader
50 Menit
Menggunakan Plugin
35 Menit
DevServer
25 Menit
Mengonfigurasi webpack Berdasarkan Environment
35 Menit
Studi Kasus: webpack untuk Club Finder App
60 Menit
Rangkuman Bundel dengan Module Bundler
15 Menit
Kuis Bundel dengan Module Bundler
30 Menit
Modul ini menerapkan cara komunikasi aplikasi client (komputer) dengan web server (komputer) dalam mendapatkan dan menampilkan data secara dinamis.
Pengantar Asynchronous JavaScript Request
10 Menit
HTTP Request
15 Menit
Web API
20 Menit
Cross-Origin Resource Sharing (CORS)
20 Menit
Mencoba Web API menggunakan Postman
40 Menit
JavaScript Object Notation (JSON)
35 Menit
Persiapan Proyek Latihan
35 Menit
Asynchronous JavaScript Request dengan XMLHttpRequest
25 Menit
Header dan Body Request dengan XMLHttpRequest
25 Menit
Pengantar Latihan: Bertransaksi dengan XHR di Dicoding Books
10 Menit
Latihan: Melengkapi Fungsi getBook
25 Menit
Latihan: Melengkapi Fungsi insertBook
25 Menit
Latihan: Melengkapi Fungsi updateBook
25 Menit
Latihan: Melengkapi Fungsi removeBook
25 Menit
Asynchronous JavaScript Request dengan Fetch API
30 Menit
Penggunaan Fetch API Lebih Lanjut
30 Menit
Pengantar Latihan: Refactor Cara Transaksi di Dicoding Books dengan Fetch
10 Menit
Latihan: Refactor Fungsi getBook
25 Menit
Latihan: Refactor Fungsi insertBook
25 Menit
Latihan: Refactor Fungsi updateBook
25 Menit
Latihan: Refactor Fungsi removeBook
25 Menit
Studi Kasus: API untuk Club Finder App
60 Menit
Rangkuman Asynchronous JavaScript Request
15 Menit
Kuis Asynchronous JavaScript Request
30 Menit
Modul ini berisi rangkuman materi kelas dan ujian akhir untuk menguji pengetahuan yang kamu dapat dalam kelas.
Rangkuman Kelas
90 Menit
Ujian Akhir
200 Menit
Modul ini mencakup tugas yang perlu diselesaikan siswa agar dapat meluluskan kelasnya.
Tips Submission: Proyek Kedua
15 Menit
Submission: Integrasi Notes App dengan RESTful API
720 Menit