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

HTML5 for semantic structure, CSS3 for layout and styling

Kama•110
@Kama-ds10
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?

I'm most proud of how clean and responsive the layout turned out. I was able to closely match the original design using semantic HTML and Flexbox, and I maintained consistent spacing, typography, and color use throughout the component. This project helped me reinforce the importance of structure and responsiveness.

Next time, I’d focus more on accessibility from the start—such as adding better alt text, improving contrast, and considering screen reader navigation. I’d also aim to organize my CSS more modularly, possibly using utility classes or a preprocessor like SCSS for better maintainability as projects grow.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was aligning the image and text side-by-side on larger screens while keeping the layout responsive on smaller devices. At first, the content would break or stack awkwardly, but I overcame this by using Flexbox along with a mobile-first approach and media queries to adjust the layout based on screen size.

Another challenge was making sure the typography and spacing matched the design exactly. I learned to pay close attention to the style guide and used tools like browser dev tools and design measurements to fine-tune the spacing and font sizes more accurately.

What specific areas of your project would you like help with?

I’d appreciate feedback on the responsiveness and layout structure, especially how I handled the transition between mobile and desktop views using Flexbox. Are there better or more efficient ways I could have written my media queries?

I’d also like suggestions on improving the accessibility of the component—are there any best practices I might have missed when it comes to semantic HTML or screen reader support?

Finally, if there are any areas where my CSS could be cleaner or more maintainable, I’d love to hear tips for better organization or structure for small components like this.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Kama'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
Frontend Mentor logo

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