1 00:00:00,000 --> 00:00:08,968 [MUSIC] 2 00:00:08,968 --> 00:00:12,602 Hey what's up, my name is Dustin and I'm a developer here at Treehouse and 3 00:00:12,602 --> 00:00:16,642 today, I'm gonna show you exactly how to use ChatGPT to build out a website from 4 00:00:16,642 --> 00:00:17,294 a mock-up. 5 00:00:17,294 --> 00:00:21,758 This shouldn't be hard to do since ChatGPT is super powerful, but what I want to do 6 00:00:21,758 --> 00:00:25,788 is kind of just demonstrate ChatGPT's strengths as well as its weaknesses. 7 00:00:25,788 --> 00:00:29,675 We'll keep this guide super beginner friendly and just use HTML and CSS. 8 00:00:29,675 --> 00:00:32,751 But I do wanna mention that this guide might not be the best for 9 00:00:32,751 --> 00:00:36,610 you to follow along with me, simply because each time you prompt ChatGPT you 10 00:00:36,610 --> 00:00:40,432 might get a different response, even if you use the same prompts that I do. 11 00:00:40,432 --> 00:00:43,249 So sit back, relax, grab a cup of coffee, and 12 00:00:43,249 --> 00:00:46,850 just watch how I use ChatGPT to help me as a developer. 13 00:00:46,850 --> 00:00:51,180 Of course, when the video is over, feel free to follow along and do this yourself. 14 00:00:51,180 --> 00:00:52,110 But what do you think? 15 00:00:52,110 --> 00:00:54,870 Do you think ChatGPT can help us build out a website? 16 00:00:54,870 --> 00:00:55,450 Let's find out. 17 00:00:56,470 --> 00:01:00,601 The first step is to obviously head on over to chat.openai.com so 18 00:01:00,601 --> 00:01:03,270 that we can work with ChatGPT. 19 00:01:03,270 --> 00:01:06,314 If you don't already have an account, no worries, 20 00:01:06,314 --> 00:01:10,950 you'll just need to head on over to platform.openai.com and create one, and 21 00:01:10,950 --> 00:01:13,900 then just head right back to chat.openai.com. 22 00:01:13,900 --> 00:01:17,280 Let's take a look at this very basic mock-up that I created. 23 00:01:17,280 --> 00:01:21,340 This is the website that I'd like to see if ChatGPT can create for us. 24 00:01:21,340 --> 00:01:25,476 I'll do my best to not write any code myself unless I need to for time's sake, 25 00:01:25,476 --> 00:01:29,760 but the idea is that we can prompt ChatGPT enough to build this out. 26 00:01:29,760 --> 00:01:32,700 So let's see if ChatGPT is up for the task. 27 00:01:32,700 --> 00:01:35,800 Let's start by creating a project folder on our desktop. 28 00:01:35,800 --> 00:01:38,143 I'll keep this simple and just name it Website. 29 00:01:38,143 --> 00:01:42,311 And then I'll open it up in my text editor of choice, which is VS Code. 30 00:01:42,311 --> 00:01:48,080 Then I'll create an index.html file as well as an app.css file. 31 00:01:48,080 --> 00:01:52,022 Inside of the index.html, I'll create our boilerplate, and 32 00:01:52,022 --> 00:01:55,580 then I will also link up our app.css stylesheet. 33 00:01:55,580 --> 00:01:59,830 We can also go ahead and update our title to something like my website. 34 00:01:59,830 --> 00:02:02,100 And honestly, that's about all the setup we're gonna do. 35 00:02:02,100 --> 00:02:06,870 I'm gonna let ChatGPT take over now, and all we're gonna do is look at our mock-up 36 00:02:06,870 --> 00:02:11,940 and describe it the best way that we can to ChatGPT and see what it can give us. 37 00:02:11,940 --> 00:02:15,210 So let's open up ChatGPT and start prompting. 38 00:02:15,210 --> 00:02:19,530 I'll start by typing, help me build a website from a mock-up please, 39 00:02:19,530 --> 00:02:24,190 I already have my HTML file and CSS file set up and linked together. 40 00:02:24,190 --> 00:02:25,450 Let's first work on the navbar. 41 00:02:26,500 --> 00:02:28,668 I'm gonna also open up the mock-up on the left side so 42 00:02:28,668 --> 00:02:31,370 I can describe it just a little bit better. 43 00:02:31,370 --> 00:02:35,664 I'll hop back into my prompt and mention that it looks like the navbar has an h1, 44 00:02:35,664 --> 00:02:38,640 and to the right of the navbar are some links. 45 00:02:38,640 --> 00:02:41,084 Since this mock-up doesn't have any actual text, 46 00:02:41,084 --> 00:02:43,480 I'll make up a few links that we can use. 47 00:02:43,480 --> 00:02:49,070 Let's tell ChatGPT that the links are Home, Products, and Catalog. 48 00:02:49,070 --> 00:02:52,859 Let's keep this simple and send this prompt to ChatGPT instead of explaining 49 00:02:52,859 --> 00:02:55,280 the entire mock-up in one prompt. 50 00:02:55,280 --> 00:02:57,780 So let's send it and see what we get back. 51 00:02:57,780 --> 00:02:59,390 What I really like about working with code. 52 00:02:59,390 --> 00:03:03,248 Code and ChatGPT is that it usually provides some context to the code that it 53 00:03:03,248 --> 00:03:06,180 gives you, and it explains what it's doing. 54 00:03:06,180 --> 00:03:10,341 This is pretty great, but usually if you just want the code you can just add, 55 00:03:10,341 --> 00:03:12,892 just show me the code to the end of your prompt. 56 00:03:12,892 --> 00:03:15,900 I won't do this in this video, but I just wanted to mention it. 57 00:03:15,900 --> 00:03:20,130 But it looks like we got back a good chunk of HTML as well as some CSS. 58 00:03:21,370 --> 00:03:25,040 Since we already have our boilerplate HTML done, I'll only copy the code for 59 00:03:25,040 --> 00:03:26,720 the nav that is supplied. 60 00:03:26,720 --> 00:03:30,720 So let's copy that and paste that right into our HTML file. 61 00:03:30,720 --> 00:03:34,400 I'll save that and quickly check the browser to see if the markup looks right. 62 00:03:34,400 --> 00:03:36,070 And sweet, it does. 63 00:03:36,070 --> 00:03:40,023 So now I'm just gonna go grab the CSS that ChatGPT wrote for us, and 64 00:03:40,023 --> 00:03:42,720 paste that directly into our app.css file. 65 00:03:43,720 --> 00:03:47,916 I'll hit save and I'll check the browser, and cool, it looks like we have a navbar, 66 00:03:47,916 --> 00:03:50,480 but this looks nothing like our mock-up. 67 00:03:50,480 --> 00:03:54,500 So let's pop right back into ChatGPT and add another prompt. 68 00:03:54,500 --> 00:03:57,216 All right, currently, the navbar has a dark background, 69 00:03:57,216 --> 00:04:00,040 could you update the code so that it's white? 70 00:04:00,040 --> 00:04:02,510 And could you make the h1 the color... 71 00:04:02,510 --> 00:04:07,801 Well, let's go back into the markup and find out what that color is for the h1. 72 00:04:07,801 --> 00:04:11,191 So I'll grab the hex code for the h1 in the markup, and 73 00:04:11,191 --> 00:04:15,786 I'll just paste it directly into the prompt, and we can just send it off. 74 00:04:15,786 --> 00:04:19,768 Just as before ChatGPT responds and gives us some updated code. 75 00:04:19,768 --> 00:04:24,780 I'll copy that and replace what's in our CSS file with the updated CSS. 76 00:04:24,780 --> 00:04:27,541 Now you'll notice the white nav background and 77 00:04:27,541 --> 00:04:31,540 the blue h1, but the structure of our nav is now messed up. 78 00:04:31,540 --> 00:04:35,748 The links are no longer to the right and that's because we blindly pasted in new 79 00:04:35,748 --> 00:04:39,820 code, ChatGPT only updated the code necessary for our last prompt. 80 00:04:39,820 --> 00:04:44,524 So instead of reverting our code back let's just re-prompt ChatGPT to update 81 00:04:44,524 --> 00:04:49,027 the CSS so that the nav links are to the right and the h1 remains to the left. 82 00:04:49,027 --> 00:04:53,733 This is a good time to mention that using ChatGPT to help you with code is obviously 83 00:04:53,733 --> 00:04:56,164 much faster than writing code yourself. 84 00:04:56,164 --> 00:05:01,320 But it can be counterproductive if you're just blindly copying and pasting in code. 85 00:05:01,320 --> 00:05:04,021 You should absolutely understand the code that you're being given so 86 00:05:04,021 --> 00:05:06,000 that you know how to work with it. 87 00:05:06,000 --> 00:05:10,032 If we would've taken the time to read the updated CSS, we'd have known that it was 88 00:05:10,032 --> 00:05:14,120 only updating the navbar background color, as well as the h1 color. 89 00:05:14,120 --> 00:05:18,510 So, now we are spending extra time fixing this super simple error that we made. 90 00:05:18,510 --> 00:05:21,660 So just keep that in mind when using ChatGPT as a co-developer. 91 00:05:22,670 --> 00:05:24,604 All right, enough of the pep talk, so 92 00:05:24,604 --> 00:05:27,680 it looks like ChatGPT has given us some more code. 93 00:05:27,680 --> 00:05:31,933 This time it's not only the restructure, but it also includes the h1 and 94 00:05:31,933 --> 00:05:33,260 navbar colors. 95 00:05:33,260 --> 00:05:37,730 So let's copy all of that and replace all of the CSS in our CSS file. 96 00:05:37,730 --> 00:05:41,024 Hitting Save and reloading the browser shows our navbar mimicking the mock-up 97 00:05:41,024 --> 00:05:42,920 much better than it did before. 98 00:05:42,920 --> 00:05:46,060 I do see that there is some weird spacing on the nav items, 99 00:05:46,060 --> 00:05:50,600 instead of prompting ChatGPT, I know this is probably just a margin fix. 100 00:05:50,600 --> 00:05:52,990 So let's update the code ourselves. 101 00:05:52,990 --> 00:05:57,870 For some reason, ChatGPT put a margin left of auto for the last nav item. 102 00:05:57,870 --> 00:06:00,290 Not sure why it did that, so let's just remove it. 103 00:06:00,290 --> 00:06:02,844 That's actually gonna be everything we need for the nav bar, so 104 00:06:02,844 --> 00:06:05,040 now let's work on our hero section. 105 00:06:05,040 --> 00:06:06,670 The hero looks pretty simple. 106 00:06:06,670 --> 00:06:10,105 I see some text on the left and what looks like an image on the right, and 107 00:06:10,105 --> 00:06:12,580 the hero itself has a bit of padding. 108 00:06:12,580 --> 00:06:17,400 So I'll start my next prompt with ChatGPT, asking for help with my hero section. 109 00:06:17,400 --> 00:06:20,588 I'll mention that I'd like some text on the left side of the hero, and 110 00:06:20,588 --> 00:06:21,631 an image on the right. 111 00:06:21,631 --> 00:06:22,799 But for the image, 112 00:06:22,799 --> 00:06:27,114 could you just please give me a dark rectangular box as a placeholder? 113 00:06:27,114 --> 00:06:30,780 I'd also like a good bit of padding around my hero section. 114 00:06:30,780 --> 00:06:33,690 I'll send this off and await ChatGPT response. 115 00:06:33,690 --> 00:06:36,242 I like to be kind of vague with my initial prompts, and 116 00:06:36,242 --> 00:06:40,590 just see what ChatGPT gives me back, and then go from there and tweak as needed. 117 00:06:40,590 --> 00:06:46,220 So just as before I was able to get back some HTML and CSS based off of my prompt. 118 00:06:46,220 --> 00:06:51,363 And it looks like the HTML doesn't include the nav markup, so I'll just copy the new 119 00:06:51,363 --> 00:06:55,678 hero markup and paste it underneath the nav markup in the HTML file. 120 00:06:55,678 --> 00:06:57,570 I'll save and check the browser. 121 00:06:57,570 --> 00:07:00,713 And it looks like we get some text but I don't see our box for the image. 122 00:07:00,713 --> 00:07:04,355 Maybe it's there and we just need to apply the newly generated CSS, so 123 00:07:04,355 --> 00:07:05,950 let's try that. 124 00:07:05,950 --> 00:07:10,080 I'll copy the CSS over, which looks to be only CSS for the hero. 125 00:07:10,080 --> 00:07:14,670 So I won't replace any existing CSS but instead paste in the new CSS. 126 00:07:14,670 --> 00:07:19,311 Looks like that worked, we now see our box, but I'm not really liking the size. 127 00:07:19,311 --> 00:07:23,639 And since this is kind of difficult to prompt ChatGPT with to get the right size, 128 00:07:23,639 --> 00:07:25,848 let's just update the code ourselves. 129 00:07:25,848 --> 00:07:29,548 I'll change the width from 400px to 100%, and 130 00:07:29,548 --> 00:07:33,186 just give that max width property the 400px value. 131 00:07:33,186 --> 00:07:36,613 This will allow the width of our box to be a little bit more responsive which looks 132 00:07:36,613 --> 00:07:38,270 much better in my opinion. 133 00:07:38,270 --> 00:07:42,376 I'll also quickly change the height from 300px to 200px to make it 134 00:07:42,376 --> 00:07:44,100 slightly shorter. 135 00:07:44,100 --> 00:07:46,620 And I think that's all we'll wanna do for our hero section. 136 00:07:46,620 --> 00:07:49,549 It looks pretty good now, so let's jump into the next section, 137 00:07:49,549 --> 00:07:52,880 which is a section for some products that hold some product cards. 138 00:07:52,880 --> 00:07:56,889 I'll bring back up our mock-up and our awesome co-developer, ChatGPT, 139 00:07:56,889 --> 00:07:58,560 side by side again. 140 00:07:58,560 --> 00:08:03,048 With the mock-up up, let's see if we can describe our product section to ChatGPT. 141 00:08:03,048 --> 00:08:06,200 I'll let ChatGPT know that the previous code it gave me worked, and 142 00:08:06,200 --> 00:08:10,200 then I'll just let it know that we're gonna work on our next section. 143 00:08:10,200 --> 00:08:13,281 I'll say I want a 3x3 grid of products, and 144 00:08:13,281 --> 00:08:18,817 that I want each product card to contain an image, a short description, and a CTA. 145 00:08:18,817 --> 00:08:23,642 I'll also let it know that the CTA should be the same color as our H1 from earlier. 146 00:08:23,642 --> 00:08:27,500 Also the image should be a light gray box as a placeholder. 147 00:08:27,500 --> 00:08:31,206 And I'll finish the prompt with just letting ChatGPT know that I'd like this to 148 00:08:31,206 --> 00:08:32,610 be responsive. 149 00:08:32,610 --> 00:08:34,790 So let's send this off and see what we get back. 150 00:08:35,820 --> 00:08:36,540 So what do you think? 151 00:08:36,540 --> 00:08:39,652 Do you think ChatGPT will get this right on the first try or will we need 152 00:08:39,652 --> 00:08:43,670 to update the code just a little bit like we've done in our hero section? 153 00:08:43,670 --> 00:08:44,420 Let's find out. 154 00:08:44,420 --> 00:08:49,173 It looks like we got back some HTML and CSS, so let's go ahead and 155 00:08:49,173 --> 00:08:55,160 copy our new HTML, which looks to be just a product section with a product grid and 156 00:08:55,160 --> 00:08:59,500 a single product card, even though we asked for a 3 by 3. 157 00:08:59,500 --> 00:09:01,924 So we'll probably need to copy and 158 00:09:01,924 --> 00:09:08,050 paste just the product card a few more times to fully create the UI that we want. 159 00:09:08,050 --> 00:09:09,568 I'm gonna go ahead and do this now, so 160 00:09:09,568 --> 00:09:12,089 I'll speed up the video just a little bit to get this part done. 161 00:09:15,603 --> 00:09:19,071 Okay, so now that all the product cards are in the markup, 162 00:09:19,071 --> 00:09:21,927 let's open up the browser and see how this looks. 163 00:09:21,927 --> 00:09:22,665 Pretty cool, 164 00:09:22,665 --> 00:09:26,489 I think it'll be a little easier to see each card once we add in the new CSS. 165 00:09:26,489 --> 00:09:30,271 So let's go ahead and copy and paste that into our CSS file now. 166 00:09:33,144 --> 00:09:35,615 All right, so let's save that and check out the browser. 167 00:09:38,321 --> 00:09:40,550 There we go, looks like some product cards to me. 168 00:09:40,550 --> 00:09:43,875 So the style doesn't quite match what we're looking for though, so 169 00:09:43,875 --> 00:09:47,770 let's update the styles on our own just a bit to see if we can't get a little closer 170 00:09:47,770 --> 00:09:48,649 to the mock-up. 171 00:09:49,650 --> 00:09:53,940 First up, the product-card image or the gray box placeholder, I should say. 172 00:09:53,940 --> 00:09:55,874 Let's lower the height on those, and 173 00:09:55,874 --> 00:10:00,340 I also want to remove the border that's given to each of the product cards. 174 00:10:00,340 --> 00:10:03,590 Now, let's make the CTA the full width of the product card. 175 00:10:03,590 --> 00:10:07,066 But instead of doing this ourselves, let's practice prompting ChatGPT and 176 00:10:07,066 --> 00:10:09,030 updating the code again. 177 00:10:09,030 --> 00:10:13,203 So I'll ask ChatGPT to update the CSS for the CTA width, and 178 00:10:13,203 --> 00:10:15,890 I'll copy the new CSS in and paste it. 179 00:10:17,910 --> 00:10:21,872 It's important to note that ChatGPT didn't update just the CTA CSS, 180 00:10:21,872 --> 00:10:25,310 it gave me all the CSS for the product section again. 181 00:10:25,310 --> 00:10:29,490 So we'll replace all the CSS that we just pasted in our code. 182 00:10:29,490 --> 00:10:33,660 And it looks like that worked, but now we have a weird spacing issue. 183 00:10:33,660 --> 00:10:35,200 This is due to box sizing. 184 00:10:35,200 --> 00:10:37,622 We'll go ahead and set the box sizing property for 185 00:10:37,622 --> 00:10:40,320 every element on the page to border box. 186 00:10:40,320 --> 00:10:42,488 If you're unfamiliar with this property value, 187 00:10:42,488 --> 00:10:45,390 all you need to know is that it changes the sizing behavior. 188 00:10:45,390 --> 00:10:48,994 For example, the height and width given to an element will also take into 189 00:10:48,994 --> 00:10:52,990 account the content area, padding, and borders of the element. 190 00:10:52,990 --> 00:10:56,662 In other words, the total width and height of the element remains constant, and 191 00:10:56,662 --> 00:11:00,190 any padding or border widths are subtracted from the content area. 192 00:11:00,190 --> 00:11:04,928 All right, so now that our mini lesson on box sizing is finished, let's go ahead and 193 00:11:04,928 --> 00:11:09,310 remove the border on the product cards that our new CSS added back. 194 00:11:09,310 --> 00:11:12,620 I'm also gonna remove the h3 that each product card has since we didn't 195 00:11:12,620 --> 00:11:14,270 ask for that. 196 00:11:14,270 --> 00:11:18,807 And I also would like to remove the border radius that was set on each of our CTAs, 197 00:11:18,807 --> 00:11:23,510 since the mock-up doesn't have any border radius for the CTAs. 198 00:11:23,510 --> 00:11:24,879 With these changes in place, 199 00:11:24,879 --> 00:11:28,181 I think our product card should look pretty much like our mock-up now. 200 00:11:28,181 --> 00:11:31,471 They aren't very responsive though, so instead of tackling that here, 201 00:11:31,471 --> 00:11:33,750 I'll just save that for another time. 202 00:11:33,750 --> 00:11:37,860 Let's hop into our last section of this markup, which is our contact section. 203 00:11:37,860 --> 00:11:40,016 I went ahead and grabbed the hex code value for 204 00:11:40,016 --> 00:11:41,955 the background color for this section. 205 00:11:41,955 --> 00:11:45,419 I'll prompt ChatGPT to now work on the contact section and 206 00:11:45,419 --> 00:11:48,477 give it a background color with that hex code value. 207 00:11:48,477 --> 00:11:52,668 In this section I'd like to have a form with a few input elements. 208 00:11:52,668 --> 00:11:58,140 I'd like to have an input for a name and an email, and I want those side by side. 209 00:11:58,140 --> 00:12:01,337 I'd also like to have a text area underneath those fields for 210 00:12:01,337 --> 00:12:02,910 the body of our contact form. 211 00:12:02,910 --> 00:12:07,362 And lastly, we'll just want to have a CTA underneath that to send the email. 212 00:12:07,362 --> 00:12:10,162 Let's see what chatGPT spits out for us. 213 00:12:10,162 --> 00:12:14,213 So while chat ChatGPT does its thing, I kinda want to mention that you might have 214 00:12:14,213 --> 00:12:16,209 noticed I'm not really saying word for 215 00:12:16,209 --> 00:12:18,705 word the text that I'm prompting ChatGPT with. 216 00:12:18,705 --> 00:12:22,649 And this is because I want you to get used to feeling comfortable to talk to ChatGPT 217 00:12:22,649 --> 00:12:24,977 like you would your best friend or a colleague. 218 00:12:24,977 --> 00:12:30,227 Just speak to it like a human, ChatGPT is basically your co-developer in this case. 219 00:12:30,227 --> 00:12:33,908 There are a ton of talks about prompt engineering and all that stuff, but 220 00:12:33,908 --> 00:12:37,247 there's really no secret to how you prompt ChatGPT. 221 00:12:37,247 --> 00:12:40,787 Just speak to it like you would anyone else and you'll be just fine. 222 00:12:40,787 --> 00:12:44,528 Most of the time, ChatGPT can understand what you're trying to ask it even if you 223 00:12:44,528 --> 00:12:45,747 don't ask it perfectly. 224 00:12:47,170 --> 00:12:50,661 So I went ahead and copied the HTML that ChatGPT gave us, so 225 00:12:50,661 --> 00:12:54,168 now let's paste that in underneath our product section. 226 00:12:54,168 --> 00:12:58,720 Once that's done we'll hop back into our ChatGPT and grab the CSS. 227 00:12:58,720 --> 00:13:02,153 I'll go ahead and paste that in just like before, hit Save, and 228 00:13:02,153 --> 00:13:03,433 check out the browser. 229 00:13:03,433 --> 00:13:06,055 I'll Scroll down to our new contact section, and 230 00:13:06,055 --> 00:13:08,820 at first glance it looks pretty accurate. 231 00:13:08,820 --> 00:13:12,630 But if you remember we wanted the name and email field to be on the same line. 232 00:13:12,630 --> 00:13:17,248 So I'll hop back into ChatGPT and let it know that the name and email fields 233 00:13:17,248 --> 00:13:22,037 are not on the same line like I requested, and for it to update the CSS for me. 234 00:13:22,037 --> 00:13:26,359 As you may have noticed, each time we work on a new section, ChatGPT can handle 235 00:13:26,359 --> 00:13:30,617 the majority of the tedious code writing for us, but we usually have to either 236 00:13:30,617 --> 00:13:35,000 re-prompt it, or fix some issues by diving into the code ourselves. 237 00:13:35,000 --> 00:13:37,943 Either option we choose to troubleshoot does rely on our knowledge of the code 238 00:13:37,943 --> 00:13:39,120 we're writing. 239 00:13:39,120 --> 00:13:41,692 This is why I say it's crucial to understand the code that you're 240 00:13:41,692 --> 00:13:42,890 working with. 241 00:13:42,890 --> 00:13:46,811 This is also why I feel like AI in its current state cannot simply just replace 242 00:13:46,811 --> 00:13:50,690 all developers, but instead can drastically speed up the work that we do. 243 00:13:51,730 --> 00:13:56,173 Okay, so while I was rambling on about AI not being perfect, I went ahead and 244 00:13:56,173 --> 00:13:59,560 pasted in the updated CSS for our contact form. 245 00:13:59,560 --> 00:14:02,550 And it looks like I fixed the input issue, sweet. 246 00:14:02,550 --> 00:14:04,756 That's pretty much everything that we're gonna need for 247 00:14:04,756 --> 00:14:06,106 our website to match the mock-up, 248 00:14:06,106 --> 00:14:09,630 minus a few things that we can do to make it just a little bit more pixel perfect. 249 00:14:09,630 --> 00:14:12,560 So let's update some of these things on our own. 250 00:14:12,560 --> 00:14:16,154 I noticed in the mock-up that the nav as well as our hero section has the same 251 00:14:16,154 --> 00:14:18,220 light gray background color. 252 00:14:18,220 --> 00:14:21,886 So let's create a CSS rule to target both elements and 253 00:14:21,886 --> 00:14:25,390 apply a light background color of gray. 254 00:14:25,390 --> 00:14:27,670 Let's hit Save and check it out. 255 00:14:27,670 --> 00:14:29,650 Sweet, that looks pretty nice. 256 00:14:29,650 --> 00:14:34,050 Another big thing that I'd like to address is the white background of our form. 257 00:14:34,050 --> 00:14:35,951 We don't see that in the mock-up, but 258 00:14:35,951 --> 00:14:40,240 ChatGPT inferred that we might like to have a white background for our form. 259 00:14:40,240 --> 00:14:43,307 So let's fix that real quick, and this is a pretty easy fix. 260 00:14:43,307 --> 00:14:46,936 I'll just remove the form's background color of white, and 261 00:14:46,936 --> 00:14:49,656 just to ensure that our form fields are white, 262 00:14:49,656 --> 00:14:54,639 we'll add a white background color for our inputs as well as our text area elements. 263 00:14:54,639 --> 00:14:58,990 and checking out the browser we see that this worked perfectly. 264 00:14:58,990 --> 00:15:00,542 All right, we're done, and 265 00:15:00,542 --> 00:15:03,907 it seems like ChatGPT was able to help us build out this website. 266 00:15:03,907 --> 00:15:08,581 But if you haven't noticed it was crucial that I understood HTML and CSS enough to 267 00:15:08,581 --> 00:15:12,653 update the code, to get it to match the mock-up exactly like we wanted 268 00:15:12,197 --> 00:15:15,565 So it's super important that you understand the basics and the fundamentals 269 00:15:15,565 --> 00:15:18,695 of the concepts that you're asking ChatGPT to help you write code for. 270 00:15:18,695 --> 00:15:23,513 At the end of the day, you are responsible for the code that you write, not ChatGPT. 271 00:15:23,513 --> 00:15:27,528 And you probably already noticed that ChatGPT didn't exactly know what I wanted, 272 00:15:27,528 --> 00:15:30,175 it doesn't live in my brain and it can't think for me. 273 00:15:30,175 --> 00:15:34,210 If it could, I think that'd be a little weird and I probably wouldn't use it. 274 00:15:34,210 --> 00:15:36,820 But anyways, I hope you enjoyed the guide and I'll see you in the next one. 275 00:15:36,820 --> 00:15:38,820 Until then, have fun, and happy coding.