CSS3 in 10 days — Day 4

Photo by Alexandru Acea on Unsplash

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.

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.

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

It will show our cute 8-bit 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.

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.

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

It will show our web-page as below now.

Next, we will add more styles for pricing-table

And it will change the web-page as below

Let’s complete our pricing-price now.

It will result in below.

Now, lets style the li and ul.

It will result in below.

Next, we will style the footer.

It almost completes our pricing table.

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

It completes our Pricing table

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.

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

Nothing is done in browser.

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

It will show the 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.

--

--

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