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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Screenshot Desktop Screenshot Mobile

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

This is my first frontendmentor challenge and I found really helpful to have a well organized template in order to keep the straight line following a consistent work method.

Continued development

I would like to improve my knowledge about browser compatibility. Furthermore, setting dimentions and measures for me is often a matter of trial and error. I wonder if there's a way to be more precise or if it only will get simpler with practice. I'm also going to deepen into media queries, 'cause I know very little about them.

Useful resources

• W3schools - I consulted this site to clarify some gaps in my knowledge of html and css.

• Rapid Tables - In order to soften shadows I converted hls values in rgba values. I found that this resource is good to do that.

Author

• Frontend Mentor - @StefanoDeCapitani
• Facebook - Stefano De Capitani