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

P
Similo 20

@Chief-99

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 figuring out how to get things in the right position (mostly). I just started learning html and css adbout two months ago so I was trying to use the internet as little as possible for things that I had already learnt. I think I think I did a pretty good at just figuring out how to think in css for lack of better words. Next time I'll try not to overcomplicate things and find a simple solution.

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

I struggled with getting the content in the right position. I used flex display to do it and it wasn't working how I was expecting it to and I genuineky didn't know what the issue was. I found a slightly different way of positioning everything - still using flex display.

What specific areas of your project would you like help with?

So, I just started HTML and CSS about two months ago and I would like feedback on how I could make my code more concise because I think there are a few things I could have done with less code and in a simpler way. I would also like to know how to get a space between the text and the links in the footer as I couldn't figure that out.

Community feedback

shwerts 100

@shwerts

Posted

Hello, excellent work!

Here's few things you should add/use:

  • Use min-height property instead of fixed height for body & html elements
  • Add box shadow for the card using box-shadow property
  • Consider replacing divs with semantic tags from HTML5

Keep doing good work!

Marked as helpful

1

P
Similo 20

@Chief-99

Posted

@shwerts

Thank you very much for your feedback, I appreciate it!

I just want to ask what does changing height to min-height do exactly?

0
shwerts 100

@shwerts

Posted

@Chief-99 It gives element a full height, it prevents from overflowing element with descendants and their content. Also use viewport unit vh

1

@SaraRRodrigues

Posted

The text box should have less padding around the box

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