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

Social Media KPI page with switching CSS for dark mode

Richard Converyโ€ข 20

@richardconvery

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!

This is my first every Frontend Mentor challange and my first use of JavaScript within a page (just been learning JS on Codecademy up until now).

In this challenge I used JS to switch between two different CSS files. It was nice and easy for this project, however if this was a production situation then I'd look for a different solution as it'd be difficult to keep two separate css files in sync.

Any feedback on how to do that differently is more than welcome!

Richard

Community feedback

Samuel Palaciosโ€ข 615

@samuelpalaciosdev

Posted

Hi, Richard๐Ÿ‘‹

Great job on this challenge. Your solution looks good and it scales pretty well๐Ÿ‘

I only suggest some things ๐Ÿ˜‰:

  • Knows when to use paragraphs insteads ofheadings h1-h6. Headings provide valuable information by highlighting important topics and the structure of the document, you should know when to use and when not an heading tag. I'd not set the "followers" as an heading instead as a paragraph.

  • About the dark mode question. I suggest you to watch this video.

I hope this would help you, have a nice day, keep coding!๐Ÿ’™

1

Richard Converyโ€ข 20

@richardconvery

Posted

Thanks so much for the feedback! I do tend to go down the <h> route a bit more often then perhaps I should. I'll take that into consideration next.

Thanks for the video! Really appreciate it

0
Davideโ€ข 1,725

@Da-vi-de

Posted

Hi Richard, great result for this changellenge. I did this project too, if you are interested you can take a look at my solution. [I did some research and i saw this video(https://www.youtube.com/watch?v=ZKXv_ZHQ654)], it helped me a lot.

In my repo there's a comment in scss file: _base.scss where i explain what i did to make things work.

I just want to suggest you two things:

  1. Try to separate and comment code in html, it's easier to read for others.
  2. Learning sass is very beneficial, code is cleaner and organized.

For any questions feel free to ask. Happy coding :-)

0

Richard Converyโ€ข 20

@richardconvery

Posted

That's a really cool video thanks. I'll follow this guy in future too!

Thanks for the tips. I think I'll refactor soon to take these into account.

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