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

my Qr code components

@Jordananibe

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


Any comment is welcome

Community feedback

@Bishalsnghd07

Posted

Hi @Jordananibe

Congrats for completing this challenge 🎉

There is a lot of area, you have to be work on:

  • First you have to work on semantic HTML, you did not follow the Heading levels, Always follow this path 👉 h1 h2 h3 h4 h5 & h6. Never skip any one, all should be in ascending. H1 should be used only use at a time in your web page.

  • Second, CSS structurally not set. Never ever use width and height in your main landmark, it will break your full size of layout, prevent your layout to perform better. It is negligible in this challenge, but when you work in larger challenge ahead, this issue will create disaster result.

  • Third, I will recommend to use lighthouse tool, which is there in your web browser, you just have to inspect and check your performance of your web page just by clicking on lighthouse testing. It will also test your Best Practices, Accessibility and SEO.

Hope this suggestion will help you!

Once, again Welcome to Frontend Mentor, wishing you a very joyful journey ahead and happy coding❤️

1
youssef 460

@Youssef5107

Posted

Hello, Jordananibe

Congratulations on completing "Qr code components" challenge . I have some advices to help you improving it , add these styles on the body: display:flex; (to use flex properties) height: 100vh; (to make sure that the body take the whole page height) align-items: centre (to center vertically ) Justify-content:center; (to center horizontally) margin is not a good way to centre your div as it fix its position so you can delete the style{ margin-left: 38%; margin-right: 50%; margin-top: 200px; } from your "container div and use better the flex properties

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