Easter Web Challenge Dashboard

Welcome to your Developer Dashboard! This section outlines your primary objective and gives you crucial advice before you start coding. Reviewing this ensures you understand the core goal of building an interactive Easter Hunt across two linked pages.

Your Mission

You are a web developer tasked with creating a two-page interactive "Easter Egg Hunt" website. You will need to build the structure with HTML and use Inline Styling to make it look festive and colorful!

💡

Top Tip: Find Your Images First!

Before you start coding, find your image URLs on Google Images.

Right-click an image > Select "Copy Image Address"

Paste these into a notepad or directly into your src="..." attribute!

The Code Toolkit is your digital cheat sheet. It translates the CSS properties from the source report into interactive syntax cards. Use this to quickly remember how to apply inline styles for colors, backgrounds, and sizes while you build your pages.

Your Inline Style Cheat Sheet

Remember, Inline Styles go inside the opening tag like this:
<p style="color: red;">This is red text!</p>

🎨 Color

style="color: darkgreen;"

🖼️ Background

style="background-color: lightyellow;"

🔤 Font Family

style="font-family: sans-serif;"

📏 Font Size

style="font-size: 40px;"

🖼️ Image Width

style="width: 300px;"

Project Structure breaks down the architectural requirements of your two web pages. This view presents the source report's content specifications side-by-side, helping you visualize what elements belong on the Garden page versus the Secret Egg Room page.

🌷

Page 1: The Sunny Garden

Filename: index.html

This is your "Starting Line." It should welcome the user to the hunt.

A Big Heading: Use <h1> with a large font size and a bright color.
The Intro: A paragraph <p> explaining that the eggs are hidden.
The Clues: Use an unordered list <ul> and list items <li> to give 3 clues.
The Scenery: Add at least two images <img> of a garden or bunny.
The Portal: Use an <a href=""> link to connect to your second page.

🚪

Page 2: The Secret Room

Filename: hidden.html

This is the "Finish Line" where the user finds the prize!

The Victory Heading: A big "You Found Them!" heading.
The Prize Gallery: Find at least three different images of Easter eggs or chocolate.
The Way Back: A link <a href=""> to go back to the Garden (index.html).

The Success Checklist transforms the static criteria into a live tracking tool. Check off items as you complete them in your code. The live chart provides immediate visual feedback on your overall progress toward completing the web challenge.

Structural Requirements

Styling Requirements

Project Progress

0 / 9 Completed