live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
![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