![Video thumbnail for Create a Stunning Landing Page Using HTML & CSS | Easy Project [Part 1]](https://video-meta.open.video/resized-posters/ZjCor6NarR2/res640.webp?cb=1)
Up next in 10
🔥 Welcome to this full HTML CSS project tutorial!
In this video, you will learn how to build a clean and modern HTML CSS website from scratch. We will design a beautiful landing page HTML CSS layout step-by-step, perfect for beginners or anyone looking to improve their HTML CSS website design skills.
💻 Whether you are learning for fun, building your portfolio, or following an HTML CSS course, this tutorial will help you understand the complete process of creating a responsive and professional website using only HTML and CSS.
✨ What you will learn:
How to structure a full HTML CSS project
Clean and modern HTML CSS website design
Responsive landing page layout
Best practices for beginners
#htmlcssproject #htmlcsswebsite,
#htmlcsswebsitedesign
#landingpagehtmlcss
#htmlcsscourse
Show More Show Less View Video Transcript
0:00
Hi friends, welcome to tutori channel.
0:02
Today I'm going to teach how to make the
0:04
simple website using HTML and CSS
0:06
flexbox. So if you learn these things,
0:09
you'll be able to do any kind of a
0:12
website. The simple stuff. Okay. So
0:15
let's go into the video first. Okay. So
0:18
I'm going to go to make the new website
0:21
called the D drive. I'm going to make it
0:23
the folder
0:26
website
0:29
exercise.
0:31
Okay, here I'm going to make it cmd code
0:35
space dot open here.
0:39
Now first you have to think about the
0:41
first I'm going to go to open the index
0:44
dot
0:46
html.
0:50
you have to hold on the shift + one
0:53
implement the HTML standard. So first
0:55
I'm trying to go to define the what what
0:58
is the things we have to first you have
0:59
to focus on the uh things. So what are
1:03
things here we have to do it? We have to
1:05
do it from the website.
1:08
This is logo section. After that what is
1:10
the things? This logo. This is the new
1:13
links. Here also the new links. Here one
1:16
is the uh registration uh bar. So these
1:20
are the things simple. So what I'm going
1:22
to see here this is the structure we
1:23
have written. So let's write this as
1:25
well. So first you have to write the
1:27
container first.
1:31
view
1:34
class container
1:39
program.
1:40
Okay, this a class container, right? So
1:43
this container what are the things we
1:45
have to implemented here is we need a
1:47
logo. We have a uh two things. One is a
1:51
new links another one is a uh container
1:55
but we have a two uh links we have to
1:58
put two dives inside here. Okay. So this
2:01
one like this this is one area this is
2:04
second area. So we have a two comp two
2:06
divs inside here we have simply you have
2:09
write two divs in two.
2:14
This one should be n links. This class
2:17
be called as n links.
2:22
Second one is called as a class
2:26
uh container but
2:31
we have a two tools
2:34
first what I'm going to do is we have to
2:35
implement the images and everything so
2:37
we have to write it like this simple we
2:40
have to write this kind of a images
2:44
I'm going to get this images from my
2:47
website
2:49
source so where my website this is
2:51
website. So you can have it your own
2:54
logos. Okay. So you can get the logo. So
2:56
I'm going to go simply copy the image at
3:02
import it here.
3:05
Okay. So I'm going to specify the width
3:07
and height. Okay. That is important.
3:10
Width I'm going to mention it as 1680
3:13
pixel and height 80.
3:22
That's it.
3:24
Yeah. After that URL implementation, URL
3:27
I need to this uh uh HRF uh home about
3:32
us uh service and contact us. These are
3:34
the things I have implemented. So let's
3:37
check it. Go to that uh folder. You have
3:40
to make it What happened? This is simple
3:43
one without do anything else. I have
3:45
make the things without style. Okay.
3:49
Second one is a button here. This this
3:51
part I'm going to do the second part
3:53
this a button. What is the things button
3:56
right? So button also we have to write
3:58
this one as here also the button also we
4:01
have to implement this one here as but
4:02
inside the button you have to write the
4:04
new plus new links.
4:09
So then only that button also working
4:11
that new link style. The same thing you
4:13
have writed this here.
4:17
This one should be your payment.
4:22
What else?
4:32
Student is
4:38
students.
4:43
Okay. So what I'm going to do is here
4:46
inside here you can write it here simple
4:56
we can implement that uh
4:59
slash
5:04
what happened.
5:13
Okay, I get it from this one, here, this
5:16
one. Okay,
5:19
my keyboard. This simple. So, I'm going
5:22
to get it this here as well.
5:38
That's it. I will check it. Check it on.
5:45
It's coming like this. Okay. So that we
5:48
have two times wasted. Right. After that
5:51
we have another one thing is called as a
5:54
one input button. Okay. So the input
5:57
that called as input button. We need a
5:59
button button. Okay. We have how to
6:02
write the button. Input type.
6:05
You have to write here this one. Input.
6:07
Okay. You have to write the button. So
6:08
you have that like a input.
6:11
Input
6:13
type
6:15
submit
6:20
value
6:22
register.
6:27
Okay, that's a one. Okay, check on it.
6:30
The styling everything perfect. Now what
6:33
I'm going we have done the
6:36
things well. Now I'm going to go to do
6:38
the styling part. So we have to write
6:40
the uh let's create the file which is a
6:42
index
6:44
dot CSS.
6:46
Okay, index dot CSS. First what I'm
6:48
going to do is you have to write body
6:53
you have to write here padding zero
6:57
margin zero.
7:01
After that you have to container
7:08
open and close it. this same container
7:12
bring it here dot container
7:16
now I implement the display flags
7:23
okay display we have to implement the
7:25
display flags now let's implement and
7:28
check it whatever okay it's nothing so
7:32
after that what I'm going to do is
7:33
display flags we have to do the another
7:36
styling part okay what I did here is
7:38
Okay. Uh so you have to write uh couple
7:41
of things. Okay. So you have to write uh
7:43
here we have to write uh display flags.
7:47
You have to make it as a justify
7:49
container. We have to justify sales
7:52
uh space between this is very important
7:55
stuff in between the letters. It's
7:58
nothing happen. Okay. I haven't link it.
8:01
That's why it's not nothing happen.
8:03
Don't link the CSS. So the down link. So
8:06
you have to write like this. Uh
8:10
you have to write to make the links.
8:11
Okay. So you have to link it. You have
8:14
to write link
8:17
relationship stylesheet
8:21
stylesheet.
8:24
After that href
8:28
write index dot
8:30
CSS. That's it.
8:33
Now that this successfully linked now
8:36
let's check it check on it. Oh it's
8:39
okay. Now it's working fine. Now again
8:42
I'm going to go to do that do the rest
8:44
of the styling part. So I write uh the
8:48
rest of the things.
8:51
Write boxing box
8:57
sizing. This is the important stuff.
9:00
border box.
9:03
Okay. The if you write the border box,
9:04
what happen is it is bordering. You can
9:07
see what happened
9:14
it is
9:16
after that what I'm going second one
9:20
width
9:22
100
9:24
pixel
9:26
percentage
9:31
okay
9:33
so after that what I'm going to what are
9:35
the things what else we have added
9:37
uh height height background color align
9:39
it okay I'll explain height
9:44
height 100 pixel mean we have the size
9:47
so the uh background color I keep as it
9:50
is in the white so height 100 this is
9:54
the height no need I more than 100 it is
9:59
not a good align item
10:03
Enter.
10:11
Okay. Align items like that. It's
10:13
perfect. That's the thing you have to
10:15
it. Okay. That's the thing we have to
10:17
it.
10:19
Okay. So that gap and padding this is
10:22
the things also the must
10:24
in between the gap padding in in between
10:27
here padding.
10:31
padding
10:35
need of 50 pixel mean 50 pixel and gap
10:42
50 pixel
10:46
okay it's okay now you see it's padding
10:48
arrange gap everything's added now let's
10:53
do the couple of things
10:56
uh do the things now what I'm going to
10:58
do is here I'm going to make the new
11:00
link
11:06
N links
11:13
the nings I added I explained don't
11:16
worry
11:19
okay what I did is you have to place
11:22
here first I have to show the output how
11:24
how the things works
11:30
New links
11:32
type new links
11:35
I just name it as like this. So let's
11:38
put new links here. It's working as you
11:41
can see now it's working successfully.
11:44
Uh
11:46
uh it's okay now that's why it's going
11:49
like this. put it here as well.
11:53
Okay, now it's okay. But it's a problem.
11:56
Okay. Now what I did here is new links.
11:59
What I did here is new links are
12:00
implemented. Okay. Now links what I did
12:02
here is nail links display flax mean it
12:04
is uh flax direction mean it is uh
12:07
horizontally. This one it is gap 20 mean
12:12
in between this uh in between home and
12:14
about us. In between the letter we have
12:16
a 20 pixel space. Here also 20 pixel
12:19
space everything that's the meaning of
12:21
that 20 align center means align center
12:24
after that uh n links a mean link
12:30
a mean that hyperlink we are going to
12:32
style which hyperlink this
12:35
I'm going to going to style so how to
12:37
style it you have to go over here
12:44
tech decoration none mean hyperlink we
12:47
have get rid of Hyper link text coloring
12:50
black font size I'm going to make it as
12:52
20 this thing you have to it that's it
12:56
that's it the font size you have to put
12:58
it as a 15
13:09
that's it after that what I'm done is we
13:11
have need a register button
13:15
next step I want to do the thing is
13:18
register. Okay. So we have write a class
13:20
to write register
13:26
here also dot
13:29
register.
13:33
Okay. Register class. I have made the
13:36
style simple style here. uh text form uh
13:40
upper case mean the letter should be
13:43
make it as
13:46
upper case.
13:49
Okay. So after that text align center
13:52
this is nothing but this alignment make
13:54
it as center color white outline none
13:58
border none border radius 8 pixel mean
14:01
this 8 pixel border around the circle we
14:05
have a border 8 pixel font height uh 500
14:09
font size
14:12
16 everything should be perfect after
14:15
that background color this a light green
14:17
that's a that's a We have implemented
14:20
simply you have to implement that's it
14:25
okay that's the thing we have to
14:26
implement simply we have to make the
14:28
things okay so this is simple way we
14:30
have to implement the system the padding
14:33
this is the up and bottom up and bottom
14:37
this is the right and left 40
14:40
the padding okay the simple way we have
14:42
to implement the styling and everything
14:44
okay this we have made the simple steps
14:46
of the header section that uh below
14:49
sections we have. I will continue in my
14:51
next video tutorial.
#Programming
#Education