Simple Price Grid
I stumbled on Frontend Mentor recently and thought it looked like a pretty straightforward, free resource for design ideas to recreate. It's not all totally free, but a lot of it looks like it is right now. Here's a list of 16 front-end projects with designs that I'm starting with.
Here's my take on the first project example: Simple Price Grid Component.
Join our community
30-day, hassle-free money back guarantee
Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.
Full access for less than $1 a day
- Tutorials by industry experts
- Peer & expert code review
- Coding exercises
- Access to our GitHub repos
- Community forum
- Flashcard decks
- New videos every week
Thoughts and Notes
Points of Interest
- Built with Tailwind standard colors, except the yellow. You can check out the source code to see my tailwind config theme extensions.
- Copying a design is easier and more fun than creating from scratch.
Where I Deviated
- I didn't bother to include the suggested font (Karla). I wasn't sure how to do it the most efficient way for just this page. WIP
- Accessibility: Not sure this design was super accessible to begin with. Maybe I could have made it more accessible by tinkering with the built in colors. Not going to jump through those hoops for this example project.
- All project pages use the base layout
- Help me @eleventy
- Use nunjucks templating and 11th data cascade
- Destroy your SEO with a Title Change
- May the button rise up to meet you!
- Added spacing utilities that don't seem to change anything
- Title to match the URL
- Simple Price Grid Component and notes