Building a Website with GPT-4: From Reference Image to Finished Design

00:00
It’s. Hey there. Good morning. Today I wanted to show more about Chat GPT. I know lots of people are talking about it, but so am I, because it really is the way we’re going. Today I decided to do of a fun project. I have GPT four. I signed up for the premium. I wanted to test something. People have been talking about how you can use photo those to create things, to allow it to reference the photo. I wanted to create a full website using just a reference image. So here’s my reference image. I wanted to create a professional website for myself that talked about me and had a way to contact me. So this is the reference image. I wanted to pretend that I don’t know anything about programming. I do know a bit. I am definitely nowhere near a professional, but I have a basic understanding of programming and I have done a bit in the past, so I have slightly more experience than some, but not a whole lot, which you’ll see in a second when you’ll I had a bit of an error.

01:04
I first uploaded the photo into imager so that the GPT four could see it. I started off by telling it to reference the photo for the rest of the conversation. I’m not going to do this in real time because it takes GPT four a good bit to actually spit out all this code. It was a good five minutes of waiting for each one, so that would be very slow and a long video. I asked it and I asked it to create a personal website for a person named Adam Melrose. I told the AI that this is the photo that I want to use for reference. I told it that I need to start from scratch. Nothing there. Please give me all the code I need. So, HTML and CSS. I’m going to show you each version and iteration to show you what I did and what I changed.

01:55
I’ll show you the mistake I made. This was the first one it provided. It provides it as an index file. HTML tells you how to name it, tells you how to do it inside a notepad and then it has a CSS file. So I’m going to show you version. Let’s start with version one. You’re going to see something funny here. I had to go back and fix it because I actually saved my stylist file as a HTML, which I did not realize was my issue until I got to, I think, version three. And you’ll see the question down below. I figured it out myself, but a model of the question, as though I didn’t know anything about Styles CSS files. I wanted to fix it for each version. You can see what the AI actually spit out, had I named my file correctly, styles CSS as opposed to Styles HTML.

02:49
This is what it gave me the first time. It’s not bad. It doesn’t have the Contact me. It has contact up here, but no Contact Me form. It has the menu bar up above as opposed to down below it, but the rest of it’s pretty good. I asked it so here’s where you can see where I’m already making my mistake. I said it doesn’t look quite right. I fixed one error that I really did have wrong, which I wanted it to say Adam Melrose above the icons. I wanted the Contact Me form next to the About Adam because you can see it’s here as opposed to just a Contact Me button. And then you’ll see that. GPT also said, it’s very basic, there’s lots of room for improvement. So I said, go ahead. Go ahead and improve it and then give me all the code again.

03:42
It added containers, created a two column layout, and then added some more basic style. So here is version two. You’re going to see again, same mistake. I went back and fixed it just so I can show you what it actually gave. I was doing Styles HTML as opposed to Styles CSS, so I was still not seeing any styling for version two. So here’s what version two looked like. It’s already getting much better. You got the menu in the correct place. Contact Me is in the correct place. About Me is in the correct place. Okay. It actually looks pretty similar to this. Of course, I am still confused because it’s not looking like this on my end. It’s looking like, here, let me show you what it was actually looking like to me. Let me just move this out just so we can take a look.

04:30
It was looking like this to me, no styling. I was confused like, well, okay, it’s got a Contact me thing now, but it’s still in the wrong order, so let me put this back to where it belongs. So then I asked Chat GPT. I say Contact Me is still below the About Adam for some reason. Actually, that’s not true. That was me being bad at programming. I asked it again to put it side by side. And it’s interesting. GPT says it apologize to layout issue, even though it’s not technically incorrect. That is one flaw I’ve seen here. I say put it left to right, add some color, make the menu bar a different color, and then it again spits out all the code. Again, each one of these takes about five minutes to spit out. It’s got every bit of code you can click copy code, put it directly into the file, hit save, and it’ll work.

05:28
I figure out my error right here, because as I watch it start typing, it out. I see it does the link to the style sheet Styles CSS. I was like, Wait a minute. I’m pretty sure I typed that incorrectly. Here I say, okay, for some reason, I can’t see colors. I’m pretending like I didn’t know what was wrong. I’m pretending I get the version three still incorrect, can’t figure out what’s wrong. I say, okay, I can’t see the colors. The menu bar is still in the wrong spot. Why do you think I might be having this issue? And then this is chat GT. It gives a very good answer. It says, it may be related to the link. Please ensure that Styles CSS is in the right folder. This is when I would have figured it out had I not accidentally seen the correct link CSS with the styles.

06:13
You see, look at this. It says Hrefstyles CSS. At this point, I think most people that have of understanding would have figured out what the problem was that you’ve got a misname file. It says, if you still have the issue, check it again, and if you still can’t figure it out, it’ll help. I said I was able to fix it. Here is what version three looked like. So version three looks like this. We got blue up here. We got some styling of the boxes. Okay, it’s starting to come along. Finally I decided, let’s do one more iteration. I said, what changes? Since it’s an AI, so it can make suggestions, so far, I’ve just been feeding it the really basic stuff just to get something on the page. The whole idea is that the AI can help you make decisions as opposed to just implement them.

07:10
I said, give me some numbered suggestions about what changes you think would best add next. It says, add a favicon responsive design for media inquiries, custom fonts, hover effects, icons, background images or gradients, social media, YouTube, thumbnails, smooth scrolling, and a sticky header. Some of these will be a little more effort than others. I decided a couple of easier ones. I said, let’s do hover effects and let’s do a gradient. It gave me the code and was telling me to replace stuff. It’s like, replace the current header styles with this updated version. I could do that. I understand what that means. Again, taking this from the perspective of someone who doesn’t program, I said, could you just give me the whole file, the whole updated file. I don’t want to start trying to replace things. So then this was faster. This only took it a minute.

08:10
I assumed that was why it gave it to me like this, because it’s just the changes and the additions. I said, Please give me the whole file. This is starting to get a little lengthy. So that took about five minutes. Again. We’ve got finally got version four. Let’s see, I think we can go through the versions. So one that’s the broken one. This is the first, 2nd, third and then finally fourth. So it’s got the biggest change here. Was it fixed this in the last one. I’m pretty impressed. This is not quite usable. It’s still extremely ugly. I could ask for more additions but I can already tell this video was going to go way too long if I kept playing with it. I decided just to end it here just to give you a really basic idea. You can of course add if you had to actually upload it, if you didn’t know what you’re doing, then you could ask Chat GPT, how do I upload this to the internet?

09:23
What do I need to do? Where do I put it? It can do all that. The purpose of this was to show taking it from a photo to finished result without doing any actual coding and pretending again. I know what the parts of a website are, but I don’t actually know how to program. That was the perspective I was trying to take. I hope that this video was interesting. I am probably going to end up doing more AI videos. Moving forward will be my guess. I’m going to continue doing some tutorial type videos but I am particularly interested in these kind of topics. Thanks for watching. Bye.