Skip to content
Submitted 7 months ago

Frontend QR navigator using HTML and CSS

Antonio•100
@tonyiboy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I manged to build this site in 15 min.There is probably alot of things that can be done much more better but I need to have more knowledge to be able to see what are things that I can improve on this challenge

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

I didn't understand how to set up page should I put specific width or height In the end I used dev tools to be able to see how it would be on big screens and how it looks on small screen and from design looks pretty correct.

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

Any kind of comment how to do or improve is great I love to learn alot about coding!

Community feedback

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin.
    • We don't need to use margin to center the component both horizontally & vertically.
    • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.
    body {
  justify-content-center;
  align-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .card {
  margin: auto;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    1
    Antonio•100
    @tonyiboyPosted 7 months ago

    @0xabdulkhalid thank you for your reply! I know that I could use justify-content and align items because I use flex on body and my card became flex items.I wanted to achieve same thing with 1 line of the code and not 2 lines.If you have any comment why would that margin center be bad please feel free to tell me I like to learn new things and new tricks.Thank you

    0

Please log in to post a comment

Log in with GitHub

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