Submitted almost 3 years ago

Full Responsive preview card

Atharva Hinge•80

@36atharva

A solution to the Product preview card component challenge

Preview Code

Code

Please log in to post a comment

Community feedback

Radek•490
@Radexman
Posted almost 3 years ago
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
MURRAY122•280
@MURRAY122
Posted almost 3 years ago
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

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