Skip to content
Submitted over 1 year ago

Newbie @ HTML & CSS

Michaël•70
@MichaelHensel1980
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 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

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    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
    1
    Michaël•70
    @MichaelHensel1980Posted over 1 year ago

    @fernandolapaz Thanks for leaving a remark and for your tips. All four make a lot of sense and I will keep them in mind. Definitely useful.

    1
  • Jose Jimmy•290
    @jose-jimmyPosted over 1 year ago

    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
    1
    Michaël•70
    @MichaelHensel1980Posted over 1 year ago

    @jose-jimmy Thank you for your response. Took your advise and looked into it, I understand (a bit) now that it has to do with the semantics. Already used it in my second challenge. Very helpful.

    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