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

Mobile friendly solution using CSS flexbox

#styled-components
Anthony Nanfito• 120

@ananfito

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


Do you have any suggestions for making the code cleaner? Any best practices I need to adopt?

Community feedback

Thiago Morais• 420

@thirraz

Posted

firstly, congratulations on completing this challenge!

I have 2 tips:

  1. I think it's better uses width: 100vh on the body tag, to adjust at any screen size, but if you prefer to use the min and max width it's okay too.

  2. try to use semantic HTML (<article>, <main>, <section>, etc). Here a link to you: Semantic HTML

sorry if my English is bad =)

Marked as helpful

1

Anthony Nanfito• 120

@ananfito

Posted

@thirraz Thanks so much for the tip about the width. I'm not quite sure why that didn't occur to me before, but I'm grateful you pointed it out to me.

1
Mike Hayden• 1,005

@mickyginger

Posted

Hi Antony!

Firstly, this looks great, so well done!

If you look at the accessibility report above you should see some improvements that you should consider best practice. You can click on the Learn more link for more info and directions on how to resolve these issues.

Probably most important is to consider semantic markup when structuring your HTML.

I would also favour using an absolute path eg: /images/image-qr-code.png over a relative path eg: ./images/image-qr-code.png for your image links. This can be a bit tricky when developing locally if you load your index.html file directly into the browser, rather than using a webserver and running you site on localhost.

In any case I would recommend serving your files using a webserver on localhost in your development environment. Check out this StackOverflow post for more info on running your project on localhost.

Hope that was helpful!

Marked as helpful

1

Anthony Nanfito• 120

@ananfito

Posted

@mickyginger Thanks so much for the tips! I appreciate the swiftness and the specificity of your response.

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