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 component

@OrnellaSablic

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


What are you most proud of, and what would you do differently next time?

This challenge allowed me to review basic notions about html and css.

What challenges did you encounter, and how did you overcome them?

I had a problem centering the element but I was able to solve it using flexbox

What specific areas of your project would you like help with?

Any suggestion is welcome!

Community feedback

Tharun Raj 1,250

@Code-Beaker

Posted

Hi there, good job on completing this challenge... 🎉 Let me point out some areas where you can improve your code and solution.

  • Use proper semantic tags in your HTML to make your site more accessible. For example, the credits should be wrapped inside a footer tag and not a span.
  • The page should contain an h1(level-one heading), and don't be scared to use it because of its large size. It can be styled using CSS to match with the design.
  • Instead of height: 100vh, use min-height: 100vh. Using the first one will limit the height of the body to 100vh and it will not look properly on taller screens.
  • Use rem to define properties such as border-radius, font-size, etc. Also, using px to define font-size is not a good idea. [Here's why)[https://fedmentor.dev/posts/font-size-px/].

Overall, you've done a good job. There is always areas for improvement. You can find articles and videos online that will help you build better websites.

I hope that does help you improve your solution. Happy coding!

0

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