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 active states for interactive elements

Screenshot

Links

• Live Site URL: wiksien.github.io

My process

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• CSS Grid
• Custom fonts
• Love and care

What I learned

I refreshened my knowledge about HTML and CSS, especially using SASS. I learned how custom fonts work and how to apply them in my websites. I improved my workflow within my IDE, Visual Studio Code.

Continued development

In my future projects I defenetly want to take more care in naming SASS variables more accordingly and also seprate them into a different file to improve code readability. I would also like to explore using custom fonts in my projects more, I think they give a lot of personality to the website. Finally, I would like to include more JS into my future projects.

Useful resources

• A Complete Guide to Flexbox - This helped me to quickly get information about what I need to do in order to complete a particular task using Flexbox. Great source of knowledge, I love how every property has a nice graphic to show what it does.
• A Complete Guide to Grid - This helped me in the same way as Complete Guide to Flexbox, but with grid. Great source.
• MDN Web Docs - This helped me to get information about little stuff I forgot like shorthands ect. Another great source, I really like the this documentation is written, it is very understandable and makes all the specyfic information I need easly accessible.

Author

• Wiktor Sienkiewicz
• Frontend Mentor - @wiksien