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

HTML & SASS / Mobile First & BEM

@SamyrOR

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everybody!

A new challenge done, any feedbacks are welcome.

Community feedback

Vanza Setiaโ€ข 27,855

@vanzasetia

Posted

๐Ÿ‘‹Hi Samyr Oliveira Ribeiro!

I have some feedback on this solution:

  • Remove the style tag and its comment.
  • Wrap all your contents, expect the footer with main tag.
  • The img tag always needs src attribute.
  • In this case, the image is just for decoration. You can just leave the alt="" blank, so the screen reader will ignore that image.
  • For the stats, consider using ul and li tag and for the stats__title, I recommend to use strong tag instead of heading tags.
  • For the container width, I recommend to use max-width instead. That way, it would be more responsive. Also, use rem or em for the max-width instead of vw. The vw unit can result an unexpected behavior.
  • Leave the root font size or html font size 100% which is the default. Setting font-size to 62.5% will make the user have to adjust their font size to be able to your site.

That's it! Hopefully this is helpful!

Marked as helpful

5

@SamyrOR

Posted

Hello @vanzasetia!

I really apreciated the feedbacks, thank you!

  • I removed style tag, since i forget it there someway
  • Yes, i thinked this when i started, but i imagined if this was not all the content of some page, but some piece and there main tag will not make sense, but i changed it now, since this is all the content of the page.
  • Changed the img tag to a div, because i'm using content property of css instead src.
  • For the stats i changed the div's for ul and li, and the h3 to strong.

Thats all make a lot of sense

  • I think vw unit fit well for the mobile first approach, avoiding the use of a bunch media queries, and other properties, could use a max-width, but has only one element. And with vw in other solutions never experimented a unexpected behavior (don't mean that could`t happen). And will aways fit the expected view width of the user.
  • I don't see how the font-size at the html with 62.5% could force the user to adjust, when its already flexible and listen to browsers default/user choise, and not hardcoded like px unit (that really will affect the user accessibility)

This font-size make 1rem == 10px, making work with rem unit straightforward, that i prefer instead then using px unit.

0
Vanza Setiaโ€ข 27,855

@vanzasetia

Posted

@SamyrOR ๐Ÿ‘Good job on improving your code!

The vw is the unit that is relative to the user viewport width. Which mean if the user has wide screen then the card may become too large. I recommend to add max-width to prevent that from happening.

About the root font size, let me give you an example. If the users that already set the browser font size to 20px and what do you think the users will expect?

The users are expecting that at least most of the text is 20px size or larger than the default size. But when they see your site, they will see only 12.5px since you cut it off. For the worst case, the users that set smaller font size will see even smaller font size, like 14px will be equal to 8.75px.

The math:

user font size setting * html font size = what they will see

I'm not sure that I explained this correctly. But, I will tag @grace-snow to see if she can help me to explain about root font size or correct me here.

2

@SamyrOR

Posted

@vanzasetia Thanks again for the tips!

About de vw, yes this is relative to the viewport user, and a max-width help a lot, how i placed the max-width at the card component level, this already prevent the card became to large in wide screens.

At the html font-size the math is correct, but look at this, the user setting this to 20px, the 62.5% will really turn it to 12.5px, in a root level. Since the rem unit is relative to the root font-size, at the body tag i set the font-size to 1.6rem, making all content of the page match this size, therefore 1.6rem of 12.5px is 20px.

So independent of what value the user set for him font-size, 1.6rem of 62.5% will aways match the value setted by him.

This let me work with sizes a lot better, without awkwardly the user experience.

It's not my creation you could find the describe of this implementation at some blogs, even at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" target="_blank">mdn web docs</a>

1
Vanza Setiaโ€ข 27,855

@vanzasetia

Posted

@SamyrOR Your explanation makes sense to me and I think you are right about the root font size, it's still accessible. Thanks for correcting me!

I also see an article from CSS Tricks about Accessible font-size. In my opinion, there's nothing wrong with that, so nevermind on what I said before about that.

Have a great day! ๐Ÿค—

1
P
Graceโ€ข 27,350

@grace-snow

Posted

Yeah, I would never resize html/root font size down to 62.5% mainly because it is completely unnecessary, and it carries risk. You are correct you can mitigate against the accessibility issues by scaling the font size back up with 1.6rem on the body, BUT

  • not all elements inherit font size from the body so you have to remember to manually scale up them as well
  • you need to do extra testing for that reason
  • any rem sizes on third party components or plugins you bring in will need loads more overrides
  • because youโ€™re changing an established default, you cannot guarantee it will work correctly for everyone on every device, operating system, browser and tech set up

Basically it comes with a lot of risks for almost no benefit.

There is no reason 1rem needs to equal 10px. As soon as you start thinking entirely in REM - building for alignment, proportionality and spacing - rather than thinking in pixels, the whole point disappears.

11

Lucas ๐Ÿ‘พโ€ข 104,560

@correlucas

Posted

@grace-snow Hello Grace, its wrong also if I set font-size 16px in the html or root? By default rem has a value of 16px without a need to setup the value?

0
P
Graceโ€ข 27,350

@grace-snow

Posted

@correlucas yes that would be unnecessary and potentially add issues in by using a px value. It would be the exact same as saying font size 100% (which is fine as itโ€™s a responsive unit) but totally unnecessary as that would already be the font size anyway. No benefit at all.

1
P
Graceโ€ข 27,350

@grace-snow

Posted

That all said, this is a really nice solution! Looks great and semantically spot on. Well done ๐Ÿ‘

5

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