Skip to content
Submitted about 1 year ago

Product-card-component using html and css.

Kashyxp-patel•70
@Kashyxp-patel
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

The css is not that organised. If you have any good resources to learn responsive design ping me up....

Community feedback

  • Rafael Dias•910
    @rafaeldgeoPosted about 1 year ago

    Hi! Kashyxp-patel Congratulation! You made a good job!

    My suggestions:

    • I saw that you're worried about CSS organization. You could use the Methodology CSS BEM. It can look like complicated in begin, but I believe that you will be learn practicing.
    • I saw you didn't make the mobile view, you could use the media queries CSS. It's very important you learn this resource, because a lot of challenges will need it. Search by media queries in W3Schools.

    I hope to have help you!

    Marked as helpful
    1
    Kashyxp-patel•70
    @Kashyxp-patelPosted about 1 year ago

    @rafaeldgeo Thanks for the feedback bro, much appreciated.

    0
  • _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    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 like alt= "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😄

    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