Demo Mode

Activity 4 of 14

Activity 4: CSS Selector

Practice and reinforce the concepts from Lesson 4

CSS Styling Challenge

:books: What you'll learn

How to create proper HTML heading hierarchy
How to add and optimize images in web pages
How to use external CSS files for styling
How to apply CSS selectors to style multiple elements
How to manage time while completing coding challenges

Total Activity Time: 20 minutes (15 minutes coding + 5 minutes testing)

:computer: Getting Started

Download your material

What you'll do: Open the project and familiarize yourself with the interface

Open StackBlitz and access the template: CSS Selector
Alternative option: Download the source code template from StackBlitz using the Download Project button if you prefer to use your own IDE

:warning: Important: File Management DO NOT DELETE any existing files in the template:

Package files

Configuration files

Any other files you didn't create

ONLY EDIT the HTML and CSS files as instructed.

In this activity, you will create a butterfly life cycle webpage through three progressive challenges that build upon each other, practicing HTML structure and CSS styling techniques.

:rocket: Steps to Complete Your CSS Styling Challenge

:computer: Challenge One: Basic HTML Structure

Time: 5 minutes

Goal: Create a semantic HTML structure for the butterfly life cycle page

Steps to complete:

Open the index.html file in your project
Create the main heading using <h1> tag with text "The Butterfly Life Cycle"
Add four sections using appropriate heading tags (<h2>) for each stage:
- Egg
- Larva (Caterpillar)
- Pupa (Chrysalis)
- Adult Butterfly
Add a brief description paragraph under each heading
Save your file and preview the result

tip Heading Hierarchy Remember to use semantic HTML:

<h1> for the main page title (only one per page)
<h2> for the four life cycle stages
Keep your HTML clean and properly indented

:art: Challenge 2: Add Images and Layout

Time: 8 minutes

Goal: Enhance your page with relevant images for each life cycle stage

Steps to complete:

Search for butterfly life cycle images on Google Images
Find one image for each stage (egg, larva, pupa, adult)
Right-click on each image and select "Copy image address"
In your HTML, add an <img> tag under each stage's description
Set the src attribute to the copied image URL
Add descriptive alt text for each image
Ensure images are appropriate and under 1000px in size

Example code structure:

html

<h2>Egg</h2>
<p>Description of the egg stage...</p>
<img src="image-url-here" alt="Butterfly egg on a leaf">

tip Finding Good Images

Search for "butterfly egg", "caterpillar", "chrysalis", and "monarch butterfly"
Choose clear, educational images
Avoid images with watermarks
Test that your image URLs work by pasting them in a new browser tab first

:art: Challenge 3: External CSS Styling

Time: 2 minutes

Goal: Style your page using an external CSS file

Steps to complete:

Create a new file called styles.css in your project
Link the CSS file in your HTML <head> section:
html
```
<link rel="stylesheet" href="styles.css">
```

In your CSS file, add the following styles:

css

img {
  width: 300px;
  height: 200px;
}

body {
  text-align: center;
}

Save both files and refresh your preview

tip CSS Selectors

img selector targets ALL images on the page
body selector affects the entire page content
Make sure your link tag is inside the <head> section

:white_check_mark: Finalize and Test Your Project

Time: 2 minutes

Final checklist:

:emoji: HTML structure is complete with all four stages
:emoji: Each stage has an appropriate image
:emoji: External CSS file is created and linked
:emoji: Images are sized to 300px x 200px
:emoji: All text is centered on the page
:emoji: All images load properly (no broken images)
:emoji: Code is clean and properly formatted

:warning: Common Issues to Check

Images not loading? Check that your image URLs are correct

CSS not applying? Verify your link tag path matches your CSS filename

Layout looks wrong? Make sure you closed all your HTML tags properly

:clipboard: Required Elements Checklist

Before submitting, ensure your project includes:

HTML Requirements:

:white_check_mark: One <h1> tag with "The Butterfly Life Cycle"
:white_check_mark: Four <h2> tags for each life cycle stage
:white_check_mark: Description paragraphs for each stage
:white_check_mark: Four images with proper alt attributes

CSS Requirements:

:white_check_mark: External CSS file named styles.css
:white_check_mark: CSS file linked in HTML <head> section
:white_check_mark: Images styled to 300px width and 200px height
:white_check_mark: Body text aligned to center

Quality Standards:

:white_check_mark: All images load properly (no broken links)
:white_check_mark: Images are under 1000px in original dimensions
:white_check_mark: Clean, properly indented code
:white_check_mark: Completed within 15-minute time frame

:rocket: Project Submission

:information_source: Info Ready to Submit? When you have completed your "CSS Styling Challenge" project and verified all requirements:

Submit Your Project Here

Before submitting:

Test your page in the preview
Verify all images display correctly
Confirm CSS styling is applied
Double-check your code is clean and organized

:hammer_and_wrench: Troubleshooting Guide

Problem: Images aren't showing

Solution: Check that image URLs are complete (start with http:// or https://)
Try opening the image URL in a new tab to verify it works

Problem: CSS isn't applying

Solution: Verify your <link> tag is in the <head> section
Check that the href matches your CSS filename exactly
Make sure you saved both HTML and CSS files

Problem: Layout doesn't match the example

Solution: Check that you're using the correct HTML tags (<h1>, <h2>)
Verify your CSS selectors match the elements (img, body)

Need help? Review the lesson materials or ask your instructor!

Activity 4 of 14

Activity 4: CSS Selector

Practice and reinforce the concepts from Lesson 4

CSS Styling Challenge

:books: What you'll learn

How to create proper HTML heading hierarchy
How to add and optimize images in web pages
How to use external CSS files for styling
How to apply CSS selectors to style multiple elements
How to manage time while completing coding challenges

Total Activity Time: 20 minutes (15 minutes coding + 5 minutes testing)

:computer: Getting Started

Download your material

What you'll do: Open the project and familiarize yourself with the interface

Open StackBlitz and access the template: CSS Selector
Alternative option: Download the source code template from StackBlitz using the Download Project button if you prefer to use your own IDE

:warning: Important: File Management DO NOT DELETE any existing files in the template:

Package files

Configuration files

Any other files you didn't create

ONLY EDIT the HTML and CSS files as instructed.

In this activity, you will create a butterfly life cycle webpage through three progressive challenges that build upon each other, practicing HTML structure and CSS styling techniques.

:rocket: Steps to Complete Your CSS Styling Challenge

:computer: Challenge One: Basic HTML Structure

Time: 5 minutes

Goal: Create a semantic HTML structure for the butterfly life cycle page

Steps to complete:

Open the index.html file in your project
Create the main heading using <h1> tag with text "The Butterfly Life Cycle"
Add four sections using appropriate heading tags (<h2>) for each stage:
- Egg
- Larva (Caterpillar)
- Pupa (Chrysalis)
- Adult Butterfly
Add a brief description paragraph under each heading
Save your file and preview the result

tip Heading Hierarchy Remember to use semantic HTML:

<h1> for the main page title (only one per page)
<h2> for the four life cycle stages
Keep your HTML clean and properly indented

:art: Challenge 2: Add Images and Layout

Time: 8 minutes

Goal: Enhance your page with relevant images for each life cycle stage

Steps to complete:

Search for butterfly life cycle images on Google Images
Find one image for each stage (egg, larva, pupa, adult)
Right-click on each image and select "Copy image address"
In your HTML, add an <img> tag under each stage's description
Set the src attribute to the copied image URL
Add descriptive alt text for each image
Ensure images are appropriate and under 1000px in size

Example code structure:

html

<h2>Egg</h2>
<p>Description of the egg stage...</p>
<img src="image-url-here" alt="Butterfly egg on a leaf">

tip Finding Good Images

Search for "butterfly egg", "caterpillar", "chrysalis", and "monarch butterfly"
Choose clear, educational images
Avoid images with watermarks
Test that your image URLs work by pasting them in a new browser tab first

:art: Challenge 3: External CSS Styling

Time: 2 minutes

Goal: Style your page using an external CSS file

Steps to complete:

Create a new file called styles.css in your project
Link the CSS file in your HTML <head> section:
html
```
<link rel="stylesheet" href="styles.css">
```

In your CSS file, add the following styles:

css

img {
  width: 300px;
  height: 200px;
}

body {
  text-align: center;
}

Save both files and refresh your preview

tip CSS Selectors

img selector targets ALL images on the page
body selector affects the entire page content
Make sure your link tag is inside the <head> section

:white_check_mark: Finalize and Test Your Project

Time: 2 minutes

Final checklist:

:emoji: HTML structure is complete with all four stages
:emoji: Each stage has an appropriate image
:emoji: External CSS file is created and linked
:emoji: Images are sized to 300px x 200px
:emoji: All text is centered on the page
:emoji: All images load properly (no broken images)
:emoji: Code is clean and properly formatted

:warning: Common Issues to Check

Images not loading? Check that your image URLs are correct

CSS not applying? Verify your link tag path matches your CSS filename

Layout looks wrong? Make sure you closed all your HTML tags properly