CODEGORITMACODEGORITMA
Kembali ke Kurikulum
10-13 Tahun

Web Creator

SMP (Kelas 7-8)
12 Bulan
72 Sesi Belajar
12 Modul

Program ini terdiri dari 12 bulan pembelajaran terstruktur dengan total 72 sesi. Setiap bulan memiliki 6 sesi belajar (termasuk proyek mini) yang dirancang progresif dari dasar hingga mahir.

Modul Belajar Per Bulan

Klik setiap bulan untuk melihat detail sesi belajar.

Modul 16 sesi

HTML Dasar

Struktur dasar website

Sesi 1Apa itu HTML? Bagaimana website bekerja?Teori
Sesi 2Setup VS Code & Emmet — struktur dasar HTMLTeori & Praktek
Sesi 3Heading, paragraph, text formatting tagsTeori & Praktek
Sesi 4List (ordered & unordered) & link (anchor tag)Teori & Praktek
Sesi 5Image tag & file pathsTeori & Praktek
Sesi 6Proyek: Halaman profil pribadiProyek
Hasil Belajar

Anak bisa membuat halaman HTML sederhana dengan teks, gambar, dan link.

Modul 26 sesi

CSS Dasar & Styling

Mempercantik tampilan website

Sesi 1Apa itu CSS? Cara menghubungkan CSS ke HTMLTeori
Sesi 2Selectors: element, class, IDTeori & Praktek
Sesi 3Warna, font, ukuran teks, backgroundTeori & Praktek
Sesi 4Margin, padding, border — box modelTeori & Praktek
Sesi 5Width, height, overflowPraktek
Sesi 6Proyek: Styling halaman profilProyek
Hasil Belajar

Anak bisa menata tampilan website dengan CSS (warna, font, layout box model).

Modul 36 sesi

Layout & Flexbox

Mengatur tata letak halaman

Sesi 1Display property: block, inline, inline-blockTeori
Sesi 2Flexbox: flex container, direction, wrapTeori & Praktek
Sesi 3Justify-content & align-itemsTeori & Praktek
Sesi 4Flex grow, shrink, basisPraktek
Sesi 5Membuat navigation bar dengan flexboxPraktek
Sesi 6Proyek: Layout halaman beritaProyek
Hasil Belajar

Anak bisa membuat layout responsif dengan flexbox untuk navigasi dan konten.

Modul 46 sesi

CSS Grid & Responsive Design

Layout grid & website mobile-friendly

Sesi 1CSS Grid: grid container, columns, rowsTeori & Praktek
Sesi 2Grid template areas — layout kompleksTeori & Praktek
Sesi 3Media queries — website untuk HP & tabletTeori & Praktek
Sesi 4Mobile-first design principlesTeori
Sesi 5Responsive images & typographyPraktek
Sesi 6Proyek: Landing page responsifProyek
Hasil Belajar

Anak bisa membuat website responsif yang rapi di HP, tablet, dan desktop.

Modul 56 sesi

JavaScript Dasar

Menambah interaktivitas dengan JS

Sesi 1Apa itu JavaScript? Cara pakai di HTMLTeori
Sesi 2Variabel (let, const), tipe data, operatorTeori & Praktek
Sesi 3Function — membuat kode reusableTeori & Praktek
Sesi 4Array & object di JavaScriptTeori & Praktek
Sesi 5Conditionals & loops di JSPraktek
Sesi 6Proyek: Interactive greeting & calculatorProyek
Hasil Belajar

Anak paham dasar JavaScript: variabel, function, array, dan control flow.

Modul 66 sesi

DOM & Interaktivitas

Memanipulasi elemen website dengan JS

Sesi 1Apa itu DOM? console.log & debuggingTeori
Sesi 2getElementById, querySelector — memilih elemenTeori & Praktek
Sesi 3Event listeners — klik, hover, submitTeori & Praktek
Sesi 4Mengubah konten & style dengan JSPraktek
Sesi 5Menambah & menghapus elemen DOMPraktek
Sesi 6Proyek: To-do list interaktifProyek
Hasil Belajar

Anak bisa memanipulasi DOM dan membuat website interaktif dengan event listeners.

Modul 76 sesi

Form & User Input

Mengelola input dari pengguna

Sesi 1HTML forms: input, textarea, select, buttonTeori & Praktek
Sesi 2Form validation dengan JSTeori & Praktek
Sesi 3Local storage — menyimpan data di browserTeori & Praktek
Sesi 4Membuat contact form yang fungsionalPraktek
Sesi 5Form feedback & user experiencePraktek
Sesi 6Proyek: Buku tamu digitalProyek
Hasil Belajar

Anak bisa membuat form interaktif dengan validasi dan penyimpanan data lokal.

Modul 86 sesi

Website Multi Halaman

Membangun website dengan multiple pages

Sesi 1Struktur folder untuk multi-page websiteTeori
Sesi 2Navbar & footer yang konsisten di semua halamanPraktek
Sesi 3Membuat halaman: Home, About, Portfolio, ContactPraktek
Sesi 4CSS untuk multi-page — organisasi stylesheetPraktek
Sesi 5Smooth scroll & anchor linksPraktek
Sesi 6Proyek: Website 4 halaman personalProyek
Hasil Belajar

Anak bisa membuat website multi-halaman dengan navigasi yang rapi dan konsisten.

Modul 96 sesi

Animasi CSS & JS

Membuat website lebih hidup

Sesi 1CSS transitions — hover effectsTeori & Praktek
Sesi 2CSS animations: keyframes, timingTeori & Praktek
Sesi 3Transform: scale, rotate, translatePraktek
Sesi 4JS animations — setInterval, requestAnimationFrameTeori & Praktek
Sesi 5Scroll-triggered animationsPraktek
Sesi 6Proyek: Website portfolio dengan animasiProyek
Hasil Belajar

Anak bisa menambahkan animasi CSS dan JS ke website untuk pengalaman lebih engaging.

Modul 106 sesi

Portfolio Project

Membangun portfolio website profesional

Sesi 1Mendesain portfolio — layout, warna, tipografiTeori & Praktek
Sesi 2Membuat hero section & about mePraktek
Sesi 3Projects gallery — menampilkan karyaPraktek
Sesi 4Contact form & social linksPraktek
Sesi 5Optimasi performa & aksesibilitasPraktek
Sesi 6Final review & refinement portfolioProyek
Hasil Belajar

Anak memiliki website portfolio pribadi yang bisa diakses online.

Modul 116 sesi

Deploy & Go Live

Website online — bisa diakses semua orang

Sesi 1Apa itu hosting & domain? Cara kerja internetTeori
Sesi 2Deploy ke Vercel / Netlify — gratis!Teori & Praktek
Sesi 3Custom domain — website dengan nama sendiriTeori & Praktek
Sesi 4SEO dasar — biar website ditemukan di GoogleTeori
Sesi 5Google Analytics — lihat pengunjung websitePraktek
Sesi 6Maintenance & update konten websiteProyek
Hasil Belajar

Website portfolio anak live online dengan domain sendiri!

Modul 126 sesi

Presentasi & Portofolio

Demo day website & sertifikat

Sesi 1Persiapan demo — website tour scriptTeori
Sesi 2Demo day — presentasikan website ke orangtua & mentorPraktek
Sesi 3Peer review — kunjungi website teman & feedbackPraktek
Sesi 4Dokumentasi proyek di GitHub PagesPraktek
Sesi 5Road to App Builder — preview mobile devTeori
Sesi 6Graduation & sertifikat kelulusanProyek
Hasil Belajar

Anak siap melanjutkan ke App Builder dengan website portfolio live!

Siap Mulai Web Creator?

Daftar sekarang dan mulai petualangan coding anak Anda dengan mentor berpengalaman.

Lihat HargaProgram Lain