Skip to content
Submitted about 2 months ago

use html and css only to create the response design

Alshimaa_Jamal•100
@Al-Shimaa2001
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

this the first time to use serset with img its very useful

Code

Please log in to post a comment

Log in

Community feedback

  • Kama•110
    @Kama-ds10

    What You Did Well Responsive layout with media queries: Great use of @media for different screen sizes.

    Semantic structure: Using proper tags like <main>, <h2>, <p>, and <button>.

    Visual styling: Elegant colors and spacing, plus good use of object-fit and aspect-ratio.

    Use of srcset: Smart step toward responsive image handling.

    Suggested Improvements

    Text Improvements “Add to card” → Should be “Add to cart” It's a small typo, but it's good to catch these details early.

    HTML Best Practices Avoid using width="100%" in the img tag inline. You already styled it correctly in CSS. Keep HTML and CSS separate when possible.

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