This is Max Ruuen's solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover states for interactive elements
- Solution URL: Frontendmentor.io
- Live Site URL: Netlify
- HTML5
- SASS
- CSS Flex
- SVG
This was a fun challenge to attempt, and I ended up exploring a lot of functions within SASS while finding the lighten()
function. I didn't end up using any other SASS functions, but they seem super useful!
I think I'm not using SASS's nesting the way it was intended - I love the idea of nesting CSS & understand the pitfalls of over-nesting and the specificity it may unintentionally apply which makes troubleshooting/reusability harder, but I feel like I'm not nesting how I should out of the "over-nesting" fear.
I feel that I was able to demonstrate more control over the spacing and sizings of a responsive component - I would like to try integrating this component into a full site just to learn more about how it would behave in a real layout.
BEM is still taking some thought to practice as I try not to overcomplicate class names, but it is definitely proving useful in easily navigating styles.
On an unrelated note, I learned how to change the message of an existing commit and re-push this through to my GitHub repo, picking up some useful but frustrating knowledge of the Vi terminal text editor along the way.
- Frontend Mentor - @ruuendigital
- Twitter - @maxruuen