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

Amber 10

@amb179

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


How can I make the code more responsive?

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Amber, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers can announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

A good practice to make an element break a line is to use a smaller max-width on it, to make it jump to the next line!

To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header:

<h1>Improve your front-end by building projects</h1>

The rest is great!

I hope it helps... 👍

Marked as helpful

0
Mzu Soci 170

@Mzu-Soci

Posted

Hello Amber

To make your site more responsive I would suggest you take a look at Kevin Powell's course on responsive web design, here is a link - https://courses.kevinpowell.co/conquering-responsive-layouts. It's free.

His approach suggests getting the simple items like max-width and max- heights correct.

Marked as 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