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

Frontend Mentor - QR code component

Omar Nasserβ€’ 100

@Abn0Masr

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

Jeroen Leijnseβ€’ 1,420

@jrleijnse

Posted

Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML πŸ“„:

  • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

  • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px or other units. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? πŸ“˜

  • To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries πŸ“˜

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! πŸ˜ƒ

Marked as helpful

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