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 Challenge

@Emaye96

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


Very very new to this. Actually got some trouble with getting the external font

Community feedback

Keytron 270

@Dev-Tron

Posted

Your solution is actually really good sir. The only thing I would do to make it better is to make it more responsive. Have you researched media queries? You could set one on your box div to control the width at different screen sizes. I would also suggest a margin-top value using percentages which will help you control the vertical alignment of that div. You can do all this using media queries. Remember it's best to start your project from a mobile-first approach. It will help you a lot in the long run. I also see that you have a few issues with accessibility. You can fix those by separating your content with <header> <nav> <main> <footer> tags.

Marked as helpful

1
Gustavo 200

@Gushigustavo

Posted

Hello Mark-Anthony Pierre, for you to get the external font, just open the style.md file that is in the project folder, there will be the link to the font, you can import it to your css file, to be clearer, take a look at my project. Let's code :))

1

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