Contents

Building a portfolio page

Let us assemble one page from the course lessons — Anna's personal site. There is almost no custom CSS: just two short rules. Semantic tags and a few Pico classes do the rest.

The page plan

Section	What we use
Header with menu	`<header class="container">`, `<nav>` with two lists
Greeting	`<hgroup>`, links with `role="button"`
Projects	`grid` and `<article>` cards
Blog	A card with a header and footer
Questions	`<details name="faq">`
Contact	A form with `<fieldset role="group">`
Footer	`<footer class="container">`

The whole page

Replace the <body> content of your index.html with the code below (without the <link> line — it is already in <head>):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
  :root { --pico-border-radius: 0.75rem; }
  article img { width: 100%; }
</style>
 
<header class="container">
  <nav>
    <ul><li><strong>Anna Petrova</strong></li></ul>
    <ul>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#blog">Blog</a></li>
      <li><a href="#contact" role="button">Contact</a></li>
    </ul>
  </nav>
</header>
 
<main class="container">
  <section>
    <hgroup>
      <h1>I build fast, clear websites</h1>
      <p>Layout, small sites and notes on CSS.</p>
    </hgroup>
    <a href="#projects" role="button">See my work</a>
    <a href="#blog" role="button" class="secondary outline">Read the blog</a>
  </section>
 
  <section id="projects">
    <h2>Projects</h2>
    <div class="grid">
      <article>
        <img src="/media/photo-400x250.jpg" alt="A coffee shop website">
        <h4>Coffee shop website</h4>
        <p>A menu, a map and table booking.</p>
      </article>
      <article>
        <img src="/media/photo-400x250.jpg" alt="A photographer's portfolio">
        <h4>Photographer portfolio</h4>
        <p>A gallery with genre filters.</p>
      </article>
    </div>
  </section>
 
  <section id="blog">
    <h2>Blog</h2>
    <article>
      <header><strong>A grid without media queries</strong> · March 12</header>
      <p>How auto-fit and minmax choose the number of columns.</p>
      <footer><a href="#">Read more</a></footer>
    </article>
  </section>
 
  <section>
    <h2>Questions</h2>
    <details name="faq">
      <summary>How much does a landing page cost?</summary>
      <p>From $600 depending on the number of sections.</p>
    </details>
    <details name="faq">
      <summary>How long does the work take?</summary>
      <p>Usually two weeks.</p>
    </details>
  </section>
 
  <section id="contact">
    <h2>Contact</h2>
    <form>
      <fieldset role="group">
        <input type="email" name="email" placeholder="Your email" aria-label="Email" required>
        <input type="submit" value="Write">
      </fieldset>
    </form>
  </section>
</main>
 
<footer class="container">
  <small>© 2025 Anna Petrova · <a href="#" class="secondary">Back to top</a></small>
</footer>

The preview shows a whole page: a menu, a large greeting with two buttons, project cards, a post teaser, two collapsible questions and an email field with a button. The menu links scroll to the sections by their id.

What we got

Two lines of custom CSS: the corner radius and the image width. Pico derived everything else from the tags: <section> got vertical spacing, the cards a shadow, the form styled fields. Switch your system to dark mode and open the page again — it turns dark without a single change.

Common mistake

Writing a section without a heading: a <section> of cards only. Pico does not care, but a screen reader announces an unnamed section, and visually the sections run together. Start every <section> with a heading, as in the example.