momin-riyadh / results-summary-component

Result summary component

Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Fetch data from data.json file

Screenshot

Links

• Solution URL: Result summary component
• Live Site URL: Result summary component

My process

• Create drawing from design (structure of design)
• Create of repo
• Create HTML layout
• Create CSS layout according style guides
• Create grid layout for mobile first
• Craete grid layout for desktop
• Implement JavaScript:
  • fetch data from data.json file

Built with

• HTML
• CSS
• JavaCsript

But created with love

What I learned

• Digging deeper into data fetching

Continued development

• Grid layout module.
• JavaScript (fetching data).
• Practise dealing with Git & GitHub.

Useful resources

• Fetch data_1 - This guides introduces data fetching technique.
• Fetch data_2 - This guides introduces data fetching technique.

Author

• Frontend Mentor - @Darionas

Acknowledgments

• Thank you Frontend Mentor team for opportunity to try, practice, train yourself in different level challenges and gain invaluable experience.
• Thank you @Vikram from Frontend Mentor for guidance.