Project: Order summary card

Code | Website | Design by Frontend Mentor

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).

Some of the resources I used to help me complete this project include CSS Grid, the course that taught me everything I know about CSS Grid. Wes Bos’s teaching style is informative and engaging and the projects were fun to follow along. This Stack Overflow post explaining aligning items vs aligning content was also 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. Finally, I used this explanation of CSS Resets to guide me and set up my main.css file.