Skip to content
Submitted over 3 years ago

CSS Grid, CSS Custom Properties for theming, localStorage, Sortable.js

Syed Ali Mansoor•460
@syedalimansoor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social media dashboard with theme switcher
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everybody! 👋

Just completed the Social Media Dashboard with Theme Switcher challenge! My solution includes:

  • Responsive layouts for mobile, tablet, and desktop.
  • Theme-switching functionality built using CSS Custom Properties
  • Local storage access to store preferred theme
  • Reorderable drag-and-drop cards using Sortable.js to customize the dashboard!

I had a lot of fun learning about the local storage and Sortable. They are pretty intuitive and useful. I wish to learn more about such Javascript libraries in the future, so do recommend some if you know 'em!

Please check out my solution and let me know your thoughts! Constructive feedback highly appreciated. 😁

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Syed Ali Mansoor! 👋

    Good job on finishing another challenge! It looks great and responds perfect! Kudos for using Sortable.js to reorder cards. I have no suggestions, but as not to leave you with nothing maybe since you're using Sass read about 7-1 pattern to keep your file management orginazed.

    Good luck with that, have fun coding! 💪

    1
    Syed Ali Mansoor•460
    @syedalimansoorPosted over 3 years ago

    Thank you @tediko! Not gonna lie, I always face difficulties when it comes to managing my stylesheets. They grow way too much (and quite rapidly)! The 7-1 pattern seems a great way to keep them organized; will definitely practice it in my next challenge.

    Thanks again for the appreciation and tip! 😁

    0

Please log in to post a comment

Log in with GitHub

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