Skip to content
Submitted over 2 years ago

Product preview card component CSS Grid and Figma

Alexander•50
@MrSoyka
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Was i'm right using @media query for image in HTML document with <picture> and <source> tags? Or there was other way in CSS?

Can i use more semantic tags in this challenge?

Also welcome to any help - how to improve this card.

Thanks.

Community feedback

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted over 2 years ago

    Hello Alexander! Congratulations for your solution.

    To use labels with semantic sense, in this case I would substitute the div class: product__description; by a section tag. This answering the question if you can use more semantic tags in this challenge.

    On the other hand, the div class: wrapper; I eliminate it. If you think about it a bit you can achieve the same result without that div.

    **Cheers!**🦾🦾🦾

    Marked as helpful
    0
    Alexander•50
    @MrSoykaPosted over 2 years ago

    @Enmanuel-Otero-Montano can i use <body> instead of div class: wrapper;?

    0
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted over 2 years ago

    @MrSoyka Surely yes, it is not usual to use a div to contain the main. You may have to change the code in your css a bit if you do the deleting of the div class: wrapper; but I think it's worth it, it's a better way to encode.

    On the other hand, I was looking at your CSS and there is a part that has this: nav, footer, header, aside { display: block; }, I think that this code does not need to be implemented, since these tags are implicitly block tags.

    A small maxim. Try to achieve the result by writing as little code as possible. Remember that the browser has to read all the code before rendering your page and the more code, the longer it takes to load and this does not provide a good user experience. In small sites this is not noticeable, but in large ones it is.

    **Don't be discouraged.**🦾🦾🦾

    0
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    U could use a <figure> element with it's background-image: url("image-Desktop.jpg"); background-size: cover; and @media ( max-width: 620px ){figure {background-image: url("image-Mobile.jpg");}}

    For more semantic meaning :

    • make sure use heading frome highest level to the lowest. -use html 5 landmarks <header> <main> <footer>... instead of <div> elements

    I'm myself new to webdev , all I can do is recommend you to read this developer.mozilla.org

    0

Please log in to post a comment

Log in with GitHub

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