Skip to content
Submitted 12 months ago

Modern & Sleek UI product review component

Kenneth Yashim•50
@kzamani44
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey guys I just completed my 3rd project. Please feel free to check it and send your feedback. Thanks

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted 12 months ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Don't use position for centering the card as it will not dynamically center the card remove this and use either flex or grid for the same
    .container {
    /* position: relative; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-40%,40%); */
}
    • 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 like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    0
    Kenneth Yashim•50
    @kzamani44Posted 12 months ago

    Thanks so much @NehalSahu8055 I'll work on them. I really appreciate your feedback.

    1
    Kenneth Yashim•50
    @kzamani44Posted 12 months ago

    Hello @NehalSahu8055,

    I have reviewed my code and made the necessary changes you highlighted.

    Any ideas on how to resolve landmark issues?

    I understand the role of Landmarks and I refactored all my previous code for past solutions and the warning and error reports were cleared but I just cant seem to fix it for this challenge.

    0
    _nehal💎•6,710
    @NehalSahu8055Posted 12 months ago
    <body>
<main>... main content goes here ...</main>
</body>

    Move you main section inside main

    Hope it helps

    0

Please log in to post a comment

Log in with GitHub

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