product-preview-card-component-main

Solution retrospective
Feedbacks are welcomed
Please log in to post a comment
Log in with GitHubCommunity feedback
- @NehalSahu8055
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
- To
properly center the card
- USING FLEXBOX
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }
- Use Semantics for the proper design of your code.
<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>
- It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.
<picture> <source media="(min-width:800px)" srcset="yourimage.jpg"> <img src="yourimage.jpg" alt="description"> </picture>
-
For
non-decorative images
give meaningful and descriptive alt likealt= "Gabrielle Chanel Perfume bottle surrounded by leaves."
. -
Use semantic element for strike-through
<s>$169.99</s>
-
If you want to dive into
accessibility
for this project check this link
I hope you find this helpful.
Happy coding😄
Marked as helpful - To
- @eniskrt
Good job. I cannot look out your code for an github error. But to get the card to middle of the page, you must 100vh in your parent element. And displat:flex, align-items:center, justify-content:center. So the card will be in the middle of the page.
Marked as helpful - @shahriarhossain7860
I need a psd file to solve your challenge. Would you please provide me the psd file?
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