In this exciting lesson, I’ll guide you step-by-step on how to create a one-page resume website using ChatGPT. Perfect for those who want to showcase their skills and experiences to potential employers! No coding experience? No problem! ChatGPT will be our coding buddy for this project.

In this lesson, you’ll learn:

🌐 How to use ChatGPT to generate HTML and CSS code 📁 How to save and organize your code files 🎨 How to customize the design and layout of your site 🖥️ How to view your site in a web browser

Together, we’ll create a resume website that includes sections for:

• Work experience
• Education
• Skills
• Hobbies

Don’t worry, I’ll also show you how to make modifications to the website and provide recommendations for web hosting providers. Get ready to impress potential employers with your very own one-page resume website created with the help of ChatGPT! 🚀

Transcript

So in this lesson, we’re going to actually use Chat GPT to produce a full website for us. It’s going to code it and then produce some code to style the website. And then I’m going to show you basically what to do with it and how you use it. So the first thing we want to do then, and I’m just going to do this step by step, I haven’t done this yet with Chat GPT, but I know what to do. So here we go then. Let’s get it to produce a website for… First of all, I think what would be a good one page website would be like a CV or a resume. So we’ll make a one page resume site. And then we’re going to use basically just sample data in there as well. And we’ll get chat GPT to come up with all of it, too. So first of all, I’ll give it its initial prompt to set things off. I need your help to produce a one page website for my resume that I want to use to send potential employers to learn more about me. Can you please code the website using HTML and CSS?

Full stop. Also, please put in sample data and ensure that there are the relevant parts to the resume, such as work experience, hobbies, and all of the other usual things included within a high quality resume. So there we go. Let’s get GPT 4 on the case. Here’s a basic one page HTML and CSS template for a resume. You can replace the sample data with your own, save the HTML code in an HTML file, and the CSS code in a separate file. So that’s no problem at all. I’m going to show you how to do all of this, by the way. So it’s getting to work, creating the initial code. And what we’re seeing here then is the title of the web page. That’s what comes up in the top of your browser. Then it links to the style sheet that it hasn’t yet created yet. So it’s going to do that for you in a minute. And it’s used John Doe as the sample person. We’ve got email, phone number. Now we’ve got the first resume section, work experience. I’m a software engineer, apparently. That’s good. Then it’s got responsibility one, responsibility two. I’m going to get it to fill this stuff out, maybe after it’s done the code.

Then I’ll actually use this, make the website, and then perhaps fill it in that way. But at least it gives us something to start off with. We’ve got education section, skills, JavaScript and Python, apparently. And then hobbies. My hobbies are traveling and photography, reading, and there we go. Now it’s getting to work on the CSS code. And we’ve got the font family of Arial being used. You can change all of this as well. We’ve got our line height, margin padding, the header, the color there is just that. We can change the color by getting a hex code. And I’m going to show you how to also get a hex code for anything you want. And then it’s just tidying things up now, doing the list. Unordered list is just literally a list like that. And then an ordered list is li. And that’s it. This template includes sections for work experience, education, skills, and hobbies, and you can modify it as needed and add more sections if necessary. Okay, cool. So now what do you do with this code then? Well, all you need to do is just go and… Well, actually, you don’t need to copy it like that.

I think at the top there, if you click copy, there you go. That’s a much quicker way to copy it. Open a text editor on, for example, the PC. You’ve got your standard text editor, and I think we’ve got text edit on the Mac. I’m just going to open a new document which I’m going to bring into the frame right here, and then I’m going to paste in that code that it’s given me. And then I’m going to go to save it, and I’m going to save it as, if I get the option here, there we go. So I’m just going to call it my website or just website. And then I’m going to save it as an HTML file. So just there.. Html. And then I’m going to save it to my desktop just there, so I’ve got easy access to it like that. So that’s the first file that’s been saved. All done. Lovely. Next, I’m going to go next one, I’m just going to go and copy this CSS code. So same thing again, we’re going to copy that code. We’re going to open a new document here, a new text file. We’re going to paste that in like so.

And now we’re going to save it as a. Css. In fact, we’re going to save it specifically as style. Css. So I’m going to go File, Save, and then style. Css. We don’t want any of that. Not quite sure how I stop it from being any one of these, but I’m just going to save it as HTML, and I could always get rid of that file extension afterwards. And that’s it. So what I’ll do now is I will take that file, you can see there it’s been named. Html. I can just manually remove that. I’m just going to do that right now. There we go. Html. Done. And then we’re going to use CSS. So that’s it. So I’ve got my two files now. The next thing to do is to go and create a new folder for them both to go in. So on the Mac, you just literally click anywhere on the desktop, click New Folder, and I’m just going to put website. And now, if I can move this over, here we go. Just move that over there like that. There it is. So I’m getting my two files that I’ve previously created, and I’m just going to drop them straight into that folder.

So now we’ve got our folder there with both the files in. If we just double click them, we can open it up and then we got website. Htm right there. Probably best, by the way, to just name that index. That way, if you’ve got a whole load of files, then that is the one that is used, the index automatically. And then we can open it up in your favourite browser, whatever you’ve got set as your default, by just double clicking it. And there we go. There’s our website created by Chat GP. Not that flash, obviously, it’s pretty basic, but we can add to this and we can start making changes to it. So for example, if I wanted a different color at the top here, I highly recommend using a free Chrome plugin that you can see just up here. This one, it’s called a color picker. Let me just see if it’s got an actual… Well, I’ll put a link to it underneath this video anyway. But you can just go and click on the color picker there and just go and grab any particular color that you wanted. Let’s say that we wanted this nice blue just here to be right at the top instead of that black color that we’ve got at the moment.

So I’ll just click OK with that. I’ve got the color, brilliant. So now what you would do is you would go and edit the CSS code. And again, you can just open it up using a text editor like this. There we go. And then you’re going to see there the background color. There’s the header background color. So zoom in on that. I’m going to change that over right now and just paste in the new color code, making sure you put a hash at the beginning, otherwise it won’t work. And then that’s it. I can just cross that off and that’s now saved. So if we take our website up here and we refresh it, there we go. We’ve now got ourselves a fancy blue header. But we can use chat GPT to carry on changing things over here as well. So I’ll just move it over. And let’s say that we want it all centralized. Can you centralize all of the website content? And can you make each section a slightly different shade of light grey or white? There we go. So now it’s probably going to give us just a new set of CSS code to use, and we can just replace the code in that file.

So we’ve got our website looking the way it is at the moment, and now it’s just going to give you new code to use. And again, we just copy it, paste it, overwrite the previous file that it gave us until we get things looking the way that we want. It’s usually pretty quick. Obviously, GPT 4 is slower than 3.5, but it’s still doing a good job there. Oh, look at this. There you go. So what it’s doing is it’s creating odd and even background sections. And then it’s just saying that one of them will be this color, one of them will be the other color, and that’s it. And it’s nearly finished now already. There we are. Additionally, wrap the contents of the body tag, blah, blah, blah. That’s fine. I don’t think we need to worry. We’ll just literally just copy what it said. And then let’s go and open up the CSS folder again just here. And we’ll edit that code. So text edit, and we’ll paste it in like that. Now we can save it again, and let’s see what happens when we refresh our website. There it is. There we go.

So it’s turned that back to black, and then it’s gone grey, white, grey, white, and so on. So you can do all sorts of stuff. You can have it add in an image placeholder for you as well if you want to, so that you can just upload your own image to it. But that’s really the basics of how you can have ChatGBT create literally your own website. And then you can upload these files to your hosting provider. Obviously, there’s tons of them out there. The one I recommend most, I’ll drop a link to underneath it’s who I’ve been using for years. They have a content delivery network so that your web pages and everything gets served really fine. nobody asked, no matter where you are in the world. And also they have hosting it based in America and in the UK as well in Europe. So a really good provider called 20i. And as I say, I’ll put the link underneath. But yeah, you can go and create your own website now with the help of ChatGBT and its coding abilities and continue to make iterations until you get it to be exactly the way that you want.

And obviously now you can start saying, can you write me a description of all of my previous work experience, or write a cover letter, or do whatever you need to do carrying on with this very same chat, and put that into your website as well, simply by editing the HTML file and replacing the content that it’s given you already, such as this part here, like the different things on your resume. So really simple and easy to do. But imagine trying to code this yourself. It’s going to take absolutely ages. You’re probably going to get some stuff wrong, so it’s far better to use Chat GPT. So hopefully you found this little tutorial really useful on how to create your own one page website using Chat GPT.