A tiny component to present an order summary.
GitHub repository โข Live demo
git clone https://github.com/AngeliqueDF/order-summary-component-frontend-mentor.git MY-FOLDER-NAME
cd MY-FOLDER-NAME
npm install
npm start
- Visit http://localhost:1234
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.
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!
- Responsive.
- Semantic and accessible HTML5.
- Semantic
HTML5
. SCSS
.Flexbox
.- Bundled with
parcel
(v2).
- Started by structuring the page with semantic and accessible HTML.
- Styled the page with a mobile-first approach.
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):
- Installing
parcel
. - 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.