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

I loved the challenge. It helped me master some of the styling I haven't been enjoying like the media query. I am better than when I started to work on the project.

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: Add solution

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Styled Components - For styles

What I learned

My major lesson was adding the patterned background svg in the body with just a line of code.

To see how you can add code snippets, see below:

.dance-image{
    background: url('./images/pattern-background-desktop.svg') no-repeat center/cover;
}

I practiced the media query components and I have mastered the technique quit well now.

Continued development

During the challenge I came across the hover states it was my first time working on them and I would like to do more of that in my next project. Media query has for the longest been bugging me but I think working on it on this project was not overwhelming. I would like to work more on this as well.

Useful resources

• Resource 1 - I would recommend any one learning CSS to watch his tutorials they are well explained and simple to understand. I learned how to center my . The media query concept is now easy for me to handle any similar website.

Author

• Frontend Mentor - @Maryahcee
• Twitter - @maryah_peters

Acknowledgments

I am grateful to my hubby Harrison kimani for the insigts while working on my container and on the motivation during the whole project.