This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Build out the project to the designs provided.
Screenshot taken with a Chrome extension for FireShot.
- Semantic HTML5 markup
- CSS custom properties
- CSS Flex
- Mobile-first workflow
- Accessibility-inclusive workflow
Not much that is new. This MDN article is worthy of note, though.
I want to continue to make projects that are even more disability-inclusive. That would require the use of more semantic HTML5 markup.
- MDN's article on CSS
box-sizing
property - This helped me really clear up my misunderstandings about box sizing. I findborder-box
most convenient for me currently.
You can find more of my solutions on my Frontend Mentor profile. If you like what you see, follow me on Twitter and GitHub. :)