Demo Mode

No student ID available

Activity 5 of 14

Activity 5: HTML Division

Practice and reinforce the concepts from Lesson 5

HTML Division

📚 What you'll learn

How to create and use HTML <div> elements for structured layouts
How to nest divisions to create complex page structures
How to apply CSS styling to divisions using ID and class selectors
How to control spacing between elements using margins and padding
How to organize content with semantic divisions

💻 Download your material

Time: 2 minutes

Open StackBlitz and access the template:
HTML Division
stackblitz-starters-brpgud4g
Open in StackBlitz
Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your local IDE

⚠️ IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files (index.html and style.css)

Activity Overview

In this activity, you will practice using HTML <div> elements to create structured layouts. You'll build a "My Dinner" webpage featuring nested divisions, CSS styling, and properly spaced elements.

📺 Video Tutorial

Steps to Complete Your HTML Division Project

One. 👀 Review the Expected Overall Output

Time: 2 minutes

Study the final result to understand what you're building:

tip Take a moment to identify the different divisions in the output:

Title section with aqua background
Brown dining table containing three colored plates
Food images placed on each plate

2. 🛠️ Level 0 - Project Setup (Preparation)

Time: 5 minutes

After remixing the activity, open the preview of your index.html page in a new window
In your index.html file, change the title of the document to My Dinner
Create a style.css file and link it to the index.html file
Go to https://iconarchive.com/ and download 3 square food images (transparent background) of your choice
Upload the food images into your Stackblitz assets folder

tip Finding Good Images

Search for "food icon png" on IconArchive
Choose images with transparent backgrounds
Select square-shaped images for best results
Keep file sizes small (under 100KB each)

3. 💻 Level 1 - Creating Title Division

Time: 5 minutes

In your index.html file, under the <body>:

Create a <div> with an id named title
Inside this <div>, add:
- A <h1> tag with the content: My Dinner
- A <p> tag with the content: These are the 3 types of food I eat during my dinner

In your style.css file:

Use the id selector (#title) to style the division:
- text-align: center;
- background-color: aqua;

tip ID Selector Reminder Remember that ID selectors use the # symbol. For example:

arduino

#title {
  /* your styles here */
}

4. 💻 Level 2 - Creating Nested Divisions for Plates

Time: 7 minutes

In your index.html file, after the title div:

Create a <div> with a class named dining-table
Inside the dining-table <div>, create three child divisions:
- First child: <div class="red-plate"></div>
- Second child: <div class="yellow-plate"></div>
- Third child: <div class="green-plate"></div>

In your style.css file:

Style each class using class selectors:

Class	CSS Properties
`.dining-table`	`height: 300px;` `width: 500px;` `background-color: brown;`
`.red-plate`	`height: 200px;` `width: 200px;` `background-color: red;`
`.yellow-plate`	`height: 200px;` `width: 200px;` `background-color: yellow;`
`.green-plate`	`height: 200px;` `width: 200px;` `background-color: green;`

tip Nesting Structure Your HTML structure should look like this:

ini

<div class="dining-table">
  <div class="red-plate"></div>
  <div class="yellow-plate"></div>
  <div class="green-plate"></div>
</div>

5. 🎨 Level 3 - Adding Food Images

Time: 5 minutes

In your index.html file:

Inside the <div class="red-plate">, add an <img> tag with your first food image
Inside the <div class="yellow-plate">, add an <img> tag with your second food image
Inside the <div class="green-plate">, add an <img> tag with your third food image

In your style.css file:

Use the element selector to style all <img> tags:
- height: 60px;
- width: 60px;

tip Image Paths If your images are in the assets folder, your img tags should look like:

ini

<img src="assets/your-food-image.png" alt="Food description">

Always include alt text for accessibility!

6. 🎯 Level 4 - Positioning Elements with Modern Flexbox

Time: 8 minutes

In your style.css file:

Add padding to the title division:

css

#title {
  padding: 20px;
  /* keep your existing styles */
}

Center the dining table and use Flexbox for layout:

css

.dining-table {
  margin: 50px auto;
  padding: 30px;
  display: flex;          /* Modern Flexbox layout */
  gap: 40px;              /* CSS3 gap property for spacing */
  justify-content: center;
  /* keep your existing styles */
}

Make plates circular:

css

.red-plate, .yellow-plate, .green-plate {
  border-radius: 50%;     /* Creates circular plates */
  /* keep your existing styles */
}

💡 Modern CSS Pattern We're using the CSS3 gap property instead of old-school margins. This is the modern way to add spacing in Flexbox layouts - cleaner code and better browser support (2021+)!

Common Issues:

Plates not appearing side by side? Make sure you added display: flex; to .dining-table

Dining table not centered? Check that you have both margin: 50px auto; and a defined width

Uneven spacing? Verify you're using gap: 40px; (not margin on individual plates)

🔍 Troubleshooting Guide

Common Problems and Solutions:

CSS file not working
- Check that your <link> tag is correctly formatted: <link rel="stylesheet" href="style.css">
- Ensure the CSS file is named exactly style.css
Images not displaying
- Verify image file names match exactly (case-sensitive)
- Check that images are uploaded to the assets folder
- Ensure image paths start with assets/
Layout looks different than expected
- Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
- Check for missing closing tags in HTML
- Verify all CSS properties have semicolons

✅ Final Checklist

Time: 2 minutes

Before submitting, ensure:

Title section has aqua background and centered text
Dining table has brown (sandybrown) background
Three colored plates are visible (red, yellow, green)
Each plate contains a food image
All elements are properly spaced with margins and padding
Images are sized correctly (60px x 60px)
CSS file is linked and working

ℹ️ Info Project Submission When you have completed your HTML Division project:

Test all features in the preview window
Ensure all images load correctly
Verify the layout matches the expected output
Share your StackBlitz project link

Submit Your Project Here

Activity 5 of 14

Activity 5: HTML Division

Practice and reinforce the concepts from Lesson 5

HTML Division

📚 What you'll learn

How to create and use HTML <div> elements for structured layouts
How to nest divisions to create complex page structures
How to apply CSS styling to divisions using ID and class selectors
How to control spacing between elements using margins and padding
How to organize content with semantic divisions

💻 Download your material

Time: 2 minutes

Open StackBlitz and access the template:
HTML Division
stackblitz-starters-brpgud4g
Open in StackBlitz
Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your local IDE

⚠️ IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files (index.html and style.css)

Activity Overview

In this activity, you will practice using HTML <div> elements to create structured layouts. You'll build a "My Dinner" webpage featuring nested divisions, CSS styling, and properly spaced elements.

📺 Video Tutorial

Steps to Complete Your HTML Division Project

One. 👀 Review the Expected Overall Output

Time: 2 minutes

Study the final result to understand what you're building:

tip Take a moment to identify the different divisions in the output:

Title section with aqua background
Brown dining table containing three colored plates
Food images placed on each plate

2. 🛠️ Level 0 - Project Setup (Preparation)

Time: 5 minutes

After remixing the activity, open the preview of your index.html page in a new window
In your index.html file, change the title of the document to My Dinner
Create a style.css file and link it to the index.html file
Go to https://iconarchive.com/ and download 3 square food images (transparent background) of your choice
Upload the food images into your Stackblitz assets folder

tip Finding Good Images

Search for "food icon png" on IconArchive
Choose images with transparent backgrounds
Select square-shaped images for best results
Keep file sizes small (under 100KB each)

3. 💻 Level 1 - Creating Title Division

Time: 5 minutes

In your index.html file, under the <body>:

Create a <div> with an id named title
Inside this <div>, add:
- A <h1> tag with the content: My Dinner
- A <p> tag with the content: These are the 3 types of food I eat during my dinner

In your style.css file:

Use the id selector (#title) to style the division:
- text-align: center;
- background-color: aqua;

tip ID Selector Reminder Remember that ID selectors use the # symbol. For example:

arduino

#title {
  /* your styles here */
}

4. 💻 Level 2 - Creating Nested Divisions for Plates

Time: 7 minutes

In your index.html file, after the title div:

Create a <div> with a class named dining-table
Inside the dining-table <div>, create three child divisions:
- First child: <div class="red-plate"></div>
- Second child: <div class="yellow-plate"></div>
- Third child: <div class="green-plate"></div>

In your style.css file:

Style each class using class selectors:

Class	CSS Properties
`.dining-table`	`height: 300px;` `width: 500px;` `background-color: brown;`
`.red-plate`	`height: 200px;` `width: 200px;` `background-color: red;`
`.yellow-plate`	`height: 200px;` `width: 200px;` `background-color: yellow;`
`.green-plate`	`height: 200px;` `width: 200px;` `background-color: green;`

tip Nesting Structure Your HTML structure should look like this:

ini

<div class="dining-table">
  <div class="red-plate"></div>
  <div class="yellow-plate"></div>
  <div class="green-plate"></div>
</div>

5. 🎨 Level 3 - Adding Food Images

Time: 5 minutes

In your index.html file:

Inside the <div class="red-plate">, add an <img> tag with your first food image
Inside the <div class="yellow-plate">, add an <img> tag with your second food image
Inside the <div class="green-plate">, add an <img> tag with your third food image

In your style.css file:

Use the element selector to style all <img> tags:
- height: 60px;
- width: 60px;

tip Image Paths If your images are in the assets folder, your img tags should look like:

ini

<img src="assets/your-food-image.png" alt="Food description">

Always include alt text for accessibility!

6. 🎯 Level 4 - Positioning Elements with Modern Flexbox

Time: 8 minutes

In your style.css file:

Add padding to the title division:

css

#title {
  padding: 20px;
  /* keep your existing styles */
}

Center the dining table and use Flexbox for layout:

css

.dining-table {
  margin: 50px auto;
  padding: 30px;
  display: flex;          /* Modern Flexbox layout */
  gap: 40px;              /* CSS3 gap property for spacing */
  justify-content: center;
  /* keep your existing styles */
}

Make plates circular:

css

.red-plate, .yellow-plate, .green-plate {
  border-radius: 50%;     /* Creates circular plates */
  /* keep your existing styles */
}

💡 Modern CSS Pattern We're using the CSS3 gap property instead of old-school margins. This is the modern way to add spacing in Flexbox layouts - cleaner code and better browser support (2021+)!

Common Issues:

Plates not appearing side by side? Make sure you added display: flex; to .dining-table

Dining table not centered? Check that you have both margin: 50px auto; and a defined width

Uneven spacing? Verify you're using gap: 40px; (not margin on individual plates)

🔍 Troubleshooting Guide

Common Problems and Solutions:

CSS file not working
- Check that your <link> tag is correctly formatted: <link rel="stylesheet" href="style.css">
- Ensure the CSS file is named exactly style.css
Images not displaying
- Verify image file names match exactly (case-sensitive)
- Check that images are uploaded to the assets folder
- Ensure image paths start with assets/
Layout looks different than expected
- Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
- Check for missing closing tags in HTML
- Verify all CSS properties have semicolons

✅ Final Checklist

Time: 2 minutes

Before submitting, ensure:

Title section has aqua background and centered text
Dining table has brown (sandybrown) background
Three colored plates are visible (red, yellow, green)
Each plate contains a food image
All elements are properly spaced with margins and padding
Images are sized correctly (60px x 60px)
CSS file is linked and working

ℹ️ Info Project Submission When you have completed your HTML Division project:

Test all features in the preview window
Ensure all images load correctly
Verify the layout matches the expected output
Share your StackBlitz project link

Submit Your Project Here