This is a solution to the 3-column preview card component challenge on Frontend Mentor.
The purpose of this challenge was simply to practice foundational semantic HTML and scss skills because I've been doing a lot of meetings, accessibility audits and writing documentation recently. It's good to keep skills sharp! ;)
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- See visible focus states for interactive elements when navigating by keyboard
- Understand and be able to navigate page content while using assistive technology
- Solution URL: github.com/grace-snow/fmentor-3-column-preview-card
- Live Site URL: grace-snow.github.io/fmentor-3-column-preview-card/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Scss (compiled with Live Sass Compiler in Vs Code)
For mentoring support, you can usually find me in the Frontend Mentor Slack workspace.
Or get in touch via