Skip to content
Submitted over 2 years ago

Product Review Card (desktop view only)

kingchoffy•80
@kingchoffy
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.
    • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.
    • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <picture> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    Using grid layout to center:

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.container {
    text-align: left;
    /* margin: 0 auto; */
    /* padding: 150px 0; */
    display: flex;
    width: 400px;
}

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    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