Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Uncover the coding prowess of different chatbots as we evaluate their programming skills.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
For our third test, I wanna have each
chatbot attempt to produce some code, and
0:05
we'll test it out to see if it works.
0:09
Nothing too crazy, just a simple website
section, so the prompt I'll use for
0:11
this test will be, provide code for a full
width div that takes up the entire screen.
0:15
And has a background image,
0:19
make the background image
a random image from Unsplash.
0:20
Inside the div, create a CTA button that
says sign up and is both vertically and
0:23
horizontally centered.
0:28
Let's see how ChatGPT handles this request
0:30
Okay, ChatGPT has finished
generating the code.
0:44
Let's scroll back up and
copy it to the clipboard.
0:46
Then we'll head to VS Code.
0:48
Now I'll paste my code and save the file.
0:50
Let's take a look in the browser.
0:53
Perfect, the div takes
up the entire viewpoint.
0:55
The CTA button is in all caps, and it's
vertically and horizontally aligned, and
0:59
the image changes every
time we refresh the page.
1:03
I couldn't ask for
more when it comes to this task.
1:06
Let's move on to Google Bard.
1:08
All right, I'm back in Google Bard,
and I'll just paste my prompt.
1:10
No, It looks like we encountered an error.
1:16
Bard says, I'm still learning to create
images, so I can't help you with that yet.
1:19
Okay, so it misunderstood us.
1:23
Let me try changing the prompt.
1:26
This time I'll use help me code
a full-width div that takes up
1:27
the entire screen and
has a background image.
1:30
Code the background image to be
a random image from Unsplash.com.
1:33
Inside the div, create a CTA button that
says SIGN UP and is both vertically and
1:36
horizontally centered.
1:41
Let's see if that helps any.
1:43
Okay, awesome, it has generated our code.
1:45
It even put our CSS in a separate file
which is cleaner and more organized.
1:47
However, for this simple example,
1:52
I'm going to ask Bard to add
the CSS to our HTML file.
1:54
And just like that, it produced my
HTML file with the inline CSS, and
2:03
it even provided documentation for
2:07
me to better understand what
each part of the code does.
2:09
I'll hop into VS code to paste
this code and see what we have.
2:12
Now let's check it out in the browser.
2:16
It works, awesome.
2:18
And every time we refresh,
we get a new background image.
2:20
Now let's try out Bing AI.
2:23
All right, now that I'm back in Bing AI,
I'll pace my prompt and hit enter.
2:25
Okay, it looks like Bing
is starting with the HTML.
2:35
Let's see if it automatically writes
in line CSS, and it does, good deal.
2:38
Again, if this was a real project,
I would ask for the HTML and
2:42
CSS files to be separated, but for
this simple demo it's perfectly fine.
2:46
And just like bard, before it being, AI
has generated the code I've requested and
2:50
even provided some
documentation to explain it.
2:55
But I'm going to copy this code and
head over to Visual Studio Code now,
2:58
I'll just paste the code and
3:02
save my file all right let's check it
out in the browser hey, look at that.
3:04
We have our full screen div
with a background image, and
3:08
it changes every time we refresh the page.
3:11
Nice work Bing.
3:14
Let's head over to cloud.ai and
see how it handles this task.
3:15
Okay, now that I'm back in Claude, I'll
quickly paste our prompt and hit enter.
3:19
Claude begins generating
our code almost instantly.
3:23
Just like the other chatbots,
3:31
it also has provided documentation
to better explain the code.
3:33
But let's copy and paste it in my IDE,
so we can check it out in the browser,
3:36
back in Visual Studio Code.
3:40
I'll paste and re-save my file,
then open it in the browser,
3:42
and Claude has coded our div.
3:45
It has the CTA perfectly
aligned in the center, and
3:47
the background changes when
the page is refreshed.
3:50
However, there is a border or
padding around the entire div.
3:52
Let's tell Claude what happened and
see if it can help us debug the code.
3:56
Back in Claude, I'll tell the chatbot, can
you help me debug the code you provided?
4:00
There is a white border and
the image goes outside the viewport.
4:04
Claude replies by saying I'm right, and
4:08
the problem is that by default the body
tag has margin styling applied, so
4:10
we need to override that
by setting the margin to 0.
4:15
Claude begins to explain the fix
by updating a portion of the code,
4:18
I'll ask Claude to update
the original code for me, perfect.
4:23
Now let's copy and
paste this code over into VS Code and
4:27
check it out in the browser.
4:30
I'll highlight my old code to
replace it with my new code, and
4:31
I'll re-save my file.
4:35
Let's head over to the browser and
refresh it.
4:37
It works, everything is perfectly aligned.
4:39
The div covers the entire viewport and
the image changes every time we reload,
4:42
perfect.
4:46
All in all, I would say each of
the four chatbots performed well.
4:47
You're bound to run into issues when
prompting these assistants, especially
4:51
when generating code, so it's good to
learn how to handle these errors and
4:55
how to use these bots for debugging.
4:58
But that's it for this test.
5:00
Let's move on to test number four.
5:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up