Skip to content
Submitted almost 2 years ago

Newbie @ HTML & CSS

Michaël•70
@MichaelHensel1980
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone,

Please leave some feedback, I'm open to anything. Especially when it comes to writing the code even better or cleaner. I've set the overflow to "hidden" because I didn't see it in the example given.

This is my first time writing HTML from a design mockup and would like to know what could have been done better. I also just recently started learning HTML & CSS and this was a nice project to do.

Did I overlook something or was a piece of code unnecessary? Is the responsiveness well implemented or written?

Thanks in advance to anyone who leaves a remark.

Greetings Michaël

Code

Please log in to post a comment

Log in

Community feedback

  • Fer•3,970
    @fernandolapaz

    Hi 👋, some of this may interest you:

    • You could use <picture> with just one <source>:
    <picture>
<source media="(min-width: 600px)" srcset="images/desktop.jpg">
<img src="images/mobile.jpg" alt="Perfume">
</picture>
    • It is better to capitalize 'Perfume' with CSS (text-transform: uppercase) and not in HTML, since some screen readers will read out uppercased text as individual letters. It's different when something is meant to be capitalized (e.g. an acronym) than when it's done just for styling purposes.
    • It would be better to use <p> instead of <h2> for the description paragraph, and <button> for 'Add to Cart' since it is an interactive element.
    • Consider designing with the Mobile First approach (which means designing for mobile first and then for desktop or any other device) as it is widely considered best practice.

    I hope it’s useful : )

    Regards,

    Marked as helpful
  • Jose Jimmy•290
    @jose-jimmy

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • The code looks pretty clean and well structured, but I would like to add that you might find accessibility issues when you do not place the contents inside <main></main> tag so I would suggest you to wrap all the contents of the <body> tag inside the <main> tag.

    Other than that I find your solution pretty amazing keep grinding

    • If you have any questions or need further clarification, you can always check out my submissions and/or feel free to reach out to me.

    I hope you find this helpful 😄 happy coding!

    Marked as helpful

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