Quartz 4

Birthday Invite

4 min read

Metadata

Notes

🎉 Final Project: Create a Birthday Invitation Website (HTML Only)

🧠 Goal of the Project

The purpose of this project is to:

✅ Reinforce everything you’ve learned so far
✅ Apply HTML concepts in a practical and creative way
✅ Build a real webpage using basic elements
✅ Create your own birthday invite webpage (because why not make party invites ✨cool✨ and not boring!)

💬 “Paper invites and WhatsApp messages are for people who can’t make websites. You can do better!”

📦 What Will You Create?

A fun, retro-style 90s web page (unstyled for now), announcing:

  1. Your birthday 🎂

  2. An image related to your birthday or celebration

  3. A list of items for guests to bring

  4. A clickable Google Maps link so guests know where to go

💻 Technologies Used

This project is built using:

  • ✅ HTML5

  • ❌ No CSS (styling will come in later lessons)

  • ❌ No JavaScript (yet!)

  • 💡 Pure HTML structure and semantic elements

🧩 Elements to Use (Checklist)

Here’s what you must include:

ElementPurpose
<h1>Title: your birthday announcement
<img>Visual element: birthday/cake/party
<ul> or <ol> + <li>List of things for guests to bring
<a>Link to the party location (Google Maps)

💡 You are encouraged to personalize the content!

🧱 Recommended Page Structure

Here’s a simple wireframe-like layout for inspiration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Birthday Invite</title>
  </head>
  <body>
    <h1>It's My Birthday!</h1>
 
    <h2>You're Invited! 🎉</h2>
 
    <img src="https://your-image-url.com/image.jpg" alt="Birthday cake with candles" />
 
    <h3>🎁 What to bring:</h3>
    <ul>
      <li>Party hat</li>
      <li>Balloons</li>
      <li>Your best dance moves</li>
      <li>A big smile 😊</li>
    </ul>
 
    <h3>📍 Location:</h3>
    <p>
      <a href="https://www.google.com/maps/place/YourLocationHere" target="_blank">
        Click here to view on Google Maps
      </a>
    </p>
  </body>
</html>

🔍 Deep Dive into Each Element

🧁 1. Headings: <h1>, <h2>, <h3>

HTML provides six levels of headings (<h1> to <h6>). Use them to structure your content:

  • <h1> – Main title (e.g. “It’s My Birthday!“)

  • <h2> – Sub-title or sections (e.g. “You’re Invited!“)

  • <h3> – Subsections (e.g. “What to Bring”, “Location”)

✅ Using proper heading hierarchy improves readability and accessibility.

🖼️ 2. Image Element: <img>

Purpose: Show an image to make your page more engaging.

Syntax:

<img src="image-url" alt="image description" />

  • src = Image location (can be a URL or local file)

  • alt = Description for screen readers and accessibility

💡 Tip: Use a fun birthday image, like a GIF or a cake picture! Example sources:

🧾 3. List: <ul> or <ol> + <li>

Use a list to tell guests what to bring.

  • <ul> = Unordered List (bullets)

  • <ol> = Ordered List (numbered)

  • <li> = List Item

✅ Keep one item per <li> to ensure clear structure.

Example:

<ul>
  <li>Chips</li>
  <li>Drinks</li>
  <li>Games</li>
</ul>

🔗 4. Anchor Element: <a>

Used to create a clickable hyperlink (in this case, a Google Maps link).

Syntax:

<a href="https://maps.google.com/your-location">Link Text</a>

  • href = Destination link

  • target="_blank" (optional): Opens the link in a new tab

✅ You can customize the anchor text:

<a href="https://maps.google.com">Here's where the party is!</a>

🎁 Personalization Tips

Here are a few fun ideas to personalize your birthday invite page:

ElementCreative Twist
🎨 ImageUse a GIF of your favorite animal dancing
📝 ListInclude quirky things like “party socks” or “bad jokes”
📍 LinkUse a real or funny Google Maps location (e.g. Pigeon park in Tokyo!)
💬 TextAdd fun phrases like “Bring the vibes!” or “Cake is mandatory.”

🧠 Bonus: Easter Eggs

In the example given, the Google Maps link leads to a surprise location — a pigeon-filled park in Tokyo 🐦. You can:

  • Add your own easter egg

  • Link to a mystery location

  • Include a hidden message using HTML comments (<!-- surprise! -->)

✅ Final Output Expectations

Here’s what you should aim for:

  • ✅ A working HTML file named index.html

  • ✅ A visible image with alt text

  • ✅ A clear list of invite instructions

  • ✅ A functioning anchor tag to Google Maps

  • ✅ Proper use of heading elements for structure

📸 Want to Share?

Take a screenshot of your final project and post it in your course community, forum, or Q&A space!

  • Inspire others 👏

  • Show your creativity 💡

  • Get feedback or suggestions 🗣️

🧠 Recap – Concepts Applied

ConceptElement
HTML Structure<!DOCTYPE html>, <html>, <head>, <body>
Headings<h1> through <h3>
Images<img src="" alt="" />
Lists<ul>, <li>
Links<a href="">
Attributessrc, alt, href

🧪 Practice Challenge (Optional)

Try creating a different themed invite:

  • 🎄 Christmas Party

  • 🎃 Halloween Bash

  • 👾 90s Retro LAN Party

  • 📚 Study Jam

Just modify the image, text, and list. Creativity is the limit.

References

Graph View

Backlinks