/results-summary-fem

A Frontend Mentor Challenge

Primary LanguageCSS

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

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • CSS functions

What I learned

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:

Setting background to list items

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*/
}

Continued development

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.

Useful resources

Constraints

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.

Author