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

QRCode Solution using HTML and CSS

@AditiChandra18

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


The front-end for desktop layout was manageable to design but I am still not sure how to create it for mobile through the same code. Will really like some help with that!!

Community feedback

kirty 380

@kirtymeena

Posted

Hi Aditi, Good work with this challenge

Your div is not in the center, You can use flexbox to center the div

you can read about flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

you can try this extension called PerfectPixel it will help you create your design pixel perfect.

Keep coding 👍.

Marked as helpful

0
T
Chamu 13,110

@ChamuMutezva

Posted

Greetings Aditi. Congratulations for taking your first challenge.

  • the challenges come with a skeleton starter file that you can use. In the head of the html, the following is missing <meta name="viewport" content="width=device-width, initial-scale=1.0">. Research on it to found out why it should always be included.
  • use semantic elements such as main , where possible instead of divs.

Marked as helpful

0

@AditiChandra18

Posted

@ChamuMutezva Thank you :)

0

@AditiChandra18

Posted

Thank you so much for this , I really appreciate it :)

1

@Julian17xd

Posted

Hi Aditi, I leave you the link to my solved challenge so you can look at it and improve a little. I clarify that it is not the best solution but I hope it can help you in something. https://www.frontendmentor.io/solutions/qr-code-component-pAdliHubr

if the link doesn't work you can go to my profile and look for the solved challenge :)

0

@AditiChandra18

Posted

@Julian17xd Thank you Julian for the link, I will try mailing it better :)

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