This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

https://github.com/KharlAbban/frontendmentor-social-media-dashboard-soln

• Solution URL: GitHub
• Live Site URL: GitHub Pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Vanilla JS
• Mobile-first workflow
• Bootstrap 5 - CSS Framework

CSS gradient backgrounds. They sound easy but are not easy to implement. I had to use a before attribute, which only partially solved my problem. Please let me know if you guys have a better working solution.

I'll like to focus more on gradient backgrounds and improving the overall feel on the dark theme.

• Bootstrap 5 - This CSS framework is amazing. It virtually does all the styling and grid work for you. Check it out!
• W3Schools - This is an amazing article which helped me throughout with helpful CSS tips, best practices, and examples.
• Google Fonts - This font collection really helped me spped up my workflow. I simply copied the @import code generated and I was good to go.
• Stack Overflow - This is a very helpful technical and developer solution base. I found a lot of the answers to my issues here.
• Web Dev Simplified - This channel has been a great learning source for all my frontend works. Do check him out!

• Frontend Mentor - @KharlAbban
• Github - KharlAbban
• LinkedIn - KharlAbban