angeliquedf / order-summary-component-scss

Order Summary Component challenge

Overview

A tiny component to present an order summary.

Links

GitHub repository • Live demo

How to run the project

1. git clone https://github.com/AngeliqueDF/order-summary-component-frontend-mentor.git MY-FOLDER-NAME
2. cd MY-FOLDER-NAME
3. npm install
4. npm start
5. Visit http://localhost:1234

The challenge

Your challenge is to build out this order summary card component and get it looking as close to the design as possible.[...]

Your users should be able to:

• See hover states for interactive elements.

From Frontend Mentor

Description

This project is my solution to the Order Summary Component challenge from Frontend Mentor.

The most challenging part was deciding on the HTML structure with the information given.

I still find that I relied to much on <div> elements. Any suggestion on the markup is welcome!

Features

• Responsive.
• Semantic and accessible HTML5.

Technologies

• Semantic HTML5.
• SCSS.
• Flexbox.
• Bundled with parcel (v2).

How I built this project

1. Started by structuring the page with semantic and accessible HTML.
2. Styled the page with a mobile-first approach.

What I learned

I added parcel to have an idea of how to use it compared to webpack and gulp. I didn't have to write any JavaScript or add any loader, even for SCSS support! The plugin needed was installed automatically.

All it required to work was (updated):

1. Installing parcel.
2. Start working using npm run build:

"source": "/src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },

With this configuration:

• "source": "/src/index.html" indicates the path to the entry of the app.
• npm start starts a local server, enables live reload for development.
• npm run build generate a /dist folder to use for deployment.

This was ideal for such a small project.

Sources

• Order summary component by Frontend Mentor

Useful references

1. Why You Should Choose HTML5 article Over section

Useful extensions

• W3C Web Validator - Visual Studio Marketplace. I use this extension to check the validity of HTML code from the editor.