Preview
Video Player
00:00
00:00
Can ChatGPT Build a Website?
15:40Leveraging the power of OpenAI’s ChatGPT is a great tool in your developer tool belt, but how accurate is ChatGPT when using it to build a website from a mockup? There are some surprising strengths as well as weaknesses. Follow along with Dustin to explore how ChatGPT fares at building a website from a mockup in this fun, AI-powered code-along.
[MUSIC]
0:00
Hey what's up, my name is Dustin and
I'm a developer here at Treehouse and
0:08
today, I'm gonna show you exactly how
to use ChatGPT to build out a website from
0:12
a mock-up.
0:16
This shouldn't be hard to do since ChatGPT
is super powerful, but what I want to do
0:17
is kind of just demonstrate ChatGPT's
strengths as well as its weaknesses.
0:21
We'll keep this guide super beginner
friendly and just use HTML and CSS.
0:25
But I do wanna mention that this
guide might not be the best for
0:29
you to follow along with me, simply
because each time you prompt ChatGPT you
0:32
might get a different response, even
if you use the same prompts that I do.
0:36
So sit back, relax,
grab a cup of coffee, and
0:40
just watch how I use ChatGPT
to help me as a developer.
0:43
Of course, when the video is over, feel
free to follow along and do this yourself.
0:46
But what do you think?
0:51
Do you think ChatGPT can
help us build out a website?
0:52
Let's find out.
0:54
The first step is to obviously
head on over to chat.openai.com so
0:56
that we can work with ChatGPT.
1:00
If you don't already have an account,
no worries,
1:03
you'll just need to head on over to
platform.openai.com and create one, and
1:06
then just head right
back to chat.openai.com.
1:10
Let's take a look at this very
basic mock-up that I created.
1:13
This is the website that I'd like to
see if ChatGPT can create for us.
1:17
I'll do my best to not write any code
myself unless I need to for time's sake,
1:21
but the idea is that we can prompt
ChatGPT enough to build this out.
1:25
So let's see if ChatGPT is up for
the task.
1:29
Let's start by creating
a project folder on our desktop.
1:32
I'll keep this simple and
just name it Website.
1:35
And then I'll open it up in my text
editor of choice, which is VS Code.
1:38
Then I'll create an index.html
file as well as an app.css file.
1:42
Inside of the index.html,
I'll create our boilerplate, and
1:48
then I will also link up
our app.css stylesheet.
1:52
We can also go ahead and update our
title to something like my website.
1:55
And honestly,
that's about all the setup we're gonna do.
1:59
I'm gonna let ChatGPT take over now, and
all we're gonna do is look at our mock-up
2:02
and describe it the best way that we can
to ChatGPT and see what it can give us.
2:06
So let's open up ChatGPT and
start prompting.
2:11
I'll start by typing, help me build
a website from a mock-up please,
2:15
I already have my HTML file and
CSS file set up and linked together.
2:19
Let's first work on the navbar.
2:24
I'm gonna also open up
the mock-up on the left side so
2:26
I can describe it just
a little bit better.
2:28
I'll hop back into my prompt and mention
that it looks like the navbar has an h1,
2:31
and to the right of
the navbar are some links.
2:35
Since this mock-up doesn't
have any actual text,
2:38
I'll make up a few links that we can use.
2:41
Let's tell ChatGPT that the links
are Home, Products, and Catalog.
2:43
Let's keep this simple and send this
prompt to ChatGPT instead of explaining
2:49
the entire mock-up in one prompt.
2:52
So let's send it and see what we get back.
2:55
What I really like about
working with code.
2:57
Code and ChatGPT is that it usually
provides some context to the code that it
2:59
gives you, and
it explains what it's doing.
3:03
This is pretty great, but usually if you
just want the code you can just add,
3:06
just show me the code to
the end of your prompt.
3:10
I won't do this in this video,
but I just wanted to mention it.
3:12
But it looks like we got back a good
chunk of HTML as well as some CSS.
3:15
Since we already have our boilerplate
HTML done, I'll only copy the code for
3:21
the nav that is supplied.
3:25
So let's copy that and
paste that right into our HTML file.
3:26
I'll save that and quickly check the
browser to see if the markup looks right.
3:30
And sweet, it does.
3:34
So now I'm just gonna go grab the CSS
that ChatGPT wrote for us, and
3:36
paste that directly into our app.css file.
3:40
I'll hit save and I'll check the browser,
and cool, it looks like we have a navbar,
3:43
but this looks nothing like our mock-up.
3:47
So let's pop right back into ChatGPT and
add another prompt.
3:50
All right, currently,
the navbar has a dark background,
3:54
could you update the code so
that it's white?
3:57
And could you make the h1 the color...
4:00
Well, let's go back into the markup and
find out what that color is for the h1.
4:02
So I'll grab the hex code for
the h1 in the markup, and
4:07
I'll just paste it directly into
the prompt, and we can just send it off.
4:11
Just as before ChatGPT responds and
gives us some updated code.
4:15
I'll copy that and replace what's in
our CSS file with the updated CSS.
4:19
Now you'll notice the white
nav background and
4:24
the blue h1, but
the structure of our nav is now messed up.
4:27
The links are no longer to the right and
that's because we blindly pasted in new
4:31
code, ChatGPT only updated the code
necessary for our last prompt.
4:35
So instead of reverting our code back
let's just re-prompt ChatGPT to update
4:39
the CSS so that the nav links are to
the right and the h1 remains to the left.
4:44
This is a good time to mention that using
ChatGPT to help you with code is obviously
4:49
much faster than writing code yourself.
4:53
But it can be counterproductive if you're
just blindly copying and pasting in code.
4:56
You should absolutely understand
the code that you're being given so
5:01
that you know how to work with it.
5:04
If we would've taken the time to read the
updated CSS, we'd have known that it was
5:06
only updating the navbar background color,
as well as the h1 color.
5:10
So, now we are spending extra time fixing
this super simple error that we made.
5:14
So just keep that in mind when
using ChatGPT as a co-developer.
5:18
All right, enough of the pep talk, so
5:22
it looks like ChatGPT has
given us some more code.
5:24
This time it's not only the restructure,
but it also includes the h1 and
5:27
navbar colors.
5:31
So let's copy all of that and
replace all of the CSS in our CSS file.
5:33
Hitting Save and reloading the browser
shows our navbar mimicking the mock-up
5:37
much better than it did before.
5:41
I do see that there is some
weird spacing on the nav items,
5:42
instead of prompting ChatGPT,
I know this is probably just a margin fix.
5:46
So let's update the code ourselves.
5:50
For some reason, ChatGPT put a margin
left of auto for the last nav item.
5:52
Not sure why it did that,
so let's just remove it.
5:57
That's actually gonna be everything
we need for the nav bar, so
6:00
now let's work on our hero section.
6:02
The hero looks pretty simple.
6:05
I see some text on the left and
what looks like an image on the right, and
6:06
the hero itself has a bit of padding.
6:10
So I'll start my next prompt with ChatGPT,
asking for help with my hero section.
6:12
I'll mention that I'd like some text
on the left side of the hero, and
6:17
an image on the right.
6:20
But for the image,
6:21
could you just please give me a dark
rectangular box as a placeholder?
6:22
I'd also like a good bit of
padding around my hero section.
6:27
I'll send this off and
await ChatGPT response.
6:30
I like to be kind of vague
with my initial prompts, and
6:33
just see what ChatGPT gives me back, and
then go from there and tweak as needed.
6:36
So just as before I was able to get back
some HTML and CSS based off of my prompt.
6:40
And it looks like the HTML doesn't include
the nav markup, so I'll just copy the new
6:46
hero markup and paste it underneath
the nav markup in the HTML file.
6:51
I'll save and check the browser.
6:55
And it looks like we get some text but
I don't see our box for the image.
6:57
Maybe it's there and we just need to
apply the newly generated CSS, so
7:00
let's try that.
7:04
I'll copy the CSS over,
which looks to be only CSS for the hero.
7:05
So I won't replace any existing CSS but
instead paste in the new CSS.
7:10
Looks like that worked, we now see our
box, but I'm not really liking the size.
7:14
And since this is kind of difficult to
prompt ChatGPT with to get the right size,
7:19
let's just update the code ourselves.
7:23
I'll change the width from
400px to 100%, and
7:25
just give that max width
property the 400px value.
7:29
This will allow the width of our box to be
a little bit more responsive which looks
7:33
much better in my opinion.
7:36
I'll also quickly change the height
from 300px to 200px to make it
7:38
slightly shorter.
7:42
And I think that's all we'll wanna do for
our hero section.
7:44
It looks pretty good now, so
let's jump into the next section,
7:46
which is a section for some products
that hold some product cards.
7:49
I'll bring back up our mock-up and
our awesome co-developer, ChatGPT,
7:52
side by side again.
7:56
With the mock-up up, let's see if we can
describe our product section to ChatGPT.
7:58
I'll let ChatGPT know that the previous
code it gave me worked, and
8:03
then I'll just let it know that we're
gonna work on our next section.
8:06
I'll say I want a 3x3 grid of products,
and
8:10
that I want each product card to contain
an image, a short description, and a CTA.
8:13
I'll also let it know that the CTA should
be the same color as our H1 from earlier.
8:18
Also the image should be a light
gray box as a placeholder.
8:23
And I'll finish the prompt with just
letting ChatGPT know that I'd like this to
8:27
be responsive.
8:31
So let's send this off and
see what we get back.
8:32
So what do you think?
8:35
Do you think ChatGPT will get this
right on the first try or will we need
8:36
to update the code just a little bit
like we've done in our hero section?
8:39
Let's find out.
8:43
It looks like we got back some HTML and
CSS, so let's go ahead and
8:44
copy our new HTML, which looks to be just
a product section with a product grid and
8:49
a single product card,
even though we asked for a 3 by 3.
8:55
So we'll probably need to copy and
8:59
paste just the product card a few more
times to fully create the UI that we want.
9:01
I'm gonna go ahead and do this now, so
9:08
I'll speed up the video just
a little bit to get this part done.
9:09
Okay, so now that all the product
cards are in the markup,
9:15
let's open up the browser and
see how this looks.
9:19
Pretty cool,
9:21
I think it'll be a little easier to see
each card once we add in the new CSS.
9:22
So let's go ahead and copy and
paste that into our CSS file now.
9:26
All right, so let's save that and
check out the browser.
9:33
There we go,
looks like some product cards to me.
9:38
So the style doesn't quite match
what we're looking for though, so
9:40
let's update the styles on our own just a
bit to see if we can't get a little closer
9:43
to the mock-up.
9:47
First up, the product-card image or
the gray box placeholder, I should say.
9:49
Let's lower the height on those, and
9:53
I also want to remove the border that's
given to each of the product cards.
9:55
Now, let's make the CTA the full
width of the product card.
10:00
But instead of doing this ourselves,
let's practice prompting ChatGPT and
10:03
updating the code again.
10:07
So I'll ask ChatGPT to update the CSS for
the CTA width, and
10:09
I'll copy the new CSS in and paste it.
10:13
It's important to note that ChatGPT
didn't update just the CTA CSS,
10:17
it gave me all the CSS for
the product section again.
10:21
So we'll replace all the CSS
that we just pasted in our code.
10:25
And it looks like that worked, but
now we have a weird spacing issue.
10:29
This is due to box sizing.
10:33
We'll go ahead and
set the box sizing property for
10:35
every element on the page to border box.
10:37
If you're unfamiliar
with this property value,
10:40
all you need to know is that it
changes the sizing behavior.
10:42
For example, the height and width given
to an element will also take into
10:45
account the content area, padding,
and borders of the element.
10:48
In other words, the total width and height
of the element remains constant, and
10:52
any padding or border widths
are subtracted from the content area.
10:56
All right, so now that our mini lesson on
box sizing is finished, let's go ahead and
11:00
remove the border on the product
cards that our new CSS added back.
11:04
I'm also gonna remove the h3 that
each product card has since we didn't
11:09
ask for that.
11:12
And I also would like to remove the border
radius that was set on each of our CTAs,
11:14
since the mock-up doesn't have
any border radius for the CTAs.
11:18
With these changes in place,
11:23
I think our product card should look
pretty much like our mock-up now.
11:24
They aren't very responsive though,
so instead of tackling that here,
11:28
I'll just save that for another time.
11:31
Let's hop into our last section of this
markup, which is our contact section.
11:33
I went ahead and
grabbed the hex code value for
11:37
the background color for this section.
11:40
I'll prompt ChatGPT to now work
on the contact section and
11:41
give it a background color
with that hex code value.
11:45
In this section I'd like to have
a form with a few input elements.
11:48
I'd like to have an input for a name and
an email, and I want those side by side.
11:52
I'd also like to have a text
area underneath those fields for
11:58
the body of our contact form.
12:01
And lastly, we'll just want to have
a CTA underneath that to send the email.
12:02
Let's see what chatGPT spits out for us.
12:07
So while chat ChatGPT does its thing, I
kinda want to mention that you might have
12:10
noticed I'm not really saying word for
12:14
word the text that I'm
prompting ChatGPT with.
12:16
And this is because I want you to get used
to feeling comfortable to talk to ChatGPT
12:18
like you would your best friend or
a colleague.
12:22
Just speak to it like a human, ChatGPT is
basically your co-developer in this case.
12:24
There are a ton of talks about prompt
engineering and all that stuff, but
12:30
there's really no secret
to how you prompt ChatGPT.
12:33
Just speak to it like you would
anyone else and you'll be just fine.
12:37
Most of the time, ChatGPT can understand
what you're trying to ask it even if you
12:40
don't ask it perfectly.
12:44
So I went ahead and
copied the HTML that ChatGPT gave us, so
12:47
now let's paste that in
underneath our product section.
12:50
Once that's done we'll hop back
into our ChatGPT and grab the CSS.
12:54
I'll go ahead and paste that in
just like before, hit Save, and
12:58
check out the browser.
13:02
I'll Scroll down to our
new contact section, and
13:03
at first glance it looks pretty accurate.
13:06
But if you remember we wanted the name and
email field to be on the same line.
13:08
So I'll hop back into ChatGPT and
let it know that the name and email fields
13:12
are not on the same line like I requested,
and for it to update the CSS for me.
13:17
As you may have noticed, each time we
work on a new section, ChatGPT can handle
13:22
the majority of the tedious code writing
for us, but we usually have to either
13:26
re-prompt it, or fix some issues
by diving into the code ourselves.
13:30
Either option we choose to troubleshoot
does rely on our knowledge of the code
13:35
we're writing.
13:37
This is why I say it's crucial to
understand the code that you're
13:39
working with.
13:41
This is also why I feel like AI in its
current state cannot simply just replace
13:42
all developers, but instead can
drastically speed up the work that we do.
13:46
Okay, so while I was rambling on about
AI not being perfect, I went ahead and
13:51
pasted in the updated CSS for
our contact form.
13:56
And it looks like I fixed the input issue,
sweet.
13:59
That's pretty much everything
that we're gonna need for
14:02
our website to match the mock-up,
14:04
minus a few things that we can do to make
it just a little bit more pixel perfect.
14:06
So let's update some of
these things on our own.
14:09
I noticed in the mock-up that the nav as
well as our hero section has the same
14:12
light gray background color.
14:16
So let's create a CSS rule
to target both elements and
14:18
apply a light background color of gray.
14:21
Let's hit Save and check it out.
14:25
Sweet, that looks pretty nice.
14:27
Another big thing that I'd like to address
is the white background of our form.
14:29
We don't see that in the mock-up, but
14:34
ChatGPT inferred that we might like to
have a white background for our form.
14:35
So let's fix that real quick,
and this is a pretty easy fix.
14:40
I'll just remove the form's
background color of white, and
14:43
just to ensure that our
form fields are white,
14:46
we'll add a white background color for our
inputs as well as our text area elements.
14:49
and checking out the browser we
see that this worked perfectly.
14:54
All right, we're done, and
14:58
it seems like ChatGPT was able to
help us build out this website.
15:00
But if you haven't noticed it was crucial
that I understood HTML and CSS enough to
15:03
update the code, to get it to match
the mock-up exactly like we wanted
15:08
So it's super important that you
understand the basics and the fundamentals
15:12
of the concepts that you're asking
ChatGPT to help you write code for.
15:15
At the end of the day, you are responsible
for the code that you write, not ChatGPT.
15:18
And you probably already noticed that
ChatGPT didn't exactly know what I wanted,
15:23
it doesn't live in my brain and
it can't think for me.
15:27
If it could, I think that'd be a little
weird and I probably wouldn't use it.
15:30
But anyways, I hope you enjoyed the guide
and I'll see you in the next one.
15:34
Until then, have fun, and happy coding.
15:36