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 dashboard

CodeBot 200

@Emperor-Shadow

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


Constructive criticism is allowed. Happy coding

Community feedback

@archihalder

Posted

The mobile view looks good. But the desktop view needs a few modifications -

  1. Try to align "Social Media Dashboard" heading, Dark mode toggle, "Overview Today" heading and the bottom cards like the top cards
  2. You can try using grid instead of flex
  3. Try to match the given design as much as possible. I'm not telling you to go for pixel perfection, but one thing you can do to achieve this is by opening your project and the design jpg side-by-side in vscode (or any editor) and then eyeball it. Honestly, I'm not good at this either, but this trick has helped me a lot.
  4. Try to implement the hover effect on the cards and the dark mode toggle. Check the active state jpg for more info.

All the best. Happy 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