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 Component Responsive

Alen 10

@musicalen89

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


My hardest understanding of CSS is how to know what you need to write to get what you want. But im in start of learning CSS.

Community feedback

ZeroHora 270

@RailsonOL

Posted

Hello, I also have this problem, after some projects things started to settle in my mind, but if there's one thing that took me a while to understand, it was the measurements: REM and EM the second thing was: FLEX and GRID

I'm using google translator, but I'll try to explain these very important things for you to do any project from now on.

  • The REM measurement depends on the root size, which basically means the size of the device, which is great because if you use pixels, things can change size if the device has more or less pixels.

be careful when using the rem measurement absolutely, such as the height and width of an item, this measure leaves nothing to push, it is stronger, if this item is too large, it may break everything else, in these cases, you can try to use a min or max so that it does not extrapolate

  • The EM measurement is based on the font of the item in the item above it, the font of the text itself.

let's go to the most important: FLEX and GRID

  • FLEX is a flexible object, it means that using it, the items or even it, can be modeled with the page, the items can be compressed to stay close to each other, or they can be separated.

  • GRID is tougher, it's great for making cymetric scenarios, for example, a series of cards that need to be perfectly symmetrical

In short: Symmetric or "tough" = GRID

Adaptable = Flex

I hope I haven't made your learning more difficult, but I'll leave links with great visual examples to study.

A Complete Guide to Flexbox

A Complete Guide to CSS Grid

Aligning items in a flex container

Marked as helpful

0

Alen 10

@musicalen89

Posted

@RailsonOL

Hello and sorry for late response. Yeah i didnt use EM and REM yet but i will try in next projects. Flex somehow is easier to understand for me than a GRID when i was reading about GRID my mind was boiling but eventualy will get used it.

0
Pedro 120

@pedrommb7

Posted

That comes with practice. Keep doing challenges of the level you feel comfortable with until you reach proficiency, and then go to the next level. Good luck on your journey!

Marked as helpful

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