Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: All About Lists
Time: 50+ mins

Introduction

In this lesson, students will learn how to use two different types of lists: ordered lists and unordered lists. Activities include solving challenge activities; creating a My Pets web page with lists and images using the Text Code Editor; and taking a 7-question multiple-choice quiz about “Lesson 3: All About Lists” concepts. Note: Answers to all challenge activities (7 total) are located below the “Standards” section in this teacher guide.

New HTML Elements

  • <ol> : Adds an ordered list, typically numbered or alphabetical.
  • <ul> : Adds an unordered list, typically bulleted.
  • <li> : Adds a list item to an ordered or unordered list.
  • <link> : Adds a file inside the web page.

New HTML Attributes

  • type: Defines the type of the element (e.g., type = “disc”).
  • style: Allows the user to add one or more CSS declarations to a specific element.

New CSS Styles

  • list-style-type: Sets the list item’s bullet type (e.g., square).
  • width: Changes the width to the assigned value (e.g., 100px).
  • height: Changes the height to the assigned value (e.g., 40 px).
  • padding: Changes the padding to the assigned value (e.g., 10%).
  • margin: Changes the margin to the assigned value (e.g., 30px auto).
  • border: Sets all four borders to be the same (e.g., 6 px solid blue).

Vocabulary

  • Ordered list: Lists that are numbered, where each item is shown in a specific order (e.g., list of steps in a process, a “Favorites” lists).
  • Unordered list: Lists that have items that do not need to be in a specific order (e.g., a grocery list or party invitation list).
  • CSS Box model: A model that refers to the box around an HTML element.

Objectives

Students will...
  • Apply coding concepts to complete provided challenge activities
  • Apply concepts from this lesson to create a My Pets web page with lists and images

Materials

  • Computers or laptops (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

Ask students to answer this short response question:
  • What is the main difference between HTML and CSS? (Suggested answer: HTML allows you to create the content of a web page, whereas CSS is responsible for the design and layout.)
Optional: Discuss answers and clear up misconceptions.

Activities (45 minutes)

Facilitate as students complete the All About Lists modules on their own:
1. Lists (Document)
  • Students will learn that lists can group items or data in a specific order or with no specific order. Here is an example of two different lists, where the first list is an unordered list and the second one is an ordered list:

  • Tell students to click the “Next” button (located at the bottom of the document) to move on to the next module.
2. Ordered Lists (Document)
  • Ordered lists are numbered, where each item is shown in a specific order and are most commonly used for steps in a process (e.g., recipe) or a “Favorites” list (e.g., “Top 5 Favorite Songs”). Here’s the HTML syntax for an ordered list:

  • Direct your students’ attention to the “Ordered List Example” exercise, and point out how the list items are shown as a numbered list:

  • This module includes a challenge activity, where students are provided a list of different sports. Give a hint: Tell students to add an ordered list element as part of their solution. Note: Answers to all challenge activities are located below the “Standards” section in this teacher guide.
3. Unordered Lists (Document)
  • Unordered lists are bulleted lists that have items that do not need to be in a specific order. Examples include a grocery list or a party invitation list. Here’s the HTML syntax for an unordered list:

  • Direct your students’ attention to the “Ordered List Example” exercise, and point out how the list items are shown as a bulleted list--not a numbered list:

  • This module includes a challenge activity, where students are provided a list of music apps. Give a hint: Tell students to add an unordered list element as part of their solution.
4. List Item Type Attribute (Document)
  • In this module, students will learn how unordered and ordered lists can be styled.
  • Students are introduced to two new concepts:
    • Unordered List Item Types- Students can have discs, circles, or squares for bullets in an unordered list. Note: Students are provided a chart with different values, descriptions, and output examples. Here’s an example:

    • Ordered List Item Types- Students can have numbered decimal, roman, or alphabetical list items. Note: Students are provided a chart with different values, descriptions, and output examples. Here’s an example:

  • Check that students are modifying their code to change the type for each list in the “List Types Example” exercise. For example, ask students to create an unordered list that uses filled squares. Here’s an example:

  • To solve the challenge activity, students will need to change the headings to h2 level headings; turn the unordered “Teams” list items into a list with square bullets; change the ordered “Rankings” list to an uppercase roman numeral numbered list; and debug errors.
5. Inline Styling (Document)
  • Inline styling allows students to add CSS styles for a specific element.
  • Students are introduced to two new concepts:
    • Using the Style Attribute- The style attribute allows students to add one or more CSS declarations to a specific element. For example, if students were to set the background-color of a specific element to yellow, they would use the following:

    • Specificity and CSS Selectors- Students will learn how the CSS is applied to all li elements in the given document
  • Check that students are moving the inline style for the first list item to the style element section in the “Comparison with the Style Element” exercise. Here is what their code might look like:

6. Revisiting List Types (Document)
  • Students are introduced to two new concepts:
    • List Types- Students can configure the type of a list using the list-style-type CSS property. Note: Students are provided a chart with different values, descriptions, and output examples. Here’s an example:

    • The Importance of Both ul and ol- Students can style both ul and ol elements with different types. Emphasize to students that the main reason for having two different HTML list elements is accessibility. Screen readers, devices that help people who have visual impairments, can better identify content on the page if there are two different HTML list elements.
  • To solve the challenge activity, students will need to replace both type attributes with an inline style attribute and use the list-style-type property. Give a hint: Ask, “If you were to set the list-style-type property of a specific element to circle, what would you need to include in your code?” Answer:

7. Nested Lists (Document)
  • A web page can have lists one inside the other. For example, unordered and ordered lists can be mixed and nested inside one another.
  • Point out the nested list to students in the “Nested Lists Example” exercise. Check that they’re adding more lists inside the nested list. Here’s a sample of what part of their nested list might look like:

  • To solve the challenge activity, students will need to add a nested list of their favorite foods. Give a hint: Tell students to use the code in the “Nested Lists Example” exercise as a reference.
8. Lists with Images (Document)
  • Students will learn that lists can be of any type, including images.
  • Encourage students to experiment with the code inside the “Using Images in Lists” exercise. Here are some ideas: Change the width value, use a different heading size, use the type attribute, modify the text. How did their changes affect what happens? Here’s an example:

  • To solve the “Favorite Music” challenge activity, students will need to insert the start and end tags for the body element; add a heading for the list and insert a paragraph element; and add song titles with a line break. Give a hint: Tell students to add a line break element (<br/>) after each song.
9. Spacing and Sizing (Document)
  • Students are introduced to two new concepts:
    • The CSS Box Model- Students can use CSS to change the size and style of boxes. Note: Students are provided a list of properties they can use, along with a description. Here’s an example of CSS syntax for width, beight, padding, margin, and border:

    • Using Other Units- There are different ways to specify padding and margin sizes. For example, pixels are very popular and easy to use.
  • Check that students are changing the margin and padding values in the “Example For Other Units” exercise. Their modifications might look like this:

  • Are students struggling with the challenge activity? Give a hint: Tell them to include the padding property, margin property, and border property in their solution.
10. Project 5: My Pets (DIY)
  • In this DIY (do-it-yourself) project, students will apply HTML and CSS concepts learned so far (i.e., lists, headings, images, borders, margins, padding, text alignment) to create a My Pets web page using the Text Code Editor. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
  • Are students struggling? Ask them to explore the provided example for inspiration and complete an annotated sketch of their project idea before they start coding.
  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? Direct their attention to “Step 6” in the “Tutorial” tab, which provides bonus challenges such as adding more pets and experimenting with different types of lists, spacing, and fonts.
11. Quiz (Multiple Choice)
  • Students will be asked 7 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

Discussion
Ask students...
  • Who can name the two different lists we explored in today’s lesson? (Answer: Ordered list and unordered list.)
  • True or false: Ordered lists are typically numbered, where each item is shown in a specific order. (Answer: True.)
  • If we want to create a bulleted list of people to invite to a birthday party, should we use an ordered list or unordered list? (Answer: Unordered list.)
  • Who can give an example of when we would want to use an ordered list instead of an unordered list? (Suggested answer: When including steps for a recipe or creating a “Top 5” list.)

U.S. Standards

  • CCSS-Math: MP.1, MP.2, MP.4, MP.7
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-13, 2-AP-16, 2-AP-17
  • CS CA: 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.K. Standards

Key Stage 3 (Years 7-9)
  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.

Answer Key

Challenge 1 (Module 2)- Top 10 Favorite Sports:


Challenge 2 (Module 3)- Music Apps:

Challenge 3 (Module 4)- Teams and Rankings:

Challenge 4 (Module 6)- List Types: