E-commerce HTML Division Activity

What you'll learn

• How to create and organize content using HTML divisions (<div>)
• How to structure product cards for an e-commerce website
• How to apply CSS styling to divisions for layout control
• How to combine images, text, and buttons within divisions

Before You Start

• Make sure you're logged into EduBlocks
• Watch the tutorial video above (optional but helpful!)
• Have product images ready or know where to find them online
• Think about what type of products you want to showcase

Preview

:computer: Activity Instructions

Time needed: 45-60 minutes

:information_source: Remix this project to get started! Make sure you're logged into EduBlocks before clicking the link.

In this project, you'll create an e-commerce webpage using HTML divisions to organize your product displays.

:art: Steps to Create Your E-commerce Website

Time for each step: 5-10 minutes

Step One: Create Your Website Title

1. Add an <h1> heading block for your store name
2. Choose a catchy name for your e-commerce store
3. Center your title using CSS if desired

:bulb: Tip Think of a store name that tells customers what you sell. For example: "Tech Paradise" for electronics or "Fashion Hub" for clothing.

Step 2: Add Product Images

1. Find or upload product images
2. Drag the Image block from the toolbar
3. Add the image URL or upload your file
4. Place multiple images for different products

:bulb: Tip Use images that are clear and similar in size. You can find free images at sites like Unsplash or Pexels.

Step 3: Create Division Blocks for Products

1. Drag a div block from the HTML section
2. Place your image inside the div block
3. Add a paragraph block below the image (still inside the div)
4. Add a button block at the bottom of the div

:bulb: Tip Think of a div like a box that holds related items together. Each product should have its own div box!

Step 4: Add Product Descriptions

1. Click on the paragraph block inside your div
2. Write a short description of your product
3. Include the product name and key features
4. Add the price at the end

Step 5: Style Your Product Cards

1. Select your div block
2. Add CSS properties:
   • padding: 10px (space inside the box)
   • margin: 10px (space outside the box)
   • border: 1px solid #ccc (optional box outline)
3. For images, add:
   • width: 200px
   • height: 200px

:bulb: Tip Keep all your product divs the same size for a professional look!

Step 6: Add Interactive Buttons

1. Select the button block in each product div
2. Change the button text to "Buy Now" or "Add to Cart"
3. Style your buttons with CSS:
   • Background color
   • Text color
   • Padding

:bulb: Tips for Success

• Choose a product category (electronics, clothing, books, etc.)
• Use consistent div structure for all products
• Apply uniform styling across product cards
• Include realistic product information and pricing
• Test button functionality and layout appearance
• Ensure images load properly and are appropriately sized
• Create an organized, professional layout

:hammer_and_wrench: Troubleshooting Common Issues

Images not showing?

• Check that your image URL is correct
• Make sure the image link ends with .jpg, .png, or .gif
• Try using a different image hosting service

Divs not aligning properly?

• Add display: inline-block to your div CSS
• Use float: left to make divs sit side by side
• Make sure all divs have the same width

Buttons look different sizes?

• Set a fixed width for all buttons (e.g., width: 100px)
• Use the same padding values for consistency
• Check that button text length is similar

:bulb: Tip Having trouble? Watch the tutorial video again or ask your teacher for help!

:white_check_mark: Project Submission

Time needed: 5 minutes

When you've completed your e-commerce website with at least 3 products:

:warning: Warning Before submitting, check that you have:

• At least 3 product divisions
• Images for each product
• Product descriptions with prices
• Styled buttons in each product card
• Consistent styling across all products

:rocket: Submit Your Project Here

:information_source: Info Remember to save your project in EduBlocks before submitting!

Ready to create your e-commerce website? Click the remix link at the top and start building! :tada: