Frontend Mentor - QR code component

Community feedback

• 

  Jeroen Leijnse•1,420

  @jrleijnsePosted over 1 year ago

  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