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

responsive-social-media-dashboard using CSS grid

#accessibility
Amna Arifβ€’ 40

@aminaArif22

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


for dark mode toggler, I used CSS variables and changed the value of those variables using JavaScript when clicked. I could only think of this solution. If there is a better approach as compared to this please let me know.

Community feedback

P
Grant Ramsayβ€’ 280

@seapagan

Posted

A simpler way to do the toggler is :

  1. Set up 2 CSS classes, eg '.theme-dark' and '.theme-light', each containing all the correct variables. Both classes should have the same variable names but different colour values.
  2. Apply the class for your default colour choice directly to the Body tag.
  3. On toggle, your Javascript only needs to swap these 2 classes!

See my CSS here and the first section of the related JS here

Marked as helpful

2

Amna Arifβ€’ 40

@aminaArif22

Posted

@seapagan if you don't mind can you please share the resources from where you are learning JS?

0
P
Grant Ramsayβ€’ 280

@seapagan

Posted

@aminaArif22, to be honest, my JS learning is not very structured! I tend to go for it and search for help when I reach a wall. Saying that, I'm also (slowly) taking a TS course on Udemy at the moment. I learn a lot from searching Youtube though.

The best advice I can give is to make projects, make projects, then make more projects 😁! You will learn so much more from trying to build something yourself than from following a tutorial. This was the big realisation that improved my JS overnight. When you hit an issue, Google and Stackoverflow are your friends. There is a great Slack community here and many Discord channels around the web to answer questions.

Saying that : Freecodecamp have a good list here, Scrimba is great, and they have some fun live-coding on YouTube. Also on Youtube, Web Dev Simplified has some great small JS videos (and CSS, React and more), Traversy Media, Academind, Colt Steele are more there. Don't forget MDN, which is the daddy of them all if a little dry at times😁. javascript.com is useful, and one more at Fullstack Academy

It all comes down to how much time you are willing to put in though - coding is a skill and needs practice and stubborn perseverance.

Good luck with your coding travels! πŸ˜„

Marked as helpful

0
Amna Arifβ€’ 40

@aminaArif22

Posted

@seapagan you are damn right. you have no idea how much time I have time wasted by just watching tutorials and not doing much practice. That's why I started building projects and I feel much more confident than I used to before. I am also currently taking courses on udemy from academind and coltsteel. Wish me luck.

1

P
Grant Ramsayβ€’ 280

@seapagan

Posted

@aminaArif22 Good choices, Max and Colt are really good teachers - It's actually Colt's TS course I'm working on (I just love his teaching style).

Good luck with your courses and future coding! πŸ˜€

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