Materi Web Frontend 2024

Selamat datang di repository Materi Web Frontend 2024. Repository ini dirancang untuk membantu teman-teman mengejar materi yang tertinggal atau meninjau ulang pembelajaran dari pertemuan sebelumnya. Semua file dan materi disusun berdasarkan pertemuan untuk mempermudah navigasi.

Catatan: Pilih branch sesuai dengan pertemuan yang teman-teman butuhkan sebelum mengunduh materi.

Tools Yang Dibutuhkan

Tools yang dibutuhkan selama Pelatihan dilakukan :

• Node JS
• Git
• Postman

Hal yang Akan Dipelajari

🚀 Cara Mengunduh Materi

Ikuti langkah-langkah berikut untuk mengunduh materi dari repository ini dalam format ZIP:

1. Pilih Branch yang Sesuai

1. Klik menu "Branch" di halaman utama repository.
2. Pilih branch yang sesuai dengan pertemuan yang dibutuhkan (contoh: pertemuan-1, pertemuan-2, dst).

2. Cari Folder Materi

Navigasikan ke folder atau file yang sesuai dengan materi yang ingin diunduh.

3. Unduh File ZIP

1. Klik tombol "Code" di kanan atas repository.
2. Pilih opsi "Download ZIP".

4. Ekstrak File ZIP

Setelah unduhan selesai, ekstrak file ZIP di komputer teman-teman untuk mengakses semua file materi.

🗂️ Daftar Materi Berdasarkan Pertemuan

Pertemuan 1: Dasar HTML

• Topik: Pengenalan HTML
• Materi:
  • Overview mengenai Web Development (FE & BE)
  • Perkenalan dasar HTML
  • Semantic HTML
  • Form HTML (Input, Radio, Checkbox, File )
  • Table dan List HTML (Ordered List, Unordered List ,tr, td )
• Link Modul: Dasar HTML - Medium

Pertemuan 2: CSS Dasar

• Topik: Dasar-Dasar CSS
• Materi:
  • CSS Unit
  • Selector
  • Pseudo Class
  • Styling
• Link Modul: CSS Dasar - Medium

Pertemuan 3: CSS Layouting

• Topik: CSS Layouting
• Materi:
  • CSS Layouting (Box Model, Display, Flexblox,Position, Responsive)
• Link Modul: CSS Layouting - Medium

Pertemuan 4: Tailwind Intro

• Topik: Pengenalan TailwindCSS
• Materi:
  • Apa itu Tailwind CSS, Perbedaan Tailwind dan CSS Vanila serta keuntungannya
  • Instalasi dan konfigurasi awal (via npm)
  • Penggunaan utility classes pada Tailwind CSS
• Link Modul: Tailwind Intro - Medium

Pertemuan 5: Tailwind Lanjutan

• Topik: Tailwind Lanjutan
• Materi:
  • Tailwind Arbitrary
  • Tailwind Layer Component
  • Responsive Tailwind
• Link Modul: Tailwind Lanjutan - Medium

Pertemuan 6: Pengenalan Javascript

• Topik: Javascript Dasar
• Materi:
  • Pengenalan Javascript ES6++
  • Penggunaan Internal dan External JS (ES 6 Module)
  • Komponen dasar JS (variable, looping, function, array)
  • Template Literals
• Link Modul: Pengenalan Javascript - Medium

Pertemuan 7: Javascript Lanjutan #1

• Topik: Event Handler & DOM Manipulation
• Materi:
  • Javascript DOM
  • Event Handler
  • Menerapkan konsep dasar js untuk memanipulasi DOM
• Link Modul: Javascript Lanjutan #1 - Medium

Pertemuan 8: Javascript Lanjutan #2

• Topik: Higher Order Function & JSON Object
• Materi:
  • Higher Order Function (forEach, Map, Filter, dll)
  • JSON, Object
  • Implementasi penggunaan Higher Order Function untuk manipulasi DOM
• Link Modul: Javascript Lanjutan #2 - Medium

Pertemuan 9: Javascript Lanjutan #3

• Topik: Async/Await & Promises untuk API
• Materi:
  • Async Await Javascript
  • Promises
  • Implementasi Async Await dengan Consume API
• Link Modul: Javascript Lanjutan #3 - Medium

Pertemuan 10: Pendampingan Final Project & Tanya Jawab

• Topik: Pendampingan Final Project
• Materi:
  • Tanya Jawab Materi
• Link Modul: -

Pertemuan 11-12: Final Project

• Topik: Final Project
• Materi:
  • Membuat Final Project
• Link Modul: -

Semoga repository ini membantu dalam perjalanan belajar teman-teman semuanya! 🎉