This is my solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help developers improve their coding skills by building realistic projects. My solution is here to show others how I decided to solve the challenge using the skills I know. There are many ways to solve their challenges. Please use this information to learn and not jsut clone and use as your own solution.
Users should be able to:
- See hover states for interactive elements
- Solution URL: www.frontendmentor.io/profile/stevenabaco
- Live Site URL: stevenabaco.github.io/order-summary-component-main/
- Semantic HTML5 markup
- CSS custom properties & variables
- Flexbox
- JavaScript
- Mobile-first workflow
Doing this project I strengthened my HTML and CSS skills to build a component using the Figma designs provided. I also had to use some JavaScript to the theme switches.
One thing I used on this project whcich I don't normally use are CSS variables. I also learned the hard way (Spent a loooong time to figure it out, that if you want to do a a gradient background color you need to use "background" and not "background-color" in CSS)
I'd like to continue fine tuning my CSS skills to enhace the UI experience. I also need to work on improving my use of semantic HTML to help readers understand the page.
- stackOverflow - The stackOverlow website helped me with solving some of the CSS challenges I had useing the variables to change colors for different theme states.
- Website - Steven Abaco "WebDevWiz"
- Frontend Mentor - @stevenabaco - WebDevWiz
- Twitter - @WebDevWiz