Cake House Website Activity

What you'll learn

• How to create a professional navigation bar using HTML
• Building an organized footer with contact information
• Styling sections with internal CSS
• Creating interactive buttons and links
• Designing a complete webpage layout with header, content, and footer
• Advanced: Building an image gallery section

Video

Before You Start

:information_source: Info Checklist :white_check_mark: Watch the video tutorial above
:white_check_mark: Have the EduBlocks editor ready
:white_check_mark: Prepare images for your cake house (or use placeholder images)
:white_check_mark: Think about your cake house theme and color scheme
:white_check_mark: Have a notepad ready to plan your layout

:computer: Basic Level Activity (30 minutes)

:art: Advanced Level Activity (20 minutes)

Activity Instruction

:warning: Important! :link: Remix this project!
:warning: Make sure you click the "Clone" button to create your own copy!

---

:computer: Steps to Create Your Cake House Website (45 minutes)

One. Create a Navigation Bar

To create a navbar, use an empty text block:

2. Style Your Webpage

You may change the style and color of your cake house by using this block of internal CSS:

3. Add Interactive Buttons

To add a button, you may use this block:

4. Create a Header Banner

To make the header or banner, you can use this block to specify the section:

5. Build the Footer

To create the Footer of your webpage, you can use this block:

6. Advanced: Add an Image Gallery

For the advanced level, add the gallery section before the footer:

---

Tips for Success

tip Pro Tips!

1. Plan your layout before starting to code - sketch it on paper first!
2. Use high-quality images of cakes and desserts (or find free images online)
3. Keep navigation simple with 4-5 menu items maximum
4. Test all buttons and links - make sure they work!
5. Apply consistent styling - use the same colors throughout
6. Make content engaging with descriptive text about your cakes
7. Use appropriate spacing between sections for a clean look
8. Proofread all content - check spelling and grammar
9. Test the website in preview mode before submission
10. Save your work frequently while building!

---

:art: Advanced Level Challenges (Optional - 15 minutes)

:information_source: Info Challenge yourself! Try these advanced features if you finish early:

1. Create interactive hover effects for buttons and images
2. Add smooth transitions when hovering over elements
3. Build a photo gallery with at least 6 cake images
4. Include a contact section with address and phone number
5. Create custom CSS animations for page elements
6. Add special effects like shadows or gradients
7. Design a unique layout using CSS positioning

Troubleshooting Common Issues

tip Having problems?

• Navbar not showing? Check that you've closed all HTML tags properly
• CSS not working? Make sure your style tags are in the correct place
• Images not loading? Verify the image URLs are correct
• Layout looks broken? Check for missing closing tags like </div>
• Buttons not clickable? Ensure you've added the proper <a> tags

:speech_balloon: Group Discussion (10 minutes)

Discuss with your partner or group:

1. What cake theme did you choose and why?
2. Which part was the most challenging?
3. What feature would you add to make your cake house website even better?

:emoji:️ Project Submission

:warning: Submit Your Work! :memo: When you have completed your "Cake House Website" project:

1. Test all navigation links
2. Check that your footer displays correctly
3. Verify all images are loading
4. Review your CSS styling
5. Submit Your Project Here

:alarm_clock: Submission deadline: End of class

:information_source: Info Ready to Start? :rocket: Click the remix link above and start building your delicious digital presence! Remember to save your work frequently and have fun creating your cake house website!