Skip to content
Submitted over 1 year ago

Qr Code challenge using Html and Css

Nasserio10•40
@Nasserio10
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Michael Cook•60
    @MikeCook9994

    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.

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