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

VS code as the IDE

@CodeGod36

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

Travolgi 🍕 31,420

@denielden

Posted

Hello Juwon, You have done a good work! 😁

Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • not use void p tag to make space but use margin property
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of text
  • remove all margin from container class and body
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px or % use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

1

@CodeGod36

Posted

@denielden Hi, i tried aligning the card using flexbox but i wasn't able to do so. Can you give more tips in how i can do so please. Thank You.

1
Travolgi 🍕 31,420

@denielden

Posted

@CodeGod36 You are welcome and keep it up :)

It's very simple in the link of my comment there is a very detailed and complete guide... anyway put these properties in the body:

display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
0

@ZenitsuAg

Posted

Hello Juwon, how are you, you have done amazing work

@denielden has said it all, I'll just like to add a few things.

  • It's much better to create a different CSS file for the styling.
  • For the text, I see that you're trying to get the font by add src property, that's not how it works. For you to get the desired font, you have to import it from Google fonts. In this case it would be @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); if you add this to your CSS file or within the style tag, and in the body tag add font-family: "Outfit", Serif ; that's all.
  • For your Img tag, it's best to add an alt value.
  • And I don't think that you can add more than one value for the font-weight property.
1

@CodeGod36

Posted

@ZenitsuAg Thank you so much ... I shall work it right away.

0

@CodeGod36

Posted

Thanks for the tips. It was helpful.

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