Level 7
Pertemuan 10

Pengembangan Homepage dan Game Story

Mulai coding homepage dan halaman story/lore game dengan semantic HTML, Flexbox/Grid, dan responsive design.

Tujuan Pembelajaran

Coding homepage dengan semantic HTML.
Menggunakan Flexbox/Grid dan responsive design.
Membuat story page dengan typography dan image yang menarik.

Homepage Structure 

              
                <header>Game Logo + Navigation</header> <main> <section class="hero">Game title + CTA</section> <section class="preview">Characters / Story</section> </main> <footer>Credits</footer>

Hero Section

Hero harus langsung menjelaskan nama game, suasana, dan tombol utama.

Game Title
Short Description
Start / Explore Button

Flexbox/Grid Layout 

              
                .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .card-row { display: flex; flex-wrap: wrap; gap: 20px; }

Story / Lore Page

Judul cerita.
Paragraf lore yang readable.
Gambar atau visual pendukung.
Call-to-action ke character atau how-to-play.

Activity

  1. Coding homepage dari wireframe.
  2. Gunakan semantic HTML.
  3. Tambahkan layout Flexbox/Grid.
  4. Buat story page dengan typography dan image yang menarik.

Mini Quiz

Tag semantic utama untuk isi halaman adalah...

Output Pertemuan

Homepage dan story page yang sudah dikode.