This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
| Mobile (375px) | Desktop (1440px) |
|---|---|
 |
 |
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Parcel
This is my second take on this challenge after completing it 5 months ago, this time I was able to make it a lot faster and better! Not only did I fix issues with alignment but I also worked on making it a bit more accessible by adding missing landmark elements and adding a hidden h1 on the page.
- Revisting aria-label versus a visually hidden class - This article helped clear some things to me when it comes to
aria-labelvs. "visually hidden" labels.
- Website - Mohamed ELIDRISSI
- Frontend Mentor - @elidrissidev
This project is licensed under the MIT License.