Skip to content
Submitted about 1 year ago

product-preview-card-component-main desktop only

CharisLai•20
@CharisLai
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

  • What difficulties did you encounter during the project construction process?

Mobile design is not yet complete

  • What parts of the code are you unsure about?

Requires more practice about mobile RWD

  • Do you have any questions about best practices?

my design process

  1. for desktop
  2. for mobile devices
  3. try combining step 1 and step 2

(I think it will take a long time to finish everything.

How can I streamline implementation time? just try it?

thanks for read)

Community feedback

  • Praise Immanuel•250
    @PraiseImmanuelPosted about 1 year ago

    Hello Charis 👋. Good job on completing the challenge ! I just have a few recommendations:

    -In order to create an amazing site that is very responsive and compactible across devices. You might have to take the mobile-first approach. Visit this url to learn more and I am always available to answer your questions. Responsive Design at w3schools

    -In order to make your implementation of the UI screens more similar to the UI design. Try to pay more attention to details and change your size ratios they seem a bit large especially the font sizes. Instead of using the value you use for the font size try to use values in px or rem. The reason is that every browser render large, normal, bold differently

    p {
    letter-spacing: 8px;
    font-weight: 900;
    font-size: large;
}

h2 {
    line-height: 1.8;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: normal;
}

    But I will like to commend your efforts. Keep coding!

    Marked as helpful
    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