Skip to content
Submitted 4 months ago

qr code component

Manpreet Singh•190
@Manpreet-01
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm working on a project where I need to ensure my CSS design closely matches the actual design specifications. I'm particularly struggling with selecting the appropriate font sizes, widths, heights, and color values. I want the design to look pixel-perfect. Here are some specific questions I have:

  1. Font Sizes: What are the best practices for choosing font sizes to ensure text looks consistent and visually appealing? For example, should I use 15px, 16px, or 18px for body text?

  2. Widths and Heights: How do I determine the optimal widths and heights for different elements to ensure the layout matches the design specifications? Are there any standard guidelines or tools I should use?

  3. Color Values: How do I select and apply color values to match the design accurately? Are there any tips for ensuring color consistency across different devices and screens?

Any advice or recommendations on how to choose and apply these values to achieve a pixel-perfect design would be greatly appreciated!

Community feedback

  • KS-Coder24•50
    @KS-Coder24Posted 4 months ago

    The HTML code was not available in the GitHub repository; only the README.md file was accessible. While the accessibility and layout are generally effective, the dimensions (width, height, and font sizes) could be improved by using the Figma designs for more precise measurements."

    0
  • Legendsusama•160
    @LegendsusamaPosted 4 months ago

    I think i can help you in some aspect . I personally use colorzila extension you can search about it on google for fetching or getting the color details if i dont know about the color .

    And the second is if you want to create website that should be Pixel perfect like everything matches the required design you can use this extension. PerfectPixel by WellDoneCode (pixel perfect). this is available on chrome web browser i think.

    As we talk about front end mentor chalenges . the color and font details is given in readme.md file .

    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