Responsive Product Preview Card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

  • It is generally not recommended to use multiple <h1> tags on a single web page because the <h1> tag is used to mark the most important heading on a web page and it is considered the top-level heading in the document outline. It should be used only once on the page, typically for the title or main heading of the page.

    You can read more about this here 📘.

  • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use <picture> and <img> tags to add the image. Use the background-image property only for decorative images that do not add any information to the page.

  • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  CSS 🎨:

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    body {
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
    
    .container {
        /* position: absolute; */
        /* top: 0; */
        /* right: 0; */
        /* bottom: 0; */
        /* left: 0; */
        /* margin: auto; */
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 600px;
        /* height: 450px; */
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
    }
    

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

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

  Happy coding!

  2

  ---

  

  EmanueleMicali•60

  @EmanueleMicaliPosted almost 2 years ago

  @MelvinAguilar thank you very much for this feedback!

  body { min-height: 100vh; display: grid; place-content: center; } is much better than the solution I was using! Also, yes, I got the bad habit of overusing ID instead of classes because I recently was practicing DOM. regarding <picture> it is something I saw while researching how to change the source image for responsiveness, but I did not study it enough to feel confident using it.

  This was great, thank you again!

  0