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.
Users should be able to:
- See hover states for interactive elements
- Solution URL: www.frontendmentor.io/solutions/responsive-order-summary-card-using-sassscss-H8PwPtElv
- Live Site URL: order-summary-component-seven-gray.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS/SCSS
- Mobile-first workflow
This project was a good practice in terms of using:
- flex
- media queries
- BEM structure
Firefox add-ons that I used to create a pixel perfect version of this website:
- Pixel Perfect Pro - This helped me to display a screenshot on top of the webpage to easily check if dimensions were accurate.
- PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.
Other tools:
- Gimp - This helped me resize screenshots provided in the project
- Figma - This helped me create a rapid mockup to get dimensions of components.
- Frontend Mentor - @melwynt
- Twitter - @melwyntee