📓 1.1.1.9 HTML Block Elements Part 2

Now let's create a second web page using HTML block elements in our my-first-webpage project. We'll have two web pages in our directory. The new page will list a few of our favorite things.

In this lesson

---

• How to add a second HTML file to an existing project
• How to build nested lists with <ul>, <ol>, and <li>
• How to commit and push a multi-page project to GitHub

AI Support: Unsure which HTML element to use for structure or meaning? You can ask AI to explain semantic HTML choices. You can ask AI to clarify when to use ordered vs unordered lists and how nesting works. Do not ask AI to write your webpage or complete exercises for you.

Example prompts:

• Weak: "Write my favorite-things page."
• Strong: "When should I use <ul> vs <ol>, and how does nesting a list inside a <li> work? Can you explain in plain language—without writing HTML for me?"

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

When we want to add a file to a project directory, we need to make sure we are in the correct directory. For this new page, we'll use $ pwd to ensure that we are in my-first-webpage. If not, we'll navigate to the correct folder and then add a new html file called favorite-things.html. Once added, we'll open our project in our text editor so that we can add the content for our new page.

$ pwd
/Users/staff/Desktop/my-first-webpage
$ touch favorite-things.html
$ code .

Type the following HTML into favorite-things.html. Resist the urge to cut and paste. An often overlooked part of learning to code is developing the muscle memory of typing code which is different than typing regular text. We need to learn the rhythm of indenting, spacing and moving around your code and that only evolves with the repetition of hands on keys.

As you type this file content, think through how each tag will impact the way the text will display in the browser.

favorite-things.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Michael's favorite things</title>
</head>
<body>
  <h1>My favorite things</h1>
  <h2>These are a few of my favorite things.</h2>

  <h3>People</h3>
  <p>Here are some of my favorite people!</p>
  <ul>
    <li>My brother Christopher</li>
    <li>My mom and dad:
      <ul>
        <li>Steve</li>
        <li>Carol</li>
      </ul>
    </li>
    <li>My friend Jessica</li>
    <li>My friend Candy</li>
  </ul>

  <h3>Flavors of ice cream</h3>
  <p>These are my three favorites, in order:</p>
  <ol>
    <li>Pistachio</li>
    <li>Malted milk chocolate</li>
    <li>Black licorice (really!)</li>
  </ol>

  <p>Thanks for reading about me!</p>
</body>
</html>

Try asking AI: "I have a nested list inside a <li> tag. Can you explain why the inner <ul> is indented inside the outer <li>—without writing HTML for me?"

After reading AI's response, explain list nesting back in your own words before moving on.

Let's take a look!

After finish this and seeing it display as we expect it to, we'll make sure to commit our changes with Git and push the updated project to GitHub:

• $ git add favorite-things.html
• $ git commit -m "add web page with info on favorite things"
• $ git push [remote nickname] main (replacing nickname with the same nickname you used when you added the remote link in the previous lesson)
• check on GitHub that your my-first-webpage repository now contains both my-first-webpage.html and favorite-things.html.

Checkpoint

---

Before moving on, you should be able to:

• Add a second HTML file to an existing Git project
• Build nested ordered and unordered lists
• Commit and push a multi-page project to GitHub

If you're unsure, re-read the sections above or ask AI: "When should I use <ul> vs <ol>, and how does nesting a list inside a <li> work? Can you explain in plain language—without writing HTML for me?"