HTML/CSS - 20

HTML/CSS - 20: Portfolio Project – Build a Responsive Portfolio

This project is your chance to combine the skills from the previous lessons into one complete website.

Your goal is to build a small responsive portfolio-style page. It does not need to contain real personal information. You can create a fictional designer, developer, artist, photographer, game creator, or any other character you like.

Try to combine semantic HTML, Flexbox or Grid, responsive design, reusable CSS, accessibility, and clear page structure.

Your challenge: Build a complete portfolio with an introduction, an about section, a project area, and a contact section.

✦ HTML Editor

▶ Live Output

How to approach the project

A larger project becomes easier when you build it in small pieces. Start with the HTML structure before worrying about the design.

You might begin with: <header>, <nav>, <main>, several <section> elements, and a <footer>.

Once the structure is working, add classes and begin styling one section at a time.

Step 1: Build the introduction

Create a hero section containing the fictional person's name, a short description, and perhaps a link that jumps to the project section.

Step 2: Add an About section

Write a short paragraph explaining what your fictional creator enjoys making or learning. You could also include a small list of skills.

Step 3: Build the project cards

Create at least three project cards and place them inside a Grid or Flexbox container. Each card could have a heading, description, and fictional project link using a neutral example domain.

For example: <a href="https://example.com">View Project</a>

Step 4: Make it responsive

Start with a layout that works on small screens. Then use a media query to create more project columns when there is enough room.

For example, the projects could use one column by default and three columns on wider screens.

Step 5: Add interaction

Try adding a small :hover effect to the project cards or links. Keep the movement subtle so the page remains comfortable to use.

Step 6: Check accessibility

Make sure headings follow a sensible order, links have meaningful text, images have useful alt text when needed, and interactive elements can be reached using the keyboard.

Final project check

Before opening the example solution, check whether your page has a meaningful title, semantic structure, one clear <h1>, reusable CSS classes, a responsive project layout, and a contact area.

Your design does not need to match the example. There are many correct ways to build this project.

👀 Show Example Solution

<style>

  :root {
    --page-bg: #000;
    --card-bg: #111;
    --text: #8A8A8A;
    --bright: #ffffff;
  }

  * {
    box-sizing: border-box;
  }

  body {
    background-color: var(--page-bg);
    color: var(--text);
    font-family: 'Courier New', monospace;
    margin: 0;
    line-height: 1.6;
  }

  .container {
    width: calc(100% - 40px);
    max-width: 900px;
    margin: 0 auto;
  }

  header {
    padding: 60px 0;
    text-align: center;
  }

  nav {
    margin-top: 20px;
  }

  nav a {
    color: var(--text);
    margin: 0 8px;
  }

  section {
    padding: 50px 0;
  }

  .projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-card {
    background-color: var(--card-bg);
    border: 2px solid var(--text);
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s ease;
  }

  .project-card:hover {
    transform: translateY(-5px);
  }

  .project-card a {
    color: var(--bright);
  }

  footer {
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid var(--text);
  }

  @media (min-width: 700px) {

    .projects {
      grid-template-columns: repeat(3, 1fr);
    }

  }

</style>

<header>

  <div class="container">

    <h1>Nova Reed</h1>

    <p>
      Designer, builder, and curious problem solver.
    </p>

    <nav aria-label="Main navigation">
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>

  </div>

</header>

<main>

  <section id="about">

    <div class="container">

      <h2>About</h2>

      <p>
        Nova is a fictional creator who enjoys turning
        simple ideas into useful digital projects.
      </p>

      <h3>Current Skills</h3>

      <ul>
        <li>HTML page structure</li>
        <li>CSS layouts</li>
        <li>Responsive design</li>
      </ul>

    </div>

  </section>

  <section id="projects">

    <div class="container">

      <h2>Projects</h2>

      <div class="projects">

        <article class="project-card">

          <h3>Orbit Notes</h3>

          <p>
            A fictional note-taking page for recording
            observations of the night sky.
          </p>

          <a href="https://example.com">
            View Project
          </a>

        </article>

        <article class="project-card">

          <h3>Tiny Recipe Box</h3>

          <p>
            A simple fictional collection of quick
            recipes organised into easy-to-read cards.
          </p>

          <a href="https://example.org">
            View Project
          </a>

        </article>

        <article class="project-card">

          <h3>Pixel Garden</h3>

          <p>
            A fictional gallery experiment built with
            responsive CSS Grid.
          </p>

          <a href="https://example.net">
            View Project
          </a>

        </article>

      </div>

    </div>

  </section>

  <section id="contact">

    <div class="container">

      <h2>Contact</h2>

      <p>
        Want to talk about a fictional project?
      </p>

      <a href="mailto:[email protected]">
        Send an Email
      </a>

    </div>

  </section>

</main>

<footer>

  <div class="container">
    <p>Built as an HTML and CSS learning project.</p>
  </div>

</footer>

This example combines semantic HTML, navigation, reusable classes, CSS Grid, responsive design, custom properties, hover effects, accessibility, and neutral fictional content.

The project cards begin in one column and switch to three columns on wider screens. The navigation links also point to sections on the same page, giving the portfolio a simple working structure.

The important part is not copying this exact design. A successful final project should show that you understand how HTML gives the page structure and CSS controls its layout and appearance.