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
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This is my first project that I have taken on the frontendmentor.io. I am very happy that I successfully completed this.

The challenge

Users should be able to:

• See hover states for interactive elements

Built with

• HTML5 markup
• CSS custom properties
• CSS Grid

What I learned

I learned to workthrough several css properties such positioning, rounding off corners, hovering etc and much more.

Continued development

Divisioning and positioning techniques are those that I want to continue focusing on in future projects. These could be concepts I'm still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Useful resources

• Example resource 1 - This helped me to know more about css properties. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing site which helped me finally understand html tags and css properties. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @AmritPal91