Order summary component

This is my solution to the order summary component challenge on Frontend Mentor. Frontend Mentor is a platform where developers can learn and improve their frontend development skills alongside other developers by implementing solutions to challenges. Each challenge includes designs (both mobile and desktop), assets, and a style guide to get you started. The rest is up to you!

Overview

The challenge

The challenge is to build out this order summary component and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout depending on their device's screen size.
• See hover states for all interactive elements on the page.

I don't have access to the premium Figma/Sketch files, so the design is not pixel perfect.

Screenshots

Desktop design

Active states

Mobile design

Links

• Live Site URL
• Solution URL

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• Mobile-first workflow

What I learned

By doing this challenge, I gained a better understanding of how to write clean and accessible code. I also had the opportunity to practice the fundamentals of SCSS, following the DRY principles.

Run Locally

Clone the project

  git clone https://github.com/iPavelGeorgiev/order-summary-component.git

Go to the project directory

  cd order-summary-component

Install dependencies

  npm install

Start the server

  npm run start

Author

• Frontend Mentor - @iPavelGeorgiev
• LinkedIn - @iPavelGeorgiev