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

Solution for QR Code Component

Andres Rios• 20

@rivers07-maker

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

Looking for feeback to improve the design and code for this Challenge!!

Community feedback

T
Grace• 30,650

@grace-snow

Posted

Good job on the HTML of this!

Top tips from this that you'll need to carry with you into every future project:

  1. Always use a modern CSS reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
  2. Set the max width on your component in rem, not pixels. This means the layout will work well for all users, including those who change their default text size.
  3. You've not made an error by setting the font size to 1rem on :root however it is a really bad practice to set font size on :root or html ever. You would never set it to anything other than 1rem, and you don't need it to be on there at all. The font size is already 1rem by default and that should never change.
  4. Similarly it is highly unusual to set the font family on :root. Usually this is set on the body.
  5. Give the attribution some padding so it can't hit screen edges. I also recommend you set text-align: center; on this (or even on the body) so that everything is center aligned and it looks nice on mobiles.

Marked as helpful

0
T
Grace• 30,650

@grace-snow

Posted

The live link is not working on this. Please update if you want feedback on the challenge

Marked as helpful

0
P
AFONSO DE ALMEIDA MAIA• 160

@Afonso-Maia

Posted

hey there about your questions without too much details:

em's and rem's are for when you want to keep things relative and make it easy to propagate changes. if you know that your margins, paddings and widths are not gonna change then there is no point in using them, but if you want the flexibility to change down the line then they are usefull. Example: You finished coding your site and found out that everything looks kinda small, but you want to keep the proportions that you have, if you used rems you just have to increase the <html> font size and everything change accordingly.

A usefull trick to make calculations easier is to set the html font size to 62.5%, that makes it 10 px, so if you want 28px margin thats 2.8rem, a lot easier to reason about. And why not set the font size to 10px directly you may ask, thats because it makes zooming in not work anymore since the font will stay at 10px regardless of zoom level, while at a percentage it changes with user imput.

About the mobile first thing, the idea is that you code the mobile layout first, since its usualy simpler, then use media queries to add the stuff of the bigger layouts, that more offten than not have more stuff. That usualy makes it so its easier to reason about in your code. Example: you have a section that has 1 column layout in the mobile version and 2 columns in the desktop. Its a lot easier to just code the stuff for the single column and then add the second column in the media query and move things around to where they should be than to make the two columns first then override pretty much everything to force them to go single column in the media query.

Hope it helps, keep up the good work and happy coding.

Marked as helpful

0
T
Grace• 30,650

@grace-snow

Posted

@Afonso-Maia sorry but this top half isnt right and is giving really bad advice. That's not the reason for rems and ems and you shouldn't ever change the html font size.

Rems relate to the default font size and are all about keeping sizes relative to whatever text size the user has chosen. That's why they are really important to use for things like font-size and max-width.

Ems are for sizing things proportionally to the current element or its parent font size. They are useful for things like padding on buttons. You will use em rarely but it is useful for specific instances where you want a particular property to scale with the element font size. You wouldn't use it for font-size itself.

Media queries can be defined in rem or em. But should never be defined in px. This means layouts will look good for all users including those of us who change their default text size.

Changing the html or root font size should be avoided as it can instantly make a site inaccessible. There is no reason to ever do it. And I've written a post about the 62.5% hack before outlining why its not recommended in modern web development.

Marked as helpful

0
P
AFONSO DE ALMEIDA MAIA• 160

@Afonso-Maia

Posted

@grace-snow I've read the article and i can see your point and agree with most of it. That said, i dont think everything i said in the top half is wrong and bad advice. I tried to word it to someone that is starting out and dont really know the technical aspects yet and went oversimplistic, and outright wrong when i said that if the sizes dont change then there is no need for rems and ems.

To clarify that, what i meant was that ems and rems are when you want to have relations between values, with the anchor point being the font size, to maintain proportions in that connection. The example and wording was not very good and i apologise for that, my bad ....

Now about the 62.5% hack, ill disagree with you on that one. Setting an absolute value for the font size is bad because it removes agency from the user about the visual size and readability of the content on his screen, but setting it to a percentage maintains all functionality and proportions intact, and the user still have controll, the caveat is that things will be a bit smaller, making the user either increase the default font a bit more when using that site or increasing the zoom a bit to achieve the same result as if you had not changed the html font size value.

Yeah it could cause problems with external libraries but if you are at that point then you should have the technical knowledge to make a judgement call if changing the font-size is the right choice at that moment. My goal was to solve his imediate problem of finding it difficult to reason with a 16 base math, in hopes that he has a smooth path ahead in his learning until that problem is no longer relevant.

Anyways thanks for the reply, the article was usefull. cheers!!

0
T
Grace• 30,650

@grace-snow

Posted

@Afonso-Maia it's way more than a bit smaller! Did you read the accompanying article and related WGAC guidance? Do you understand some people need base font size to be scalable to 400%? It's a huge issue.

0
Olaniyi Ezekiel• 7,580

@Ezekiel225

Posted

Hello there 👋 @rivers07-maker.

Good job on completing the challenge !

Your project looks really good!

I have suggestions about your code that might interest you.

Consider adding a min-height of 100vh to the body element so as to centralize your project.

body { 
  min-height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
}

I hope it helps!

Other than that, great job!

Happy coding.

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