Lesson 4 - Lists & navigation

What you'll learn

How to use ul and li
Turn a list into a nav bar
Simple pill styling in CSS

Explain like I'm 10

A list is like a row of buttons. We can make it look like a menu.

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

ul vs ol vs li

Use <ul> (unordered list) for lists without a specific order, and <ol> (ordered list) when the order matters (steps, ranking). Each item goes in an <li>.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
</ol>

Navigation as lists

Navigation menus are commonly built as lists inside a <nav>. This keeps links organized and accessible.

<nav>
  <ul class="menu">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Sidebar list example

<aside class="sidebar">
  <ul class="sidebar-list">
    <li><a href="/lesson1.html">Lesson 1</a></li>
    <li><a href="/lesson2.html">Lesson 2</a></li>
  </ul>
</aside>

Styling lists

Reset browser defaults, remove bullets, and control spacing. To make a horizontal nav, use flexbox.

/* list reset */
.menu { list-style: none; margin: 0; padding: 0; }

/* horizontal nav */
.menu { display: flex; gap: 8px; }
.menu a { display: inline-block; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.menu a.active { background:#2463ff;color:#fff; }

/* vertical sidebar spacing */
.sidebar-list li { margin-bottom: 8px; }

Flexbox quick intro

Flexbox lets you lay out items in a row or column; here we use display:flex on the ul to create horizontal nav items. A full flexbox lesson comes later.

Common mistakes & fixes

List markers still visible: Ensure list-style:none and remove default padding.
Links too close: Add padding to anchors for a larger tap target.
Active state missing: Add an .active class to the current page link in the server or build step.

Practice tasks

Build a nav for 4 pages using ul/li/a.
Style it horizontally with flexbox and add an .active class to the current page.
Create a sidebar list and adjust spacing for readability.

Mini challenge

Make the first item look "active" with a different color.
Add more spacing between items.