Project One: My Hobby Website

:information_source: Project Overview Difficulty Level: Beginner
Estimated Time: 45-60 minutes
Skills Practiced:

• HTML structure and semantics
• Creating ordered and unordered lists
• Embedding images and videos
• Basic webpage organization

Real-World Connection: Creating personal websites is one of the most common ways developers showcase their interests and skills. Professional portfolios, blogs, and personal brands all start with simple hobby pages like this one!

Project Roadmap

graph LR
    A[🎯 Start] --> B[📝 Plan Your Content]
    B --> C[🏗️ Build HTML Structure]
    C --> D[📋 Create Lists]
    D --> E[🖼️ Add Media]
    E --> F[✨ Final Touches]
    F --> G[🎉 Complete!]

Before You Start Checklist

:bulb: Tip: Before You Start :white_check_mark: Log in to your EduBlocks account
:white_check_mark: Have 2-3 hobbies in mind to showcase
:white_check_mark: Prepare 2-3 images related to your hobbies (or know where to find them)
:white_check_mark: Optional: Find a YouTube video about one of your hobbies
:white_check_mark: Review the HTML Media and Lists concepts from previous lessons

Project Overview

Advanced Level

Activity Instruction: Remix this!

[Make sure you log-in Edublock first]

In this project, you will need to create a My Hobby website using HTML Media and List.

:warning: Common Pitfalls to Avoid :warning: Forgetting to close HTML tags - Always check that every opening tag has a closing tag!
:warning: Using spaces in image file names - Use hyphens (-) or underscores (_) instead
:warning: Not testing links - Always click your links to make sure they work
:warning: Making lists too complex - Start simple, then add complexity

Programming Instructions

Phase One: Setting Up Your Foundation :emoji:️

One. Create a title and heading for your website

:bulb: Tip: Best Practice In real web development, the <title> tag appears in the browser tab, while <h1> is your main heading on the page. Think of it like a book: the title is on the cover, and the chapter heading is inside!

Start by adding:

• A Title block for your browser tab
• An H1 block for your main page heading

:emoji: Milestone Checkpoint 1

Before moving on, make sure you can see:

• :white_check_mark: Your title in the browser tab
• :white_check_mark: Your main heading displayed on the page

Phase 2: Building Your Content Structure :clipboard:

2. Make a list of your hobbies

• [Hint: You can use both an ordered list block and an unordered list block.]

:bulb: Tip: Understanding Lists in Web Development Ordered lists (<ol>) are numbered - perfect for rankings or steps
Unordered lists (<ul>) use bullets - great for collections without specific order

Real websites use these all the time! Navigation menus, product features, and blog archives are all built with lists.

:emoji: Milestone Checkpoint 2

Check your lists:

• :white_check_mark: At least one ordered list with 3+ items
• :white_check_mark: At least one unordered list with 3+ items
• :white_check_mark: All list items are properly nested

Phase 3: Making It Visual :art:

3. You can add images related to your hobby

• [Hint: You may use Image block for this]

:warning: Image Tips :emoji:️ Keep image file sizes reasonable (under 1MB is best)
:emoji:️ Use descriptive alt text for accessibility
:emoji:️ Test that your image URLs are working before moving on

4. You may include video in your website

• [Hint: You may use empty Text block for this]

:bulb: Tip: Embedding Videos Like a Pro To embed a YouTube video:

1. Find the video on YouTube
2. Click "Share" -> "Embed"
3. Copy the <iframe> code
4. Paste it into an empty Text block

This is exactly how professional developers add videos to websites!

5. To create a gap between one step and another, you may use this block

:emoji: Milestone Checkpoint 3

Your media checklist:

• :white_check_mark: At least 2 images displayed properly
• :white_check_mark: Images have appropriate sizes
• :white_check_mark: Optional: Video embedded and playing
• :white_check_mark: Proper spacing between sections

Debugging Tips :bug:

Having trouble? Here are common issues and solutions:

Problem: My images aren't showing up

Solution: Check that:

• Your image URL is correct (test it in a new browser tab)
• You're using the Image block, not a Text block
• The image file extension is included (.jpg, .png, etc.)

Problem: My lists look weird

Solution: Make sure:

• Each list item is properly nested inside the list
• You're not mixing ordered and unordered list items in the same list
• You've closed all your list tags

Problem: There's no space between sections

Solution: Add a Spacing block or use multiple <br /> tags in a Text block

:bulb: Tip: Pro Debugging Tip Use the "Preview" button frequently! It's much easier to catch problems early than to fix them all at the end.

Required Elements

Make sure your hobby website includes:

• Website title and heading
• List of hobbies using ordered and unordered lists
• Images related to your hobbies
• Video content (optional)
• Proper spacing between sections

Extension Challenges :rocket:

Ready to go beyond the basics? Try these challenges:

Challenge One: Add Style (Intermediate)

• Change the color of your heading using inline CSS
• Make your lists more interesting with different bullet styles
• Add a background color to sections

Challenge 2: Create a Photo Gallery (Advanced)

• Arrange multiple images in a grid pattern
• Add captions under each image
• Make images clickable to view larger versions

Challenge 3: Interactive Elements (Expert)

• Add a "favorite hobby" voting system using buttons
• Create hover effects on your images
• Add a contact form for visitors to share their hobbies

:bulb: Tip: Going Further These challenges introduce concepts you'll learn in future lessons. Don't worry if they seem difficult now - you're getting a preview of what's to come!

Final Project Checklist

Before submitting, run through this final checklist:

:clipboard: Technical Requirements

• Title appears in browser tab
• Main heading (H1) is clear and descriptive
• At least one ordered list with 3+ items
• At least one unordered list with 3+ items
• Minimum 2 images related to hobbies
• Proper spacing between all sections
• All links and media are working

:art: Quality Check

• Content is appropriate and school-friendly
• Spelling and grammar are correct
• Page layout is clean and organized
• Images are relevant to the hobbies described

:muscle: Personal Touch

• Shows your unique personality
• Demonstrates effort and creativity
• Makes viewers want to learn more about your hobbies

Project Submission

When you have completed your "My Hobby Website" project, submit it using the link below:

Submit Your Project Here

:warning: Before You Submit :dart: Test your webpage in Preview mode
:dart: Check all images load properly
:dart: Verify all lists display correctly
:dart: Make sure you're proud of your work!

Congratulations! :tada:

You've just built your first personal website! This is how many professional developers started their journey. Keep practicing, and soon you'll be building even more amazing websites!