Frontend Mentor - Social Media Dashboard with Theme Switcher Solution

This is a solution to the Social Media Dashboard with Theme Switcher Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Toggle color theme to their preference
• BONUS: Detect user's prefrences and switch to the correct theme accordingly

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/social-media-dashboard/
• Solution URL: https://www.frontendmentor.io/solutions/social-media-dashboard-with-theme-switcher-built-with-vanilla-js-VHewUlX1Y

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• SCSS mixins
• CSS Flexbox
• CSS Grid
• Vanilla JS
• Mobile-first workflow

What I learned

I learned a lot of new and awesome stuff, and I'm really pumped about how this project came out. At first, I was wandering around the Internet to find an article, a video, something that will help to help me to build this project with SCSS and its features. However, if you've done a similar project, you know that most of the tutorials out there suggest using CSS variables. I didn't want to use that technique, since it would make my code pretty messy and mixed up with two technologies, CSS and SASS. So, I kept searching, and I ran across a couple of articles, which were really helpful, but they were lacking a couple of details. Finally, after hours of testing and reading, I came up with my own way of accomplishing this concept. I used SASS, mixins and I've got to admit that this came out to be a lot easier than I anticipated it to be. Although it took a several hours and bunch of small projects in CodePen to test things out before coding the actual project, but it was all worth it.

Continued development

I'm planning on writing an article in a more detailed manner, to better explain this technique and how it could potentially make adding a theme to your existing website or creating a one from scratch a lot easier.

Useful resources

• animista - This time, instead of adding custom animations, I went for a well known animista for help.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals