Skip to content

Files

Latest commit

fd2ac4f · Aug 13, 2021

History

History
52 lines (36 loc) · 1.73 KB

File metadata and controls

52 lines (36 loc) · 1.73 KB

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. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Screenshot

Desktop View

Desktop View Light Desktop View Dark

Mobile View

Mobile View Light Mobile View Dark

Links

My process

I coded the skeleton of the page in HTML. Then I set the layout of the page followed by styling all the components in CSS. The CSS was written using a mobile-first approach. After that I wrote javascript to make the dark mode functional.

Built with

  • Semantic HTML5 markup
  • SCSS
  • Flexbox
  • Mobile-first approach
  • JavaScript

Author