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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
;
;
- Solution URL: Add solution URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
What I had learned from this project is to effiecently use both flexbox and gridbox alternatively, hammering down the basics of css positioning. I also ended up brushing on my js skills with the toggle button, which is always something I need to rethink, nevertheless it wasn't too difficult and I had understood how to utilise the DOM model, how to use addEvent listeners and also use es6 functions where possible.
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
One thing I found difficult is adding a linear graident color to the border-top which I couldn't get to work in the end so i ahd settled for a base color instead. My solutions had not worked at all and I couldn't figure out for what reason at all, so this is definitely something i need to work on asap.
- CSS GRADIENT FOR BORDER - This helped me and i was able to incorporate into a seperate piece of work however not in this specific project and i could not figure out why at all...
- Website - Shubo Kobir
- Frontend Mentor - @shubo16