Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Live Site URL: Website

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid – Media Queries

What I learned

This was my first attempt at using CSS grid to build my own project and I applied what I learned from Wes Bos's CSS Grid course. I initially struggled with centering/aligning items both horizontally and vertically. However, with a great deal of googling and trial and error, I was able to understand CSS grid better. Through this project, I also learned more about z-index, styling and aligning background images, and styling buttons (especially active states and box shadow).

Useful resources

• CSS Grid - This course taught me everything I know about CSS Grid and I highly recommend it.
• Stack Overflow Explanation on Aligning Items vs Content - This was a game changer for me because it helped me finally understand when to use align items vs align content and how grid works in different situations. – CSS Resets – I used this explanation of CSS resets to guide me.

Author

• Website - Rachana Hegde
• Frontend Mentor - @rachanahegde
• Twitter - @Rachana__H