💻
Web Programming Academy
Progress: 0%
🎯 Tujuan Pembelajaran
- ✓ Memahami konsep dasar HTML, CSS, dan JavaScript
- ✓ Mampu membuat website responsif dan interaktif
- ✓ Menguasai framework modern seperti Bootstrap
- ✓ Memahami best practices dalam web development
- ✓ Menguasai version control dengan Git
- ✓ Membuat portfolio website profesional
⏱️ Durasi & Level
Total Durasi
16 Minggu
Level
Pemula - Mahir
Jam per Minggu
10-12 Jam
Total Modul
8 Modul
🗺️ Roadmap Pembelajaran
1-2
Foundation
HTML & CSS Dasar
3-4
Interactive
JavaScript & Responsive
5-6
Advanced
Framework & Tools
7-8
Professional
Optimization & Project
Modul 1: HTML Fundamentals
Membangun struktur dasar website
🏗️
📋 Materi Pembelajaran:
- • Struktur dokumen HTML
- • Tag dan elemen HTML
- • Atribut dan properti
- • Semantic HTML5
- • Forms dan input
💡 Contoh Kode:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Website Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
Progress:
0%
Modul 2: CSS Styling
Mendesain tampilan yang menarik
🎨
📋 Materi Pembelajaran:
- • Selector dan properti CSS
- • Box model dan layout
- • Flexbox dan Grid
- • Responsive design
- • Animasi dan transisi
💡 Contoh Kode:
.container {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(
45deg, #3b82f6, #8b5cf6
);
padding: 2rem;
border-radius: 1rem;
}
Progress:
0%
Modul 3: JavaScript Programming
Membuat website yang interaktif
⚡
📋 Materi Pembelajaran:
- • Variabel dan tipe data
- • Function dan event handling
- • DOM manipulation
- • AJAX dan API
- • ES6+ features
💡 Contoh Kode:
function greetUser(name) {
const greeting = `Halo, ${name}!`;
document.getElementById('output')
.textContent = greeting;
}
// Event listener
button.addEventListener('click',
() => greetUser('Programmer')
);
Progress:
0%
Modul 4: Responsive Web Design
Membuat website yang adaptif di semua perangkat
📱
📋 Materi Pembelajaran:
- • Media queries dan breakpoints
- • Mobile-first approach
- • Flexible grid systems
- • Responsive images
- • Touch-friendly interfaces
💡 Contoh Kode:
/* Mobile First */
.container {
width: 100%;
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
Progress:
0%
Modul 5: Bootstrap Framework
Framework CSS untuk development yang cepat
🚀
📋 Materi Pembelajaran:
- • Grid system Bootstrap
- • Components dan utilities
- • Navigation dan forms
- • Modal dan carousel
- • Customization dan theming
💡 Contoh Kode:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Card Title
</h5>
<p class="card-text">
Content here...
</p>
</div>
</div>
</div>
</div>
</div>
Progress:
0%
Modul 6: Git & Version Control
Mengelola kode dengan sistem version control
🔧
📋 Materi Pembelajaran:
- • Konsep dasar Git
- • Repository dan branching
- • Commit dan merge
- • GitHub dan collaboration
- • Deployment dan hosting
💡 Contoh Command:
# Initialize repository git init # Add files git add . # Commit changes git commit -m "Initial commit" # Push to GitHub git remote add origin [url] git push -u origin main # Create branch git checkout -b feature-branch
Progress:
0%
Modul 7: Web Performance & SEO
Optimasi kecepatan dan SEO website
⚡
📋 Materi Pembelajaran:
- • Image optimization
- • Minification dan compression
- • Lazy loading techniques
- • SEO fundamentals
- • Web accessibility (a11y)
💡 Contoh Optimasi:
<!-- SEO Meta Tags -->
<meta name="description"
content="Deskripsi halaman">
<meta name="keywords"
content="web, programming">
<!-- Lazy Loading -->
<img src="image.jpg"
loading="lazy"
alt="Deskripsi gambar">
<!-- Preload Critical Resources -->
<link rel="preload"
href="style.css"
as="style">
Progress:
0%
Modul 8: Project Portfolio Website
Buat website portfolio profesional sebagai project akhir
🏆
📋 Fitur Project:
- • Landing page yang menarik
- • About me section
- • Portfolio showcase
- • Contact form
- • Responsive design
- • SEO optimized
🎯 Deliverables:
- • ✅ Wireframe dan mockup
- • ✅ HTML structure
- • ✅ CSS styling
- • ✅ JavaScript interactions
- • ✅ GitHub repository
- • ✅ Live deployment
🏆 Bonus Challenges:
• Dark/Light mode toggle
• Smooth scroll animations
• Interactive skill charts
• Blog section dengan CMS
Progress:
0%
⚡ Latihan Praktik Interaktif
🎯 Challenge: Buat Button Interaktif
Buat button yang berubah warna saat diklik dan menampilkan pesan.
📱 Preview:
🎉 Button berhasil diklik! 1 kali
💡 Tips:
- • Gunakan event listener untuk interaktivitas
- • Tambahkan transisi CSS untuk efek smooth
- • Pertimbangkan accessibility dalam design
📝 Challenge: Form Kontak dengan Validasi
Buat form kontak yang memvalidasi input dan menampilkan pesan sukses.
Nama harus diisi minimal 3 karakter
Format email tidak valid
Pesan harus diisi minimal 10 karakter
✅ Status Validasi:
Nama Lengkap
Email Valid
Pesan Lengkap
✅
Form berhasil dikirim!
💡 Tips Validasi:
- • Validasi real-time saat user mengetik
- • Berikan feedback visual yang jelas
- • Gunakan regex untuk validasi email
🧮 Challenge: Calculator Sederhana
Buat calculator yang bisa melakukan operasi matematika dasar.
📊 Riwayat Perhitungan:
Belum ada perhitungan
💡 Fitur Calculator:
- • Operasi dasar: +, -, ×, ÷
- • Tombol Clear (C) dan Delete (⌫)
- • Riwayat perhitungan otomatis
- • Validasi input dan error handling
🖼️ Challenge: Image Gallery Interaktif
Buat gallery gambar dengan lightbox dan filter kategori.
🎨 Gallery Preview:
🏔️ Gunung
🏙️ Kota
👨👩👧👦 Keluarga
🏖️ Pantai
💡 Fitur Gallery:
- • Filter berdasarkan kategori
- • Lightbox untuk preview gambar
- • Multiple layout options
- • Hover effects dan animasi
📈 Progress Latihan
0
Button Challenge
Skor: 0/100
0
Form Challenge
Skor: 0/100
0
Calculator Challenge
Skor: 0/100
0
Gallery Challenge
Skor: 0/100
📚 Referensi Belajar
MDN Web Docs
Dokumentasi lengkap HTML, CSS, dan JavaScript
W3Schools
Tutorial interaktif dan contoh kode
CSS-Tricks
Tips dan trik CSS advanced
JavaScript.info
Tutorial JavaScript modern dan mendalam
🛠️ Tools & Editor
Visual Studio Code
Editor kode gratis dengan banyak ekstensi
CodePen
Online editor untuk eksperimen cepat
Chrome DevTools
Tools debugging dan inspeksi website
Git & GitHub
Version control dan portfolio online
🎓 Sertifikat & Karir
🏆
Sertifikat Completion
Dapatkan sertifikat setelah menyelesaikan semua modul
💼
Portfolio Project
Buat portfolio website sebagai project akhir
🚀
Karir Path
Panduan menjadi Frontend Developer profesional
