Conquering Frontend Mentor — Challenge -1

Image for post
Image for post
Photo by Stefan Gall on Unsplash

Recently i found i great site to develop your frontend skills. The site is Frontend mentor and this is the Fylo data storage challenge. The great thing about the challenges is that they provide all the assets and also the color schemes. After that you have to check the desktop and mobile screens.

Image for post
Image for post
Fylo data storage

I will first add all the html and then start with the styles. Below is the index.html file. There is a container class, which wraps everything. Then the card class contain the main classes of navigation and details-wrapper, which will contain the two parts.

With this basic html our site looks like below.

Image for post
Image for post
Basic html

Now, we will add the basic css in our styles.css file. The font and the colors are provided by frontend mentors in style-guide.md file.

Image for post
Image for post
styles.css

Now, our site with the basic styles will look like below.

Image for post
Image for post
basic

First, we will add the styles for container and card. Here, we are making both of them as grid. Also, adding the background image at the bottom.

Image for post
Image for post
container

The web-page will look like below and quite nice.

Image for post
Image for post
Web-page

Now, we will style our first section containing the Fylo logo. Here, we will first make the wrapping class navigation as grid, with two rows. Then the class navigation-bar containing our icons will be made flex.

After that just giving a bit styles for each icon with the nav-item class.

Image for post
Image for post
Fylo

Now, our web-page will look like below with fylo component done.

Image for post
Image for post
Fylo Done

We will target the next section details-wrapper now and making it flex first with direction as column. After that we are making our details-container class containing the main part as grid.

We are also making the details-range class as flex, with it’s two items having space in-between.

Image for post
Image for post
details-container

Now, our details section will look like below.

Image for post
Image for post
details-container

Next, we will add the styles for range. Here, also we are using the linear-gradient provided to us in style-guide.md file in the range-indicator.

Also, making the dot with the range-point class.

Image for post
Image for post
range-indicator

Now, our range will show perfectly.

Image for post
Image for post
Range

Now, it’s time to style the details-remaining class. We are making it flex and the main thing is that making its position as relative.

Image for post
Image for post
details-remaining

Now, the details-remaining is looking as below.

Image for post
Image for post
details

Now, we will make the small arrow using the pseudo class before and moving it to the right position using absolute.

After that moving it to the right place using align-self and right and top.

Image for post
Image for post
Arrow

Now, our whole design is complete for the desktop view.

Image for post
Image for post
Desktop view

Now, for the mobile view we don’t have to do much changes. In card class the grid-template-columns is been made as one column. Beside this in the container class the background image, is been made as cover.

For the details-remaining we are moving it to a different place with the help of position absolute. Also making the arrow disappear for details-remaining:before using it’s display as none.

Image for post
Image for post
Mobile View

Our mobile site is complete and it will look like below.

Image for post
Image for post
Mobile

This completes our first Frontend mentor challenge. You can find the code for the same in this github link.

You can find part-2 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store