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

Full Responsive preview card

@36atharva

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Radek 490

@Radexman

Posted

Hey there! I’ve checked your code and if you don’t mind I will give you some feedback :)

First of all the class naming convention, we typically want to name our id’s and classes in a semantic way. Don’t get me wrong, “right” and “left” are fine but when other dev will be reading our code he might have a little headache, it is good practice to name our classes in short self-explanatory way eg. left - “img-box”, right - “product-description”. There is no need to add a class to our button if we have only one button on our page, just use the button selector.

In your code h2 appears before h1, when using headings we follow a so called hierarchy, we want to start from h1and move our way to h6 and if the styling is not how we imagined it, just change it in css. Here is some good resource on that:

https://www.contentkingapp.com/academy/headings/

Hope you find it somewhat useful, good luck on next projects!

Happy Coding!

Marked as helpful

0

@36atharva

Posted

@Radexman Thankyou for your suggestions! Will remember these in future :)

0
MURRAY122 280

@MURRAY122

Posted

Hi Atharva Hinge,

Congrats on your first solution! I had a quick look at the code and think this might help.

  • Use main tag to indicate a landmark. This helps with the overall structure of the HTML and improves accessibility.
<body>
<main></main>
<footer></footer>
</body>
  • You should also think about your heading levels, these should go in order from h1 to h6.
  • Your alt text for the image shouldn't contain the words 'picture', 'photo' or 'image'. Perhaps just the name of the parfum and the word bottle would do.

Hope these might help for you.

Marked as helpful

0

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