Product Preview Card Component (Built with HTML, CSS & JavaScript)

Solution retrospective
What I'm Most Proud Of...
- Responsive Design Excellence - The card seamlessly adapts from mobile to desktop layouts using CSS Grid/Flexbox and picture elements for optimal image loading.
- Accessibility Focus - Screen reader support with
.sr-only
class, proper ARIA labels, and keyboard navigation handling. - Modern CSS Practices - Custom properties for consistent theming, proper semantic HTML structure, and smooth transitions.
- Interactive Feedback - The "Add to Cart" button provides visual confirmation with temporary state changes.
- Performance Optimization - Lazy loading images and responsive image serving with different assets for mobile/desktop.
What I Would Do Differently Next Time
- Error Handling - Add more robust error handling for image loading failures and network issues.
- State Management - Implement actual cart functionality with local storage or session management.
- Animation Polish - Add micro-interactions like hover effects on the card itself or loading states.
- Testing - Include unit tests for the JavaScript functionality.
- SEO Optimization - Add structured data markup for better search engine understanding of the product.
Here are the key challenges I encountered and how they were overcome:
- Responsive Image Handling Challenge:
Serving different images for mobile vs desktop while maintaining performance and quality.
My Solution: I Used the <picture>
element with <source>
media queries to serve optimized images:
- On Desktop: Higher resolution image for larger screens.
- On Mobile: Smaller, optimized image for mobile devices.
- Lazy loading implementation for better performance.
- CSS Layout Complexity Challenge:
Creating a card that works seamlessly on both mobile (stacked) and desktop (side-by-side) layouts.
My Solution: I Implemented a mobile-first approach with CSS Grid/Flexbox:
- On Mobile: Single column layout with image on top
- On Desktop: Two-column layout using
flex-direction: row
Smooth transitions between breakpoints at 768px
- Accessibility Implementation Challenge:
Making the component usable for screen readers and keyboard navigation.
My Solution: I Added comprehensive accessibility features:
.sr-only
class for screen reader-only content.- Proper ARIA labels on interactive elements.
- Keyboard event handling for Enter and Space keys.
- Focus management with visible focus indicators.
- Interactive Feedback Challenge:
Providing user feedback when the "Add to Cart" button is clicked without a backend.
My Solution: I Created a temporary state change system:
- Button text changes to "Added!" with checkmark icon.
- Temporary disabled state with visual opacity change.
- 2-second timeout to reset to original state.
- Console logging for debugging.
- Server Setup for Development Challenge:
Setting up a proper development server to serve static files with correct MIME types.
My Solution: I Created a custom Node.js server with:
- Proper MIME type handling for different file extensions.
- CORS headers for development.
- Error handling for missing files.
- Port configuration for my IDE environment.
- Performance Optimization Challenge:
Ensuring fast loading and smooth user experience.
My Solution: I Implemented several optimizations:
- Lazy loading for images.
- CSS custom properties for consistent theming.
- Minimal JavaScript with efficient event handling.
- Graceful error handling for failed image loads.
Here are some specific areas where I might want help or feedback:
Frontend Development & User Experience
-
Animation & Micro-interactions: How can I add smooth hover effects, loading animations, or page transitions to enhance the user experience?
-
Accessibility Testing: Are there specific screen reader behaviors or keyboard navigation patterns I Can test and improve?
Code Architecture & Best Practices
-
State Management: How can I implement a proper shopping cart state that persists across page reloads using localStorage or sessionStorage?
-
Error Handling: What's the best way to handle network failures, image loading errors, or API timeouts gracefully?
-
Code Organization: How Do I refactor the JavaScript into modules or classes for better maintainability?
Deployment & Production
-
SEO Optimization: How can I add structured data markup (JSON-LD) for better search engine visibility?
-
Progressive Web App: What steps are needed to make this work offline or as a PWA component?
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Jonathan Peters's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord