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.
Solution to design Result summary component on Frontend Mentor using only HTML and CSS
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
- Solution URL: (https://github.com/USII-004/frondendMentor-resultSummaryComponent)
- Live Site URL: (https://usii-fmrsc.netlify.app/)
- First designed the site layout with HTML
- Took note of font size variation, used 3 element in this design
- Each element are contained in a for easy styling
- proceed to include css styles in the design while using random color and fonts
- Started with card design and including box-shadow
- Worked on the result section before moving to summary
- worked on summary design and color while including svg and button
- Added colors and fonts as specified in the style guide and also adding active state for button
- include media queries to make the page mobile responsive.
- Check through to see any missing components or error.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Hanken Grotesk - Font family
I learnt the need of not having to use relative unit most of the time because when deveoping the inner circle, using a relative unit will cause the circle to shrink as the screen size width decreases. using an absolute unit fixes this problem. hence I only applied relative unit to text while shapes uses absolute unit.
I will probably focus on learning to properly use relative and absolute units, leaing when best to use which and also using hsl color selector.
- Website - Usman Awwal
- Frontend Mentor - @USII-004
- Twitter - @usman_smooth
My sincere appreciation goes to Free Code Camp, learnt everything i know on their site and also my appreciation ges to youtube and chatGPT for being there to guide me with tutorials and correct code samples when i can't seem to get it right.