Project 5: Zoo Blog Website

:emoji:️ Project Roadmap

graph LR
    A[Start] --> B[Part 1: HTML Structure]
    B --> C[Create Navigation]
    C --> D[Add Animal Content]
    D --> E[Build Forms]
    E --> F[Part 2: CSS Styling]
    F --> G[Style Components]
    G --> H[Add Interactivity]
    H --> I[Part 3: Present]
    I --> J[Project Complete! 🎉]

:clipboard: Before You Start Checklist

Part One: HTML Structure

Preview

Activity Instruction: Remix this!

[Make sure you click clone word]

:warning: Warning Common Pitfall Alert! :emoji: Make sure to click "Clone" when you open the EduBlocks link! If you don't clone it, you won't be able to save your changes. Look for the clone button in the top menu.

Part 1 Instructions:

One. To create a navbar, use an empty text block

:bulb: Tip Best Practice: In real web development, navigation bars are created using <nav> tags with unordered lists (<ul>) inside. The empty text block in EduBlocks represents the container that will hold your navigation items!

2. To add a button, you may use this block:

3. Inside your button add a link for more information to read

:warning: Warning Common Pitfall Alert! :emoji: Don't forget to add the full URL including "https://" when linking to external websites. Without it, the link won't work properly!

4. Add images to your Zoo blog. You may add any animal images

:bulb: Tip Image Tips:

• Use high-quality animal images (you can find free ones on sites like Unsplash or Pexels)
• Keep image file sizes reasonable (under 1MB is best for web)
• In real HTML, this would be: <img src="animal.jpg" alt="Description of animal">

5. To make the list of information, you use an unordered list

6. You should have a division block, as shown in the example expected output

7. You should create a simple form for your blog

8. To create the footer of a web page, you can use this block:

:dart: Milestone Checkpoint #1

Part 2: CSS Styling

Preview

Activity Instruction: Continue with same Edublock last week

:bulb: Tip Styling Strategy: Start with the big picture (overall layout) then work your way down to specific elements. This is how professional web developers approach CSS!

Part 2 Instructions:

One. You may change the style and color of your Zoo blog by using this block of internal CSS:

Include additional styling parameters like margin, padding, background color, font type, and color, among others.

:bulb: Tip CSS Properties to Try:

• background-color: #yourcolor; - Changes background color
• font-family: Arial, sans-serif; - Changes the font
• padding: 20px; - Adds space inside elements
• margin: 10px; - Adds space outside elements
• border-radius: 10px; - Makes rounded corners

2. To make the header of banner, you can use this block: to specify the section

3. You should divide the session to apply styling

4. You should give each style a class name

5. You should link to a URL for more information

6. You should create an alert message after clicking the join us button

:warning: Warning JavaScript Alert Note: This creates a popup message! In real websites, developers often use more modern notification systems, but alerts are great for learning how buttons can trigger actions.

7. You can use this text for the footer paraphrase

:dart: Milestone Checkpoint #2

Part 3: Presentation

Presentation Instructions:

:bulb: Tip Presentation Pro Tip: Practice your presentation at least once before the real thing! This helps you feel confident and ensures everything works smoothly.

Preparation:

• Open your completed Zoo blog in EduBlocks
• Test all functionality (buttons, links, forms, alerts)
• Prepare to demonstrate each feature of your website

During Presentation:

1. Introduce your project - Explain what you created
2. Show the website structure - Demonstrate navbar, sections, footer
3. Highlight animal content - Show images and information lists
4. Test interactive elements - Click buttons, submit forms, trigger alerts
5. Explain your styling choices - Discuss colors, fonts, and layout decisions
6. Answer questions from instructor and classmates

Time Limit: 3-5 minutes per presentation

:warning: Warning Presentation Day Reminders:

• Make sure your project is saved and accessible
• Have a backup plan if internet is slow (screenshots work!)
• Speak clearly and show enthusiasm for your creation
• Remember: Everyone is learning together, so be supportive of classmates!

Required Elements Summary

Make sure your Zoo blog includes:

• Navigation bar using empty text blocks
• Buttons with linked information
• Animal images and content
• Unordered lists for information
• Division blocks for organization
• Simple contact/feedback form
• Footer section
• Internal CSS styling with classes
• Header banner section
• Alert messages for button interactions
• Professional presentation

:mag: Debugging Tips

:rocket: Extension Challenges

Project Submission

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

Submit Your Project Here

:bulb: Tip Final Check Before Submission:

1. Test all your buttons and links
2. Make sure your form appears correctly
3. Check that your CSS styling is applied
4. Verify your alert messages work
5. Preview your site one more time!