Skip to content
Submitted over 1 year ago

Responsive product card component using only css and html

Clarena Rodríguez•50
@Clarerodev
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

Hi everybody!

This is my first challenge in FM and I'd like to get your opinions. I'm a frontend developer but I really know that I need to improve my css skils, so here I am.

I'm learning about css grid so I implemented this layout as a grid. Also, I tried to implement mobile first (I've learnt about this good practice).

I'm not sure (for this kind of screen) if it was neccesary to apply html tags like article and section, so I created classes.

I'll appriciate your opinions :)

Community feedback

  • Bilal Türkmen•340
    @bilalturkmenPosted over 1 year ago

    Hello, nice and clean work.

    i think maybe it can be improved a bit 😊

    • Collecting css resources in a single file can improve page load performance. Likewise, instead of calling the externally font as @import, adding it as a url inside the <head> tag can prevent slowdown.

    • Product images can be use with <Picture> element instead of css background, it allows you to define "alt" tag. This provides positive benefits in terms of SEO and screen readers accessibility.

    <picture>
        <source
          media="(min-width: 42.5em )"
          srcset="./images/image-product-desktop.jpg"
        />
        <img
          src="./images/image-product-mobile.jpg"
          alt="in 100 ml glass bottle - channel - eau de parfum"
        />
      </picture>

    • You can use for primary font font-family property in body selector. You don't need to add font-family to other classes again and again. After adding font-family to body, you can delete the others.

    • and this happened to me too :) for screen readers an sr-only text can be added before to the old price.

    Of course, there are here more experienced people than me. Maybe they can say different things.

    i hope these helpful 🙂

    Marked as helpful
    1
    Clarena Rodríguez•50
    @ClarerodevPosted over 1 year ago

    @bilalturkmen Thank you so much! I'll read about picture+source tag. I've never had the opportunity to use it.

    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    No, it's not necessary to add such tags because this is not a website or a complete app.

    "think of <article> not just as a newspaper article, or a blog post, but as an article of clothing — a discrete entity that can be reused in another context. So your trousers are an article, and you can wear them with a different outfit; your shirt is an article, and can be worn with different trousers; your knee-length patent leather stiletto boots are an article (you wouldn’t wear just one of them, would you?)." Read more https://www.smashingmagazine.com/2020/01/html5-article-section/

    You should try to delete unused files in your GitHub, I see you have the original frontend file there too. Not a good habit. Over all the code is well done

    Marked as helpful
    0
    Clarena Rodríguez•50
    @ClarerodevPosted over 1 year ago

    @tobezhanabi Thank you so much! I appreciate your opinion. Thanks for the link, I'll read it!

    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