Skip to content

VaishakKS/social-media-dashboard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Social media dashboard with theme switcher solution

Overview

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

Screenshot

Dark Mode
dark

Light Mode
dark

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • CSS Grid
  • Bootstrap
  • Javascript
  • Mobile-first workflow

What I learned

My work in office requires developing lot's of dashboards. So it was always in my mind to develop a fully fledeged dashboard screen with better styling. This challenge was a better boost to my knowledge on developing dashboards in a more elegant way.

One new thing I did come across while building this UI was the use of CSSOM(CSS object model).

CSSOM: The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

Do visit CSSOM which is a mdn documentation for a clear understanding of CSS object model.

Continued development

Have added a feature of color change for each of the cards based on increase or decrease of followers count. Planning to refer this UI and build a single page working application for displaying information based on finance , healthcare etc.

Useful resources

  • CSSOM - This was helpful with respect to changing elements based on pseudo classes.

Author

Acknowledgments

A Big shoutout to Front End Mentor Challenges. They provide the best templates as challenge so that a aspiring developer can get an idea of how UI/UX screens are converted to code.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 57.0%
  • CSS 26.7%
  • JavaScript 16.3%