/order-summary-component-main

Order summary card challenge on Frontend Mentor

Primary LanguageSCSS

Frontend Mentor - Order summary card solution

Hello my name is Ikhsan Fauji, and this is my solution to the Order summary card challenge on Frontend Mentor. Really interesting to do this challence because it has amazing design with clear user experience. I have to build out this order summary card component and get it looking as close to the design as possible even if I don't have the detail informations of the design because I use free account to solve this challenge.

Table of contents

Overview

The challenge

Users should be able to:

  • See hover states for interactive elements

Screenshot

Mobile Preview

Desktop Preview

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Sass Style Preprocessor
  • Mobile-first Workflow
  • Accessibility Approach

What I learned

In this challenge I keep in mind to setup the SASS style pre processor and create boz-shadow.

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

<article class="card">...</article>
.card {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
"scripts": {
  "sass": "sass ./assets/sass/index.scss ./assets/css/style.css"
}

Continued development

The first thing I wana do is learn more deep about css so that I can styling my html more easier.

Useful resources

  • SASS Documentation - This site help me to setup and learn more about SASS Preprocessor.
  • Web.dev - This site help me to solve problems about Fist Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time and Cumulative Layout Shift.
  • Lighthouse This is chrome extension to help me reviews Performance, Accessability, Best Practice and SEO.

Author