Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product preview card component using html and css

Zeenaā€¢ 175

@kushyzee

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Congrats @kushyzee on completing this challenge!

In your <body> element, you'll want to change your height to min-height for better responsiveness.

Next, since this a card, for better semantic HTML you want to change you <main> element to <article> element. You'll also want to change all your <section> elements to <div> instead, since the <section> element is used to define a section of a webpage.

For your images to change between mobile and desktop is better to use the <picture> element, it use less code and its far more effective.

I attached a link for more detail about it:

<picture>
   <source media="(min-width: )" srcset="Desktop image goes here">
    <img src="Mobile image goes here" alt="">
</picture>

https://www.w3schools.com/html/html_images_picture.asp

0

Zeenaā€¢ 175

@kushyzee

Posted

@vcarames wow, thank you so much for feedback. I totally forgot about the <picture> element

0

Please log in to post a comment

Log in with GitHub
Discord logo

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