0:00
Hello and welcome to this CSS video series for complete beginners
0:04
If you are new to CSS and want to make great websites, then you are in the right place
0:09
So let's start with what is CSS. CSS stands for Cascading Style Sheets. Let us suppose you are
0:16
building a house. The first step is to construct the structure, the walls, ceiling and the roof
0:22
of this house. Similarly, we use HTML to construct the structure of our website
0:28
But you don't want to live in a house with no paint and interior design, right? So you start
0:34
painting the house, decorating and designing it with elements like lighting, furniture, etc
0:40
Similarly, we use CSS to design and decorate our website. So basically, HTML defines the structure
0:48
and CSS determines the styling of our website. Here is a simple website created using HTML
0:55
This website looks so boring without any design and colors in it, right? Now I will insert CSS in
1:02
it and just look how beautiful this website becomes. So if you want to make awesome and
1:09
beautiful websites like this, then this video series is for you. I will be teaching you how
1:14
to write CSS and make awesome and beautiful websites step by step from scratch. Also
1:21
I am assuming you know the basics of HTML. But if you don't know, then you can check my last video
1:27
on HTML crash course. You can click here or find it in the description. So let's not waste time and
1:33
get started. Now I will be using VS Code for this series. So if you don't have VS Code installed
1:39
I already have an installation video. You can check it here or from the description below
1:44
Now firstly, we are going to install an extension called Live Server. So click here on extensions
1:52
and then search for Live Server. Hit enter. And the first one here, Live Server. Click here to
2:03
install it. And it may take a minute or so and it has been installed. The reason we are installing
2:09
this extension is because when we edit our HTML and CSS, our web page will automatically restart
2:16
Now if you didn't understand that, don't worry, I'll show you shortly what I mean. So stay with
2:22
me. So let me just close this and let's click here on Explorer. So I have already opened a folder and
2:29
I have named it learning CSS. Now I am going to create a new folder. I'll click here and I'll
2:35
call this folder chapter 1. Alright. Now inside this folder, right click and create a new file
2:44
Let's call this file index.html. This will be our HTML file. Now let's write some basic HTML code
2:52
A quick shortcut is something like this and we have this basic HTML boilerplate. Now here let
3:00
us start by writing a h1 tag and I'll call this h1 tag. Let's write hello earth. Let's save it
3:12
Now you remember that we earlier installed an extension called as Live Server. We are going to
3:18
use that. Okay. Now here in the corner, as you can see, we have this go live option that says click
3:24
to run live server. I am going to click on it and once I click on it, a new browser will open
3:32
As you can see this right here opens. This says hello earth. Right. Now what I'm going to do is
3:40
I'm going to split my screen and I'll have VS code on one side and this browser on the other side
3:47
Something like this. So click here so that we can close this Explorer
3:52
or a shortcut would be control B. And as you can see the Explorer closes. Now we have our code on the left side and our browser
4:04
on the right side so that we can start seeing our changes side by side. For example, I will
4:09
write another tag h2 tag. This is h2 heading. Now when I save it, see how it appears quickly here
4:18
without refreshing the page. So I will save it and as you can see the h2 heading is here
4:24
I'll just change it by adding some periods, save it and as you can see the periods are here
4:30
That will be enough for this video. In the next video, we will see how to use CSS
4:35
starting with the inline CSS. So make sure to like this video
4:39
share it with your friends and I will see you in the next one
