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

css flexbox

100rab• 20

@100-rab

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

100rab’s questions for the community

Every feedback are welcome :)

Community Feedback

P
Lucas 👾• 84,530

@correlucas

Posted

👾Hi @100-rab, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

1.Keep the image responsive. To manage the image size, you don’t need to define the width and height together, if you do it with different values this will make the image lose proportions, to keep the image responsive and respect the container size use img { display: block; max-width: 100%} this way the image resize with the container whatever its size.

2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

3.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

4.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

✌️ I hope this helps you and happy coding!

Marked as helpful

1


100rab• 20

@100-rab

Posted

@correlucas I will try to avoid unnecessary divs next time and will try to make my code clean, thanks for your valuable feedback :)

PS Your solution was awesome :0 I will try to make a similar qr code like yours after learning js :)

1

P
Lucas 👾• 84,530

@correlucas

Posted

@100-rab I don't know JS yet, I used this tutorial to apply the effect https://www.youtube.com/watch?v=9LZGB3OLXNQ Have a nice day bro!

Marked as helpful

0

100rab• 20

@100-rab

Posted

@correlucas Thank you soo much for the tutorial :)

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!