Projek: Bina Laman Peribadi Anda

Ini projek sebenar anda yang pertama. Tiada satu jawapan yang betul: ini laman anda. Semakan automatik memastikan asasnya kukuh; selebihnya terpulang kepada anda.

Langkah 1 — Struktur

Tulis HTML sebelum sebarang CSS. Tag semantik memberitahu pelayar, enjin carian dan pembaca skrin apa jenis setiap bahagian halaman:

<header>
  <a href="#home">Aina.</a>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="home"> <h1>…</h1> <p>…</p> </section>
  <section id="about"> <h2>About me</h2> … </section>
  <section id="projects"> <h2>Projects</h2> … </section>
  <section id="contact"> <h2>Contact</h2> … </section>
</main>

<footer> … </footer>

Langkah 2 — Susun atur

• Nav: sebaris pautan → flexbox dengan gap.
• Projek atau kemahiran: kad dalam baris dan lajur → CSS Grid.
• Lebar yang selesa dibaca: balut kandungan dalam bekas dengan max-width dan margin: 0 auto (box model).

Langkah 3 — Kemasan responsif

Mulakan dengan susun atur telefon (satu lajur, semuanya bertindan), kemudian tambah media query min-width untuk skrin lebih besar — sama seperti dalam Reka Bentuk Responsif.

.project-grid {
  display: grid;
  gap: 16px;               /* phones: one column */
}

@media (min-width: 640px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}