Product landing card using CSS grid

Community feedback

• 

  Muhammadh•1,140

  @Mr-jaw

  Posted over 2 years ago

  Hello 👋

  Well done on completing it

  some tips to improve your code

  HTML 📰

  • for headings avoid using <p> tags. In <p id="heading-small">Perfume</p> replace the <p> tag with a <h1> , and replace <h1>tag in <h1>Gabrielle Essence Eau De Parfum</h1> with a <h2> tag. So you will have a top-level heading which is <h1> and a second-level heading <h2> which will greatly improve accessibility.

  • avoid using <p> tag to display short texts(i.e <p id="price1">$149.99</p> and <p id="price2">$169.99</p>). Since the <p> tag is used to display descriptive text. Rather use <em>, <strong> or <small> tags. This will also improve accessibility.

  the above-mentioned are semantic HTML and accessibility issues

  Learn more about Semantic HTML here

  Learn more about Accessibility here

  CSS 🌈

  • It is always considered good practice to use CSS custom variables. They will make life a lot easier as a web developer. learn more about it here

  Other than that all looks great 🔥, you have used relative units which is great for responsiveness, and used a better approach to change images on mobile and desktop view

  I hope you find this helpful 😄

  KEEP IT UP

  01

  Marked as helpful
• 

  aykutminikli•280

  @aykutminikli

  Posted over 2 years ago

  Hi, congratz on completing the challenge.

  The thing with your responsive problem is from what i see you made your media like this @media only screen and (min-width: 1440px). This makes your container to stay like in mobile version until the screen reaches 1440px. You should try lower widths like 500px or 600px.

  What is mean is @media only screen and (min-width: 600px) or @media only screen and (min-width: 500px) would be a better choice for breakpoints in this project.

  Hope this was helpful.

  01

  Marked as helpful