📋 Phase 4 · Lists🟢 BeginnerMODULE 11

Unordered Lists

⏱️ 12 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress31%

🎯 What you'll learn: When bullet points beat numbers, how <ul> and <li> work, and how to style bullet markers with CSS list-style-type.

Section 1

Unordered = Order Doesn't Matter

Use <ul> when items are related but their sequence carries no meaning — a list of ingredients, features, or navigation links. If you could shuffle the items and nothing would break, it's unordered.

ul-basic.html

HTML

<ul>
  <li>Flour</li>
  <li>Sugar</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Flour
Sugar
Eggs
Butter

💡

Same test, opposite answer

Lesson 10's test was "would reordering break the meaning?" For an ingredient list, no — flour, sugar, eggs in any order is still the same list. That's your signal to use <ul>.

Section 2

Styling Bullet Markers with CSS

The default bullet is a filled circle (disc). Change it with the CSS list-style-type property — the modern way to control bullet appearance, separate from content.

Value	Marker
`disc`	● Filled circle (default)
`circle`	○ Hollow circle
`square`	▪ Filled square
`none`	No marker — common for nav menus and card lists

ul-style.html

HTML

<style>
  .no-bullets { list-style-type: none; padding-left: 0; }
  .square-bullets { list-style-type: square; }
</style>

<ul class="no-bullets">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

⚠️

Why nav menus use list-style: none

Navigation bars are semantically a list of links, so wrapping them in <ul><li> is correct HTML — but visually you don't want bullets. That's exactly what list-style-type: none is for: keep the semantic structure, remove only the visual marker.

Section 3

Custom Bullet Images

You can replace bullets with a small image or emoji using list-style-image, or more flexibly, remove the default marker and add your own with CSS ::before.

ul-custom-marker.html

HTML

<style>
  .checklist { list-style: none; padding-left: 0; }
  .checklist li::before { content: "✅ "; }
</style>

<ul class="checklist">
  <li>Set up your editor</li>
  <li>Write your first tag</li>
</ul>

✅ Set up your editor
✅ Write your first tag

Section 4

ol vs ul — Quick Decision Guide

Situation	Use
Recipe steps, setup instructions	`<ol>`
Leaderboard, race results	`<ol>`
List of features or ingredients	`<ul>`
Navigation menu links	`<ul>` (bullets hidden via CSS)
Table of contents with page order	`<ol>`

🧩 Knowledge Check — Lesson 11

5 questions to test your unordered list knowledge.

1. When should you use <ul> instead of <ol>?

2. Which CSS property changes the bullet style?

3. Why do nav menus often use <ul> with list-style: none?

4. What does list-style-type: none actually remove?

5. Which list type fits "a table of contents in page order"?

💪

Coding Challenge — Lesson 11

Apply what you learned · Beginner Level

Challenge: Build a Feature List and a Bulletless Nav

1. Write a <ul> of 4 product features with default disc bullets.
2. Write a second <ul> of 3 nav links ("Home", "Pricing", "Contact") styled with list-style: none and no left padding.
Bonus: Give the feature list custom ✅ emoji bullets using the ::before technique from Section 3.

💡 Show hints if you're stuck

Features: plain <ul><li>, no class needed for default bullets
Nav: <ul style="list-style:none;padding-left:0">
Custom marker: li::before { content: "✅ "; } with list-style:none on the parent

Finished this lesson?

Mark it complete to track your progress.

Module 11 of 62Phase 4 — Lists

Unordered Lists

Unordered = Order Doesn't Matter

Styling Bullet Markers with CSS

Custom Bullet Images

ol vs ul — Quick Decision Guide

Lesson 11 Complete!