Add a Sidebar

Our site is looking pretty fantastic, but let’s make it even better by adding a sidebar so our users can navigate around easily. In our sidebar, we’re going to include links to each section.

To do this we’re going to use an <aside> tag. Let’s add it right above our <main> tag in profile.html.

  <aside>
  </aside>

Then, let’s list all of our sections in an ul.

  <aside>
    <ul>
      <li>Bio</li>
      <li>Skills</li>
      <li>Quirky Fact</li>
      <li>Superpower</li>
    </ul>
  </aside>

Save profile.html and refresh your page. You should see something like this:

Awesome. We want our user to be able to click the list elements in the sidebar and be able to easily navigate around our site. Let’s add an anchor tag to each li like so:

<aside>
  <ul>
    <li>
      <a href="#bio">Bio</a>
    </li>
    <li>
      <a href="#skills">Skills</a>
    </li>
    <li>
      <a href="#quirky_fact">Quirky Fact</a>
    </li>
    <li>
      <a href="#superpower">Superpower</a>
    </li>
  </ul>
</aside>

Save profile.html and refresh the page. You should see something like this:

Notice how they are underlined and blue? That is the browsers default styling for anchor tags. Not crazy about the look of them? Don’t worry, we can change the browser’s default styling using CSS.