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

• 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

Screenshots

Desktop View

Medium View (Between Desktop and Mobile)

Mobile View

Links

• Live Site URL: fm-social-media-db.netlify.app

My process

I examined the preview images provided in the starter files to structure my HTML file. It helped me to decide the types of elements and properties to use for this project.

The general approach I followed in this project is to choose a section, design and style it and then move to the next section. I started from the top i.e., the Nav bar followed by the Follower Counts followed by the Other Social Media Metrics.

First I made the desktop dark theme. This was like a checkpoint as now I had basic structure of the project ready.

Then, I tried to make it responsive (adusjtable to multiple device views). I made three views for this project. A desktop view, a middle view (for anything between a desktop and mobile) and a mobile view.

Finally, I implemented the logic behind the dark-light mode toggle. I also hosted this project on Netlify. The links are above.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow
• Vanilla JS

What I learned

This is one of my first web dev projects, hence I learned a lot of things by doing this project. I'll try to list all of them.

• Multiple classes - I found out an important use-case for having multiple classes for tag. For example, I have used two classes for big cards and the small cards. One of the classes is common for both, and this was useful for changing the theme. While the other class was used to style each card based on the given design patterns.

• Overlaying a div on top of another - I found this neat and simple trick to move a div on top or bottom of another div by using CSS z-index property.

.top-bar {
  height: 14rem;
  background-color: var(--dark-top-bg);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

• Creating a toggle - Found this on codepen but understood each segment of the code. Later used it to change theme using JS.

• JS - I a complete newbie at JS so I had to spend a lot of time in this section. I learned so many things.

  • How to use CSS variables in JS
  • How to work with different elements and selectors in JS
  • Difference between querySelector and querySelectorAll
  • forEach loop in JS
  • Functions in JS
  • How to check for error messages in console

It was a fun experience

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Some of the topics I am still not comfortable with and would like to work on different projects and learn more about them in the future -

• Linear Gradient and Border Stuff in CSS
• Pseudo-classes in CSS
• Media Queries
• JS

Useful resources

• ChatGPT for toggle switch - This is the converstation I had with ChatGPT. Not all of it is useful, but got to learn a lot of things from this.

• querySelectorAll - This is where I found out that we need to use for loop if we need to use querySelectorAll

• Codepen Toggle Switch - This is basic structure of a toggle using HTML and CSS only. I used this in this project.

• Codepen Toggle Selector - This has a great implementation of the toggle

• How to revert back to a previous commit - Great explanation

Author

• Website - Archi Halder
• Frontend Mentor - @archihalder
• Twitter - @archi_halder