Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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 user interface using basic html n css

Hiya 30

@Hiya-Jakhar

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


  1. What was the most difficult part of the challenge and how did you handle it?
  2. How much time did this practice challenge take you to complete and hand in the solutions?

Community feedback

Adriano 33,990

@AdrianoEscarabote

Posted

Hi Hiya, 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 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.

Prefer to use max-width for line wrapping!

avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

The rest is great!

I hope it helps... 👍

0

Hiya 30

@Hiya-Jakhar

Posted

@AdrianoEscarabote thank you so much for the valuable feedback. I am a totally new to front-end and this helped me a lot, would surely keep them in mind now.

Thanks and regards

1
Divine Obeten 2,435

@Deevyn9

Posted

Hi Hiya, congrats on completing this solution, it looks really neat. However, I found thing you can work on to make it better.

Give the main container a max-width and give the body padding so that when the screen's width is reduced, it wouldn't overflow to the sides.

I hope you find this helpful and you are able to implement this.

Happy Coding! 🎉

0

Hiya 30

@Hiya-Jakhar

Posted

@Deevyn9 Thank you for the comment but since I am very very new to it, could you please elaborate on the body padding part, I tried it in many ways but this just seems a little troubling to me, only if you kindly wish to though

thank you again regards

0
Divine Obeten 2,435

@Deevyn9

Posted

@Hiya-Jakhar you can use body {padding: 30px 10px;} then on the .box{height:450px; width: 300px;}, change it to .box{min-height: 450px; max-width: 300px;} This should do the trick.

Marked as helpful

1
Hiya 30

@Hiya-Jakhar

Posted

@Deevyn9 OK! would def try this in the next challenge, thank youu..

1
Divine Obeten 2,435

@Deevyn9

Posted

@Hiya-Jakhar you're welcomee!

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