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 card

Berndoe 10

@Berndoe

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


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

I'm most proud of being able to figure out what tags I needed to implement the display. Next time I would find what I need first before starting to write any code.

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

I wasn't sure about the background. Initially I thought it was a card also but I overcame that by constantly looking at the image at different sizes and making iterations to the design

Community feedback

Adriano 36,690

@AdrianoEscarabote

Posted

Hi Berndoe, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

Since this project is only based on a single page component, there is no need for a h1 tag. It's always a good idea to prevent accessibility errors, so I believe it would be beneficial for you to add a "h1" in this component. Don't worry if you forget about "h1," though; it's a good practice for when you are developing larger sites.

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

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 may 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.

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Marked as helpful

0

Berndoe 10

@Berndoe

Posted

@AdrianoEscarabote thank you for your feedback. Is using <br> only bad for in between texts only? Also, can you suggest an alternative to achieve the same effect.

0
Adriano 36,690

@AdrianoEscarabote

Posted

@Berndoe I prefer to use max-width and set a maximum width for my element

0

@YosefHayim

Posted

Good work, as long as it looks 95% you did good job :)

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