Getting a few things on the page

I generally write a lot of CSS before I write one line of HTML, but one reason for that is I have a lot of practice with this, so I've become pretty good knowing what to set up at the start of a project.

Early on, I generally encourage people have something on the page while they are writing CSS so that they can make sure their code is doing what they expect it to.

We'll make some changes later on, but just getting the content of the header and hero area is a good start!

And I'm not worried about this being "perfect" HTML. We can update it when we bring in the rest of the content. For now, we just want a bit of content.

<header>
  <a href="/">
    <img class="logo" src="/assets/fungi-finders.svg" />
  </a>

  <nav class="primary-navigation">
    <ul>
      <li><a href="#">Discover</a></li>
      <li><a href="#">Mushroom guide</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Discover the World of Mushroom Foraging</h1>
    <p>
      Mushroom foraging is the art and science of identifying and collecting
      wild mushrooms.
    </p>
    <p>
      It's a practice that combines outdoor exploration botanical knowledge, and
      culinary adventure. Foragers venture into forests, fields, and even urban
      green spaces to discover these hidden treasures.
    </p>
    <p>
      But beware – this hobby requires careful study and respect for nature, as
      some mushrooms can be dangerous if misidentified.
    </p>
  </section>
</main>

Using Live Server

Having to refresh your browser every time you make a change quickly gets old.

The Live Server extension solves that problem, updating the page every time you save, and now that we have some content on the page, it's the perfect time to start using it.