Welcome to Day 4 of learning CSS. You can find Day-3 here.

As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel.

We will start with 8-Bit Mario on day-4. Open your code editor and create a new 4.1-8BitMario folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
index.html

Let’s create mario now. Head over to sandbox.css and copy the below code. We are giving background-color: #e7eef1 and some box-shadow also as #e7eef1. Then we are painting the color over it.

The above will result in showing a little part of Mario’s hat.

Image for post
Image for post
Hat

Let’s complete the Mario by putting all the code.

It will show our cute 8-bit Mario.

Image for post
Image for post
Mario

Next, let’s give some jumping animation to Mario. Add the below code in sandbox.css and then click and hold the Wahoo! button for a jumping Mario.

Image for post
Image for post
Jumping Mario

Next we will create Pricing Table. Open your code editor and create a new 4.2-PricingTable folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

It will show the basic html.

Image for post
Image for post
Basic

Next, we will add some basic styles in sandbox.css

Image for post
Image for post
sandbox

It will show our web-page as below now.

Image for post
Image for post
Basics

Next, we will add more styles for pricing-table

Image for post
Image for post
More

And it will change the web-page as below

Image for post
Image for post
New page

Let’s complete our pricing-price now.

Image for post
Image for post
Pricing-price

It will result in below.

Image for post
Image for post
The result

Now, lets style the li and ul.

Image for post
Image for post
li and ul

It will result in below.

Image for post
Image for post
ul and li style

Next, we will style the footer.

Image for post
Image for post
Footer

It almost completes our pricing table.

Image for post
Image for post
Pricing Table

Now, it’s time to style the popular table differently.

Image for post
Image for post
popular

It completes our Pricing table

Image for post
Image for post
Completed

Next, we will look into CSS Variables. We can use them to assign values to a variable and use it later in other parts of the program.

Open your code editor and create a new 4.3-CSSVariables folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
Basic Html

Now, put the variable declaration in sandbox.css . Notice it will cause nothing as we are not using it.

Image for post
Image for post
sandbox

Nothing is done in browser.

Image for post
Image for post
Nothing

Now, we will use these variables. You can also do math on the numeric units.

Image for post
Image for post
Using variables

It will show the boxes in browser.

Image for post
Image for post
Boxes in browser

This completes day 4 of the course. You can find Day 5 here.

You can find the code for the same 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