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, CSS and JavaScript website - first time using CSS variables

Gerben Dol 3,115

@GerbenDol

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@janez33

Posted

You were mentioned from Matt in his e-mail, so I came to see your work, nothing to say, congratulations :D You have only 1 html issue you should fix :) Regards from Slovenia.

2

Gerben Dol 3,115

@GerbenDol

Posted

@janez33 Hey Janez, thanks for checking it out!

You're right about the error and I'll be sure to fix it! Never knew you're not allowed to put divs in labels. Who knew!

Hope you're doing good and enjoying the platform! ✌️

2
Gerben Dol 3,115

@GerbenDol

Posted

@janez33 Just to let you know: simply changing the switch from a div to a span fixed the issue!

1

@janez33

Posted

@GerbenDol cool, thanks for letting me know :) I saw you like to use "calc" when using css, where have you learned it and why are you using it, such as flex: 0 0 calc(50% - 30px);?

1
Gerben Dol 3,115

@GerbenDol

Posted

@janez33 I just saw it come along a couple of times and really like some of its use cases. One of my favorites is when I want my page to be 100% of the viewport minus the height of the header.

You can read some use cases over here: https://css-tricks.com/a-couple-of-use-cases-for-calc/

I think calc can be really useful when working with a mix of percentage bases parts and pixel based values, such as gaps between items.

I could just set a width of 48% on my items to have a 2% gap, but really, I want that gap to be consistent and not relative to the width.

It's a fun function to dive into deeper and can really save you a headache sometimes! 😁

0

@janez33

Posted

@GerbenDol Thank you very much for this :)

0
Ricky 150

@voyage11

Posted

Great solution! I learned a few things from your code. Thanks!

1

Gerben Dol 3,115

@GerbenDol

Posted

@voyage11 Thanks! I'll be sure to check out some of your work! 😁

1

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