Submitted 18 days ago

QR component using basic CSS

Bára Kalvodová•70

@BaraKalvo

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think the result looks the same as the Figma design, including the spacing between elements, which is what I'm most proud of. For now, I'm happy with how it turned out.

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

To me, the largest challenge was the spacing between elements. All the time, I'm not sure if I should use margin or padding and which one would be better. I studied more about spacing and how to use both properties and I did my best to make my design match the one in Figma.

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

I'm not sure about using the margin and the padding correctly. My design matches the one in Figma, but as for those two properties, my CSS code looks a little bit chaotic to me. I feel like there are too many margins and paddings:

.container {
  margin: 60px auto;
  padding: 16px 16px 40px 16px;
...
}

.text-area {
  padding: 24px 16px 0 16px;
...
}

.text-area__title {
  margin-top: 0;
  margin-bottom: 16px;
...
}

.text-area__text {
  margin: 0;
...
}

Code

Please log in to post a comment

Community feedback

Marzia Jalili•7,050

@MarziaJalili

Posted 18 days ago

Beautifully done! 👑

Some tips?

✅ You could set some padding to the body element so it will look even better on mobile. Because now it’s stuck to the left of the page, man.

✅ There is a shorthand property for settling the top and bottom margins:

/* Same values */
margin-block: 10px;

/* Different values */  
margin-block: top bottom; 
margin-block: 0 16px;

✅ The same could be applied for padding:

/* Same values */
padding-block: 30px;

/* Different values */  
padding-block: top bottom;

✅ Also, avoid using px for font-size, bro. It happens to cause some issues, and you can use rem units instead.

Great work overall, keep it up!

😎😎😎

Marked as helpful

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