Frontend Mentor - Single price grid component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

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

Screenshot

Desktop and table view:

Mobile View:

Links

• Solution URL: https://github.com/BronnieG/FM---single-price-grid-component
• Live Site URL: https://bronnieg.github.io/FM---single-price-grid-component/

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I have become more competant with flexbox and grid and am finding it easier to manipulate these to render the end result.

Continued development

I still need to learn more about flexbox and grid, specifically alignment.

Useful resources

I found the following two guides that were great:

Flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid/

Author

Website - Coming soon! Planning on building it fromscrath with what I have learnt. Twitter - @BronwenGien_CA https://twitter.com/BronwenGien_CA

Acknowledgments

Thank you to all the youtubers out there who give up their time to creating coding tutorials! You are all amazing and have helped me on this journey!