This is an old revision of the document!

Web Development Lesson 3 - Lists

Multi-level Lists

Objectives

In this exercise you will:

create multi-level lists
start using Visual Studio Code, a professional coding platform
learn one way to target specific elements with CSS

Setup

We'll start from a blank slate, so delete all the HTML and CSS you've entered so far.

Nesting Lists

Sometimes you'll want to have lists inside of lists. Think of the table of contents of a textbook where each chapter has a number of subheadings and even those may have subheadings.
To keep it interesting, we'll look here at a simple profile of yourself.
Enter the heading 'Who Am I?'

<h2>Who Am I?</h2>

Now create a list of topics to cover. Even though the order doesn't matter, I'm using <ol> because I'll use it to illustrate a point later.

<ol>
  <li>Family Members</li>
  <li>Hobbies</li>
  <li>Favourite Bands</li>
</ol>

Now we'll populate these with other lists under (inside) each topic.
Enter the names of your family members. I don't know the names of your family, so I'll just label some options.

  <li>Family Members
    <ul>
      <li>Father</li>
      <li>Mother</li>
      <li>Sister</li>
      <li>Brother</li>
    </ul>
  </li>

Notice that the new list needs its own <ul> or <ul> tag.
Also notice that the whole list goes before the </li> tag of the heading list element.
Finally, you should have noticed that the browser automatically uses different bullets for the different levels of list items.
Try this yourself with the Hobbies and Favourite Bands sections.

Cascading Styles

Just to quickly review the way CSS cascades to lower level elements, try the following CSS code.

ol {
  color: blue;
}

See how even the <ul> sublists are now blue, not just the upper level <ol> that we selected. This is cascading.

Combining CSS Selectors

To make a point, change the second list to be ordered.

  <li>Hobbies
    <ol>
      <li>Music</li>
      <li>Football</li>
      <li>Cycling</li>
    </ol>
  </li>

Now, add the following CSS code to target that specific list.

ol ol {
  font-weight: 700;
}

See how only the hobbies list is bold? The top level list is an ol but it's unaffected.
The combined selector ol ol means that the rules apply to all ordered lists inside another ordered list.

Tools: Visual Studio Code

jsfiddle is great for quickly testing a piece of code, but it has limitations.
Primarily, you can't easily see a full screen result.
Simalarly, it's difficult to see large blocks of code.
Instead, there are many full web development source code editors available with varying benefits and levels of complexity. We will be using Visual Studio Code, which is one of the most powerful.
First, create a folder on your desktop with your name.
Open Visual Studio Code.
Navigate to File → Open Folder and select the folder you created.
Hit Ctrl-N to create a new file. Hit Ctrl-S to save the file and name it 'lists.html'.

HTML Structure

Type 'HTML' and select 'HTML:5'.
Visual Studio automatically enters the structure of a full HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> tells the browser that the code is HTML.
<head> holds information about the page, while <body> contains the content.
Copy the HTML code from jsfiddle and paste it inside the <body> tag.
Right click and select 'Open with Live Server'. This will open the page in a new browser tab.
Notice that the result is what we saw in jsfiddle before we added CSS and Javascript.
Also notice the label in the browser tab says 'Document'. That comes from the <title> tag in the <head> section.
Edit the <title> to say 'Lists' and refresh the page (right-click and select 'Open with Live Server'.
Notice that the label has now changed.

Adding CSS

Create a new line inside the <head> tag, type 'link' and select 'link:css'.
This adds a line that says <link rel="stylesheet" href="style.css">, which tells the browser where to find the CSS code ('style.css' in the href attribute).
Hit Cltr-N to create a new file and Ctrl-S to save it as 'style.css'.
Now we can copy the CSS code from jsfiddle to your 'style.css' file.
Save that and again open the code in Live Server. It should now have the formatting we added.

Final Code

If your code doesn't look quite right or you want to check it against mine, here's what we've been working on.

Next: Checklists

Tech School

Table of Contents

Web Development Lesson 3 - Lists

Multi-level Lists

Objectives

Setup

Nesting Lists

Cascading Styles

Combining CSS Selectors

Tools: Visual Studio Code

HTML Structure

Adding CSS

Final Code

Tech School

User Tools

Site Tools

Table of Contents

Web Development Lesson 3 - Lists

Multi-level Lists

Objectives

Setup

Nesting Lists

Cascading Styles

Combining CSS Selectors

Tools: Visual Studio Code

HTML Structure

Adding CSS

Final Code

Page Tools