Using ChatGPT to build a Website with No Code

in this video I want to explore using chatgpt to build out an entire website without writing a single line of code we're going to combine it with editor X and I'm going to build an accounting website chat GPT is going to help me fill out the content plan out the website and then implement it all let's have a look how this is possible I'm going to start on Google and I'm going to head over to the open AI website here we're going to log into chat GPT which you can select at the very top I already have an account so I'm going to log in using my Google credentials and it's going to take me straight into chat GPT here I'm going to write a proct that'll basically create a website for me so I want to here have let's see can you please create the outline of a website for an accounting firm called downs accounting great so this is a cool little website a Downs accounting home page so we've got a bit of information here we've got a introduction highlights contact information as well as a call to action we're also going to have a service page detailed with descriptions of what they do we've got some information pricing will have an about us page with biographies a history of the firm testimonials again we'll have a news and resource section with articles and blog posts also do links to external resources information for upcoming events and finally a contact us page where we can fill out some forms for visitors as well as map and directions so this is a pretty good outline for a website already we're going to start off with this home page so let's now see if we can expand on this and let's see here if we can do right uh planning out of the home page write a I suppose hero title uh tagline uh then then move on to the call to action with three main items oh actually no uh let's actually put in with a strong call to action button yeah I think that should do all right let's select to enter for that so here is a possible hero title tagline and call to action so we've got a Title Here expert guidance to financial success tagline trusted advisors for your accounting needs and chat GPT has also said the call to action can be contact us today so that's pretty good enough for me to already get started so now let's jump into a no coding tool this one will be editor X and let's start recreating this website and see what that looks like all right so I'm gonna head over to editorix.com uh just like before I'm going to log in and create a new website so I've already logged in using my Google well login once again I'm going to select here create a new site now I've got the two options here between editor X and Wix this being also something that Wix has created I'm going to select editor X in this case and then I'm going to maybe have a look if there are any accounting style websites or templates that I could possibly use here as part of this if they're on I just might make it myself but this one here for Fitness one maybe might work hmm I'm not too sold on it just yet so what I'm thinking is maybe I'll just create my own I'm going to select it to start with a blank canvas now for this I might use some of the pre-made assets that come as part of editorix but let's have a look here's our page ready to go it's currently quite empty so the first thing I'm going to do is Select to add and I might just pull in a composition here's a good one which has a bit of text an image as well as a button and I'm going to start customizing it now right now these images don't really look like they have to do with accounting so I'm just going to go Accounting in here for the image changer and I'm going to select something that I can probably use in these areas as well as a maybe better background image of I suppose I don't know some paperwork that should do I guess now we can start utilizing well the prompts that we've got here from chat GPT so I'm going to copy over this hero title and I'm going to paste it into here I'm gonna grab this tagline over here and I'll also going to paste this into the tagline section and finally I'm going to grab the call to action which I'm going to place here in for the button now for the button it's still a little bit small I suppose I'm just going to expand it out to utilize the full size here and immediately we've got something of a design I think I can probably make this image look a little bit better by maybe saying setting the opacity to say 10 that way it Blends in a little bit better with the content here and for this image right now the perspective isn't that great so I could for example go into the settings here I could I suppose do something that goes keep the aspect ratio or even fit to the bound of the box so I think that would work a little bit better because right now here I don't really like stretched images I think it's stretched is it just me I'm not too sure fit a fill bounding of the Box yeah I think that's fine let's actually expand this out here yeah that's that's fine so now we've got our hero section done let's actually check what this looks like on different viewports I can shrink this down and it works just fine I can shrink it down here to almost a mobile version the only thing that's not working perfectly is this button I think for this one here there is a little option where I can do docking and I'm just going to dock it from the left and right hand side I think that should fix its mobile responsiveness yes that's fixed it and already we have a hero section done with gbt basically assisting us so we don't have some filler text we actually have something useful that we could have for an accounting company here now previously we're gonna have a number of pages here we're gonna have Home Services about news and contact so let's actually create those pages which should be as easy as going here over to pages and creating them I'm going to select to add a page this can be contact us let's add another one and I think if we go through here let's do news as another page so I'm going to select to rename that one then another one in chap GTP we had about us so let's create that page two there we go then we'll have another page here called services so let's actually pull that in and add that in too now all of these pages are currently empty and the menu items don't even show them so I'm going to add them here into the menu so let's add site page let's add all the pages and let's close that off and then we can actually head back over to our home page here and we can see that this menu stays relevant for all our pages but at the actual active item changes based on the page you're on so that's pretty cool now let's fill out maybe some small Services as part of the home page to fill that content out a bit more I'm going to select to add here I'm going to head over to some Services examples we've got a few different types of templates already to go for us and what I'm thinking is maybe just this one over here which C seems to fit in with the design so if we've got our services and then it's got three different services so let's actually ask chat GPT to fill that out for us here I'm going to put in create home page section content for a services section have an intro to what services are and then three main services with a title and description for each all right I think that sort of describes what I'm after so here it says here's a possible section on the services on the home page of downs accounting we've got the introduction to the services that's pretty cool then the services themselves so we've got tax preparation so chat GPT has written out an example of that as well as Financial Planning and whatnot so I'll keep it running here in the background and I'm going to even start filling this out I'm going to paste this in then we're gonna jump in here so we've got our services Downs accounting we offer comprehensive range of services so that's already filled it out it's even got a call to action and then we've got these three services in here so for the very first one I think it was tax preparation let me copy that in this section over here uh then I'm going to copy over this text let's push that in here now we can see that we're getting some sort of weird text happening so what I'm going to do is I'm just going to undo because I think I'm copying over the bullet points I'm just going to paste this into a plane section so that the styling doesn't copy across as I'm just pasting it here into the nav bar and then I'll paste that in so that looks like it came across quite well let's grab this second one which is financial planning I'm gonna copy paste that one in here and copy paste that in as well uh and the final one here what was that auditing all right that's an interesting one but I guess that's what accounting companies do I'll paste that in here as the last item and it's even got a final bit of text here uh and this final bit of text I guess I could copy this part of the section uh we could do a I suppose a three by one section maybe uh let's do other let's do three rows apply and I might just copy this one stack that we have as part of this section and paste it in here and then maybe what we offer and we can copy this last bit here by choosing down accountings we've got like a nice final bit to the services so that's really cool the only other part here is I guess we could use better images so again I can go to change image I can go to accounting and I can pick three accounting images for this Services section now I've done this in just like five to ten minutes not even that let's actually have a look at that it does make sense and I'm going to select to publish this I'm going to call this Downs accounting and I think that should work so you could even have a look at this website right now yourself before I move forward I also want to make sure that the mobile responsiveness for this new Services section is working so let me see if I can shrink it down to say a tablet size and that looks perfectly fine and even down all the way to a mobile version looks good and this is the strength of combining now tools like open AI with cha gbt with things like editor X basically allowing you to create websites in 10 minutes 5 minutes now there are quite a few different things that you can do with chatgpt in terms of building websites not just helping with the content but even helping improve the content you might already have so for example we've got this title here for expert guidance for your financial success this title is actually quite large for this section of the website I might want a shorter title I'm going to jump back into chat GPT here and I'm going to say reduce the link of this title let's make sure we spell length properly to fit into a smaller website design and there's the title now let's see how chatgpt handles that it's possible to have a shorter version expert guidance for success that's a shorter version I think that makes sense let's actually copy paste that in and see how that fits in so that's now three lines and I think that works better and then I'm going to do the same here for the contact button which is a little bit too long do the same for this text on a button which is too long and let's see if chat gbt just does that for us I guess a shorter version would just be contact us uh it says here contact us can be shortened to uh well it's removed the word day I suppose um let's actually copy that in I guess that could be better it's not as short as I would have liked but I guess at least it provides more context there so that's an example of how we can do I suppose shortening of content but we can do the reverse as well such as in this tagline here we could say increase the length of this tagline and I suppose yeah I think that should be enough let's see what chat GPT does so it says one possible longer version of trusted advisors is well that's a much longer version but uh I think it's too long trusted advisors uh uh yeah uh please make it at least two sentences all right let's try again so with chat GPT we can continuously see if we can improve the content it provides so here I haven't given enough context so I'm going to actually copy this text in I say I can say this sentence here can you please lengthen this to at least two sentences all right let's see what it comes back with so sure here is a longer version of this tagline and then add downskin accounting were dedicated to providing expert guidance as trust advisors wow that is much longer let's see how it fits into this website I'm gonna paste it in here and now I think it's almost too long but here we could for example just remove the last part now it's three lines long I think that looks much better it fits in much nicer with this design and this now is a pretty good call to action title and tagline we could do the same here for services as well as even creating entire Pages for the services based on the outputs that chat GPT are providing for us now a lot of this is just the beginning obviously chat GPT could be used to write entire blogs and articles and sections for websites but this should be enough of an idea for you guys to start playing around with it yourself if you guys want the link to chat gbt it's entirely free and I'll add it in the link in the description if you want to check out editor X I'll add that in as well otherwise make sure you guys hit like subscribe and I'll see you in the next one thank you

Channel: Codex Community

Views: 298,481

Keywords: chatgpt, chat gpt, chatgpt website, website chatgpt, nocode, editorx, editor x, no code, chatgpt to make website, chatgpt website tutorial, build website with chatgpt, editor x chatgpt, website no code, website nocode, nocode website, no code website, chatgpt no code, chatgpt nocode

Id: b_3qa0uYVb8

Length: 15min 51sec (951 seconds)

Published: Mon Dec 12 2022