Up next in 10
CREATE a Responsive Navigation Bar with FlexBox CSS!
Learn how to create a responsive navigation bar using FlexBox CSS in this tutorial! A responsive navigation bar is essential for any website, and with FlexBox, you can easily create a flexible and responsive navigation bar that adapts to different screen sizes. In this video, we'll go through a step-by-step guide on how to create a responsive navigation bar using FlexBox CSS. From setting up the HTML structure to styling the navigation bar with CSS, we'll cover everything you need to know to get started. By the end of this video, you'll have a fully functional responsive navigation bar that you can use in your own projects. So, let's get started and create a responsive navigation bar with FlexBox CSS!
#flexbox #flexboxcss #cssflexbox #webdesign
Show More Show Less View Video Transcript
0:00
hi friends welcome to tutors funny
0:02
channel Today I'm going to teach the
0:05
flexbox Flaxbox nothing but the advanc
0:09
CSS part Okay So we have to make the
0:12
website very easily using the flexbox
0:14
CSS So if you go to flexbox you can see
0:18
the flexbox CSS So I'm going to connect
0:22
my internet
0:27
You can see over here the blackbox
0:31
CSS here it's look like
0:35
this here it's a look like this flax you
0:39
can see the lot of in infographics
0:41
you'll be able to see the lot of
0:42
infographics so you can see these are
0:45
the things we have to these are these
0:46
how the layouts works okay so these are
0:49
these all things we have uh I I'm going
0:52
to teach from the scratch so I'm going
0:54
to go to open my VS code editor So I
0:57
have already I have going to open my VS
1:00
code
1:02
editor Here I'm going to put
1:07
flexbox
1:09
CSS Okay So you don't worry about that
1:13
everything I'm going to teach Okay So
1:15
cmd you have to type cmd Open up the
1:17
command from window
1:20
If you are not to install the VS code
1:22
editor anymore you have to go to that
1:27
particular site VS code editor VS code
1:30
download and down go to the respective
1:34
site and you have to download and
1:36
install
1:37
this editor This editor is very useful
1:40
for to write the quotes Okay Nowadays
1:43
this is a very famous editor Okay Here
1:46
you will be able to select the
1:47
corresponding operating system what is
1:49
operating system you have Okay Now I am
1:52
going I'm going along with the Windows
1:54
because I have a Windows oper operating
1:56
system So if you have a uh Mac you can
1:59
go along with the Mac Okay What is the
2:01
corresponding operation You have to
2:02
select the corresponding operating
2:03
system and install them Okay Now I
2:07
already installed it So I'm going to
2:09
open up this project In my here you have
2:13
to type cmd to open up the command from
2:15
Tinder You have to type code space.2
2:20
to open
2:22
the folder in inside the VS code look
2:26
like
2:27
this Okay Now this is your flexbox CSS
2:30
Now I'm going to click on this P plus
2:32
symbol and type
2:37
index.html
2:39
here Here what I'm going to do is we
2:41
have to we have to hold the shift key
2:43
down and press one key All the all hold
2:47
all hold down the shift key down and
2:48
press one one on your keyboard you can
2:51
get this mark you can click on this it
2:54
automatically import your HTML okay this
2:57
is the HTML standard which is a doc type
3:00
okay the meta this is a meta this is
3:02
this is this is we needed for the mobile
3:05
responsive this is very important stuff
3:08
viewpoint uh width device width
3:12
everything it will be take care of this
3:14
one Okay Or this is the document title
3:17
So I'm going to put it the title which
3:18
is as a flats
3:23
box Okay Right Now let's right click Now
3:27
if you have not installed the vs uh here
3:30
you have a go to the
3:33
extension here you have to
3:36
type live
3:40
server Click on this Here the first time
3:43
we are going to install the live server
3:45
You click on this the install button
3:46
there There is a button called as
3:48
install Click on and install the live in
3:51
your machine After install it after that
3:54
what I'm going to go come to your window
3:57
you right click open with the live Okay
4:00
If you open it the live server now you
4:03
can see that nothing is there because
4:04
only the title flexbox has been uh here
4:08
it will be the flexbox has been you can
4:11
see okay this one should be open up the
4:14
edge browser if you want you can bring
4:15
out this browser into your VS code
4:17
editor the chrome you copy this and
4:19
paste it over here here this is your
4:21
title flexbox now here what I'm going to
4:23
is okay now what I'm going to do is I'm
4:26
going to make the simple web web page
4:29
okay so like like this way Uh so here
4:32
this is the simple way I have did it So
4:34
you can you can have it here this like
4:37
this you can see this simple
4:41
menu okay this is a menu section very
4:45
simple so how to make this one in our VS
4:48
code editor so it's very simple so first
4:50
we have you must understand that one
4:53
this is called as a container this is
4:55
this is this one as we are called as a
4:58
container okay this is a container the
5:01
one container consists of two items one
5:04
item another one is a two item first you
5:06
have to understand this scenario okay
5:08
this a one this is a one item this is
5:12
second item we have a two items there
5:14
over there okay we have a two items over
5:17
there so how to do this so let's go to
5:21
here first I'm going to we have a one
5:24
div so we have to write
5:27
do
5:29
class your type container
5:34
Okay So they have to type
5:37
container class
5:39
container This is a container class Okay
5:42
This is a container The all the class
5:45
which will be have telling that
5:47
container This container we have to go
5:50
again I'm going to do the same here also
5:54
Index dot CSS I'm create the now I'm
5:57
going to do is a body So this body we
6:00
have what I'm going to say
6:03
body open and close bracket here have to
6:06
type margin
6:10
zero padding must be zero we have a we
6:14
have to give this margin zero padding
6:17
z what is the side you are doing you
6:20
have to do it margin z padding zero this
6:22
is must the body there are lot of
6:25
student put this dot don't put that dot
6:28
body we have we don't have to put that
6:30
dot because that we have not uh doing
6:32
any styling part Okay The body we we
6:35
have to directly we have to call it over
6:37
here Okay Right So after that what
6:41
you're going to is I'm going to go to
6:43
put another one is this container I'm
6:45
going to style it which is this
6:46
container So this container just copy
6:49
this the name dot container open and
6:53
close bracket this container first I'm
6:55
going to give the this one as a what I'm
6:58
going I I won't look like this way okay
7:02
so in the flexbox CSS if you go to this
7:06
flexbox you can the direction you first
7:08
you have to understand the direction as
7:12
well okay this is a flexbox direction
7:15
layout direction here this if you go
7:17
through that document here you can
7:20
see flex start flex flex start flex end
7:23
flex center space between face around
7:27
and face eventually these are the
7:29
properties available in the flexbox So
7:32
what is the thing you are getting
7:35
So if you want to make look like this
7:38
way what I'm going to do is
7:45
here your here
7:49
display
7:52
flex here write this justify contain
7:55
content I'm going to select
7:58
as space between okay this is justify
8:03
content flex uh between mean it is
8:08
coming between mean it is arranging look
8:11
like this whatever here you have to go
8:14
to the documentation you can
8:16
see the space you have booked will mean
8:18
it it will be the container will be
8:20
align okay look like this okay display
8:24
bp save all okay so the background
8:29
color I'm going to change it as a
8:34
green This screen I'm going to make it
8:38
as little bit dark That's
8:40
it After that I'm going to make a
8:45
padding I need a
8:48
padding
8:49
here Left and top This is a top padding
8:53
It's a left padding So the left to right
8:56
Left to right mean this a left This is a
8:59
right So you can write like this
9:05
Padding
9:09
top like this
9:11
Padding
9:13
top 20
9:16
pixel Padding
9:22
bottom 20
9:25
pixel Padding
9:28
right 100 pixel
9:32
padding
9:34
left 100
9:36
pixel you can write this one this also
9:38
fine now you can see the output it's
9:43
getting so here let's save all save it
9:47
this is contain your
9:49
container okay this is your contain it's
9:51
a container class okay your container
9:54
okay so now what I'm going to do is I'm
9:56
going to give the link so what I'm going
9:58
to see I'm going to give the links
10:01
in order to give the links Okay So you
10:04
write it over
10:05
here
10:11
link real style
10:15
sheet
10:20
stylesheet
10:23
href you have to give the path where
10:26
your style is resided This is the index
10:29
htm
10:30
CSS Okay that's the thing you have to
10:32
give it Now let's file save all Bring
10:36
back to the
10:37
application here This is your
10:41
window Okay it's a blank Nothing is
10:45
there Only we have a we don't have a
10:48
width and height I'm not specifying only
10:51
the this one Top margin we have to set
10:54
20 Bottom 20 Right margin uh right
10:58
padding sorry not margin padding right
11:01
maring uh padding 100 and left padding
11:05
100 Instead of writing like this you
11:07
have simple you have to write these
11:08
things
11:11
padding
11:12
20
11:14
px into 100 px you have write simple way
11:18
this one you have to implement simple
11:19
way I'm going I'm going to get rid of
11:21
this line very simple this same thing
11:24
like this what is mention it over here
11:26
is this cover
11:28
as top and bottom margin padding this is
11:32
covered as left to right Okay So you can
11:36
cover like this Okay The left and right
11:39
both the same pixel It should be 100 Top
11:43
and bottom both are both are same pixel
11:47
It it it will be 20 You can cover like
11:49
this Okay It's very
11:52
simple You can check it over here Right
11:56
click
11:57
impact here Click on this Yeah You can
12:00
click on this Here you can see
12:03
the compute You can
12:05
here top margin the top padding bottom
12:10
padding left padding right padding You
12:13
can check it out This this how the
12:15
padding is
12:16
working Okay Right Now what I'm going to
12:20
do is I'm going to make it the middle of
12:24
the
12:26
contain What you have to do is here you
12:28
have a two items So how to write it You
12:31
have to write simply you have to write
12:33
due dot you just put the style we have
12:36
to later on you have change it as items
12:39
into two press tab key on your keyboard
12:43
you have get two
12:44
items because we have a two items here
12:47
one and two this first item what you're
12:51
going to I'm going to tell that this is
12:52
a
12:53
logo second item I'm going to tell that
12:56
this one is a links we have a two items
13:01
Understand Now the this one I'm going to
13:03
copy Go to here I'm going to make the
13:07
style dot logo Open and close it The
13:11
logo which is a I'm going to give the
13:15
this one logo Okay that's one should be
13:17
our logo Okay this one should be our
13:21
logo All right it's a
13:24
logo It's a logo Another one is a uh
13:29
this one is a that one Right So now what
13:32
I'm going to is my logo I'm going to do
13:35
the thing Yes Yep
13:37
Uh logo I'm going to write font
13:42
size I'm going to give that 20
13:45
pixel Okay 20 pixel I'm going to create
13:49
a logo The
13:51
color font color I'm going to make as
13:54
white
13:56
So the logo I'm going to write it here
14:00
is next
14:05
gen Let's file save all and bring back
14:08
to the application
14:09
Check here next gen But it's it seems to
14:13
be little bit right here It's a
14:18
one
14:21
RAM it's equal to 16
14:28
It's too much Two RAM You have to put
14:30
the two RAM is
14:33
enough It's fine Okay It's a two RAM So
14:38
here you have to type this one as a
14:41
font Wait You have to type I'm going to
14:43
pick up this one as a
14:48
600 It would be fine for 600
14:52
It's okay It should be fine So I want to
14:56
change the font
14:59
family
15:00
defaulty You have to write this one I
15:03
need this family Let's say and check
15:09
it
15:11
Okay Great Which one is a great now what
15:16
I'm going to do is after that I'm going
15:17
to go to do the another thing which is a
15:23
this
15:23
links the links also this copied and
15:26
paste it over
15:28
here put the dot over
15:32
here open and close bracket here we have
15:35
to write first I'm going to write flax
15:37
box display
15:41
flax display flax big system we have Set
15:44
the flex box CSS Here you have to write
15:47
it is a alignment align item You have to
15:51
write the align
15:54
item Okay Before that you have to check
15:56
it how the process works Then you can
15:59
understand You have to write
16:01
due you have to put it the three dues So
16:04
due
16:07
uh you have to write
16:10
due d into
16:12
three three d So first d I'm going
16:16
to
16:20
login Second one I'm going to it is from
16:23
phone
16:27
number like this Third one is a button
16:31
get started
16:36
Control S to save Bring back to the
16:38
application Check how that look like
16:40
here This look like
16:42
this This coming It is a like this I
16:45
want to I not even calling this one or
16:48
call it here flax here This flax
16:50
direction I'm going to give as a
16:55
flax This a flax Links These are links
16:58
So links here
17:00
links Okay So let's save all After that
17:04
we have a time and flags Uh you have to
17:07
write
17:08
here just uh align center You have to
17:11
write align
17:15
center Okay Align you have to make it as
17:18
center Get center mean it is coming like
17:22
this But we don't have a you can see
17:25
that we don't have a space So you have
17:28
to write there another property called
17:30
gap 20 pixel We are
17:32
here control save and
17:35
check
17:37
here
17:39
sorry you can say okay we leave a state
17:42
space after that we need another one is
17:45
a color we have to change the colors
17:49
as color also I'm going to give as a
17:53
color
17:55
white okay color white color white here
17:59
font I'm going to font
18:03
uh font you have to give this font
18:04
family you have to apply to the
18:07
container as well both the if you enter
18:10
the middle of the
18:12
container the same font work logo and
18:14
links as this a
18:16
common okay so now here the size we have
18:19
a different this font size you have to
18:22
get it here this one you put it as a one
18:25
it's fine now let's save and check
18:28
it would be
18:30
It's working look like this simple very
18:34
simple this one we very efficient way to
18:37
make the things now I want to do the
18:40
button part this a
18:41
button a button also very
18:45
simple you have to write the
18:49
btn open and close bracket button first
18:52
we have type the background color we
18:54
have type this one as a this one also we
18:56
have a green color this is yellow we
18:58
have put Yellow yellow yellow font color
19:02
Uh color you have to write a
19:05
black Okay Black color So this is a
19:08
background color of the button with the
19:10
foreground uh font color of the button
19:12
After that button border
19:16
radius border radius you have to
19:20
write five pixel It's enough Okay After
19:24
that we have set the padding of the
19:27
button You have to write your 10 pixel
19:30
into
19:35
uh 5
19:38
pixel Okay So this button we have to
19:41
copy this button style We have to put
19:43
this button as the button here Search
19:46
class btn and check it Control S to save
19:50
Bring back the application and check why
19:52
it's not working Save You are not save
19:56
it Here it's arranged But we have to do
20:00
some of the uh things here We have a we
20:03
have to do it here as the padding
20:08
uh padding here This one should be the
20:11
top
20:12
left This is the right left So here we
20:15
have font size See I'll write font size
20:22
uh the
20:25
font Yeah the font uh size You have to
20:28
write font size You have to write this
20:30
font size 1
20:34
g Control S to save and check
20:37
it Not this This one
20:44
It's not uh nothing to
20:49
happen Okay So let's save all So we have
20:54
a font size So you have to write font
20:57
white You have to for 600 Now let's
21:01
check Okay It's it's simple here It's
21:04
working perfectly Now I want to this one
21:06
So I want to increase a little bit So
21:09
padding Let's in increase as padding 15
21:14
What would be the exit things here It's
21:16
working Here 15 minute mean here it
21:19
leave the
21:20
space Okay Now it's it is fine Here you
21:24
can see the button is fine So if you
21:25
want to
21:27
uh put another something bold you have
21:29
to 700 you put
21:32
it
21:34
It's nice Now you going to have a
21:39
nice header bar header section Okay this
21:43
how we are doing the simple one Okay I
21:45
hope you guys understood things well
21:47
I'll be continue my next video Thank you
#Programming
#Web Services
#Web Design & Development
#Jobs & Education