01 | YOUR PROJECT BRIEF

Build a three-page personal website that introduces a person and showcases their interests or projects. You can use a fictional persona or share only information you are comfortable publishing.

Create Home, Projects and About pages. They should share navigation and a visual style, work at narrow and wide screen sizes, and remain usable with a keyboard.

This is a static HTML and CSS project. You do not need a database, login system or working contact form. Avoid publishing private contact details, exact locations or other unnecessary personal information.

02 | PLAN FOR A REAL VISITOR

Choose an audience and a purpose. For example, a robotics learner might help classmates discover their projects and understand what they learned.

Write three visitor tasks:

• Find out whose site this is and what it covers.
• Explore a project and understand its main idea.
• Find the person’s interests or learning goals.

Sketch a narrow and a wide layout. Label the header, navigation, main content and footer. Decide which elements are shared and where the layout changes when space becomes available.

Define success criteria before coding. “Navigation reaches every page” is testable; “the website is amazing” is not.

03 | ORGANISE YOUR FILES

personal-site/
  index.html
  projects.html
  about.html
  css/
    styles.css
  images/
    project-robot.jpg

Keep the three HTML pages together and use one shared stylesheet. From each page, link css/styles.css and refer to an image with images/project-robot.jpg.

Use consistent lowercase filenames and forward slashes. Choose your actual image and adapt its filename and alternative text. The example does not supply an image file.

Keep a copy or version history as you work so you can recover an earlier working stage.

04 | BUILD THE SHARED PAGE STRUCTURE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex’s Portfolio | Home</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header class="site-header">
    <p class="site-name">Alex’s Portfolio</p>
    <nav aria-label="Main navigation">
      <a href="index.html" aria-current="page">Home</a>
      <a href="projects.html">Projects</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Building ideas with code</h1>
    <p>I explore robotics and web development.</p>
  </main>
  <footer><p>A learning portfolio by Alex.</p></footer>
</body>
</html>

Use this as a starting structure, then write your own content. Each page needs a suitable title and visible h1. Move aria-current="page" to the relevant navigation link on each page.

Do not give the same id to several elements within a document. Reusing main-content on different pages is fine because each is a separate document.

05 | GIVE EACH PAGE A PURPOSE

• Home: introduce the site, explain its focus and link clearly to projects.
• Projects: present at least three project articles with a title, description and what was learned.
• About: explain interests, skills or goals using useful headings, paragraphs and a list.

Include at least one meaningful image with appropriate alt text. Add a caption when it provides useful context. Use images you own or are allowed to publish.

A table is optional if you have genuinely tabular information. Media is optional if it adds value and has suitable alternatives. Do not add a feature just to tick every element from the course.

06 | CREATE ONE CONSISTENT STYLESHEET

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #24363a;
  background: #ffffff;
  line-height: 1.6;
}
.site-header, main, footer, .skip-link {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: 16px;
}
.skip-link { display: block; }
nav { display: flex; flex-wrap: wrap; gap: 16px; }
a { color: #176c65; text-decoration: underline; }
a:focus-visible {
  outline: 3px solid #176c65;
  outline-offset: 3px;
}
.project-card { padding: 20px; border: 2px solid #24988f; }
img { display: block; max-width: 100%; height: auto; }

Build a small set of reusable classes. Keep body text readable and preserve focus indicators. Check your actual text/background pairs rather than assuming an accent colour is suitable everywhere.

When a style does not behave as expected, inspect matching declarations and inheritance before adding stronger selectors or !important.

07 | MAKE THE PROJECT GALLERY RESPONSIVE

/* On projects.html, inside main */
<div class="project-grid">
  <article class="project-card">
    <h2>Delivery robot</h2>
    <p>A prototype that carries small parcels.</p>
    <p>I learned how to test sensor readings.</p>
  </article>
  <article class="project-card">
    <h2>Personal website</h2>
    <p>A responsive portfolio built with HTML and CSS.</p>
    <p>I learned how to organise shared styles.</p>
  </article>
  <article class="project-card">
    <h2>Weather monitor</h2>
    <p>A project that records changing conditions.</p>
    <p>I learned how to explain results clearly.</p>
  </article>
</div>

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.project-card { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

These thresholds are examples. Resize with your actual content and adjust them where an extra column becomes useful. Use Flexbox for navigation and Grid for the gallery where those choices fit your design.

08 | TEST AND KEEP EVIDENCE

Record the expected result, actual result and any fix. Include these checks:

• Every navigation link works from every page.
• Page titles, headings and current-page navigation match.
• Images load and alternative text suits their context.
• Layouts work just below, at and above their breakpoints.
• Keyboard focus is visible and follows a sensible order.
• The skip link reaches the main content.
• Enlarged text and long content do not get clipped.
• Text contrast is appropriate for actual sizes.

Inspect the markup and CSS too. Browsers sometimes recover from invalid code, so a plausible screenshot is not enough to confirm the structure.

09 | GET FEEDBACK AND IMPROVE

Ask a partner to perform the three visitor tasks from your plan. Let them try before explaining how the site works. Note where they hesitate, misunderstand labels or cannot find information.

Make at least two evidence-based improvements. For example, replace vague link wording, improve a project description or adjust a breakpoint that produces cramped cards.

Keep a before-and-after note or screenshot. Explain how the change helps the visitor rather than simply saying it looks better.

10 | PREPARE YOUR HAND-IN

Hand in the complete project folder, including all three HTML pages, the shared stylesheet and required images. Add screenshots and a short reflection describing your choices and testing.

If you publish later, verify permissions for media, remove unnecessary personal details and test the hosted paths. This project brief does not require public publication.

The goal is a coherent, working website that you understand and can explain, not a copied template with unexplained code.