Responsive QR Code Page using HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Adeola Ganiu,

  Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution:

  • You did great to make the Qr accessible for for visually impaired users.

  • The link wrapping the Qr image should either have Sr-only text, an aria-labelor alternate text that indicates where the link navigate the user(not describes the image).

  • width: 270px an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.

  • height: 400px It's not recommended to set height to component, let the content of the component define the height.

  • Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  @PhoenixDev22 Thanks. I'll correct that.

  1
• 

  Francesco•270

  @FraCav99Posted about 2 years ago

  Hi Adeola, good job on that! :D

  Just few things.

  Don't use px to set font-size. Instead use rem units, they are great since they adapt better to the font-size the user will set in his/her browser settings.

  Then, change your background-color with the one given inside style-guide.md which is hsl(212, 45%, 89%).

  Beside those things, good job! Keep coding! :D

  Marked as helpful

  0

  ---

  

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  @FraCav99 Noted. Thanks.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Deolabest, Congratulations on completing this challenge!

  From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The background-color in this case is background-color: #D5E1EF

  2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  3.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  @correlucas

  Thanks. I'll correct that.

  0