Adding Images Project

​https://studio.code.org/s/web-development-2024/lessons/8/levels/7/sublevel/1?section_id=5509624

​Matching

Each of the items below have a bug. Match the description to the correct bug.

Multiple Choice

Dropdown

Height and Width Attributes

Images are not always the right ​

Select answer

for a webpage. Luckily, there are width and height​

Select answer

in CSS to set how many pixels tall or wide we want an image to be. Make sure you don't set both "width" and "height" or you may ​

Select answer

the image.

​https://studio.code.org/s/web-development-2024/lessons/8/levels/10/sublevel/1?section_id=5509624

Multiple Choice

How many pixels did I use on my webpage?

• 100 pixels
• 150 pixels
• 200 pixels
• 250 pixels

Dropdown

Make an Illustrated Story

Put your new image tag skills ​

Select answer

and create an illustrated story. As an extra challenge, include code from past lessons, such as special characters and ​

Select answer

sheets.

​To create this illustrated story, follow the slides in this lesson

Labeling

How did I do it?

Drag labels to their correct position on the image

Add image

Credit to image source

Title of story

Link to CSS

​Title: The Journey of Willow, the Little Wolf

Chapter 1: A New Beginning

Willow, a young and curious wolf 🐺, lived at the edge of the vast Pinewood Forest. One night, as the moon rose high in the sky 🌕, she felt an unexplainable pull to explore the forest beyond her home. She took a deep breath and set off on her journey.

​
https://www.publicdomainpictures.net/en/view-image.php?image=520397&picture=wolf-and-moon

​Chapter 2: The Wise Owl
As Willow ventured deeper, she encountered a wise owl perched on an old oak tree. 🦉 The owl hooted softly, "Follow the starlight, young one. It will lead you to where you need to go." With gratitude, Willow continued on, eyes gleaming with excitement.

​
https://www.publicdomainpictures.net/en/view-image.php?image=536525&picture=halloween-owl-art

​Chapter 3: Crossing the Moonlit River

Soon, Willow came across a wide, moonlit river. The water shimmered with silver light, and stepping stones marked a path across. Carefully, she leapt from stone to stone, her heart pounding with both fear and excitement. 🌊✨

​
https://www.pickpik.com/night-moon-sky-star-night-view-night-sky-112329

​Chapter 4: The Valley of Stars

Story Text:
Willow finally reached the Valley of Stars, where fireflies danced under the moon, creating a breathtaking display of light. She realized this was the treasure she was meant to find. Sometimes, the journey itself was the real adventure. 🌌🌠

​
https://www.publicdomainpictures.net/en/view-image.php?image=536561&picture=magical-forest-lights

​The End

With a heart full of wonder and gratitude, Willow returned to her forest home, knowing she would carry this magical journey within her forever. 💫

​
https://www.publicdomainpictures.net/en/view-image.php?image=361375&picture=wolf-nebula

Labeling

How did I add style to the webpage?

Drag labels to their correct position on the image

Background color

paragraph color

header 6 color

header 1 color

image width