Skip to content
WANCODE
BM

Project: Build Your Personal Landing Page

20 minBeginnerHTML · CSS · JS

In this lesson

  • Plan a page as semantic sections: header, nav, main, section, footer
  • Combine flexbox (for the nav) and grid (for the cards) in one layout
  • Make the whole page responsive, mobile first
  • Judge your own work with a simple quality checklist

The big idea

A good landing page is a short story: who you are, what you do, proof, and how to reach you. Build the structure first, then the layout, then the polish.

This is your first real project. There's no single right answer: it's your page. The checks make sure the foundations are solid; the rest is up to you.

Step 1 — Structure

Write the HTML before any CSS. Semantic tags tell browsers, search engines and screen readers what each part of the page is:

index.html
<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>

A link to #about jumps to the element with id="about". That's how one-page navigation works.

One h1 per page

Use a single <h1> for the main message (usually in the hero), then <h2> for each section and <h3> for cards inside a section. Headings are an outline, not a font-size picker.

Step 2 — Layout

  • Nav: a row of links → flexbox with a gap.
  • Projects or skills: cards in rows and columns → CSS Grid.
  • Readable width: wrap the content in a container with a max-width and margin: 0 auto (the box model).

Step 3 — Responsive polish

Start with the phone layout (one column, everything stacked), then add a min-width media query for bigger screens — just like in Responsive Design.

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

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

Make it yours

Write about your real interests, even if your "projects" are the exercises from this course. Honest and specific beats impressive and vague. You can always come back and update it as you learn more.

Your page is public once you publish it. Share a contact email if you like, but leave out your phone number, home address and IC number.

Replace the "Coming soon" paragraph with the real page structure (follow the plan in the HTML comment):

1. A <header> with a <nav> holding at least 3 links like #about that jump to sections on the page. 2. A <main> with at least two <section> elements that have an id, each starting with a heading. 3. Exactly one <h1> — who you are. 4. A <footer>.

Checks

  • The header has a nav with at least 3 in-page links
  • main has at least two sections with an id
  • Every nav link points to a section that exists
  • There's exactly one h1, and it isn't empty
  • Every section has a heading
  • The page has a footer

Check understanding

Q1

A nav link has href="#projects". What does it need to work?

Q2

Which tool fits a 2×3 gallery of project cards best?

Q3

How many <h1> elements should a landing page usually have?

What you learned

  • Structure first: header + nav, main with sections, footer — one <h1>, <h2> per section.
  • Flexbox for rows of things (the nav), grid for rows and columns (the cards).
  • Mobile first with max-width containers and min-width media queries.
  • You just built a real web page from scratch. Keep it, improve it, and share it when you're proud of it.
Preview

Console output from your code appears here.

Step 1 of 3