Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 months ago

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

node
Jonathan Peters•230
@QMS85
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

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.
What challenges did you encounter, and how did you overcome them?

Here are the key challenges I encountered and how they were overcome:

  1. 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.
  1. 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
  1. 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.
  1. 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.
  1. 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.
  1. 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.
What specific areas of your project would you like help with?

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?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.