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

Website with QRCode using CSS Flex

mirshod455β€’ 10

@mirshod455

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


Could you recommend me the right way of structurize my css code.

Community feedback

John Mirageβ€’ 1,590

@john-mirage

Posted

Hello,

I recommend you the BEM css methodology to organize your code.

0
Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT πŸ“Έ:

  • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
  • The alt with qr_code is not even explaining for what the QR image need to be used.
  • So update the alt with meaningful text which explains like QR code to frontendmentor.io
  • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

0

@Oluwalolope

Posted

Hey, Great work completing the challenge😊. I have a few suggestions

  • Don't use Pixels for Font-Sizing: Pixels are absolute values. They do not vary, if a visually impaired person is trying to go through your site they may need to increase the font size in their browser settings, but that is where the problem comes in. The reader won't be able to increase the font size of the text if it is in pixel. That will affect the user experience. It is best to use rem instead of px for fonts. With rem you give the power over to the user to adjust the sizing of texts to make it readable. By default 1px = 0.0625rem. In your code I noticed you used 15px for the paragraph. Instead use 15 * 0.0625= 0.9375rem

  • Your CSS Code is clean but I'll advise you to add comments to your code to make it easier to understand what each code is for

  • Then it is often considered best practice to use BEM notation for CSS sheets : To find out more on BEM check this site BEM 101

Once again Congratulations on completing the challenge. I hope you found this helpful πŸ˜„

Happy codingπŸ‘¨β€πŸ’»

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