This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor.

• Overview
  • The challenge
  • Links
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

This challenge was about building up the Social Media Dashboard and get it looking as close to the FEM design as possible. Link to design on FrontEnd Mentor website (https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H)

By completing this 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

• Solution URL: Solution URL
• Live Site URL: Live site URL

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS
• Gulp

working through this project, I learnt a lot of things, but below are some of them :

• Using SASS to structure style files as partial files and code neatly
• Using mixin with SASS
• Using the BEM model to conveniently name CSS selectors
• Researching and effectively enhancing accessibility on a website for screen readers
• Enhancing reponsive-behaviours on a website using media queries
• Etc...

Areas that I want to continue focusing on in future projects :

• Using Javascript functions to interact with the DOM
• The BEM model
• Fix the desktop display of the dashboard (should have the four cards on one line and the 8 smaller-cards on 02 lines)

• Resource 1 - This tutorial guided me all along the website building process. I really liked the way the tutor coded-real-life and explained what she was doing as she went.

• Website - Eunice Kloe
• Frontend Mentor - (https://www.frontendmentor.io/profile/Nicekloe)

Credit goes to the https://github.com/thecodercoder for the complete and amazing Youtube tutorial on this.