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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: Order Summary Card
• Live Site URL: Order Summary Card

My process

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned how to write styles in SASS instead of normal CSS. I get to learn how can we can use Nesting, inheritance, Variables and Import in SASS. Instead of using CSS Variables I use SASS Variables which are more easy to use, in my opinion. After writing all the styles in SASS I compile them in regular CSS by using VS Code Live SASS Compiler Extension.

I also get to learn how we can use svg images instead of normal jpg/png images in our webpages. They are more dynamic and useful. They don't break their resolution when we increase or decrease their size.

Continued development

I want to learn more about SASS and other CSS properties by doing further Frontend Mentor Challenges. Looking forward for next challenge.

Useful resources

• SASS Docs - It contains all the information about SASS and it helps me a lot while learning and writing SASS.
• SASS Crash Course - Traversy Media - Since I learned better from Videos this YouTube Video by Traversy Media helped me a lot while learning how to write SASS.

Author

• Frontend Mentor - @chetanhaobijam
• Twitter - @chetanhaobijam