live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Simple HTML CSS Tutorial for Perfect Navigation Bars!
Source code : https://www.tutussfunny.com/responsive-navigation-bar-with-flexbox-css/
Learn how to create a flexible navigation bar using CSS in just a few minutes! In this tutorial, we'll show you how to build a responsive navigation bar that adapts to different screen sizes and devices. You'll learn how to use CSS flexbox to create a flexible layout that can be easily customized to fit your needs. Whether you're a beginner or an experienced web developer, this video is perfect for anyone looking to improve their CSS skills and create a professional-looking navigation bar. So, what are you waiting for? Watch now and start building your own flexible navigation bar today!
#responsivenavigationmenu #htmlcss #flexbox #flexboxcss
Show More Show Less View Video Transcript
0:00
hi friends welcome to tutors funny
0:02
channel Today I'm going to teach how to
0:04
make this kind of a navbar using HTML
0:09
CSS flexbox So first what you're going
0:11
to do is simply we have to I'm going to
0:14
create a
0:18
project HTML CSS flags
0:24
So here I'm going to open this command
0:26
from window code space dot to
0:31
open very simple this is very simple so
0:34
now what I'm going to do is first so
0:37
here I'm going to open the index html
0:42
index html
0:44
file simple here in VS code you have to
0:48
type press hold on the control key
0:51
control key down press Hold on shift key
0:54
down uh key down uh down and press one
0:57
and get this marks Click on there You
1:00
have to hit the uh HTML uh generated
1:04
automatically like this If you are like
1:06
if you press the both keys okay this is
1:09
a simple uh automatically generate the
1:12
HTML codes Now here first you look at
1:16
this go and look at this design So okay
1:19
this is the one item This second item is
1:22
a third item First you have to observe
1:24
So here first how many items are there
1:27
first you have to uh get the idea There
1:30
are three items Okay 1 2 3 Okay So now
1:37
what I'm going to do is I'm going to go
1:38
to here First I'm going to go to here
1:41
What I'm going to do is I'm going to
1:43
make a
1:44
div You write like this div dot
1:48
container
1:51
Press tab key on your keyboard Then it
1:53
will be coming like this After that you
1:55
have to
1:55
write
1:58
dot
2:01
items You have to write this aster three
2:04
press enter key So here you will be able
2:06
to here there are three we have divide
2:08
by three
2:10
tips Okay you will be able to
2:13
understand Okay So if you look at the
2:15
reason there are three there are three
2:17
items Okay So first one should be we
2:21
have to make it as this one should be
2:22
the
2:23
logo Second one this we have write it as
2:25
here we have to create the logo Okay So
2:28
we have write a log So type this one as
2:31
a uh what is the thing you have to type
2:34
next
2:37
uh we have typed some other name We have
2:38
to write
2:42
uh copia
2:46
This the name
2:48
copia Okay Copia
2:56
name Okay So this logo after the second
2:59
one should be the menus So menus we have
3:02
to create this one as you type inside
3:05
here What other items are
3:09
there tour features like this tour
3:14
Otherwise you can write at
3:17
home Copy this and paste on it here
3:28
About simply copy and paste it
3:31
below
3:34
Service
3:39
contact Third one should be our button
3:41
This should be our button
3:44
Okay this one should be the
3:49
part Okay it's a get
4:07
start Now we have to right click and
4:10
open with live server you'll be able to
4:12
see the simple design you'll be able to
4:15
see Okay Now what I'm going to do is I'm
4:18
going to go to the
4:21
head So type
4:29
style You have to write here body This
4:35
body margin
4:38
zero padding
4:40
zero
4:44
After that this after that this
4:48
items first you have to write like this
4:50
you'll be able to see
4:54
it
4:56
Okay After that what you're going to do
4:58
is this is the
5:00
our logo So first we have like this we
5:03
have to this is our container First
5:05
container this container first I'm going
5:07
to go to styling So your
5:10
container open and
5:13
close here What you're going to do is
5:15
first you have to implement
5:17
flax display
5:20
flags You implement flax You can see
5:22
here if you implement the flags and see
5:26
here you can you can see this
5:30
one You can see here this one called as
5:33
a flex direction row Default it's come
5:36
as flex direction row Okay after that
5:39
you have type justify
5:41
container space
5:44
between now you can see what
5:46
happen here it automatically take the
5:53
spaces okay now after that what I'm
5:56
going to is I want to set the
6:01
padding your drive simply you have
6:05
to Uh first one you have to write a top
6:10
and bottom you have
6:13
type for
6:15
20 right and left you have type 40 pixel
6:19
control S to
6:21
save
6:23
here here it will be 40 here it's
6:28
20 okay it's 20 so we have write again
6:30
we have to we have to some
6:33
other thing here to 40 from 60
6:38
whatever yeah you can do the
6:41
spaces spaces will be you getting the
6:43
spaces it's nice after that what I'm
6:47
going to this is the logo logo I'm going
6:51
to style it dot
6:55
logo font
6:58
size but write one
7:03
ram
7:04
font weight I'm going to give as
7:07
a
7:12
700 but too much slow
7:18
two you can see
7:20
here now you can see you have tried two
7:22
RAM you can see the different the logo
7:25
is successfully done it now if you want
7:28
to do the color one color you have to
7:31
give the color as any anything color you
7:34
can able to do the put the color as well
7:37
So I'm going to put the color Okay So
7:39
what I'm going to is here I'm going to
7:41
put the container also I'm going to
7:43
background color I'm going to put it as
7:45
this blue So that blue I'm going to put
7:48
it here Dark make it as
7:52
dark Okay So if the color is not coming
7:55
like this you have
7:57
to there is a extension called go here
8:05
prettiest extension called prettiest
8:07
because I haven't connect the internet
8:09
connected yet that's why it's not
8:11
completed now you can see coming here
8:14
you type
8:20
prettest okay this is the tool we have
8:22
installed here you
8:26
Okay this one you can get that if I
8:29
install this one you can get this color
8:31
window and
8:33
everything prettier prettier format Okay
8:36
this a code format everything it will be
8:39
uh done by this extension prettier Okay
8:44
this this is the purpose of we have
8:45
installing the prettier Okay so after
8:48
that you can see this background color
8:49
we have gave here this one So I I want
8:52
to get the foreground color also the uh
8:56
glitter color also I'm setting as a
9:01
white Now let's you check it Check it's
9:04
now
9:06
successful Font family also you have
9:08
write phone
9:11
family Uh whatever you can choose from
9:15
here this list there are many things are
9:18
there Uh we have to check this one
9:22
sir Now let's check it here It's
9:26
correct Okay Simple Now it's done
9:30
successfully Now
9:32
logo logo done it successfully Now if
9:35
you want any other
9:38
uh any other you can give the things you
9:41
can will be able to do Okay So after
9:44
that we have to write a thing is I'm
9:46
going to go to do the thing is second is
9:48
this items item also I'm going to write
9:55
item you can put it the link item or
9:58
something else just put the item you
10:00
have this
10:04
display I write
10:07
flex display flex flex
10:15
Direction direction
10:20
row okay row you put row here it is it's
10:25
coming as a row okay now I'm going to
10:28
set this another one is
10:32
a align
10:34
item
10:37
set you have
10:38
right horizontally you have to Make it
10:41
as center this one That's why we have
10:42
put this one Check So after that we have
10:45
do another one is the item We need a gap
10:48
in between the letter We have
10:51
gap a gap or 10 pixel Let's check
10:54
control S to save and check it Okay
10:57
Check So if you want to I want to check
11:00
with the document here is so much spaces
11:03
in between the letters Okay So let's do
11:05
it Uh 200
11:09
pixel Now it seems to be
11:11
okay It seems to be
11:15
okay In between here there are too much
11:18
spaces hit it It has been okay Okay It's
11:23
loading successfully Okay So in order to
11:25
do the another one is we have we need
11:27
the icons You have to get this icons You
11:30
have to write the code There's a site
11:32
which is a
11:35
icon 8 Go here You can get the free
11:43
icons I want to get search icon This
11:47
icon you can select the tab
11:50
icon Type
11:59
search So yeah this icon is there I need
12:03
a SVG file Okay So click on that You
12:07
have to copy this Just a copy Uh this is
12:10
coming as
12:12
a black color I want to change the color
12:15
here as a white color Instead of that
12:17
I'm going to change this white color
12:19
Done
12:20
it Just copy this code
12:23
See SVG We just copy that code
12:26
particular code And back to our project
12:29
here I have to just make the copy and
12:32
paste
12:33
here Okay I show you how
12:35
to tap key and
12:38
align whatever tap key and align Now
12:40
let's check it back Whatever it's coming
12:44
here it's coming successfully Now I want
12:47
to do the thing is this one We have to
12:49
this search I don't text I don't need a
12:53
text this one This one you get rid of
12:56
this the width and height we have
12:58
specify the width and height We have to
12:59
give it have 50 Width and height also we
13:02
have 50
13:05
Check it back This is also too much This
13:08
you have to get
13:09
the height
13:15
30 Now it seems to be okay It's
13:19
okay Okay Now if you want to reduce the
13:22
height little bit
13:27
25 width also you have write
13:30
40 Control S to save here Now it's
13:35
open Okay Now it's a thing is
13:39
okay Right So you'll be able to see the
13:42
search Okay Download Okay This how we
13:45
have made the icons Simple I have puted
13:48
one icon here You can you will be able
13:50
to put
13:52
uh whatever icon you need Okay So you'll
13:55
be able to put whatever icon you need
13:56
Okay These are simple icons Okay So you
13:58
have to get the icons right so this how
14:01
you have to put the icon Simple way you
14:04
have to put the icon Okay You have to
14:06
write a font white
14:09
Uh get the icons Simple You have to
14:12
write a icon look like this way So you
14:15
have to write another style We have
14:16
write a style property Now we have we
14:18
don't have a style property over here So
14:21
you have write
14:22
style Let me do it Let's
14:28
hold support No it's not applied So it's
14:37
working Okay it's working successfully
14:40
So the stroke b length here right here
14:43
we have to stroke uh width here give two
14:46
whatever
14:48
uh stroke width here
14:51
give
14:53
five okay it's not it's no problem uh
14:58
it's
15:01
okay so there are a property okay so
15:04
that that's how we have to give the
15:06
problem it's simple it's a stroke we are
15:09
telling that uh thing is not 3 pixel
15:14
something
15:16
Okay So this how we make the simple way
15:20
to do the design Okay This how we have
15:23
simply you have do the designs Okay So
15:25
this one other buttons you go to the
15:27
button button also we have style this a
15:30
button you type
15:33
btn coming over here you have type
15:37
btn open and close bracket outside the
15:40
button button also we have outside the
15:43
button so you have write background
15:48
color
15:51
blue but we have to get the
15:55
blue or get this kind of
16:09
sign After that we have write the
16:14
color black
16:22
Black
16:25
border radar areas you
16:28
write 3
16:30
pixel right
16:33
padding 10 to
16:36
uh top and bottom you have to set as 10
16:40
left and right 20
16:42
let's do it here it's successfully
16:45
coming here successfully coming I want
16:48
to do the thing is here the border
16:51
radius level Let's do the five five
16:53
pixel and
16:57
uh five pixel and we have to do the
16:59
another one is a uh here it's align
17:03
successfully border radius So the font
17:05
color you have to
17:08
write white
17:11
text Okay So it's working Okay It's
17:14
working You can see the button
17:16
everything's there So yeah we need a
17:18
cursor button So there called cursor to
17:22
write pointer Now let's you can see the
17:25
clickable event of the button Okay It's
17:27
very simple This is how we have to make
17:30
the nail bar Very simple way Okay You
17:32
have do the without any hesitation you
17:34
have to do the nail bar simple way look
17:37
like this Okay This how you have make
17:39
the simple way to implement the nail
17:42
bars Okay It's working successfully If
17:46
you have any question and regarding this
17:48
you can ask me any time to allow my GP
17:51
suspect