WEBVTT

00:00:01.760 --> 00:00:06.000
Google just released its biggest update ever, and it is Gemini 3.5

00:00:06.000 --> 00:00:06.720
Flash.

00:00:07.040 --> 00:00:12.000
And this is the level of websites that you can create with Gemini 3.5

00:00:12.000 --> 00:00:14.775
Flash. As you see, all of these animations,

00:00:14.775 --> 00:00:16.215
this is a section,

00:00:16.535 --> 00:00:18.215
this cube right here,

00:00:18.615 --> 00:00:19.095
and

00:00:20.215 --> 00:00:21.255
this section,

00:00:21.415 --> 00:00:23.015
and this color

00:00:23.175 --> 00:00:23.895
animation,

00:00:24.215 --> 00:00:26.375
and also this sleek website

00:00:26.775 --> 00:00:27.495
as you see.

00:00:28.190 --> 00:00:37.070
All of this can be created with Gemini 3.5 Flash. In this tutorial, I'll be showing you how can you create amazing websites like these using Gemini.

00:00:37.070 --> 00:00:38.270
Let's get into it.

00:00:38.670 --> 00:00:46.065
So first things first, we need to find we need to find some inspiration because AI works best by getting references.

00:00:46.225 --> 00:00:57.380
So I'm just going to take a screenshot of this reference, and I'm going to pass it to Chad GPT to redesign it. So I'm just going to pass it to chat g p t and write, can you redesign

00:00:58.260 --> 00:00:59.540
this website

00:00:59.700 --> 00:01:02.260
and make it look better?

00:01:03.140 --> 00:01:13.155
And it's going to redesign this website because GPT image two is the best model for redesigning and doing image changes. So I'll be back once it finishes the changes.

00:01:14.195 --> 00:01:26.810
Okay. So it freaked out a little bit and said, we are sorry, but the image created my violet, our guy our our guardrails. And I said, bro, it's my own. And then we got this design, which looks pretty amazing.

00:01:27.770 --> 00:01:39.685
And what we're going to do right now is we need GPT to give us the background image, and we are going to animate it so that it looks pretty cool. So I I can just type in, can you please

00:01:39.925 --> 00:01:42.325
give me the background

00:01:42.885 --> 00:01:43.685
for

00:01:43.685 --> 00:01:44.405
the

00:01:44.805 --> 00:01:55.550
hero section? And I'm gonna make it the background only, the background only for the hero section. So it should give us the image behind right here. So I'll be waiting for it to give us this image.

00:01:56.350 --> 00:02:00.190
Okay. So it gave us two options. I think I'm gonna go with this.

00:02:00.590 --> 00:02:01.070
And

00:02:01.950 --> 00:02:08.815
what I'm gonna do now, I'm gonna animate this. I'm gonna animate this image. So what I'm gonna do is go to magnific.

00:02:08.815 --> 00:02:10.975
I was just creating some background.

00:02:12.335 --> 00:02:14.095
So we're gonna go to magnific,

00:02:14.095 --> 00:02:16.735
which was called free pick before.

00:02:16.975 --> 00:02:27.200
And we're what we're gonna do is that we're going to choose c dance two point o model, which is this. And we're going to add the image as the start image and also

00:02:27.360 --> 00:02:33.680
add it as the end image because we want it looping. And then we're going to type in the prompt and you made this and make it noticeable.

00:02:34.075 --> 00:02:39.115
And what we're going to do now is that we're going to generate. I'm just waiting for it to upload

00:02:39.435 --> 00:02:41.035
and then we will generate.

00:02:41.675 --> 00:02:43.115
Okay. Let's generate.

00:02:43.355 --> 00:02:47.595
So it's going to animate the background for us. And once it finish, I will come back.

00:02:48.540 --> 00:02:53.260
Okay. So I'm back. I'm just going to do some stuff until it finished,

00:02:53.420 --> 00:02:55.500
and I'm just gonna get the design

00:02:56.300 --> 00:03:02.700
that we got right here. Uh, I'm gonna add it to my computer, and then I'm going to go to Gemini

00:03:03.395 --> 00:03:08.355
and make sure that you choose Gemini 3.5 flash as your default.

00:03:08.595 --> 00:03:13.955
And then we're go I'm gonna paste this image, and I'm going to tell it, can you create

00:03:14.195 --> 00:03:16.275
this hero section

00:03:18.180 --> 00:03:19.060
text

00:03:19.540 --> 00:03:20.740
and content

00:03:22.100 --> 00:03:23.060
only,

00:03:23.540 --> 00:03:27.220
or can you create this hero section without a background

00:03:27.540 --> 00:03:30.020
image? You can keep it

00:03:30.580 --> 00:03:31.540
black

00:03:31.700 --> 00:03:32.340
for now,

00:03:33.265 --> 00:03:33.905
or

00:03:34.145 --> 00:03:37.265
let's say, can keep it as a color

00:03:38.305 --> 00:03:39.185
for now

00:03:39.505 --> 00:03:40.705
and create

00:03:40.705 --> 00:03:41.425
every

00:03:41.905 --> 00:03:44.705
part of the hero section

00:03:44.785 --> 00:03:47.345
such that it's identical

00:03:47.345 --> 00:03:48.385
to the image.

00:03:49.200 --> 00:03:49.840
Okay?

00:03:50.720 --> 00:03:52.160
I'm just gonna build it.

00:03:52.480 --> 00:04:03.360
And so I'm waiting for two things right now. I'm waiting for Google to finish this design, the for the hero section, and I'm waiting for the video to generate. Once they finish, I'll come back and show you the results.

00:04:05.495 --> 00:04:17.495
Okay. So it came up with the results and the results are insane actually. Like, it doesn't imagine that it will come up with animations for this. Like, it has an orbit like this and it has the these these

00:04:17.895 --> 00:04:18.935
currencies moving,

00:04:19.680 --> 00:04:21.760
which looks pretty good, actually.

00:04:22.160 --> 00:04:23.600
But I think, um,

00:04:24.000 --> 00:04:28.160
let's try it in full screen. Maybe we can spot some mistakes.

00:04:28.400 --> 00:04:30.160
Yeah. So basically here,

00:04:30.800 --> 00:04:36.535
it's the width of of this section is larger than this section, which does not look that good.

00:04:36.855 --> 00:04:38.135
And maybe

00:04:39.895 --> 00:04:43.895
let me actually show you the original design. Like, this is the original design,

00:04:44.295 --> 00:04:45.655
and it looks pretty much

00:04:46.135 --> 00:04:48.295
like it. Looks pretty much like this.

00:04:49.420 --> 00:04:55.180
And, um, with just maybe some minor some minor, uh, differences,

00:04:55.180 --> 00:04:56.780
but that's pretty cool.

00:04:57.580 --> 00:04:58.860
And, um,

00:04:59.580 --> 00:05:02.860
so what I'm gonna do now, I'm going to replace the hero

00:05:02.940 --> 00:05:03.420
background

00:05:04.835 --> 00:05:10.915
with the video that we got. So let's see the video that we got. We see this video. This video is looking amazing.

00:05:12.195 --> 00:05:17.555
And, um, I'm just going to copy the URL, click on share, copy to clipboard,

00:05:18.035 --> 00:05:23.920
and then we're going to write in. One, can you change the

00:05:25.600 --> 00:05:27.040
the background

00:05:27.040 --> 00:05:29.600
for the hero section

00:05:29.680 --> 00:05:31.520
to be that video?

00:05:33.445 --> 00:05:35.045
Number two, can

00:05:35.685 --> 00:05:37.525
you make the

00:05:37.765 --> 00:05:38.965
hero section

00:05:39.045 --> 00:05:44.805
100 v h, which means that it should be the same height of the screen of the user

00:05:45.140 --> 00:05:47.700
and such so that it looks better.

00:05:49.380 --> 00:05:50.340
The width

00:05:51.860 --> 00:05:52.580
of

00:05:53.460 --> 00:05:54.420
this thing

00:05:54.980 --> 00:05:58.340
these these things right here, I'm just gonna copy them

00:05:58.995 --> 00:05:59.795
off.

00:06:00.995 --> 00:06:01.635
Section

00:06:02.435 --> 00:06:03.715
is larger

00:06:04.035 --> 00:06:04.675
than

00:06:05.155 --> 00:06:07.475
the section above it.

00:06:08.195 --> 00:06:10.595
And let's see what that comes up with.

00:06:15.230 --> 00:06:22.990
I'm actually not sure if it's going to look good on the 100 v h, but let's try to do it like this and see what it comes up with.

00:06:24.110 --> 00:06:26.430
I'm just gonna pause until

00:06:26.885 --> 00:06:30.645
until we we fin the Gemini 3.5

00:06:30.645 --> 00:06:34.005
flash finish, and then we're gonna come back. Thank you.

00:06:34.725 --> 00:06:42.470
Okay. So, basically, I think it didn't add my video or it could have added it, but there is something above it. And

00:06:44.310 --> 00:06:45.510
and, actually,

00:06:45.750 --> 00:06:49.510
this section right here is more than this section on bigger screens,

00:06:49.830 --> 00:06:51.190
which is what I wanted.

00:06:51.350 --> 00:06:54.710
But I think I need to reiterate again over

00:06:55.095 --> 00:07:03.735
the orbit thing. I don't want it, and I'm going to see what's the problem with this. Let's just prompt it prompt our rate through it. I still

00:07:04.295 --> 00:07:06.695
don't see the looping

00:07:07.175 --> 00:07:07.975
video,

00:07:08.535 --> 00:07:09.095
and

00:07:09.600 --> 00:07:10.640
I still

00:07:10.960 --> 00:07:12.400
see an orbit

00:07:13.840 --> 00:07:15.520
over the animated

00:07:17.600 --> 00:07:20.080
orbit that you created.

00:07:20.640 --> 00:07:21.360
Okay?

00:07:21.600 --> 00:07:22.000
And,

00:07:24.825 --> 00:07:28.505
yeah, we can just do this, and let's see what it comes up with.

00:07:31.385 --> 00:07:32.985
Okay. So I think

00:07:34.025 --> 00:07:34.825
it it

00:07:35.945 --> 00:07:38.905
yeah. We see our video and our animations right here.

00:07:39.560 --> 00:07:42.120
You see? This looks pretty cool

00:07:43.720 --> 00:07:44.840
as you see.

00:07:45.640 --> 00:07:47.640
Right now, what we can do is actually,

00:07:48.200 --> 00:07:52.600
uh, I just wanna make sure that it's responsive, so I'm just going to click on mobile.

00:07:53.000 --> 00:07:54.360
Yes. It's responsive.

00:07:55.525 --> 00:07:57.125
And what

00:07:57.685 --> 00:08:03.765
we can do now, uh, to test out the the power of Gemini 3.5 flash is

00:08:05.045 --> 00:08:07.285
ask it to generate the rest of the sections.

00:08:07.525 --> 00:08:09.845
Can you please

00:08:09.220 --> 00:08:10.180
generate

00:08:10.660 --> 00:08:11.780
the rest

00:08:12.260 --> 00:08:13.460
the sections?

00:08:15.140 --> 00:08:20.260
I'm going to show you how beautiful they are gonna look. So I'm just going to wait for it and come back to you.

00:08:23.765 --> 00:08:27.605
Okay. So it generated the rest of the sections. So let's see

00:08:28.085 --> 00:08:29.445
how does it look.

00:08:30.165 --> 00:08:31.845
Oh, disappointing me.

00:08:32.405 --> 00:08:34.485
But the rest of the sections

00:08:35.045 --> 00:08:37.925
looks pretty good. The rest of the sections look pretty good.

00:08:39.100 --> 00:08:44.060
So what we're gonna do is we can just take this and we're going to say

00:08:45.340 --> 00:08:46.140
this

00:08:46.380 --> 00:08:47.180
section

00:08:47.980 --> 00:08:49.740
is overlapping

00:08:49.740 --> 00:08:50.460
with

00:08:50.620 --> 00:08:51.660
the section

00:08:51.820 --> 00:08:55.115
before before it. It. Okay? And we're going to

00:08:56.235 --> 00:08:57.435
wait and see

00:08:57.835 --> 00:09:00.155
how it fixes this. Okay?

00:09:00.475 --> 00:09:03.195
So I'm just gonna leave it for now and come back.

00:09:04.880 --> 00:09:06.880
So it did finish. Let's see.

00:09:09.040 --> 00:09:12.560
Oh my god. It removed the background video for some reason,

00:09:14.080 --> 00:09:16.560
but the rest of the sections look pretty cool.

00:09:17.200 --> 00:09:18.480
But I can just say,

00:09:20.775 --> 00:09:21.815
I cannot

00:09:23.255 --> 00:09:24.135
see

00:09:24.135 --> 00:09:25.255
the video

00:09:25.655 --> 00:09:28.215
in the hero section anymore.

00:09:31.590 --> 00:09:33.430
Let's say the looping

00:09:33.750 --> 00:09:35.830
video in the hero section anymore.

00:09:36.390 --> 00:09:37.030
And

00:09:37.190 --> 00:09:39.990
let's see what does it come up with.

00:09:42.070 --> 00:09:44.390
Okay. So let's see the fix.

00:09:45.815 --> 00:09:50.855
Okay. So the video is back again, and we we see these items and particles right here.

00:09:51.255 --> 00:09:51.895
So

00:09:54.135 --> 00:09:57.255
and we can see the rest of the sections. They look cool.

00:09:58.340 --> 00:09:58.900
So

00:09:59.300 --> 00:09:59.780
yeah.

00:10:00.340 --> 00:10:04.260
And that's it for today. Uh, I hope you really enjoyed the videos,

00:10:04.420 --> 00:10:08.260
and I will be posting more tutorials about AI web design.

00:10:08.580 --> 00:10:11.620
And all in all, Gemini 3.5

00:10:11.620 --> 00:10:17.125
Flash is pretty good in design, but it does some dumb mistakes that could have been avoided

00:10:17.125 --> 00:10:18.005
altogether.

00:10:18.405 --> 00:10:29.222
So if you wanna use Gemini 3.5 flash, make sure you use it properly and make sure that you are aware of any small bugs that it might cause in the middle. Thank you so much for watching.