qr-code-component-main

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @SoulOfMo, some suggestions to improve you code:

  • the alt tag in your images, need to be more descriptive. It needs to tell the user where it leads to add. Currently, it's meaningless to users that use screenreader.

  • Your attribution needs to be wrapped in footer element.

  • Your CSS Resets are really bare, you want to add more to them. Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

  More Info:

  https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

  https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  Marked as helpful

  0

  ---

  

  Morin Sultan•310

  @SoulOfMoPosted about 2 years ago

  @vcarames Thanks for the feedback. All noted

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @SoulOfMo, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! 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.Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  2.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  3.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.

  4.I saw that for some properties you’ve used rem and for others px. In this case, it is better to use only one kind of unit to have a better organization for your code. relative units as rem or em have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

  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!

  Marked as helpful

  0

  ---

  

  Morin Sultan•310

  @SoulOfMoPosted about 2 years ago

  @correlucas Thank you. All corrections noted. I will implement them in my other project.

  0