Sekonso/result-summary

A beginnerchallenge project about single page of someone's cognitive ability test result

Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Useful Resource
• 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

Links

• Solution URL: Repository
• Live Site URL: Github pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript (DOM, Fetch)
• SASS
• Flexbox
• Desktop-first workflow
• Custom utilities

What I learned

• Applying media queries
• Some coloring technique like box-shadow and gradient
• Basic SASS
• Fetch API
• DOM Traversal
• Basic git

Continued development

• Media Queries
• Desktop/Mobile-first Workflow
• Fetch, Promises, etc
• SASS
• DOM
• Git & Github
• CSS Framework

Useful Resource

• Cheatsheet for front-end development language (https://htmlcheatsheet.com/)
• Web Development Programming tutorial (https://www.youtube.com/@TraversyMedia)
• Web Development Simplified (https://www.youtube.com/@WebDevSimplified)

Author

• Frontend Mentor - @seconds
• Instagram - [@ancaadri9]

Acknowledgments

• Understanding some of the new concept by chatGPT.
• Big help from SASS to GIT tutorial from Brad Travesty (Youtube Channel)
• Got some help from HTML cheatsheet as well