jamesdrysdale / socialmediadashboard

Social Media Dashboard Components

Project Brief - Social media dashboard with theme switcher

Table of contents

• 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.

Description

The challenge

To build out a Social Media Dashboard and get it looking as close to the design as possible. The designs for this project are in th '/design' directory and include mobile and desktop versions of the layout design. As they are in .jpg format, I will have to use my best judgement with regards to styles such as font-size, padding and margin.

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

Links

• Solution URL: https://github.com/JamesDrysdale/SocialMediaDashboard
• Live Site URL:

My process

Built with

• Semantic HTML5 markup
• SASS and Gulp
• CSS custom properties
• Flexbox
• CSS Grid

The _index.css files in /utils will load all the other scss files as needed.

What I learned

• I leaned how to use SCSS mixins to make the code more DRY and easier to adjust in the future if certain values, such as breakpoints, need to be changed.

Continued development

Useful resources

Accessibility

• Accessibility Developer Guide - There are a lot of great articles and code examples that explore the best practices to ensure your website is structured in a way that is accessible to everyone and plays more nicely with assistive technologies.
• ADG: Hiding Elements Visually by Moving them Off-screen - I knew there would need to be some screen-reader only text for card titles/usernames, so that users can tell contextually that it's a twitter handle or number of FaceBook likes etc. This article helped me find an appropriate solution to the problem.

Author

• LinkedIn - James Drysdale

Acknowledgments

socialmediadashboard's Issues

Utility Function: convert pixels to rems

Create a utility function that converts pixels to rems so it isn't necessary to have to manually do the conversion every time there's a change to some sizing.