QR Code Component with HTML+CSS

Community feedback

• 

  Andy•520

  @AndyAshleyPosted over 2 years ago

  Awesome job completing the challenge! It looks great. If you find yourself writing things multiple times you can use custom utility classes like:

  .font-primary { color: #FFF; }

  Then anytime you want something that font color fast just add it to the class.

  <h1 class="font-primary"> My Heading </h1>

  Also you can use :root {} to set up variables for everything from colors to numbers.

  :root { --font-primary: #FFF; }

  then call it with var().

  .div p { color: var(--font-primary); }

  that way you can change your entire primary color if you wanted with one line in the root.

  for the HTML and Accessibility errors, simply wrap your content inside the body in a <main> landmark tag, and make sure you use the alt attribute on images. This gives screen readers something to read, and displays text if the image fails to load. Happy Coding!

  Marked as helpful

  1

  ---

  

  Phi•10

  @phiphphiPosted over 2 years ago

  @AndyAshley I appreciate the feedback! These CSS properties should make things a lot nicer for future development, and I'll take a look at those HTML and accessibility errors!

  0
• 

  Ryan Barnes•250

  @barnesPosted over 2 years ago

  Looks great. In terms of formatting CSS, I'd opt for using classes over IDs generally, though IDs are valid. The general best practice is using a class if your CSS may apply to more than one element, and IDs if the CSS is unique to a single element. In this case, IDs meet that criteria, but if the project expanded to include multiple similar cards, you'd opt for classes. Take a look at the generated report as well to catch those tricky / hard to miss accessibility and HTML validation issues. (Don't forget those image alt texts!)

  Marked as helpful

  1

  ---

  

  Phi•10

  @phiphphiPosted over 2 years ago

  @barnes Thanks for the tips! I usually stick with classes but figured I'd use IDs for this one since it was so small. It's definitely a good idea to opt for classes for future development, so I'll make sure to do that. Thanks for reminding me of the accessibility issues as well, I'll catch those!

  0