Modul Pembelajaran Interaktif — Membangun 4 Proyek Web Nyata dari Nol
📘 KELAS 10 · SMA / SMKGunakan tombol ◀ ▶ atau klik NEXT / PREV untuk navigasi
Di semester ini, kamu sudah belajar BAB 1–12. Sekarang saatnya menggabungkan semuanya menjadi proyek nyata yang bisa dipamerkan!
CV digital online: About, Skills, Projects, Contact
Home, About, Services, Gallery, Contact
Input data, tabel, statistik, export tampilan
Hero, fitur produk, testimoni, contact form
Setiap proyek diajarkan dengan urutan: Materi → Analogi Animasi → Penjelasan → Code → Demo Interaktif, lalu ditutup dengan slide latihan yang bisa langsung kamu kerjakan.
Bayangkan kamu melamar kerja. Biasanya kamu menyerahkan CV kertas (📄). Portfolio website adalah CV digital yang hidup di internet (🌐) — bisa diakses siapa saja, kapan saja, dari mana saja. Recruiter cukup membuka link, dan langsung melihat siapa kamu, keahlianmu, dan karyamu.
<section class="about">
<img src="img/foto.jpg" alt="Foto">
<h2>Halo, saya Sahil</h2>
<p>Calon Front-End Developer.</p>
</section>
<div class="skill">
<span>HTML</span>
<div class="bar" style="width:90%"></div>
</div>Klik tombol untuk menganimasikan skill bar — persis seperti di portfolio sungguhan.
<form id="contact">
<input type="text" placeholder="Nama">
<input type="email" placeholder="Email">
<button>Kirim</button>
</form>
// validasi sederhana
if (email.includes("@")) {
alert("Pesan terkirim!");
}Rapikan file-mu agar mudah dikelola. Animasi garis di bawah menunjukkan alur dari file utama ke folder pendukung.
Sama seperti lemari yang punya laci berbeda untuk baju, celana, dan kaos kaki — memisahkan CSS, JS, dan gambar ke folder masing-masing membuat proyekmu rapi dan mudah dicari saat sudah membesar.
Buat sebuah section About Me yang berisi foto diri dan deskripsi singkat tentang dirimu.
<section class="about"><img> untuk foto<h2><p>Buat bagian Skills berisi minimal 5 keahlian, masing-masing dengan progress bar animasi seperti pada demo Slide 4.
.skillswidth: 80%transition agar animasi halus:hover efek pada skillDulu perusahaan memperkenalkan diri lewat brosur kertas (📰). Sekarang, Company Profile Website adalah brosur digital yang bisa diklik — lebih hidup, bisa berisi galeri, peta lokasi, dan tombol kontak langsung. Satu website mewakili wajah profesional sebuah perusahaan (🏢).
<nav>
<a class="active">Home</a>
<a>About</a>
<a>Services</a>
</nav>
<header class="hero">
<h1>Selamat Datang</h1>
<button>Pelajari Lebih</button>
</header>Klik menu — item aktif akan ditandai, persis seperti navigasi web sungguhan.
Halaman aktif: Home
.gallery {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}
.gallery img:hover {
transform: scale(1.05);
}Klik salah satu gambar untuk memperbesar (lightbox).
Website perusahaan punya banyak halaman yang saling terhubung lewat navbar. Inilah peta alurnya:
Gunakan navbar yang sama persis di setiap halaman agar pengunjung tidak tersesat. Tandai halaman aktif dengan warna berbeda (class .active).
Buat Hero Section dengan latar gradient dan sebuah tombol CTA (Call To Action) seperti "Hubungi Kami".
<header class="hero">background: linear-gradient(...)<h1> dan <p><button> CTABuat halaman Services berisi 4 card layanan. Setiap card punya ikon, judul, dan deskripsi singkat.
.services (grid).card di dalamnyagrid-template-columnsBayangkan seorang guru (🧑🏫) mengisi buku rapor. Setiap nilai yang dimasukkan mengalir sebagai data (•••) lalu otomatis tersusun di tabel dan berubah menjadi grafik (📈). E-Report adalah rapor digital — data masuk sekali, langsung bisa dihitung dan divisualisasikan.
let data = [];
function tambah(nama, nilai) {
data.push({ nama, nilai });
render();
}
function render() {
tabel.innerHTML = data.map(d =>
`<tr><td>${d.nama}</td>
<td>${d.nilai}</td></tr>`
).join("");
}| Nama | Nilai | |
|---|---|---|
| Belum ada data — tambahkan di atas. | ||
const nilai = data.map(d => d.nilai);
const rata = nilai.reduce((a,b)=>a+b,0) / nilai.length;
const max = Math.max(...nilai);
const min = Math.min(...nilai);
// export = cetak halaman
window.print();Tambahkan data di slide sebelumnya, lalu hitung statistiknya di sini.
Buat form input nilai siswa dengan 3 kolom: nama, nilai, keterangan (Lulus / Tidak). Data yang dimasukkan harus tampil di tabel.
let data = []data.push({...})render() untuk tabelrender() setelah menambahTambahkan tombol Hapus di setiap baris tabel. Saat diklik, data tersebut hilang dari array dan tabel diperbarui.
render(), tambah kolom tombolonclick="hapus(i)" dengan indexdata.splice(i,1)render() lagiLanding Page itu seperti baliho (🪧) di pinggir jalan — tugasnya menarik perhatian dalam hitungan detik. Bedanya, baliho digital ini bisa diklik dari smartphone (📱) dan langsung mengarahkan pengunjung untuk membeli (🛒). Satu halaman, satu tujuan: membuat orang bertindak.
<section class="hero">
<h1>Sepatu Lari Generasi Baru</h1>
<button>Beli Sekarang</button>
</section>
<section class="features">
<div class="feat">⚡ Ringan</div>
<div class="feat">🛡️ Awet</div>
</section>Klik untuk memunculkan kartu fitur satu per satu (efek scroll-reveal).
"Produk terbaik yang pernah saya beli!"
— Andi, Bandung
"Pengiriman cepat, kualitas mantap."
— Sari, Jakarta
"Worth it banget, recommended!"
— Dimas, Surabaya
Buat Hero Section untuk sebuah produk pilihanmu, lengkap dengan tagline yang menarik dan tombol CTA "Beli Sekarang".
Buat section Testimoni berisi 3 card review pelanggan. Setiap card berisi rating bintang, kutipan, dan nama.
.testimonials.review-cardDengan menyelesaikan 4 proyek di atas, kamu telah resmi menguasai fondasi seorang Front-End Developer:
Kamu sudah membuktikan bahwa kamu bisa membangun web nyata dari nol. Jangan berhenti di sini — teruslah ngoding, perbaiki, dan pamerkan karyamu ke dunia! 🌍
"Code is like humor. When you have to explain it, it's bad."
— Cory House
Terima kasih telah belajar bersama — Front End Masterclass Kelas 10
Klik di mana saja untuk menutup