ravenloue / FEM_OrderSummary

Front End Mentor - Order Summary Component

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card 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:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: GitHubPages

My process

Built with

• Semantic HTML5 markup
• CSS Grid
• SCSS

What I learned

I learned how to use the css grid, how to create custom headings and how to shrink the desktop format to fit into the mobile browser. I built this all by reading through documentation and using 'Google' to search for things that confused me.

Continued development

I'm going to continue working through different challenges on Frontend Mentor until I'm more confident in my understanding of HTML, CSS and SCSS.

Useful resources

• W3Schools CSS Reference Sheet - Very handy
• W3Schools How To - I used this to figure out how to create and adjust several of the aspects of this page

Author

• Website - GitHub/ravenloue
• Frontend Mentor - @ravenloue
• Twitter - @ravenloue