Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Challenge

@YunggBladez

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@SirTebz

Posted

The solution effectively uses semantic HTML and demonstrates a good understanding of front-end principles. The layout is mostly responsive and meets the requirements. The code is well-structured and readable, enhancing reusability. From here on this is a great foundation for more challenging projects

Marked as helpful

0

@narmingeybullayeva

Posted

Overall, the project has some notable discrepancies when compared to the provided design:

Measurements and Layout: The dimensions of the project significantly deviate from those specified in the design. Although the project maintains a general resemblance to the design, the differences in measurements affect the overall alignment and presentation.

Font Usage: The fonts used in the project do not match the fonts specified in the design. This discrepancy impacts the visual consistency and alignment with the original design.

Font Sizes: The font sizes for both headings and content do not align with the measurements provided in the design. This affects the hierarchy and readability of the text.

To enhance the alignment with the design, I recommend revisiting the design specifications to ensure that dimensions, font choices, and font sizes are accurately implemented.

Marked as helpful

0

@YunggBladez

Posted

@narmingeybullayeva Hey bro, thanks for the amazing feedback. I did notice the line height issue for the main paragraph, but it was as soon as I uploaded so I didn't bother. I completely forgot to use his colors for the fonts and I have no idea how I had the wrong font. Also fixed the padding issues. For text sizing I only found 15px for body but the title was clearly bigger so I just messed around and found the most suitable font size for the title. Again not sure how so many errors slipped past me haha. Id appreciate if you can take a very quick 2nd glance. Thanks again!

0

@narmingeybullayeva

Posted

@YunggBladez Of course, with great pleasure. You do not need to give flex-direction: column to the body or the div with the main class. You just need to center this div. For this, it is enough to give display: flex; justify-content: center; align-items: center to the main div as you have written in your code. Just remove flex-direction: column. You're Welcome!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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