How I Coded An Entire Website Using ChatGPT

chat GPT was recently released and ever since the internet has been in a frenzy now if you don't know chat gbt is a conversational model created by open AI basically an AI that you can interact with in a conversational way it's really powerful and can help you do a lot of different things but it sparked a lot of interest and debate over whether it's going to be replacing any jobs or if this is a step towards replacing any jobs or whether it could help with any jobs one of those jobs of concern of course being programming jobs I've spent a little bit of time messing around with it and I know now how to converse and construct the prompts in order for it to help me generate code Snippets and I haven't seen anyone actually use chat CBT to build a large-scale project yet so in this video I'm going to use chat gbt to help me build a full-fledged website and when we're done with the website I'm going to deploy it to one of the best hosting platforms around hostinger which also happens to be to sponsor this video so if you go in the description and you click that link and use code Nick white at checkout you will get an additional 10 off your purchase hosting her in my opinion's the best bang for your buck because when you sign up for that premium web hosting plan you're going to get a free domain as well as many other perks and benefits you don't get in other places at an affordable price there's always promotions and sales going on right now there's a holiday sale and if you sign up using my code Nick white a checkout you'll get that additional 10 off and we'll talk about this more later when we actually deploy our website so right now let's get started now I have a lot of programmer friends and for some reason a lot of them haven't even wasted their time to bother trying chat gbt which is weird to me because it's actually really easy to try out all you gotta do is go to openai.com and right at the top it's going to say introducing chat GPT and there's a button to try it now chat CPT is completely free to use and try you're just going to need to register an account with open AI which will take a couple minutes now I already have an account so after you register you're going to be taken over to the interface for chat GPT which looks like this it's going to give you some examples the capabilities and then limitations but all you need to be concerned with really is the input text bar at the bottom which is where you're going to actually interact with chat GPT I've actually gotten our conversation started for us already so that we can get into the coding a lot quicker and the way that I like to interact with chat gbt in general is to treat it like I'm talking to a person so I do a greeting hi chat gbt and Chachi BT is a model that's trained on the English language so it actually understands English and will greet me back so it's going to say hello I'm an assistant I'm a language model trained by openai I'm here to help you so I'm going to say awesome I'd like to build a website today do you think you could help me with that Chachi routine will of course respond certainly and then it gives me step-by-step instructions to build a website so I figured for this video Let's treat this as if we were a beginner programmer and I don't have experience building a website before so we're given the steps to build a website and the first step is determine the purpose and goal of your website basically what website do we want to build so we need a website idea and I figure this is a great place to see how creative chat GPT can be so I said thanks for those steps do you have any creative or unique website ideas for being inner programmers and just like that we get a list of nine great website ideas for beginner programmers now I don't personally like wasting time building projects that don't have any potential so I noticed that we have a suggestion from chat gbt is a job board for a specific industry and since programming jobs are scarce nowadays and my channel is kind of career centered in a way I think this is a great project we can build a job Board website for programming jobs and who knows maybe this could turn into something so I said thanks for the ideas I'd like to build a job Board website for available programming jobs and just like that chat gbt gives us a list of the steps to build a programming job Board website which is awesome all right great so now that we have our website idea we can go ahead and start coding now for this video I want to stick to the basics so we're just going to be using HTML CSS and JavaScript so I went ahead and made a folder on my desktop called chat gbt site where I also added files for HTML CSS and JavaScript and as you can see see I have all these files open in Visual Studio code so I'm going to tell chat gbt my plan here so it has this information and I'm also going to ask chatgbt to generate some initial HTML for my programming job Board website and just like that I'll be given an HTML code snippet for my website that I can just copy directly from chatgpt so all I'm going to do is click copy code head over to visual studio code paste that in and if we were to open this file up in the browser our website would look like this so it looks like the initial site chat EBT suggests for us is having some kind of keywords and location with a search as well as some featured jobs which honestly doesn't sound too bad as far as a job board user interface would go now of course we want to add some Styles because this doesn't look too great at the moment now thankfully chat EBT can help us out with the CSS problem I'm going to let it know that we're going to be structuring our website so that we have separate files for the HTML CSS and JavaScript so it knows that and I'm asking it to generate some CSS success to go along with the HTML and so here chat gbt actually generates a lot of CSS for us and it also gives us that link for the HTML so we can include and actually hook up our HTML to our CSS so this copy this code snippet head over to the CSS file paste and then let's go over and copy this link tag go back into the HTML go into the head and paste that as well now in this case the example link tag they gave hooked up to style CSS I'm going to do app.css in this case that's just what I'm used to calling this file but if we head over to our file now in the browser and we refresh this is what it looks like now I don't know about you guys but for about 30 seconds of work and a couple of copy and paste this is a lot faster for me than Googling template HTML code and actually coding up some template code and CSS for an initial website I personally do find it kind of impressive that we got this much built that quickly and that easily now let's dive into the details a little bit more so the future jobs are pushed up against the left now if this were an actual programming job Board website we'd want this displayed in the middle I'd imagine so we'll ask chat gbt how we can do that so just like I'm talking to a person I say hey can you help me Center the feature job section and we get provided the super simple line of code pretty easy to center it so we'll copy and paste this we'll paste this right here and then we'll go back to our site and should be centered so now everything gets centered in the middle except for this header that says featured jobs and I think this is an important thing to talk about with chat gbt where I can now go back and explain what's going on and write a prompt to get the code to Center this but since I'm a programmer I have experience with HTML and CSS I already know how to center this right so there could be a time discrepancy as you use chat GPT to help you build software where you might actually want to just use your brain once in a while so in this case let's do it ourselves let's just go into this H2 element and then we'll do 10 text Alliance Center head back over and feature jobs is now centered so now we have a pretty good structure for our site we have a layout where we're going to have our jobs listed with some details like company name location description and apply Now button which would obviously navigate to the application for the job and then we have some filters or searches so we could search by keyword or location however of course the site is not functional and we have no jobs listed so let's change that and now I think this is one of the coolest Parts about chat gbt because over the years I've done dozens of programming projects where I had to come up with mock data now of course you could look online for databases or apis that you could use for free to provide data that fits your schema but in a lot of cases you are probably going to have to come up with some mock data yourself so that you could see what it would look like on your site but chat EBT is awesome because I can ask it to just generate some mock Json data for us so the first thing I'll do is I'll head over to our project directory and I'll create a file called jobs data.json and back Visual Studio code code you can see that file appears now in the same directory as our other files now I asked chatgpt can you generate mock Json data for the featured job section and just like that we get some mock data that fits our schema and I think this also shows that chat EBT has pretty good recollection so it remembers the schema it gave us for our HTML and then it generates mock data for us I'm going to copy this and I'm going to bring it over to our jobs data Json file and paste so now we have this mock data but how do we actually get it displaying in our HTML well what we could do is we could use JavaScript to pull it from the Json file and display it to our site and so I asked chatgpt awesome I'd like to use JavaScript to populate the HTML with this data can you help me and then we get the corresponding JavaScript code so this is our first JavaScript code I could just paste this into app.js and once again there's that time discrepancy I can explain what's going on I need to link up my JavaScript to my HTML but I already know how to do that so let's just go over to index.html and Link it up ourself rather than making a prompt unnecessarily so script Source equals app.js and now our javascript's hooked up now this also showcases another part about chat GPT is that we keep blindly copying these code Snippets but we should actually pay attention to what's going on in the code snippet because we need to make some changes it's assuming that we have a file called featuredjobs.json that's what it's guessing because I didn't actually tell it what our file name is for the Json so we need to replace that with our Json file name which is jobs data so we'll do jobs data dot Json and so since we're diving into the world of JavaScript now I figured let's just accomplish two of our tasks at once so I decided to ask chat gbt hey I want to filter by keyword and location can we add the JavaScript to do that as well so chat gbt then provides us with some updated HTML where our featured jobs will get generated with the filter and the population from Json data so we'll just copy and paste this since instead of all of this stuff we replace it right here and then we have some populating with JavaScript and then here's something else that's important to note about chat gbt is when you get a really long code Summit like for example this is my whole Javascript file it might actually cut off and you actually type continue so that it continues the code snippet and then it will give you the rest of the code so what we do is we copy this snippet and we'll go back over to JavaScript and we'll just replace everything and then we'll go back get the rest of it and finish the code snippet that gets cut off if I can do that right there we go and now if we go to check out our website we refresh and nothing shows up so we open the developer console and we realize there's a course error and so I was surprised by how well chat GPT worked here but I just pasted my error in and it gave me the solution it told me that I need a live server to fix my course error and one of the great things about Visual Studio code is there's a million extensions that do a million things so if you type in Live server the there's this great extension you install and then when you go back to HTML you can see in the bottom right we have a go live button and we can start a little local server now if you don't know what's going on in the code base you might be like well we already centered this stuff what's going on now well the JavaScript is generating HTML with the data from the Json so you actually have to do a little bit more CSS here so as hey can I have the CSS to Center my jobs data so let's copy this head back over copy paste refresh and it's not centered correctly so I said the jobs are listed side by side I'd rather have them vertical so now we get more code let's just replace it and let's refresh and now they're vertical but they're kind of like a staircase which is weird so I said they are not evenly centered some are off center a little bit and then chatty BT gives me a great explanation it tells me exactly why it says it could be due to the height of the elements not being consistent and then it gives me more code to fix it so it's really understanding what's going on every step of the way through building this site which is amazing and then boom We paste that and it's all fixed and the keywords and locations should be filtered properly you can see the search button changed to a filter button so if I type the word software and keywords perfect if I typed a location for example like Los Angeles California it filters there too so we now have what would be like a basic programming job Board website it's running locally so it should be able to be deployed to the web it has some mock data it can be filtered by keyword and location I mean this is kind of what a site would actually look like we're using HTML CSS JavaScript some Json of course we'd add like a database we'd add more to the HTML we'd make the CSS better but as far as a basic website in the time we've done this with chat gpt's help like this is very fast now our job Board website kind of stinks right now there's only three jobs listed so that's not going to help too many people so I decided to ask for more mock data and chat GPT did not disappoint it gave us a ton of mock data so let's copy this and paste it in I had to do continue again because it got cut off we'll just copy the rest of it paste it in should do this correctly and we'll save go back to our website and now we have a lot more jobs listed now our styling is a little bit lackluster here and it's hard to distinguish one job from another it's kind of hard to read this so I asked for some styles to distinguish one job from another and we got a bunch of stuff just for the jobs so let's head back over to our CSS cut this stuff and paste and now let's go back and refresh and this looks a lot better and I'd imagine that our new format persists if we filter and it repopulates with the data so let's try filtering by New York and then we have three jobs wow this is turning into a pretty good website if I do say so myself now I'm no designer but I do think these font Styles maybe should be a little bit different so that we can differentiate the different properties of each job listing so that's exactly what I asked for can we add some font styles to distinguish different properties of each listing from one another we get that exact thing that we wanted then we go back let's refresh and it's looking way better I mean this is great okay so now that we have our functional website with mock data it's looking pretty good I think it's time we throw this up on the web and to do that we're going to head over to hostinger.com which once again is the sponsor this video If you guys go to the description and you click that link and you use code Nick white at checkout you're going to get 10 off your order and when you head over to hostinger.com right now you see there's a amazing sale going on 279 a month plus three months free for premium web hosting for the next three days in addition to that when you use my link and code Nick white at checkout you'll get another 10 off on top of that so they're always doing sales and promotions be on the lookout for those but we'll just log in right now because I've already got premium hosting of course and my absolute favorite part about hostinger is how easy it is to use the user interface is super intuitive and you get things done instantly so you head over to the website section and you can create or migrate a website almost instantaneously it's super fast you create a website create a new website they have a user interface you could use like a website builder you could select WordPress or you could code it from scratch which is what we did now you're going to want to buy a domain and if you sign up for premium web hosting you'll get a domain anyway so I already did all this stuff I don't want to expose my payment information but I got the domain remotelycode.com which I think is an awesome domain so if we go to manage if you want to host your site it's this easy guys you just go to file manager and if I show you right now remotelycode.com is nothing right there's no code there and when you're in file manager you're going to see public HTML directory this is where you're gonna just drag and drop your code it's that easy so all there is is default.php do not delete do not do anything to this file just go where all of your code is so we have HTML CSS JavaScript Json we have all this stuff I'm just going to drag it from my folder on my computer into this public HTML directory next to the PHP and we're good to go it's there it's uploaded and the site is live and just like that when we refresh from rollaco.com we have all of our job listings this of course is going to work if we want to filter just like it was locally I will link this in the description if you guys want to try it out I think it's a fun little project that we just built and uh yeah that is live that took like a minute to host the site so I'm not 100 sure if I'm going to continue to develop this platform out but I think this is a really good Showcase of the advantages and disadvantages of chat gbt while I don't necessarily think chat EBT will be replacing programmers anytime soon I think it's an impressive tool that helps you aggregate data from from a bunch of different places all into one spot rather than being a programmer with 20 different tabs opening your browser trying to aggregate that data yourself it was cool to see how creative chat EBT got when it came to coming up with ideas or suggestions or to generate designs for the website but as far as the drawbacks I did notice the more I use chat gbt the less I kind of knew what was going on in the code base so I definitely think it's a useful tool but you should be paying attention to what's actually going on instead of just copying and pasting all this code but what is nice is that shouldn't be too difficult because chat EBT does include thorough explanations of the code along with those code Snippets all in all as a programmer I think I will be using this in some instances from now on and as this technology advances maybe sometime in the future programmers will eventually just be entering prompts and then copying and pasting different code Snippets anyways I really appreciate you guys for watching this video If you haven't tried Chachi BT yet it's completely free go try it I will link it in the description video so you totally should go try it definitely go check out hostinger I think it's one of the best hosting platforms around if you're gonna get that premium web hosting make sure that you click the link in my description and give that additional 10 off your order and then if you like the video or you learned something please feel free to like And subscribe it really helps out the channel also drop a comment if you want me to continue developing this platform I think it is a good idea and probably useful for the community especially if I could populate it with real jobless things that you guys maybe would be interested in applying to anyways that's it for me until next time see you in the next one

Channel: Nick White

Views: 1,440,268

Keywords: nick white, chatgpt, web development, gpt, coding, programming, code, technology, software engineering, software development, website, How To Build A Website Using ChatGPT, ai, artificial intelligence, openai

Id: ng438SIXyW4

Length: 18min 21sec (1101 seconds)

Published: Wed Jan 04 2023