Skip to content
Submitted 12 months ago

responsive , flexbox.

Yahia-kilany•90
@Yahia-kilany
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

the margins were a bit tricky and I had to do a lot of trial and error to be as close as possible to the desgin. but I think I did well

What specific areas of your project would you like help with?

the code is not clean and i am sure there are more efficient ways to improve it

Code

Please log in to post a comment

Log in

Community feedback

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing the project. It looks great and is responsive. Looks just like the design in desktop and mobile version.

    The code is well organized and clean--but not DRY. There is something called the DRY principle (Don't Repeat Yourself). Anytime you see yourself repeating the same code in multiple places, it is time to pull it out and create a utility class. For example: both .price and .discounted are styled display: block; this is redundant in an h1, and unnecessary for the span. Similarly, .order is styled both border: 0px and border: none which is redundant.

    You could create two utility classes to save yourself some code.

          .flex-c {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .accent {
        font-family: "Fraunces";
        font-weight: 700;
      }

    You can add "flex-c" to body, .container, and .order-btn (change .order-btn to flex-c). Then add accent to .title and .price. Now you're clean and DRY. Hope this helps

    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