Skip to content
This repository has been archived by the owner on Jul 13, 2023. It is now read-only.

catherineisonline/single-price-grid-component-frontendmentor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Single Price Grid Component

Single Price Grid Component

Live | Solution | Challenge

Solution for a challenge from frontendmentor.io

About The Project

In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge. The main challenge is to build out this pricing component and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

  1. View the optimal layout depending on their device's screen size
  2. See a hover state on desktop for the Sign Up call-to-action

I do not have access to the Figma sketch so the design is not pixel perfect.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Desktop-first workflow

What I learned

The project was fun to build and did not require a lot of experience. I improved my grid skills a bit more but definitely still a lot to learn about it. I tried to make grid responsive but instead ended up using flex for smaller screens. I am not sure whether that's a correct way. For the first time, I used a media query for hover effects to avoid sticky background color on mobile devices and it's really a nice feature!

Useful resources

  1. Figma - Paste your design image to check the size of containers, width, etc.
  2. Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.

Acknowledgments

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!