0:00
hi friends welcome to tutori channel uh
0:03
today I'm going to teach how to this
0:07
Figma template convert as a HTML CSS
0:11
okay very simple this one I'm going to
0:13
convert into the HTML CSS using the
0:16
advanced CSS style which called as a
0:18
flashbox that is a very best step to
0:21
code okay so let's this let's convert
0:24
this this into the HTML CSS as a web
0:27
page look like this okay so how to do
0:30
these things very simple
0:32
right now first I'm going to I'm going
0:35
to go to uh open a new
0:39
HTML document so I'm going to put it
0:41
this one i already have index page so
0:52
shift hold on shift key down and press
0:54
one you can get it mask and import the
0:59
now here what I'm going to do is here
1:04
now here what I'm going to do is first
1:06
I'm going to have a body tag here I'm
1:08
going to make this make the document so
1:10
here what I'm going to do is first you
1:11
have to understand of your project so
1:15
this is you can see this is your
1:16
component this is your first one you can
1:19
see this is align at the center screen
1:21
this also the align at the center screen
1:23
so okay this is the your it's called as
1:25
a links this is called as a your uh
1:29
website name so how to do the ring is
1:31
first I'm trying to make a simply we
1:34
have to make a two div tags
1:38
first tag this tag ad called as class we
1:44
have to make it as logo header
1:48
second section copy this same thing
1:56
format simple now Here this one what
2:00
you're going to do is first logo section
2:06
put the text as a tuto that's it
2:10
that's it links I'm going to make it as
2:14
uh okay first we have to do the logo
2:16
section now here first go to the inside
2:19
the head tag go to the style
2:24
open and close the bracket style first
2:27
I'm going to go to go to body you have
2:51
first you have to write it as a color
2:53
you have to first you have to do this
2:55
logo we have to need to be the center
3:01
first we have to make it as display flax
3:07
okay we have to go along with the flax
3:09
it's very simple to make the web web
3:11
page after that the after that we have
3:14
to this logo make it as center of the
3:18
screen you know the center of the screen
3:20
now how to make the center simply in the
3:23
flex box we have a property called
3:24
justify content center which is a
3:27
horizontally center so vertically center
3:30
means alignment center
3:34
okay control S to save right click
3:38
and open with the live server okay it is
3:41
done center okay but I don't have a
3:45
padding so I want to set the padding as
3:48
well i'm going to set padding
3:51
uh let let's do the padding only uh
4:00
that would be fine here simply 50 pixel
4:03
top we have we have give the flag very
4:12
okay very simple way we have to give the
4:14
padding now what I'm going to after that
4:17
we have to do the padding top everything
4:19
are fine now I want to increase the size
4:24
Font size I want to take this at 2.5
4:45
and bring back to the application here
4:47
it's come at the center of state but I
4:49
don't have a this background color so
4:52
that background color I have What this
4:56
I get this color you have to get this
4:58
color click on that color is this this
5:02
color i want to get it so you can get
5:06
the color of the Figma as well this you
5:07
have designed this in Figma i already uh
5:10
did it this as a Figma okay this is the
5:14
color of the Figma you can get the color
5:16
of Figma this is a color code you copy
5:18
this this color okay this color
5:23
okay so I already copied this one here
5:26
you already copied this color i'm going
5:30
bring back to the application you have
5:31
to give that background color
5:38
so you have to put that a sign in front
5:41
of that color then only the color should
5:42
be applied after that color property we
5:45
have to apply which is a this is a
5:46
background color foreground color will
5:49
be white so you're right by white that's
5:52
it control S to save and open it here
5:54
it's coming successfully
5:56
it's coming successfully okay so let's
6:00
uh let's just padding we have to arrange
6:08
left bottom all things we have to get as
6:11
50 then it's good okay it looks good
6:16
now it's perfect if you feel a little
6:21
uh small okay now it's soft
6:25
now what I'm if you want to increase the
6:27
size you can increase that's that's no
6:28
problem that uh font as well okay now
6:31
the links link section
6:34
we we have a link uh we have to have a
7:17
okay this a link section link section
7:19
also we have type here as links
7:33
here also we have to justify content we
7:37
have to make it as center
7:39
vertically we have center okay after
7:42
that you can see open up and check here
7:44
it's coming like this now what you going
7:46
to do is I want to get the background as
7:50
so background what's the color of the
7:52
background color this one this color
7:54
look at the color this a color code
7:57
what's the color you're getting
8:02
put that color color along with the
8:05
color code it's coming now it's done
8:08
after that what I'm going to do is
8:10
everything should be fine now I want to
8:13
do the another thing is we have to do
8:19
uh let's give us this one as a uh 4.5
8:26
it would be enough fun
8:40
it will be fine uh this contactctors
8:47
it will be fine okay it will be fine but
8:49
I need a gap in between the letters of
8:57
now let's check it here it's coming so
9:00
you have to write java
9:18
coming now we need a here also we need a
9:26
padding we need only 20 pixel it's
9:30
now it's okay very simple
9:34
you can see it's very simple if you want
9:37
to add another more process you have to
9:52
Okay very simple this how we make the
9:56
website very simple way okay this very
9:58
simple this how we make the website okay
10:00
thank you for watching
