Web Development 101
- Grades 7 - 8
- 10 lessons
- Advanced Course
- 10 lessons
- 134 activities
- Enhanced Creativity Tools
- Automatic Assessment
- Tutorials and Reviews
- Coding Puzzles
- DIY Projects
- Teacher Guides
- Answer Keys
No previous coding experience required.
Web Development 101
Lesson: Using Containers
Time: 50+ mins
IntroductionIn this lesson, students will learn how to organize content in different ways, such as columns, rows, and more. Activities include solving challenge activities; building a Hero Unit project that has four web pages (Home, My Photos, My Channels, and My Pets) with divs, spans, sections, hyperlinks, lists, headings, and images; and taking a 5-question multiple-choice quiz about “Lesson 5: Containers” concepts. Note: Answers to all challenge activities (8 total) are located below the “Standards” section in this teacher guide.
New HTML Elements
- <hr> : Creates a thematic break between sections of content.
- <div> : Adds a section in an HTML document.
- <span> : A generic container that can be used for styling specific portions of text.
- <section> : Represents a standalone section.
- <main> : The section of the web page that contains what is considered the primary content of the page.
- <header> : A section with introductory information about the web page. It is useful for displaying headings, dates, logos, and other similar information.
- <footer> : A section with information about the web page. It is useful for displaying authorship, licensing, and other similar information.
- <nav> : A section of the page that contains navigation links, either to other locations on the current page or to other pages.
- <aside> : A section of the page for secondary content that may be related to the main content.
New HTML Attributes
New CSS Styles
- display: Sets the display type of an element (e.g., inline-block).
- float: Sets where an image or a text will appear (e.g., left).
- clear: Specifies where other elements can be displayed (e.g., left).
- position: Specifies how the element is positioned inside the page (e.g., relative).
- background-size: Sets the background image size (e.g., contain).
- background-image: Sets one or more background images on an element.
- background-repeat: Sets how background images are repeated.
- background-position: Sets the starting position of a background image (e.g., bottom right).
- overflow: Sets what happens if an element overflows its area (e.g., visible).
- Layout: The way elements are organized visually on a web page.
- Container: This allows us to structure the web page the way we want.
- Sticky navigation bar: A navigation bar that does not disappear from view when the user scrolls down the web page.
- Apply coding concepts to complete provided challenge activities
- Apply concepts from this lesson to create a Hero Unit project
- Computers or laptops (1 per student) with student account access to Tynker.com
Warm-Up (5 minutes)
- Ask students to describe at least three of the following HTML elements: html, style, body, img, br, p, strong, h1.
Activities (45 minutes)Facilitate as students complete the Using Containers modules on their own:
1. Containers (Document)
- Students will learn that containers can be used to structure the web page by organizing the content in different ways, such as columns and rows.
- Check that students are replacing the p element with a strong element in the “Block Elements” exercise. Their code should look like this:
- Tell students to click the “Next” button (located at the bottom of the document) to move on to the next module.
- Students are introduced to two new concepts:
- Block Elements and Inline Elements- Block elements are placed one below the other, whereas inline elements are placed side by side:
- The Display Property- The display property allows students to override the default type of box web browsers assign to each element.
- Students are introduced to three new concepts:
- The <hr> Element- The hr element means “horizontal rule” and is used to create a thematic break between sections of content. Here’s what it looks like:
- The <div> Element- The div element is a generic container for content and can hold text and other HTML elements. Students can use this element to organize content inside a page:
- The <span> Element- The span element is a generic container for text. It doesn’t have any visible text styles, and is often used for styling specific portions of text. Here’s what it looks like
- This module introduces two new concepts:
- The section Element- The section element is a semantic element that behaves in the same way as the div element. Here’s an example:
- Other Semantic Elements- Students are introduced to five semantic elements: main, header, footer, nav, and aside:
- To solve the challenge activity, students will need to add a new section for pets and add an id to the new section. Note: Answers to challenge activities are located below the “Standards” section in this teacher guide.
- Students are introduced to two new concepts:
- The float Property- The float property allows students to make an element float to the left or right side of its container. Float property values include: none (default value), left, and right. Here’s an example:
- The clear Property- The clear property allows students to specify if other elements can be displayed to the left or right of a box. Clear property values include: none (default value), left, right, and both.Here’s an example:
- Are students struggling to change the style to float: left in the “With float” exercise? Here’s what their code should look like:
- Are students struggling to change the gray box to clear: left in the “Using the clear Property” exercise? Here’s what their code should look like:
- To solve the challenge activity, students will need to create a div element with a pink background color with a width and height of 100px; create another div element with the same dimensions but with a green background; and align the pink color div to the right and the yellow colored div to the left. Give a hint: Tell students to include div elements inside the body.
- Students are introduced to common values for position (i.e., static, relative, absolute, fixed):
- Point out to students that a “sticky navigation bar” is a navigation bar that does not disappear from view when the user scrolls down the web page.
- To solve the challenge activity, students will need to change the navigation element to fixed. Give a hint: Tell students to modify the CSS inside the style element. This is what the style element looks like:
- Students are introduced to five new concepts:
- Single Background Image- Students learn that they can add images as backgrounds. Here’s an example:
- Multiple Background Images- If students want to have multiple background images: the first image is placed in the front, the second image is layered beneath the first, and so on. Here’s an example:
- Repeating the Background- Students can repeat the background image by using the background-repeat property. Here is a chart describing different values:
- Resizing the Background- The background-size property allows students to customize the size of the background, which can be useful when displaying their web page on screens of various sizes. Here’s an example:
- Positioning the Background- The background-position property allows students to customize the position of the background image. Here’s an example:
- Check that students are changing the value of background-size in the “Using background-size” exercise. Can they change the value of background-size to “contain”? Here’s what their code might look like:
- Check that students are changing the value of background-position in the “Using background-position” exercise. Optional: Ask students how their changes affect the output. Here’s an example of what their code might look like on line 13:
- To solve this challenge activity, students will need to create a header for a web page using a container element, background image, title, and subtitle. Give a hint: Tell students to include a div element inside the body tags.
- Students will learn how to create background gradients such as these:
- Students are introduced to three new concepts:
- The linear-gradient Value- The linear-gradient() value is used with the background property and takes at least two parameters: the start and end colors. Here’s an example:
- Changing the Orientation- By default, colors transition from top to bottom, where the color starting at the top is the first one that was specified. Here’s an example:
- Adding More Colors- Students can add more colors to the gradient by specifying them at the end, separated by commas. Here’s an example:
- This module includes two challenge activities.
- Challenge 5- Sunrise: Students will need to create a div container that is at least 100 pixels wide and tall and add a background gradient with two colors. Can they create a background gradient with the colors of a sunrise? Give a hint: Tell students to look at the code in the “Using linear-gradient” exercise to see examples of gradients they can create by adding a background with two colors.
- Challenge 6- Making a Rainbow: Students will need to create a div container that takes the full available width. They’ll also need to add a background gradient with the colors of a rainbow. Give a hint: Ask students, “What percentage should the width be?” (Answer: 100%.)
- If the content is too large to fit in its container, students can use the overflow CSS property. This allows them to add scrollbars to the container, let the content flow outside the container, or cut the content and hide what doesn’t fit.
- This module introduces five new concepts:
- Overflow Visible- By default, if content doesn't fit inside the container box, web browsers let the content continue outside of the container box:
- Overflow Scroll- Students can change the default behavior by adding a scrollbar:
- Overflow Auto- Students are able to solve the issue of scrollbars being displayed all the time by using the value auto. For example, if the page has a lot of content (and the user needs to scroll), a scrollbar will be present. Otherwise, no scrollbar will be added:
- Overflow Hidden- Students can hide the content that overflows using the value hidden:
- Horizontal vs Vertical Overflow- In some situations, content can overflow its container horizontally. Here’s an example:
- This module includes two different challenge activities.
- Challenge 7- Making a Scrollable Map: To make the pin appear in the center of one of the islands, students will need to use two img elements, wrap the map image, use the overflow property, and give the pin an absolute position (e.g., position: absolute;).
- Challenge 8- Web Comic Strip: Students will need to add styles to the element with the container class so it takes up 100% of the horizontal space. They’ll also need to make the comic strip scrollable and make sure the title is always visible. Give a hint: Tell students to use the overflow-x property.
- In this DIY (do-it-yourself) project, students will use the Text Code Editor to create a hero unit for their website and a navigation menu for each of their pages. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
- Here’s a screen image sample of what their project might look like:
- Did students finish early? Direct their attention to “Step 7” of the Tutorial, which provides bonus challenges such as adding more pages, making each hero unit a different color, and using different fonts.
- Students will be asked 5 quiz questions to review concepts from this lesson.
Extended Activities (20 minutes)True or False?
Ask your students if they believe the following statements are true or false:
- True or false: Containers can be used to structure the web page by organizing the content in different ways. (Answer: True.)
- True or false: You can only have one image as a background--it’s impossible to have multiple images. (Answer: False. You can have one or multiple images as backgrounds).
- True or false: A “sticky navigation bar” does not disappear from view when the user scrolls down the web page. (Answer: True.)
- How can you style a link to distinguish it from regular text? (Suggested answer: Make the link blue and underlined OR style the link to look like a button.)
- 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-10, 2-AP-13, 2-AP-16, 2-AP-17
- CS CA: 6-8.AP.10, 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. StandardsKey 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 KeyChallenge 1 (Module 4)- Using Containers:
Challenge 2 (Module 5)- Using Floats:
Challenge 3 (Module 6)- Sticky Navigation Bar:
Challenge 4 (Module 7)- Hero Unit:
Challenge 5 (Module 8)- Sunrise:
Challenge 6 (Module 8)- Making a Rainbow:
Challenge 7 (Module 9)- Making a Scrollable Map: