Belajar Tools Front-End Web Intermediate

4.80 •

Front-End Web

Learning Path

Belajar Tools Front-End Web Intermediate

Teknologi:

Web

Level: Mahir

Level: Mahir 65 Jam Belajar

1.443

Siswa Terdaftar

Pelajari tools berstandar industri dengan Sass, Bootstrap, Lit, Axios, dan Firebase dalam membangun aplikasi web yang efisien dan powerful.

Belajar Sekarang

Informasi kelas Lihat silabus

Learning Path Front-End Web Developer

Kelas ini merupakan langkah ke-lima Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 4

Belajar Fundamental Front-End Web Development

80 Jam 4,88 Level Pemula - Menengah

Langkah setelahnya

Langkah 6

Menjadi Front-End Web Developer Expert

110 Jam 4,88 Level Mahir - Profesional

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.

Kode Interaktif

Modul belajar dalam bentuk video, disertai dengan latihan untuk menguji pemahaman.

Kuis

Kuis pilihan ganda membantu Anda memahami materi yang dipelajari.

Ujian

Validasi pengetahuan Anda dengan mengerjakan soal-soal ujian.

Level Mahir
Menguasai materi dan latihan tingkat lanjut. Kelas ini mensyaratkan sejumlah penguasaan landasan pengetahuan yang baik.

Deskripsi

Perkembangan teknologi makin pesat, begitu pula dengan aplikasi berbasis website. Banyak tools yang bisa diterapkan untuk mempermudah dan mempercepat pekerjaan developer, terutama dalam pengembangan aplikasi web. Tools tersebut antara lain Sass untuk CSS preprocessor, Bootstrap untuk CSS framework, Lit untuk Web Component, Axios untuk HTTP client, dan Firebase untuk Platform as a Service (PaaS). Dengan mempelajari tools tersebut, developer akan semakin andal dalam membuat aplikasi web berkualitas.

Beberapa alasan wajib bagi Anda dalam mengambil dan mempelajari kelas ini dapat dilihat pada poin-poin berikut.

Memudahkan developer dalam mengembangkan aplikasi web dengan memanfaatkan fitur-fitur yang ditawarkan oleh framework ataupun library.
Meningkatkan fleksibilitas dan efisiensi penulisan styling dengan logika layaknya bahasa pemrograman menggunakan Sass dalam pengembangan aplikasi web.
Mempelajari komponen-komponen siap pakai dan customizable yang ditawarkan oleh Bootstrap untuk meningkatkan kecepatan pengembangan aplikasi web.
Membuat web component yang andal dengan menghilangkan beragam boilerplate menggunakan library milik Google bernama Lit.
Mempelajari teknik penyediaan layanan back-end dan hosting menggunakan Platform as a Service (PaaS) yang dikembangkan oleh Google bernama Firebase.

Target dan Sasaran Siswa

Kelas ini ditujukan untuk seorang Front-End Web Developer yang ingin mengembangkan website dengan cepat, simpel, reusable, dan powerful.
Kelas ini dapat diikuti oleh siswa yang melek IT sehingga wajib memiliki komputer dan mengoperasikan dengan baik.
Siswa diharapkan sudah memiliki pemahaman dasar dalam pembuatan website menggunakan HTML, CSS, dan JavaScript dengan baik.
Siswa harus bisa belajar mandiri, berkomitmen, memiliki rasa ingin tahu yang tinggi, dan tertarik pada subjek materi. Hal ini karena sebaik apa pun materi yang disajikan, kelas ini tidak akan berguna tanpa keuletan siswa dalam belajar dan usaha.
Di akhir kelas, siswa mampu menguasai konsep dan implementasi tools dalam pengembangan web yang cepat, mudah, serta powerful hingga membuat aplikasi web yang dapat diakses oleh banyak orang pada akhir kelas.

Selengkapnya

Sembunyikan

Learning Path

Kelas ini merupakan langkah ke-lima Anda untuk menjadi Front-End Web Developer.

Langkah sebelumnya

Langkah 4

Belajar Fundamental Front-End Web Development

80 Jam 4,88 Level Pemula - Menengah

Langkah setelahnya

Langkah 6

Menjadi Front-End Web Developer Expert

110 Jam 4,88 Level Mahir - Profesional

Peralatan Belajar

Spesifikasi minimal perangkat:

Prosesor

Intel Celeron (Rekomendasi Core i3 ke atas)

Tools yang dibutuhkan untuk belajar:

Teks Editor (VSCode)

Lihat semua peralatan belajar

Peralatan Belajar

Spesifikasi minimal perangkat

Kelas ini membutuhkan spesifikasi perangkat seperti berikut:

RAM

1 GB (Rekomendasi 2 GB)

Layar

1366 x 768 (Rekomendasi Full-HD)

Sistem Operasi

Windows, Linux, MacOS

Prosesor

Intel Celeron (Rekomendasi Core i3 ke atas)

Tools

Kelas ini membutuhkan beberapa tools berikut:

Teks Editor (VSCode)

Web Browser (Google Chrome atau Mozilla Firefox)

Command Line (Terminal atau cmd)

Metode Ajar

Online - Self-paced Learning
- Total jam belajar: 65 jam
- Rekomendasi waktu belajar: 10 jam/minggu (selesai dalam 46 hari)
- Anda dapat menentukan lama waktu secara mandiri dalam menyelesaikan materi selama masih aktif terdaftar di kelas ini.
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:
  - Proyek Awal: membuat Story App dengan Sass, Bootstrap, dan Lit.
  - Proyek Akhir: mengembangkan kembali Story App dengan Axios.
Sertifikat kompetensi

Lihat semua metode ajar

Metode Ajar

Online - Self-paced Learning
- Total jam belajar: 65 jam
- Rekomendasi waktu belajar: 10 jam/minggu (selesai dalam 46 hari)
- Anda dapat menentukan lama waktu secara mandiri dalam menyelesaikan materi selama masih aktif terdaftar di kelas ini.
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:
  - Proyek Awal: membuat Story App dengan Sass, Bootstrap, dan Lit.
  - Proyek Akhir: mengembangkan kembali Story App dengan Axios.
Sertifikat kompetensi

Kontributor

Curriculum Developer yang membangun kelas ini:

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

Reviewer

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

Agista Septiyanto

Product Engineer at Dicoding

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

- Associate Android Developer
- Web and Cloud Enthusiast

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

Tim Reviewer

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

Agista Septiyanto

Product Engineer at Dicoding

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

- Associate Android Developer
- Web and Cloud 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

Deden Muhamad Furqon

Academy Code Reviewer at Dicoding Indonesia

Google Certified - Associate Android Developer

Fiqri ardiansyah

Frontend Developer at Crealoka

HA, nice!

Take a look my portfolio

Agista Septiyanto

Product Engineer at Dicoding

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android, Web & IoT Enthusiast

YUSRIL ADRIANSYAH PUTRA

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Nur Rizki Adi Prasetyo

Curriculum Developer at Dicoding Indonesia

- Associate Android Developer
- Web and Cloud Enthusiast

Fazza Razaq Amiarso

Web Developer & Open Source Maintainer

Personal Website: https://fazzaamiarso.me

Github: https://github.com/fazzaamiarso

Deden Muhamad Furqon

Academy Code Reviewer at Dicoding Indonesia

Google Certified - Associate Android Developer

Fiqri ardiansyah

Frontend Developer at Crealoka

HA, nice!

Take a look my portfolio

Testimoni Siswa

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

Danar Dono

Institut Sains dan Teknologi Terpadu Surabaya

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Di kelas ini, akan diajarkan bagaimana konsep dasar pemograman. Saya sendiri merasa (seperti mengulas) kembali belajar mata kuliah algoritma 1, namun materinya disampaikan secara interaktif dan menyeyangkan sehingga relatif lebih cepat paham. Terima kasih Dicoding.

Baca selengkapnya

Muhammad Rafli

Universitas Padjadjaran

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Kelas ini benar-benar memberikan pemahaman yang baik tentang pemrograman. Dengan bahasa yang menarik, mudah dipahami, dan sedikit humor, saya selaku orang non-IT dapat memahami kelas ini dengan baik. Terima kasih Dicoding.

Baca selengkapnya

Lihat semua testimoni

Testimoni Siswa

Danar Dono

Institut Sains dan Teknologi Terpadu Surabaya

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Di kelas ini, Anda akan diajarkan bagaimana konsep dasar pemograman. Saya sendiri merasa (seperti mengulas) kembali belajar mata kuliah algoritma 1, namun materinya disampaikan secara interaktif dan menyeyangkan sehingga relatif lebih cepat paham. Terima kasih dicoding atas materi pembelajarannya. Salam.

Muhammad Rafli

Universitas Padjadjaran

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Thifal Nurrifqi Ariel Kurniawan

Universitas Pendidikan Indonesia

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Kelas ini sangat informatif dan bermanfaat bagi siapapun yang hendak memulai langkah di dunia pemrograman. Hal ini dikarenakan media dan pendekatan yang digunakan menjadikan saya mudah memahami tentang pemrograman dari 0 dan tidak buta arah untuk menentukan langkah selanjutnya.

Timotius Haniel

Boston Consulting Group

Memulai Dasar Pemrograman untuk Menjadi Pengembang Software

Melalui kelas Basic Programming 101, Saya menyadari bahwa betapa pentingnya basic yang kuat bagi seorang developer. Melalui basic yang kuat, seorang programmer dapat lebih mudah mengembangkan setiap software yang akan dibangun. "Bangunan yang tinggi dan besar, pasti memiliki pondasi yang kokoh"

Punya pertanyaan seputar kelas ini?

Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.

Bagaimana cara memasukkan token Academy? Aturan membuat pertanyaan di forum diskusi kelas Bagaimana cara mencetak sertifikat kelulusan kelas?

Lihat semua FAQ

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Persiapan Belajar

Mengetahui berbagai kebutuhan untuk menyongsong keberhasilan siswa dalam menuntaskan kelas ini.

8 Artikel

75 menit

CSS Preprocessor dengan Sass

Belajar menuliskan kode styling berupa program preprocessor yang dapat dikompilasi menjadi kode CSS valid bagi dokumen HTML.

22 Artikel
1 Ujian

445 menit

Pengantar CSS Preprocessor

10 Menit
Apa itu CSS Preprocessor

10 Menit
CSS Basic vs. Sass

20 Menit
Sass dan SCSS

15 Menit
Latihan: Memulai dengan SCSS

20 Menit
Tipe Data dalam Sass

20 Menit
Operator-Operator dalam Sass

20 Menit
Variabel

15 Menit
Selector Bersarang

15 Menit
Ampersand Operator

25 Menit
Deklarasi CSS Property

15 Menit
Functions

20 Menit
Mixin

20 Menit
Extending Style Rule

15 Menit
Flow Control

25 Menit
Import Stylesheet

15 Menit
Modular dengan Use

15 Menit
Built-in Modules

25 Menit
Pengantar Latihan: Halaman Portfolio

5 Menit
Latihan: Memahami Starter Project dan Menyusun Struktur Proyek

40 Menit
Latihan: Refactor Halaman Portfolio

50 Menit
Rangkuman CSS Preprocessor dengan Sass

20 Menit
Kuis CSS Preprocessor dengan Sass

10 Menit

CSS Framework dengan Bootstrap

Belajar membangun styling halaman web secara cepat, mudah, dan fleksibel. Bootstrap menawarkan beragam komponen dan utilitas siap pakai untuk membangun tampilan halaman web yang sangat ciamik.

33 Artikel
1 Ujian

580 menit

Pengantar CSS Framework

10 Menit
Apa itu CSS Framework

15 Menit
Memulai dengan Bootstrap

20 Menit
Eksplorasi Dokumentasi Bootstrap

10 Menit
Bootstrap Component

5 Menit
Component: Button

10 Menit
Component: Alert dan Toast

15 Menit
Component: Card

15 Menit
Component: Modal

15 Menit
Component: Progress dan Spinner

15 Menit
Bootstrap Form

5 Menit
Form: Form Control & Input Group

20 Menit
Form: Floating Label

10 Menit
Form: Input Validations

15 Menit
Bootstrap Layouting

5 Menit
Layouting: Breakpoint & Container

25 Menit
Layouting: Grid System

20 Menit
Layouting: Column dalam Grid System

15 Menit
Bootstrap Utilities

5 Menit
Utility: Text

15 Menit
Utility: Content Dimension dan Border

15 Menit
Utility: Spacing

15 Menit
Utility: Display dan Position

20 Menit
Utility: Shadow dan Opacity

15 Menit
Kustomisasi pada Bootstrap

10 Menit
Cara Kustomisasi Bootstrap

15 Menit
Latihan Kustomisasi Button Component

20 Menit
Pengantar Latihan: Money Tracker App dengan Bootstrap

5 Menit
Latihan: Membuat Starter Project

30 Menit
Latihan: Membangun UI Dasar dan Halaman Dashboard

50 Menit
Latihan: Membangun Halaman Tambah dan Edit Data Transaksi

50 Menit
Latihan: Membangun Modal UI untuk Rincian Data Transaksi

40 Menit
Rangkuman CSS Framework dengan Bootstrap

20 Menit
Kuis CSS Framework dengan Bootstrap

10 Menit

Web Component dengan Lit

Mempelajari pembuatan custom element dengan standar W3C yang simpel dan powerful dengan sebuah library bernama Lit.

18 Artikel
1 Ujian

355 menit

Pengantar Lit

10 Menit
Apa itu Lit

10 Menit
Native Web Component vs. Lit Component

15 Menit
Latihan: Membuat ToDo List

20 Menit
Define dan Render Lit Component

15 Menit
Reactive Properties

20 Menit
Penanganan Atribut Elemen

15 Menit
Latihan: Atribut HTML Template dalam Lit Component

30 Menit
Penanganan Atribut dengan Reactive Property

20 Menit
Latihan: Reactive Property dalam Lit Component

30 Menit
Pemanfaatan Lifecycle pada Lit Component

20 Menit
Siklus Update dari Reactive Property

15 Menit
Latihan: Monitoring Siklus Update dari Reactive Component

30 Menit
Declarative Event Listener

15 Menit
Latihan: Declarative Event Listener pada Lit Component

30 Menit
Logic pada Template

15 Menit
Styling pada Component

20 Menit
Rangkuman Lit Dasar

15 Menit
Kuis Lit Dasar

10 Menit

Penerapan Shadow DOM dan Localization di Lit

Mempelajari penerapan shadow DOM dan localization dalam pembuatan web component sehingga dapat memaksimalkan Lit sebagai library-nya.

15 Artikel
1 Ujian

340 menit

Pengantar Shadow DOM dan Localization di Lit

10 Menit
Interaksi dengan Shadow DOM

15 Menit
Render Children dengan Slot Element

20 Menit
Akses Slot Element pada Shadow DOM

15 Menit
Styling pada Shadow DOM

20 Menit
Lit Localization

20 Menit
Konfigurasi pada Lit Localization

15 Menit
Prosedur Penerapan Lit Localization

15 Menit
Mode Output dari Lit Localization

15 Menit
Latihan: Lit Localization

25 Menit
Pengantar Latihan: Menerapkan Lit pada Money Tracker App

5 Menit
Latihan: Membangun Lit Component pada UI Dasar dan Halaman Dashboard

50 Menit
Latihan: Refactor Halaman Tambah dan Edit Record dengan Lit Component

50 Menit
Latihan: Localization pada Money Tracker App

40 Menit
Rangkuman Penerapan Shadow DOM dan Localization pada Lit

15 Menit
Kuis Penerapan Shadow DOM dan Localization pada Lit

10 Menit

Proyek Pertama

Membangun aplikasi web statis bertemakan Story App dengan mengimplementasikan materi-materi yang telah dipelajari sebelumnya.

1 Submission

660 menit

Submission: Proyek Pertama

660 Menit

HTTP Client dengan Axios

Belajar implementasi third-party HTTP client untuk berkomunikasi dengan web service dengan lebih mudah dan efisien.

12 Artikel
1 Ujian

225 menit

Pengantar HTTP Client

10 Menit
Apa itu Axios

15 Menit
XHR vs. Fetch API vs. Axios

15 Menit
Latihan: Memulai dengan Axios

25 Menit
Axios API

20 Menit
Konfigurasi dalam Axios

25 Menit
Skema Response

15 Menit
Penanganan Error

15 Menit
Pengantar Latihan: Penerapan Axios pada Tracker Money App

5 Menit
Latihan: Membuat Fitur Autentikasi

30 Menit
Latihan: Menghidupkan Fitur CRUD Data Transaksi

30 Menit
Rangkuman HTTP Client dengan Axios

10 Menit
Kuis HTTP Client dengan Axios

10 Menit

Firebase untuk Aplikasi Web

Belajar menyiapkan Platform as a Service bagi aplikasi front-end sehingga memenuhi setiap kebutuhannya dan meningkatkan pengalaman user dengan performa tinggi.