If you are a person who is having a store of let’s say cloth, stationery, watches, or etc., then definitely you want your presence online, and for that, a website would be the best solution for you. At the same time, if you are an individual person or a fresher employee who wants to apply for big companies, those companies will ask you about your portfolio. If you are a student or a common person and want to show or impress others by showing them what you build as a website, now if you are a developer, that seems to be an easy task for you. But what if you don’t know development? This video is for you. In this video, I’m going to show you step by step process to create a website using Chat GBD. So let’s get started with the video.
Here we are on the Chat JBD platform. Now we will create the website using Chat GPD. Also, you can run that particular website either on any online compiler like Programiz Online HTML Editor, or you can simply use a local Visual Studio Code in order to run that particular website. It’s totally dependent on you. So for this video, we will be using Visual Studio Code. Let’s start with the website creation.
We will give a command to Chat JBD in order to build different pages of the website. Now, if you don’t know which pages are included in your website, you can simply ask the same question on Chat GBD. Also, let’s start with that. So, what are the different pages of an e-commerce website? Here we will get all the pages of an e-commerce website: home page, product listing page, product detail page, cart, checkout page, order confirmation page, user account profile page, wish list or favorite service, result, and contact us page.
Now let’s create or develop one of the page designs, an interactive, user-friendly home page of an e-commerce website using HTML, CSS, and JavaScript if needed. Okay, let’s enter it. Here it will give us all the portions needed. So here they mix up the design. Okay, so let’s copy it and create a file here. Let’s suppose I want to create index.html. Paste it. Now here is an important thing. In order to run an HTML file, you need Live Server, and you can download Live Server using Visual Studio Code extension by simply searching ‘Live Server’ in the extensions. You will get the Live Server logo, and you can download it by clicking ‘Install’. Now, let’s run it by simply clicking ‘Go Live’.
Now, here you can see it created a very basic website for us. So here we have some product images. You can simply add a product image here. Let’s take a local image here in order to show and let’s go on to Visual Studio Code. I already added an image, so let’s substitute this particular source by simply adding the image I added. Ctrl + S. Okay, so here you can see my image is already added. Now you can fix it simply by commanding on to Chat GBD. That is ‘hide’. Or you can simply add height or width here. So let’s suppose I want to give a height of 200px and width of 100px. Now you can see how it looks. So just make it more user-friendly by simply changing the width. So here you can see the listing of two products. Now you can simply design more using Chat GBD.
So let’s create different pages like the products page, about us page, and contact us page. So I think the home page and product page is done. Now let’s create the about us page. Go here onto Chat GBD, create an about us page. Let’s save. So here you can see our about us page. Let’s copy and paste it here. Let’s create a new file, that is about.html. Paste the content. Here you can see how we can navigate from home to this about page. So for that also, we are going to use Chat GBD. Write a listener for redirecting to the about us page from the header. A is for anchor tag in JavaScript. So here, when the user clicks on about us, it should redirect us to the about us page. So simply copy this particular script and paste it onto HTML here. And simply, you need this particular ID, that is ‘about-link’. Now let’s save it, go to the website, and just click on about us. Great! So here you can see how we redirected to our about us page.
Now, let’s change the redirection again to the home page. So in that way, you created a home page for your website, also the about us page for your website. Now, I don’t think that the home page looks quite good. Let’s suppose you are not happy with what Chat GBD gives us as a result. You want to add more design to this particular home page. So let’s go on to Chat GBD and generate another home page by simply writing a different kind of prompt. I already wrote a prompt, so let’s read it. ‘You are a talented web designer creating an interactive homepage for an e-commerce website. The website is a Fashion retail brand named Fashion Hub. Let’s apply the brand’s wants: a modern and stylish design to showcase their latest collection and provide a user-friendly experience. The homepage should include a visually appealing banner, featured product section, and easy navigation. Let’s keep in mind the responsive design of various devices. Generate the HTML, CSS, and JavaScript for the home page.’ So let’s submit it and let’s see how it generates.
Now, here you can see there are different things given here. So let’s copy it and paste it here. Let’s suppose it’s our home.html. Let’s paste it here. Save. And you can also include the design. So go back and create a new file, style.css. Paste it. Ctrl + S. Now, coming to the website, it looks quite weird. So let’s copy the CSS container product and paste it onto the style.css file. Ctrl + S. Now, coming to the website, it looks quite better than our previous pages.
So you can simply use this particular prompt. I will provide you this prompt in my description so you can copy and simply paste it onto your Chat GBD and modify the words. You can make a website and, in a similar way, you can create all the different pages by simply repeating this particular prompt and changing the requirements. Like if you want a home page or an about us page, a login page for users, and so on. I hope you found this particular video informative. If so, then you can also watch one of my videos on mastering Chat GBD on the channel. That will help you learn how you can use Chat GBD more effectively by simply creating different groups on Chat GBD or simply continuing on a single particular group, which we did in this video. In the similar way, you can create all the pages of your website. You can simply modify the design by simply searching on the internet, or you can simply generate that particular design using Chat GBD as well. If you do that, it might result in a big video, but I’m quite sure that you can find everything you need to develop or design your website using Chat GBD. You will find every solution on Chat GBD related to what you need. In the Chat GBD Remembering feature, people are going to remember your code, and it will generate the result. Now, coming to the pro tip, you can simply generate this website and deploy your website onto the internet so that other users can see and use your website. Now, for that, lots of paid services are available, but you can use Netlify, which will help you deploy your website for free. In the next video, I’m going to do the same. I’m going to deploy this demo website onto Netlify in order to generate a domain for this particular website, which we can share with others to use this website. And that’s quite fun. Let’s learn that in the next video as well. If you found this video informative, please like this video and subscribe to my channel for more such informative videos. Thank you very much for watching. Relax.
