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

QR Code

@petronela88

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@kanuos

Posted

Hi @petronela88, congratulations on your first submission. Your solution looks decent however there's room for improvement. Here's some of the things you should fix and regenerate a new screenshot -

  • Convert the div.container to main.container - that will resolve your landmark issues
  • Add a lang="en" attribute to the HTML
  • Convert the h3 tag to h1
  • Hide the footer and it's contents as they are not there in the design. Hide them using CSS, so that they are available for the screen-readers to read. Look up screen reader classes to do so. Here's a link if you want to read more about it.
  • The entire heading and text should have text-align: center as per the design.
  • Color of the h3 tag in your code looks a bit darker than the design
  • Reduce the padding/margin below the h3

Hope this helps.

Hope to see more of your submissions soon. Happy coding :)

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