How to create a states preview card

How to create a states preview card


Your challenge is to build out this card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you’ve got something you’d like to practice, feel free to give it a go.

Your users should be able to:

  • View the optimal layout depending on their device’s screen size

Download the project and go through the file. This will provide further details about the project and help you get set up.

My Solution

File structuring & VScode Extensions.

I decided that I will use SCSS, for it is my personal favourite. So I had to restructure my file structure to meet my minimum setup when I am developing a website.

You can youse any Code editor of your choice. I will be using Visual Studio Code by Microsoft as my editor, and I will have mainly these 3 extensions to make my development environment easy for me.

Structuring our HTML code.

After I download the challenge I then start to organise my code give the appropriate semantic HTML and classes in preparation for my styling using sass.

Styling our page.

Now that is all the HTML I need. I will then start to style my page.

I will start by defining my SCSS variables according to my style guide provided by Frontend Mentor.

Variables make your code easy to maintain, you change it once and every place where that variable is used will change for the whole website.

$main-background: hsl(233, 47%, 7%);
$card-background: hsl(244, 38%, 16%);
$accent: hsl(277, 64%, 61%);
$primary: hsl(0, 0%, 100%);
$paragraph: hsla(0, 0%, 100%, 0.75);
$stats-heading: hsla(0, 0%, 100%, 0.6);

Now that all variables are in place, we will style our page using the below code. We are going to use a combination of CSS Flexbox and CSS Grid for our layout, this is a great combination for an easy web layout. You can also watch this tutorial as we design an email template from Adobe XD to HTML and CSS on this website. It will help you with web layout techniques and mobile responsive design as well.

We Have Successfully Created a Website.

Using the links below, you can view and download the code from GitHub for free, you can also leave a star and you can also preview the website we just created together.

View Code | Visit Website