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 Component

@Mennatallah-Hisham

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, Frontend Mentor community. This is my solution for the Qr-Code Component challenge

Today marks the beginning of the Newbie Challenge, a unique opportunity for me to offer solutions for HTML/CSS challenges specifically designed for newcomers. Throughout this challenge, I aim to provide comprehensive guidance to fellow developers by adhering to industry best practices. By focusing on key areas such as

  • Semantic HTML
  • Clean web page structure
  • CSS enhancements
  • Accessibility
  • Performance Optimization,

I aim to address common mistakes observed in the challenges submitted by other participants. Through this initiative, I hope to not only solve newbie-level projects but also share valuable insights and tips to aid in their learning journey.

In this challenge, I focused on reducing the load time of Google fonts to improve page performance by 880ms. you can check this article

This solution is tested by

if you want me to review your code, just comment (the challenge name + the areas you want me to focus on) and I will provide a review as soon as possible.

Community feedback

OmarRefaee 200

@OmarRefaee

Posted

Hi Mennatallah

Great Work you did amazing

Suggestion:

  • Use Github Pages as a hosting and add the URL in Github README file or in Github "About" section
0
girldocode 260

@girldocode

Posted

Thanks for sharing great article. It is helpful resource to know about web accessibility. Your font CSS is missing color and size. Did you notice?

0

@Mennatallah-Hisham

Posted

hi @girldocode

  • I intentionally used hsl(0, 0%, 27%) instead of the given color for better color contrast it's always a good practice to make sure that the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text
  • also used bigger font sizes for better readability.
1

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