Google just released its biggest update ever, and it is Gemini 3.5
Flash.
And this is the level of websites that you can create with Gemini 3.5
Flash. As you see, all of these animations,
this is a section,
this cube right here,
and
this section,
and this color
animation,
and also this sleek website
as you see.
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.
Let's get into it.
So first things first, we need to find we need to find some inspiration because AI works best by getting references.
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
this website
and make it look better?
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.
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.
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
give me the background
for
the
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.
Okay. So it gave us two options. I think I'm gonna go with this.
And
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.
I was just creating some background.
So we're gonna go to magnific,
which was called free pick before.
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
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.
And what we're going to do now is that we're going to generate. I'm just waiting for it to upload
and then we will generate.
Okay. Let's generate.
So it's going to animate the background for us. And once it finish, I will come back.
Okay. So I'm back. I'm just going to do some stuff until it finished,
and I'm just gonna get the design
that we got right here. Uh, I'm gonna add it to my computer, and then I'm going to go to Gemini
and make sure that you choose Gemini 3.5 flash as your default.
And then we're go I'm gonna paste this image, and I'm going to tell it, can you create
this hero section
text
and content
only,
or can you create this hero section without a background
image? You can keep it
black
for now,
or
let's say, can keep it as a color
for now
and create
every
part of the hero section
such that it's identical
to the image.
Okay?
I'm just gonna build it.
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.
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
currencies moving,
which looks pretty good, actually.
But I think, um,
let's try it in full screen. Maybe we can spot some mistakes.
Yeah. So basically here,
it's the width of of this section is larger than this section, which does not look that good.
And maybe
let me actually show you the original design. Like, this is the original design,
and it looks pretty much
like it. Looks pretty much like this.
And, um, with just maybe some minor some minor, uh, differences,
but that's pretty cool.
And, um,
so what I'm gonna do now, I'm going to replace the hero
background
with the video that we got. So let's see the video that we got. We see this video. This video is looking amazing.
And, um, I'm just going to copy the URL, click on share, copy to clipboard,
and then we're going to write in. One, can you change the
the background
for the hero section
to be that video?
Number two, can
you make the
hero section
100 v h, which means that it should be the same height of the screen of the user
and such so that it looks better.
The width
of
this thing
these these things right here, I'm just gonna copy them
off.
Section
is larger
than
the section above it.
And let's see what that comes up with.
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.
I'm just gonna pause until
until we we fin the Gemini 3.5
flash finish, and then we're gonna come back. Thank you.
Okay. So, basically, I think it didn't add my video or it could have added it, but there is something above it. And
and, actually,
this section right here is more than this section on bigger screens,
which is what I wanted.
But I think I need to reiterate again over
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
don't see the looping
video,
and
I still
see an orbit
over the animated
orbit that you created.
Okay?
And,
yeah, we can just do this, and let's see what it comes up with.
Okay. So I think
it it
yeah. We see our video and our animations right here.
You see? This looks pretty cool
as you see.
Right now, what we can do is actually,
uh, I just wanna make sure that it's responsive, so I'm just going to click on mobile.
Yes. It's responsive.
And what
we can do now, uh, to test out the the power of Gemini 3.5 flash is
ask it to generate the rest of the sections.
Can you please
generate
the rest
the sections?
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.
Okay. So it generated the rest of the sections. So let's see
how does it look.
Oh, disappointing me.
But the rest of the sections
looks pretty good. The rest of the sections look pretty good.
So what we're gonna do is we can just take this and we're going to say
this
section
is overlapping
with
the section
before before it. It. Okay? And we're going to
wait and see
how it fixes this. Okay?
So I'm just gonna leave it for now and come back.
So it did finish. Let's see.
Oh my god. It removed the background video for some reason,
but the rest of the sections look pretty cool.
But I can just say,
I cannot
see
the video
in the hero section anymore.
Let's say the looping
video in the hero section anymore.
And
let's see what does it come up with.
Okay. So let's see the fix.
Okay. So the video is back again, and we we see these items and particles right here.
So
and we can see the rest of the sections. They look cool.
So
yeah.
And that's it for today. Uh, I hope you really enjoyed the videos,
and I will be posting more tutorials about AI web design.
And all in all, Gemini 3.5
Flash is pretty good in design, but it does some dumb mistakes that could have been avoided
altogether.
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.