How I Built a Complete Website Using ChatGPT | Make Website Easily With AI

hi guys welcome back to another video today in this video we will ask the chat GPT to create a complete landing page website in HTML and CSS so let's come to the chat GPT website and here I will type create a complete landing page for a startup company using HTML so it will start writing the HTML code for our website you can see it is writing the HTML code for our website so this is the HTML code for our website now we will ask please write this ESS and now you can see it is writing the CSS code for our website if it is incomplete we can write continue the code so it will write the remaining CSS code so now we got the HTML and CSS code for our website now we have to view this website so just copy this one and come back here in this folder I have another folder with some images and let's open this folder with the code editor which is Visual Studio code here we will create a new file click on this icon and write the file name index.html so in this one we have to paste the HTML code that the chat GPT has written for us let's paste that HTML code here it is in this link tag you can see the file name style.css so we have to create this file so again click on this icon and create a new file a style.css and here we will paste this CSS code written by the chat jpt so come back to the chat jpt website and click here to copy the CSS code and paste it here it is incomplete so let's come back and copy the remaining CSS click here to copy and paste it here in our code file so after adding this we can preview our website come to the HTML file and open this file with the browser so let's open this and you can see this dark color in the full screen we have the menu title and button then we have the About Us section our services our team and contact Section where you can see the contact form and copyright message next we have to change the design of this website to make it professional so again come back to the chat GPT and here we will search please add logo so it will write the code to add the logo you can see here we got the IMG tag just copy this line IMG SRC logo.png this line just copy it and add it in our code file inside the snap tag and here we have to replace the file path so remove this file name and here we will add our folder name images and in this one I have the file name called logo.png after that come back to the website and you can see One logo here and after that we have the menu again we have to add the background image so here in chat GPT we will ask please add the background image in header so here we got the CSS code to add the background image just copy this three line because we already have the other CSS properties so just copy this three line of CSS properties come to the CSS file and here replace this background color so here we have added background image background size and background position we have to replace the file path of the image so again we will add the folder name Images slash file name image1.png after adding this again come back to the website and here you can see the background image on the website now we have to change the position of this menu so let's come back and in this snap we will add position absolute top 0 and width hundred percent we are adding some extra CSS so it will look professional now you can see this menu on the top next we have to move it in the left and right side so here we will add justify content space between and let's add the Align items Center and you can see the logo in the left side and menu links in the right side now we need a space in the left and right side so let's come back and in this nav only we will add some padding so let's add the padding of 20 pixel from top and bottom and seven percent from left and right now you can see this web page is scrolling horizontally to fix this one let's come back and at the top in the CSS file we will add star that will select all the HTML element here we will add this margin padding and box sizing border box we will change the font family also now you can see we have a space in the left side of this logo and in the right side of the menu links now just come back and after the snap we will add nav IMG to change the width of the logo here we will add the height 40 pixel so it will change the width also so you can see the perfect size for the logo next we will change the font size of these menu links so here we will add font size 1.2 REM we will reduce the font size now we will change the text so let's come back and here we have the text in H1 update this text and we will update this description also and here we will add the BR to change the line line break you can see the text has been updated now we will add the CSS to update the font size and space so let's come back and here we have the CSS for the header H1 in this one we will increase the size of the text so we will add 85 pixel and in this one we will add space from the top so margin top 150. now here we will add the font weight after that we will update the margin top 180 and here we have the description in P tag so here we will add the font size 20 pixel and it is looking good next we will change the size of the buttons here we will change the padding after that you can see the button size is good next we will change the radius so here we will add border radius 60 pixels so the left and right sides are round after that we have the about section and services this Services section is not good so we will ask the chat GPT add three services with images so it will write the HTML and CSS code for the services section with images it is writing the HTML code first and now it is writing the CSS code next we will update this HTML and CSS code in our code file just copy this HTML code and come to the HTML file and here we have the services the previous services replace this with the new Services HTML code like this and now we will copy the CSS code for the surfaces and add it here in this CSS file at the bottom after adding this again preview the website and you can see we have Services one two three and the image is not visible we will replace the image file path so let's come back and here we have the about so let's move this about below this services so first we have Services then about and in this Services we will update the image it is Images slash pick one dot PNG then Images slash pick2 dot PNG and Images slash Pick 3 dot PNG for all three services you can see different images in the services image we will add the Border radius and width now the image size is perfect and the image is circular now just come back and here we'll add text align Center so this text is aligned in the center now we will come back and here we will add padding and after that you can see all three images are aligned horizontally now we will update the text it is social media marketing then influencer marketing and the third service is brand awareness we will update the description also let's add the same description in all three it will update the about text also after that these services are looking good we have to increase the size of the image so let's come back and here we will add width 250 pixel then we will add margin bottom three RDM next we will change the spacing so here we will add padding 1 REM 0 and here also we'll update 5. let me change this one also one RDM and now we have very less space in the service title and description so title is written in the H3 tag so here we will add dot services and H3 let's add the margin bottom it will be 1 rgm so you can see a space between the service title and service description next we have the about us so in this about us we will add one image so let's add the IMG tag and write the file path of the image it is Images slash image2.png and width hundred percent you can see this width in the About Us section next we have to add some spacing so let's copy this about and here we have the CSS file in this one we'll add hashtag about and padding it will be 80 pixel and 12 percent the width is a small so let's come back and we will make it 20 pixel so we have lesser space on the top and let me change it 50 pixel and we will increase the width so instead of 12 we will add 10. now we will add the space between the text and image so here we will add about IMG and it will be margin top 50 pixel let me increase the width of this section so here we will add 8 percent now this Avatar section is also complete let's come back and here we have the team let's remove it I don't want to add this theme section and after that we have the contact and you can see the get in touch and form now just come back and here we will add one description in P tag so in this contact Section you can see title and description and form next come back to the CSS file and for this contact we will add some space so here also we will add the padding of 50 pixel and seven percent now for this text we will add the line height so let's add the line height of 30 pixel it is looking good let me add the line height in the about also so just copy this one and paste it here in this about so here also we have space between these text after that we have to add the CSS for the contact title so where we will add contact S2 margin bottom and we have the form here with the form tag so we have to change the width of this form so already we have the CSS here section form in this one we have to update the maximum width it will be 600 pixels and we will change the margin top now we have to move it in the center so here we will add margin left and margin write Auto so it is in the center next we have to add the background color in these input field so here we have the CSS for the input fields in this one we will add the background and one color code next we will remove these borders so here we will add border none and outline none let me reduce the font size and now we will increase the height of these input field to increase the height here we will add the padding it will be 1 REM so it is good next we will add the CSS for this button and here we have the CSS for the button so in this one we will update the width it will be 100 so it is full width next we will increase the height so here we will add the padding 1 RDM next we will remove this hover effect and we will change the background color next we will make the corners round from the left side and right side so here we will add the Border radius of 40 pixel so this button is looking good so after this contact form we have this copyright section so in this one we will add this background color code and we will change the font size also and after that you can see this complete website is looking beautiful after adding some CSS properties and if I click on any menu link it is the scrolling to the particular section but it is scrolling very quickly let's come to the HTML file and here we have the team remove this team and we will add one more link which is home and href top to make the scrolling smooth in this CSS we will add HTML scroll Behavior smooth that's it and if I click on about it is scrolling the website to the about section smoothly and if I click on Services it is going to the services section if I click on the contact it is the scrolling the website to the contact Section so this is how chat GPT helped us to create our website and we have added few CSS properties to make it more professional so this is how you can use the chat CPT to create your own website I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 151,406

Keywords: ChatGPT, website design using ChatGPT, make website using ChatGPT, create website using ChatGPT, web development using chatGPT, ChatGPT tutorials, complete website design, AI website, AI website design, chatGPT coding, AI technologies

Id: zEngh-u4CX0

Length: 17min 45sec (1065 seconds)

Published: Mon Mar 06 2023