Skip to content
Submitted over 1 year ago

Frontend Mentor - QR code component solution using Flexbox and Grid

John Carruthers•310
@techyjc
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The colours provided for the project seemed wrong compared with the preview. I manage to create the Desktop Preview using Flexbox. The main element of the design are built from nested divs.

I created the individual background pattern elements using divs, lis and CCS Pseudo elements. (not exact but ok..ish)

Didn't complete the mobile version but will add a media query later.

My CSS could do with little tidying... Enjoyed the challenge. https://codetinker.co.uk You can view my efforts here.

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Background 🌆:

    • You should not recreate the background, you used the image desktop-preview.jpg to create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.

      You must use the images desktop-design.jpg and mobile-design.jpg to create your solution.

    HTML 🏷️:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
  • John Carruthers•310
    @techyjc

    Not sure I was supposed to recreate the background patterns... (Now commenting on my own work)...

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