Lesson Plan: Build a Simple Navigation Bar

Lesson Outline

1. Introduction (10 minutes)

Warm-Up Discussion: Ask students: “What is a navigation bar and why is it important for websites?” Show examples from popular websites to illustrate different navigation styles.
Key Concepts:
- The purpose of navigation in guiding users.
- Basic HTML elements (e.g., <nav>, <ul>, <li>, <a>).

2. Direct Instruction (15 minutes)

HTML Structure:

Explain the semantic use of the <nav> element. Demonstrate building a simple list using <ul> and <li>, and how each list item can contain an anchor (<a>) for links.

Example Code:

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

CSS Styling:

We have introduced basic styling concepts: colors, fonts, padding, margins, and layout (e.g., horizontal alignment using display: inline-block or flexbox). Walk through a simple CSS example to style the navigation bar.

Example CSS:

nav ul {
  list-style: none;
  background: #333;
  display: flex;
  padding: 0;
  margin: 0;
}
nav ul li {
  flex: 1;
}
nav ul li a {
  display: block;
  padding: 14px 20px;
  color: white;
  text-align: center;
  text-decoration: none;
}
nav ul li a:hover {
  background: #555;
}

3. Mr. Cusack will talk about resource you can use.

Step thru the sample html document with the students.

4. Complete the assignment.

Testing & Debugging: Have students open their work in a browser to see the live result. Remind them to use browser developer tools if adjustments are needed.

5. Assessment & Wrap-Up (5 minutes)

Sharing & Feedback: Invite a few volunteers to share their navigation bars on the projector. Provide constructive feedback and highlight creative solutions.
Recap: Summarize the lesson’s key points: the importance of navigation, the basic HTML structure, and how CSS enhances the design.
Homework/Extension: Optional: Ask students to add a responsive design element (e.g., a hamburger menu for smaller screens) or additional interactive features like dropdown menus.

Build a Simple Navigation Bar

Objectives

Materials & Tools