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 challenge using Html and Css

@Nasserio10

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 get the challenge after many attempt

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

i had a difficult of positionning box inside each other , i didnt use tools like flexbox only relative and absolute positionning, it take 4 times much time to code than my initial 1 hour .the next time i will try to be quicker than this.

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

i would like to see different solution from other newbie like me to get idea what is wrong with me.

Community feedback

@MikeCook9994

Posted

A couple things of note:

  • Definitely explore flexbox or grid. With those centering the element within the page requires only 4 lines of css.
  • For this challenge, it was important to ensure that your content occupied the entire height of the screen. Doing so requires you to set the minimum height on the body element to 100vh (vertical height). This will allow CSS to vertically align the main content within the center of the page.
  • You have manual breaks set in the text to attempt to achieve the same view as the design. You should prefer letting text wrap according to the layout and styling your text such that it matches the design.
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