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

Grid System, FlexBox, Box Model , Javascript etc

Mamatkulov Marufโ€ข 340

@Marufjan

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

Solution retrospective


Hey guys ! Another challenge is done ๐ŸŽ‰ Any comments and feedbacks are welcome :)

Community feedback

P
Clรฉment Creusatโ€ข 1,675

@ccreusat

Posted

Really really good job ! So clean :)

You could look about LocalStorage to keep users preferences about dark/light theme. Even give a shot to @prefers-color-scheme

Marked as helpful

0

Mamatkulov Marufโ€ข 340

@Marufjan

Posted

@ccreusat hi Mate ๐Ÿ˜„

Umm, I did not get your point here. What is the LocalStorage? where can I find @prefer-color-scheme?

Thanks for your compliment hehe :)

0
P
Clรฉment Creusatโ€ข 1,675

@ccreusat

Posted

@Marufjan localstorage gives you the ability to "save" anything you want in the user's browser . You could save the change about the theme (dark or light) and when the user comes back to your website, he will see the last change he did. If he choose to have the light theme, he will see the light theme next time. here's https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

@prefer-color-scheme will give you the opportunity to detect if the user's OS is set on the dark or light mode. https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme

Marked as helpful

0
Mamatkulov Marufโ€ข 340

@Marufjan

Posted

@ccreusat oh I got it. Appreciate it ๐Ÿ™๐Ÿป

1
Dharmik_487โ€ข 1,740

@Dharmik48

Posted

Hey๐Ÿ‘‹,

Your solution is really good! Looks great, but.. I just found one issue:

  • Below screen width of 375px the cards all become aligned like on bigger screen instead of like it should be on small screens.

Apart from these, it looks really good, Keep it Up๐Ÿ‘

Marked as helpful

0

Mamatkulov Marufโ€ข 340

@Marufjan

Posted

@Dharmik48 hey Mate ๐Ÿ˜ƒ

well, in given styles the mobile screen was 375px. So, I did not consider the screen size smaller 375px lol.

Thanks :)

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