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.
I also did a code-along with Jessica on her CoderCoder 5 part YouTube series building this Frontend Mentor Project which uses gulp and Sass.
The challenge is to build out this Social Media Dashboard and get it looking as close to the design as possible to the designs inside the /design folder for both mobile and a desktop version of the design.
Use any tools of choice to complete 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
I started by setting up a GitHub repository for this project from my GitHub desktop app. I then downloaded the starter files for the project from Frontend Mentor and created a 'notes.md' file to make notes and gather resources I would need for the project.
I then downloaded gulp-sass, set up the folders and files I thought I might need and organized my workflow. I did A LOT of research with this project as I went along, some of which you will find under Useful resources. I then set up my gulp configuration in 'gulp.js' to set up my gulp workflow.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Sass
- JavaScript
- Mobile-first workflow
- Gulp - gulp-sass. Compiles Sass files into CSS.
I learned quite a bit from this project! One of my favorite things is the px to em function which was a HUGE time saver and made everything so much easier to work with. It saved me from having calculator hell.
Example function px to em:
@use 'sass:math';
@function rem($pixels, $content: 16) {
@return (math.div($pixels, $content)) * 1rem;
}This was the first time I've used gulp and learning to set it up and troubleshooting the necessary updates was a lesson in itself. I learned what will and what will not work with a legend tag vs. a label tag:
.toggle {
display: grid;
grid-template-columns: 1fr rem(48);
gap: rem(4.8) rem(8);
border: none;
margin: 0;
legend {
font-size: rem(14);
grid-column: 1 / 2;
float: left;
align-self: center;
}
}I learned differences in using radio buttons vs. checkboxes. There were a number of things which were fantastic takeaways from this project.
I would like to go back and do some design improvements. I'd like to change the toggle button legend to 'Mode' and use sun/moon icons on the toggle itself to show dark/light theme choices similar to what I did in this CodePen. I would also like to have the overview cards in a dropdown on mobile and tablet to reduce the amount of scrolling, as well as organize the overview cards lined under their appropriate large cards on desktop which would better follow Gestalt Principles and make this design more user-centered. I might also add some scale on hover for the cards on desktop. I will be drawing up some ideas in Figma and adding the link to the Figma designs to this Readme.md file.
- A Complete guide To Dark Mode on the Web
- How To Detect Preferred Color Scheme
- JavaScript Radio Button Tutorial
- Local Storage
- HTML Accessibility MarkUp
- Screen Reader hiding elements visually
- Prefers color scheme media query -px to em functions - This was SUCH a useful function to use and made EVERYTHING so much easier.
- My GitHub - Michelle Renee
- Frontend Mentor - @SlimBloodworth
- CodePen - @slimbloodworth
- LinkedIn - Michelle Renee Bloodworth
- Twitter - @SlimBloodworth
- FaceBook - Creative Software Solutions
-
Thanks to Jessica at CoderCoder for putting such a thorough program together and making it fun to learn. I really picked up so much from her in this series.
-
Always a big thanks to the cats at Frontend Mentor for so many great project ideas and the awesome community that gives solid feedback and support.
-
Thanks to everyone whom I borrowed research from in my Useful resources.