0:00
Hi friends, welcome to tutors
0:02
functional. Today I'm going to teach uh
0:04
a how help us to write the programming
0:08
code very easily and efficient way. Uh
0:12
I'll be teach stepbystep process. So I'm
0:18
chatb. So click new chat. This is a new
0:20
chat. Now there's a the you have got the
0:25
uh task which is a FAQ section. So I'm
0:34
FA section mean this you have to
0:36
implement this section into your website
0:39
this kind of effect FAQ section. So, so
0:44
earlier what you going to do is you have
0:45
to go here go to the code pen.
0:50
This is a base website we are getting
0:52
the codes to online editor. You can
1:00
So here we have to write the FAQ. So we
1:04
have write here we write FAQ.
1:17
These are the FAQ sections.
1:22
You can see this FAQ section. So this
1:25
FAQ section we can here we simply we
1:29
have to copy this code and we have to
1:36
uh HTML page. Simply if you want FAQ
1:39
section okay simply this there. So okay
1:42
now what you're going to is I want to
1:44
the same FAQ section I want to do a uh
1:49
nice I have to uh enhance the uh enhance
1:55
the styling part. Okay I have to enhance
1:58
the styling part. Okay nicely.
2:01
Okay. So Okay. So visually we have to
2:03
nicely we have to enhance the styling
2:06
part. So how to en enhance the styling?
2:11
You have to open up the chat GBTM.
2:15
You have to put the font which is act
2:33
Okay, here is the code snippet.
2:40
I need I need you to hang
3:07
So now what you are going to do is here
3:11
uh snip. Okay. So here you have to here
3:13
colon you have to provide the code over
3:20
this code I'm going to this HTML part I
3:29
You can check check it here.
3:39
paste on it over here.
3:41
You can write this HTML. So HTML
3:46
you can write the HTML. After that we
3:48
need a CSS section. So the CSS CSS
4:02
Copy the CSS section.
4:09
You have to put in the CSS section over
4:11
here. After the JS section, the JS all
4:15
all things you have to implement. J
4:17
section. So J section you have to go
4:19
over here. It's a J section.
4:23
Copy this. Put into here. Click on here.
4:29
Now you can see the perfect faces good
4:31
uh according base they enhance visually
4:33
interact into the modern premium style
4:36
and gradient. Okay. So that things based
4:38
on the prompt you are given you write
4:42
give you good styling you have to write
4:44
this one I need you to enhance the
4:49
Now let's check it this code for the
4:51
HTML code. So you can test on it this
4:54
one v that uh complete the page design.
4:57
So you can see just copy this. Okay, I'm
5:00
going to go to open up the you can test
5:03
it via the pad uh code pen as well. So
5:06
simple you have to check it out.
5:35
Paste it over here. Now write right
5:38
Remain explorer. This is the code. You
5:41
can double click on it
5:51
your save all that's why it's not
5:58
So you can see this is your here the
6:02
same FAQ section appear here
6:06
it is very nicely manner this is done
6:09
you can see this is the addition they
6:10
have create the styles and so if you
6:13
want you can that uh if you want that uh
6:15
using that uh tailwind section as well
6:21
so that uh I need that uh one here
6:25
sure this this is the uh code you
6:28
heading. So you can change it uh change
6:31
into this design. Can see this is a this
6:34
mobile response as well. Here simple
6:37
design phase we are getting
6:39
this the design is nowadays to be doing
6:42
they're getting the codes and you have
6:43
to adjust doing the adjustment. They not
6:45
doing the code snip from no one getting
6:49
uh doing the code snip from the scratch.
6:52
They they getting this code snipped and
6:54
adjustment and doing this like this.
6:56
Okay. very simple way. Okay. Very simple
7:00
and efficient way to do the program.
7:02
Okay. So, so now what you going to do is
7:05
I'm going to go back again. I need to I
7:17
Uh you can you not satisfy this design.
7:20
You can tell them I I need above code uh
7:30
beauty full UI design.
7:40
Okay, the stunning you can use the uh
7:43
give a stunning. Okay, so if I give
7:46
something stunning model and you can use
7:48
this stunning stunning
7:53
you can use that kind of a birds. Okay,
7:55
you can include that you can implement
7:57
those words to do that things. Okay, so
8:00
very simply we have to implement the
8:16
now. Let's file save all.
8:23
Okay, here it's now it's stunning. Here
8:26
it's very here it's very good.
8:30
Okay, this how we have do the things.
8:34
Okay, now you can see here this is the
8:36
design. So how the design is work. You
8:39
can see here this is the secret we all
8:41
the programs are this kind of a design.
8:45
This is a look simple look. We have
8:47
changes this look is a very nice look
8:50
here. The same look we have a different
8:53
one. This look we have change it this
8:56
kind of here. This is a simple card
8:58
design. You have to the car design here.
9:00
This also the this here very simple
9:02
according this is the according if you
9:04
are putting it's very attractive. This
9:06
is the way this is this how we have do
9:08
the program. So very simple here you can
9:10
see that here it's very mobile
9:13
responsive. We have go through the
9:16
mobile responsive as well. Everything is
9:18
a fine. Okay. So I hope you guys this
9:22
video is very helpful to learn AI uh how
9:26
AI help us programs. Thank you for
