Favorite Game CSS Properties Activity

What you'll learn

In this activity, you'll practice:

• Applying CSS properties to style webpage elements
• Using classes to organize your CSS code
• Centering images and aligning text
• Customizing fonts, colors, and backgrounds
• Creating a visually appealing game website

Before You Start

:white_check_mark: Watch the tutorial video above
:white_check_mark: Have your favorite game in mind
:white_check_mark: Prepare 2-3 images of your game
:white_check_mark: Think about color scheme that matches your game
:white_check_mark: Time needed: 30-40 minutes

Preview

:computer: Activity Instructions

:information_source: Remix this EduBlocks project! Make sure you click "Clone" to create your own copy!

In this project, you'll create a website showcasing your favorite game using various CSS properties to make it look amazing!

:art: Steps to Create Your Favorite Game Website

Step One: Create Your Website Title (5 minutes)

1. Open the remixed EduBlocks project
2. Add an H1 heading block for your game's name
3. Add a subtitle using an H2 heading block

Step 2: Style Your Heading (5 minutes)

1. Use the CSS style block to customize your heading
2. Change the following properties:
   • Color: Choose a color that matches your game
   • Font-family: Try different fonts like Arial, Comic Sans MS, or Georgia
   • Text-align: Center your heading for better appearance

:bulb: Tip Try using your game's official colors! For example, if your game is Minecraft, use green (#00ff00) or brown (#8B4513).

Step 3: Add Game Images and Information (10 minutes)

1. Upload 2-3 images of your favorite game
2. Add a text block below each image
3. Write interesting facts or descriptions about your game

:bulb: Tip Image Tips:

• Use the Text block to add captions under images
• Keep image sizes reasonable (not too big or small)
• Make sure images are clear and related to your game

Step 4: Create CSS Classes (5 minutes)

1. Create a class called .game-info for your game details
2. Create another class called .game-list for listing features
3. Apply these classes to organize your content

Step 5: Apply Advanced CSS Properties (10 minutes)

1. Center your images:

   • Use margin: auto and display: block

2. Change background color:

   • Pick a color that complements your game theme

3. Customize fonts:

   • Set font-size between 14px-20px for readability
   • Choose a font-family that matches your game's style

:warning: Warning Common Mistakes to Avoid:

• Don't use too many different fonts (stick to 2-3 maximum)
• Avoid color combinations that are hard to read (like yellow text on white background)
• Make sure your images aren't stretched or squished

:bulb: Tips for Success

• Choose a game you love - Your enthusiasm will show in your work!
• Color coordination - Use 2-3 main colors that work well together
• Font pairing - Combine a fun heading font with a readable body font
• Image quality - Use clear, high-quality images (but not too large!)
• White space - Don't crowd elements together, give them room to breathe
• Test your styling - Preview often to see how your changes look

:wrench: Troubleshooting Common Issues

Problem: My image won't center

Solution: Make sure you're using both margin: auto AND display: block on your image

Problem: Text is hard to read

Solution: Check your color contrast - dark text on light backgrounds or light text on dark backgrounds work best

Problem: My CSS class isn't working

Solution:

1. Check that your class name starts with a dot (.) in the CSS
2. Make sure you spelled the class name exactly the same in both places
3. Remember CSS is case-sensitive!

:emoji:️ Project Submission (5 minutes)

:warning: Warning Before You Submit:

1. Test all your CSS properties work correctly
2. Check that your images display properly
3. Make sure your text is readable
4. Verify all required elements are included:
   • Title and subtitle
   • At least 2 images
   • CSS classes applied
   • Multiple CSS properties used

:information_source: Info

:emoji: Submit Your Project

Click here to submit your Favorite Game CSS Properties project!

Remember to include your EduBlocks project link in the submission form!

---

:video_game: Ready to showcase your favorite game? Let's make it look amazing with CSS!