Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product card using CSS and HTML

Samriddh Singhβ€’ 100

@saketbyte

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did not know how to give structure, or where to start. I found it difficult as I was am a beginner and I did not know about so many properties that I could adjust to achieve a certain look or appearance. I took help from youtube to learn. I hope to improve gradually. Hence taking help from internet and learning by building is my approach.

Community feedback

@garcialexco

Posted

Hello! Great job completing the challenge! πŸ”₯

You did excellent for claiming to be a beginner! There's a couple parts of your code that I might be able to help with:

  • Excellent use of comments and BEM as your naming structure, very easy to read and understand.
  • Instead of using div, try to use the most relevant semantic HTML. This helps screen readers and search engines make the most sense out of your website. Here is an article on the topic: https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i
  • In your CSS, be careful with lines 32 to 70 and the Typography tweaks. Percentage based heights should already be usable on the website, since it's just a percentage of the parent element when you call it.

Hope this helps, and keep up the great work! πŸ‘ Happy Coding!

Marked as helpful

0

Samriddh Singhβ€’ 100

@saketbyte

Posted

@garcialexco OMG! Thank you soooo much for the in-depth review. I shall look into the points you have mentioned. This comment motivated me a lot to continue my learning. I will correct the shortcomings in my next attempt. Thanks again!!

1

@garcialexco

Posted

@saketbyte Of course! Keep up the great work, it will keep making more sense! Also, I meant to say when you're writing resets and whatnot, you can get away with just:

html {
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: inherit;
}

This will help keep your file data low πŸ‘

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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