qr-code-component using html and css

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change the first <div> into a <main>. NB: It's common practice to use classes instead of IDs. You can give it two classes like this: <main class="container round-edge">.

  • .attribution should be a <footer>, and its text must be wrapped in a <p>. Remove the <br>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • On the body, remove the width - it is 100% wide by default. Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Add justify-content: center and align-items: center to center the card horizontally and vertically.

  • max-width on the card must be in rem - around 20rem works fine.

  • Now that the card is centered using Flexbox, remove margin: auto.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove the width on the image.

  • Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.

  Marked as helpful

  1

  ---

  

  Mawulolo Ayivor•30

  @LolontorPosted 10 months ago

  @Islandstone89 Thank you for the feedback. I appreciate it. Also, how do I position the footer at the end of my page.

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  @Lolontor I would add gap: 2rem on the body, this creates some space between the card and the footer.

  1

  

  Mawulolo Ayivor•30

  @LolontorPosted 10 months ago

  @Islandstone89 Thanks once agian.

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  @Lolontor Happy to help!

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  CSS 🎨:

  • The width: 100% property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Mawulolo Ayivor•30

  @LolontorPosted 10 months ago

  @MelvinAguilar Thank you for your review and suggestion. I really appreciate your feedback.

  0