Planets in Our Solar System Activity

What you'll learn

In this activity, you will:

• Apply the CSS Box Model to control image sizes
• Create a multi-section webpage with consistent formatting
• Add interactive links to external resources
• Practice using horizontal lines to organize content
• Build a complete educational webpage about planets

:video_game: Activity Time!

Total time needed: 30-35 minutes

Time breakdown:

• :computer: Initial setup and header: 5 minutes
• :art: First planet (Mercury): 5 minutes
• :computer: Remaining planets: 15-20 minutes
• :emoji:️ Review and submission: 5 minutes

What you'll do: Blast off into space and create an amazing solar system webpage! You'll showcase all nine planets with beautiful images, fun facts, and clickable links to learn more. Get ready to explore the cosmos through code! :rocket:🪐

Before You Start Checklist

Make sure you have:

• :white_check_mark: Completed the CSS Box Model lesson
• :white_check_mark: Your EduBlocks account logged in
• :white_check_mark: Understanding of how to add images to webpages
• :white_check_mark: Knowledge of creating links with anchor tags
• :white_check_mark: Excitement to learn about planets!
• :white_check_mark: Ready to build something out of this world!

:computer: Get Started!

Click here to Remix this project!

:warning: Warning :dart: Important: You MUST click the "Clone" button to create your own copy of the project before you start coding!

In this cosmic project, you'll create an educational webpage featuring all the planets in our solar system!

Step-by-Step Instructions :star2:

:computer: Step One: Create Your Space Station Header (5 minutes)

1. Add a title tag for the browser tab with the text: "Our Amazing Solar System"
2. Create a big heading (h1) with the text: "Journey Through the Solar System"
3. Make sure your heading appears on the webpage
4. Test that your browser tab shows the correct title

:art: Step 2: Add Divider Lines (2 minutes)

1. Insert a horizontal line (<hr>) directly after your heading
2. This line will separate your header from the planet content
3. Remember: You'll add more horizontal lines between each planet later

:bulb: Tip :bulb: Quick tip: The <hr> tag doesn't need a closing tag - it's self-closing!

:computer: Step 3: Add Your First Planet - Mercury! (5 minutes)

1. Insert an image of Mercury below the horizontal line
2. Use inline CSS to set the exact size:
   html

   style="width: 200px; height: 200px;"
   

3. Add a paragraph below the image with the planet name "Mercury"
4. Include 2-3 interesting facts about Mercury in your paragraph

:bulb: Tip :art: CSS Box Model Tip: The width and height you set control the content box. Add padding or borders to make it even cooler!

:link: Step 4: Make It Interactive with Links! (3 minutes)

1. Create an anchor tag that wraps around some text (not the planet name itself)
2. Link to a space website like NASA's planet page
3. Add text like: "Click here to learn more about Mercury!"
4. Test that your link opens in a new tab

Link format example:

<a href="https://nasa.gov/mercury">Learn about Mercury</a>

:bulb: Tip :bulb: Helpful hint: Make sure your link text is descriptive - "Learn about Mercury" is better than just "Click here"!

:computer: Step 5: Repeat for All Nine Planets! (15-20 minutes)

Continue the same pattern for each remaining planet:

1. Add a horizontal line (<hr>) to separate from the previous planet
2. Insert the planet image with the same size (200x200px)
3. Add a paragraph with the planet name and 2-3 facts
4. Include a link to learn more about that planet

Planet Order from the Sun:

1. :emoji:️ Mercury (already done!)
2. :emoji:️ Venus
3. :emoji: Earth
4. :emoji:️ Mars
5. :emoji: Jupiter
6. :emoji: Saturn
7. :emoji: Uranus
8. :emoji: Neptune
9. :emoji: Pluto (Yes, we're including Pluto!)

:warning: Warning :alarm_clock: Time management tip: Spend about 2 minutes per planet. Don't worry about making each one perfect - you can always come back and add more details later!

Your Solar System Checklist :white_check_mark:

Before submitting, make sure you have:

• Title and main heading
• All 9 planets with images
• Consistent image sizes (200x200px)
• Horizontal lines between planets
• 2-3 facts for each planet
• Working links for each planet
• Planets in correct order from the Sun

:trophy: Challenge Yourself!

Want to make your solar system extra special?

• Add borders around planet images using CSS
• Use different colors for each planet's text
• Add a background color to make it look like space
• Include the Sun at the beginning!
• Add hover effects on links

:bulb: Tip :rocket: Space Explorer Tip: Try adding border-radius: 50%; to your planet images to make them circular!

:bulb: Fun Planet Facts to Include!

Need ideas? Here are some cool facts you can use:

Mercury:

• Smallest planet in our solar system
• No atmosphere to protect it
• One day on Mercury = 59 Earth days!

Venus:

• Hottest planet (even hotter than Mercury!)
• Rotates backwards compared to other planets
• Thick clouds made of sulfuric acid

Earth:

• Only planet with known life
• 71% covered by water
• Has one natural satellite (the Moon)

Mars:

• Called the "Red Planet" due to iron oxide
• Has the largest volcano in the solar system (Olympus Mons)
• Two tiny moons: Phobos and Deimos

Jupiter:

• Largest planet in our solar system
• Has 79 known moons
• Great Red Spot is a giant storm

:bulb: Tip :memo: Writing tip: Pick 2-3 facts that you find most interesting for each planet. Your enthusiasm will show in your writing!

:emoji:️ Submit Your Cosmic Creation!

When your solar system webpage is complete:

:information_source: Info :emoji: Ready to submit? Follow these steps:

1. Test all your planet links - make sure they work!
2. Check that all 9 planet images display at 200x200px
3. Verify your horizontal lines separate each planet
4. Review your planet facts for accuracy
5. Click the submission link below

:rocket: Submit Your Planets Project Here!

:warning: Warning :warning: Before you submit: Save your project in EduBlocks by clicking the save button. You'll need to share your project link in the submission form!

:wrench: Troubleshooting Tips

Having issues? Here are solutions to common problems:

Images not showing?

• Check that image URLs are correct
• Make sure you're using the full URL starting with https://
• Verify your image tags are properly closed

Links not working?

• Ensure your anchor tags have both opening <a> and closing </a>
• Check that href URLs start with https:// or http://
• Test each link by clicking on it

Layout looks messy?

• Make sure each planet section has an <hr> tag before it
• Check that all images use the same size (200x200px)
• Verify paragraphs are properly closed with </p>

:bulb: Tip 🆘 Still stuck? Review the CSS Box Model lesson or ask your teacher for help!

You're a Space Web Developer! :rocket:

Amazing work! You've created an educational webpage that:

• Uses the CSS Box Model for consistent sizing
• Includes multimedia content
• Has interactive elements
• Teaches others about our solar system

Keep exploring and coding - the universe is full of possibilities! :emoji::sparkles: