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 README.md file. This will provide further details about the project and help you get set up.
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.
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.