VS Code, Git Hub, Git Hub Pages, HTML, CSS

Community feedback

• 

  Yash•130

  @yashviradiaPosted about 2 years ago

  Hi VaporDusk!

  Kudos for completing this project! 🥳

  Some points to be considered:

  1. Try to avoid all the warnings that you are getting in accessibility report in order to make the webpage more accessible.
  2. Subtle details like shadowing and slightly lightening font color will help you enhancing user experience.

  Wish you good luck and have fun!

  Marked as helpful

  1
• 

  P

  Andreas Remdt•950

  @andreasremdtPosted about 2 years ago

  Hey @VaporDusk,

  Congrats on finishing this challenge! Overall, it's pretty good, your implementation looks very close to the design and works well in browsers. I can give you a couple of suggestions to further improve your code:

  • Make sure to use semantic HTML elements. Since this challenge is really small, there's no need for header, nav, or similar, but you should wrap your entire structure inside a main element to mark it as the main landmark to browsers and screen readers. You can replace <div class"container"> with <main class="container">.
  • You've used an h2 for the first and only heading, but HTML headings should always start at the highest order (h1) and descend down until h6 is reached. Since this challenge only has a single heading, assign it to an h1 to further increase your semantics.
  • Instead of wrapping your entire page in .container, you can use the body to set the background color and alignment.

  body {
    background-color: hsl(212, 45%, 89%);
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  

  • If you align your content with the above method, there's no need for a media query. The card is already small enough to fit on most mobile devices.
  • You've used this selector to set the font family: .qr-code h2, .qr-code p. In this challenge, but also in general, it's much easier to set the font family inside the body or html selector, so that it's applied globally and you don't have to target each typography element specifically. Right now, if you were to add another element like a ul, you'd need to update your selector, which becomes annoying quickly.

  I hope you found these tips helpful, let me know if you have any questions :-)

  Marked as helpful

  1