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

Responsive QR CODE Webpage using basic HTML and CSS

mfs_code 20

@mfscode

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


  • I forgot the website that I can use to add a pattern background for my website, can someone remind me about the website?
  • Had some problems positioning the image and text to the point that I use position: absolute, is there a better approach to this?
  • Lastly, had some difficulties sizing the image the correct size, I know it's supposed to be easy, but I forgot how to

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi mfs_code, great work on this challenge! 😉

Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here
  • the image bg in the html is not necessary

Overall you did well 😁 Hope this help!

Marked as helpful

1

mfs_code 20

@mfscode

Posted

@denielden Thank you very much for the feedback :D

I will make another submission based on the inputs that you gave me, I am still struggling in flexbox but your link that you gave is very educational and easy to understand.

Very helpful input 👍

1
Travolgi 🍕 31,420

@denielden

Posted

@mfscode You are welcome! Keep it up :)

1

@AlazarG19

Posted

Nice solution there is actually no problem with it but you dont need to add the background image. they but that in the design just to show u what it will look like out side the browser .you can correct your current solution by increasing the scale of the whole body or your main container

1

mfs_code 20

@mfscode

Posted

@AlazarG19 Thanks for the feedback! I will submit another solution in which i dont add the background

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