Ecommerce Specialist Track
Focus on Conversion, Product Presentation, and Gallery Layouts.
Level 1: Product Presentation
Focus: Images, Ratings, Price Typography, and Grid Layouts.
Exercise 1: Product Card
CompletedCreate a versatile Product Card component containing:
1. Product Image (with hover zoom or color change effect).
2. Product Name and Color/Variant subtitle.
3. Price (bold) and Star Rating (optional).
Exercise 2: Product Overview (Gallery)
CompletedBuild a Product Detail section with:
1. Image Gallery: A highlight image grid (one big, several small).
2. Product Info: Title, Price rating stars.
3. Color/Size Picker: Interactive radio buttons.
4. Add to Bag button.
Basic Tee 6-Pack
Product information
$192
5 out of 5 stars
Description
The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.
Level 2: The Shopping Flow
Focus: Lists, Order Summaries, Form Layouts.
Exercise 1: Shopping Cart
CompletedCreate a slide-over/modal or page section for the Cart containing:
1. Product List: Image, Info, Qty Selector, Remove button.
2. Order Summary: Subtotal only for now.
3. "Checkout" CTA.
Shopping Cart
Exercise 2: Checkout Page
CompletedBuild a generic Checkout form layout:
1. Contact Info (Email).
2. Shipping Address (Inputs for Address, City, State, ZIP).
3. Payment Details (Card number, CVC).
4. Confirm Order button.