My Books on The Shelf Activity

What you'll learn

In this activity, you will:

• Apply CSS styling to create an attractive book collection website
• Use different CSS properties for fonts, colors, and alignment
• Organize content with proper spacing and sections
• Create a personalized digital bookshelf

⏱️ Total Activity Time: 45-60 minutes

Before You Start :white_check_mark:

• You're logged into EduBlocks
• You have book cover images ready (or know where to find them)
• You've thought about 3-4 books you want to feature
• You remember basic HTML structure from previous lessons

Video Tutorial

Preview

:computer: Activity Instructions

:warning: Important Remix this project to start!
Make sure you're logged into EduBlocks first!

In this project, you'll use CSS to create a beautiful website showcasing your favorite books.

:art: Steps to Create Your Book Shelf Website

⏱️ Building Time: 30-40 minutes

Step One: Create Your Website Title (5 minutes)

1. Open the remixed project in EduBlocks
2. Add a main heading for your book collection
3. Give your bookshelf a creative name (e.g., "Sarah's Reading Corner", "My Fantasy Book Collection")

Step 2: Style Your Heading with CSS (10 minutes)

1. Find the CSS styling block in your toolbox
2. Apply these CSS properties to your heading:
   • Change the color to match your theme
   • Select a font that suits your book collection
   • Set the alignment (center works great for titles!)
3. Use this block to style your heading:

:bulb: Tip [Styling Tip] Try using bold, larger fonts for your main title to make it stand out! You can also experiment with different color combinations.

Step 3: Add Your First Book (10 minutes)

1. Upload an image of your book cover
2. Add a text block below the image
3. Include these details about your book:
   • Book title
   • Author name
   • Genre (fiction, mystery, fantasy, etc.)
   • Year published
   • Your personal rating (out of 5 stars)

:bulb: Tip [Image Tip] If you can't find a book cover image, you can search for "[book title] cover" on Google Images. Make sure to use appropriate images!

Step 4: Create Multiple Book Sections (10 minutes)

1. Repeat Step 3 for at least 2 more books
2. Make each book its own section
3. Apply different CSS styles to each section for variety

Step 5: Add Spacing Between Books (5 minutes)

1. Use the spacing block to create gaps between book sections
2. This makes your website easier to read
3. Add spacing using this block:

:bulb: Tip [Spacing Tip] Consistent spacing makes your website look professional. Try using the same amount of space between each book!

:books: Book Information Template

⏱️ Planning Time: 5 minutes

Use this template for each book in your collection:

📖 Book Title: [Name of the book]
✍️ Author: [Author's name]
📂 Genre: [Fiction/Non-fiction/Mystery/Fantasy/etc.]
📅 Year: [Publication year]
⭐ My Rating: [★★★★☆]
💭 Why I like it: [One sentence about why you enjoy this book]

:bulb: Tip [Book Selection] Choose books from different genres to make your collection more interesting! Mix fiction with non-fiction, or showcase books from different time periods.

:art: CSS Styling Ideas

⏱️ Styling Time: 10 minutes

Try these CSS combinations for a stunning bookshelf:

Color Schemes

• Classic Library: Brown backgrounds with gold text
• Modern Minimal: Black, white, and one accent color
• Rainbow Shelf: Different color for each book section
• Night Mode: Dark background with light text

Font Suggestions

• Headings: Georgia, Arial Black, or Impact
• Book details: Arial, Verdana, or Times New Roman
• Mix it up: Use different fonts for titles vs. descriptions

:bulb: Tip [Design Tip] Keep your text readable! Avoid using light colors on light backgrounds or fonts that are too fancy to read easily.

:wrench: Troubleshooting Common Issues

Problem: My images are too big/small

Solution: Ask your teacher about resizing images, or look for smaller/larger versions online

Problem: My text is hard to read

Solution:

1. Check your color contrast (dark text on light background or vice versa)
2. Make your font size bigger
3. Choose a simpler font

Problem: Everything looks squished together

Solution: Add more spacing blocks between sections

Problem: My CSS isn't applying

Solution:

1. Make sure you've connected the CSS block to the right element
2. Check that you've spelled CSS properties correctly
3. Try refreshing your preview

:white_check_mark: Final Checklist

Before submitting, make sure you have:

• Created an eye-catching title for your bookshelf
• Added at least 3 books with complete information
• Applied CSS styling to your headings
• Used different colors or fonts for variety
• Added proper spacing between sections
• Tested that all images display correctly
• Checked that all text is readable

:emoji: Project Submission

:information_source: Ready to Submit? When you've completed your "My Books on The Shelf" project and checked everything above:

Submit Your Project Here

Remember to test your webpage one final time before submitting!

:star2: Bonus Challenges (Optional)

If you finish early, try these extra challenges:

• Add a background color or pattern to your entire page
• Create a "Currently Reading" section with special styling
• Add emoji ratings instead of stars (:emoji: = loved it, :emoji: = liked it, :emoji: = it was okay)
• Group your books by genre with different color themes

:tada: Great job learning CSS! Your personalized bookshelf is going to look amazing!