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

Font Size Appocalipse and Shiny Filters

@Pedro-Celeste

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


Hey there! 😎👍🏻

I'm very proud of the result of this one, I made sure it is responsive to mobile phones, tablets and desktop.

But here's the thing, I feel that my font sizes are all over the place. Do you know a better way to organize the different font size values in a webpage?

Thanks!

Community feedback

P

@Eileenpk

Posted

Hi Pedro, your project looks awesome, great job!

I also had the same problem with feeling like the font sizes were all over the place in my projects (and that my CSS was just a mess in general, especially in larger projects). My solution to this problem which seems to be helping was to do a few things.

1- plan out the CSS, HTML, and JavaScript and include that plan in my README.md before I started coding anything. This helps to see what components you'll be working with and how they will interact with each other.

2- Organize the CSS like so:

  • The organization of the styles.css will be (in descending order):

  • Variables

  • Resets

  • All typography (and only typography if an element needs for example padding I will reselect it in the appropriate part of the stylesheet.)

  • Media query for typography

  • General styles

  • Media query for General styles

  • First section

  • Media query for the first section

  • Second section

  • Media query for the second section

Hope you found this helpful!

Marked as helpful

1

@Pedro-Celeste

Posted

@Eileenpk Wow! I hadn't t thought of doing it like this. I'm going to try it out in my next challenge! Thanks a lot! :D

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