Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

VaporDusk 230

@VaporDusk

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can i improve this project?

Community feedback

Yash 130

@yashviradia

Posted

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

@andreasremdt

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord