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.
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: Github repository
- Live Site URL: Github pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- CSS functions
I thought I had everything I needed to build this project, at first. But in the middle of the work I realised I need to learn some things:
I first tried setting list-style-image
but that didn't work out because it was adding extra marging and I had cleared that margin out, so, it just wasnt showing the list icons.
Then I had to google (duckduckgo LOL) a little bit. That was when I learned this piece of code here:
li{
background-image: url(./image.jpg);
background-repeat: no-repeat;
background-position: .2rem .3em; /*it is very important to set the position of the icon.*/
padding-left: 2.2rem; /*add padding on the left to show the icon clearly*/
}
This was my first challenge. Now that I now how useful it is to develop real world skills, I want to commit at least one challenge for week.
- Tutorial 1 - Background images for bullets - all steps combined - This tutorial helped me solve the list icons. It is really clear and straight to the point.
I didn't find it helpfull the fact that they specified mobile width to 375px, because there are larger mobile devices and the project is just going to look bad on them. For this reason, I set mobile device width to 455px
to behave well in all devices and have smooth transition form mobile view to desktop, when the screen is zoomed or resized.
- Website - https://fideldemoz.github.io
- Frontend Mentor - @fideldemoz
- Facebook - @fidel.livino