ChatGPT tutorial, easy to create a website with ChatGPT!

A professional and attractive website is crucial for showcasing products, building brand image, and interacting with potential customers. So, how can a product manager efficiently create a website? The author of this article shared a tutorial on using ChatGPT's code generation function to build a website. Let's take a look together.
In today's fiercely competitive market, product managers need to keep up with trends and master the most advanced tools and skills to better drive product success. A professional and attractive website is crucial for showcasing products, establishing brand image, and interacting with potential customers.
However, in the midst of busy daily work, how can a product manager quickly and efficiently create a website?
don't worry! ChatGPT is exactly the answer you need. As a revolutionary artificial intelligence tool, ChatGPT can help you easily build a professional website in a short period of time, allowing you to showcase your skills in driving product development.
In this article, we will guide you step by step on how to fully utilize ChatGPT's powerful code generation capabilities to create an impressive website for your product.
1、 Website effects created using ChatGPT
Before understanding how to use ChatGPT to create a website, let's take a look at the website effect created using ChatGPT. The following image shows the page you just opened the website to see.
Scroll down the page to see a brief introduction to the website and the three services available.
Continuing to scroll down is a form for users to submit personal information, with links to social media platforms and copyright notices attached in the bottom area of the page.
2、 Tools used to create websites using ChatGPT
The author uses a mind map to present the four types of tools needed to create a website based on ChatGPT:
Code generation tool
Website development tools
Code hosting platform
Website Deployment Tool
There are many options for website development and website deployment tools, and you can choose any tool according to your preferences. Here, the website development tool chosen by the author is VS Code, and the website deployment tool is Vercel.
*Tools required for creating websites using ChatGPT - Made by online mind map boardmix Bosi whiteboard
3、 Website Development Tool VS Code
Visual Studio Code (VS Code) is a free, open-source code editor developed and maintained by Microsoft. VS Code is suitable for Windows, macOS, and Linux operating systems and supports multiple programming and markup languages. It is very popular in the global developer community because it provides a series of efficient functions and features, making programming and code editing easier.
1. Install the VS Code plugin Live Server
In order to preview the effect of the code in real-time in the browser, we also need to install a plugin called Live Server in VS Code.
Live Server is a very popular Visual Studio Code (VS Code) plugin that provides a real-time local development server for your front-end projects. With Live Server, you can automatically refresh the browser when saving files, view the effect of code changes in real time, and greatly improve the efficiency of front-end development.
To install the Live Server plugin in VS Code:
Click on the fifth button "Extensions" in the left menu bar of VS Code, open the plugins panel, enter Live Server in the search box, and then find it in the search results.
Click on the Live Server plugin and the plugin details page will open on the right. Click on the Install button to install the Live Server plugin. After installation is completed, reload the Visual Studio Code.
4、 Create a web page file
After reloading VS Code, click on the File menu in the upper left corner of VS Code and select New File.
In the pop-up panel, enter index. html and press Enter to create an HTML web page file.
5、 The basic composition and structure of a webpage
Before creating a website, we must admit that no matter how complex a website is, it is composed of individual web pages. Therefore, in order to better use ChatGPT to create a website in the future, we can first understand the basic composition structure of a webpage?
A basic web page structure typically includes the following parts:
Document Type Declaration (DOCTYPE): The DOCTYPE declaration is located at the top of an HTML document and is used to tell the browser which HTML version the current document is using, such as indicating that the document is using HTML5.
HTML tags: HTML tags are the root elements of the entire webpage, containing all the content of the document. In HTML5, the language can also be specified for web pages through the lang attribute, such as.
Head tag: the head tag is located in the html tag and contains metadata about the document, such as document title, character encoding, style sheet links, and script files. The content within the head tag will not be directly displayed in the browser.
Body tag: The body tag is located within an HTML tag and contains all visible content of the webpage, such as text, images, links, forms, lists, etc.
Semantic tags: Contains header, nav, main, aside, and footer tags, which are semantic tags introduced in HTML5 to describe different areas of a webpage, such as header, navigation, main content, sidebar, and footer. They can help improve the readability and accessibility of web pages.
*The Basic Structure of a Web Page - Made by Online Mind Map Boardmix Bosi Whiteboard
6、 Generating website code using ChatGPT
After understanding the basic structure of a webpage, we can use ChatGPT to generate webpage code.
Step 1: Generate a complete landing page for a startup website using HTML
English prompt: Create a complete landing page for a start up company using HTML
After entering this command, ChatGPT will generate the basic framework of the entire webpage.
After ChatGPT outputs all the code, click the Copy code button in the upper right corner of the code to copy the code generated by ChatGPT to the clipboard.
Switch to VS Code, paste the copied code into the previously created HTML file, and use the shortcut keys Ctrl+S (Apple Computer Shortcut Ctrl+S) to save the changes.
Next, right-click the mouse and select Open with Live Server. The plugin will launch a service locally and open the HTML file in the browser to see the rendered web page effect.
Here, the Live Server plugin is used to preview the webpage effect, and there is an additional benefit. Whenever we modify the HTML file in VS Code and press the save shortcut key, the webpage opened in the browser will also be updated in real-time, ensuring that the webpage we see is always in the latest state.
At the end of the generated webpage framework, ChatGPT provides us with suggestions on content and style. The webpage content can add content such as features, comments (user reviews), team members, contact forms, etc. The style suggests that we use responsive CSS frameworks - Bootstrap or Tailwind CSS to ensure that the website has a good experience on different devices.
Step 2: Use Tailwind CSS to style web pages
English prompt: Write css with Tailwind
Choose Tailwind CSS to set the style of the webpage, and ChatGPT will modify the previously generated code:
Add a link tag to the head tag and introduce Tailwind in the form of CDN
By adding class names to the body and embedded tags, the corresponding styles can be applied
Step 3: Add a logo to the website
English prompt: Please add logo
After issuing a request to add a logo, ChatGPT will add an img tag to the header tag, which means inserting a logo image into the webpage. The src attribute value of the img tag defaults to logo. png, which needs to be replaced with the website logo we want to use.
We can create an images folder in the same level as the index. html file to store various images used in web pages. The logo file shown in the figure below is a logo icon downloaded by the author from iconfont.
After downloading the logo image from the internet into the images folder and renaming it according to its purpose, return to VS Code and change the default value of the src attribute to images/logo. png. After saving, switch to the browser and you will see the logo icon we just added on the webpage.
After adding a logo icon to the header tag of the webpage, the logo icon defaults to being centered at the top. If we want the logo icon to be centered horizontally and vertically, we need to adjust the style of the logo icon again.
Step 4: Place the logo icon in the middle of the header area
English prompt: Please keep the logo in the center of header
When laying out web page elements, a change in the position of one element may affect the normal display of other elements. In this case, when we place the logo icon in the middle of the header area, it will cause another problem: the text content that was originally displayed in the center of the header area will be "squeezed" to the right of the page. Therefore, it is necessary to adjust the code here.
Step 5: The text in the header area has been squeezed to the right of the page. Could you please place the logo image and text in the middle of the header area at the same time
English prompt: but the text Startup Company was pushed to the right of page, how to keep the logo and the text in the center of header at the same time
Every time the code is modified, ChatGPT will attach a brief explanation at the end of the updated code, allowing us to have a rough understanding of the operations performed before and after the code update.
The logo used by the author in the webpage is a pure black graphic. If you want to change it to white, you can also request ChatGPT.
Step 6: The color of the logo icon is black. Could you please turn it into white
English prompt: the color of the logo is black, turn it to white
Given that ChatGPT generated too little web framework and content for the first time, we can combine the suggestions given by ChatGPT in terms of content to add appropriate content to the page and make it more rich.
Step 7: The page content is too thin. Please add sections for contacting us, footer, and copyright statement
English prompt: The content of the page is too thin, please add contact us, footer, copyright area
There is also a noteworthy point here that when ChatGPT generates a lot of code, it will automatically stop in the middle. At this point, you need to enter "continue" or "continue code" in the dialog box to continue outputting the unfinished code.
After previewing the content of the "Contact Us" section generated by ChatGPT in the browser, the author found that this section is only plain text, not a form for users to submit information. Therefore, further requirements need to be put forward for ChatGPT.
Step 8: I would like to change the content of the contact us section to a form. Please update the code for this section
English prompt: I want to turn the contact us to a form, please update this part code
On the basis of adding contact us, footer, and copyright statement content earlier, we can continue to enrich the content of the webpage, such as adding services that the website can provide.
Step 9: Add 3 services to the website, each with images
English prompt: add 3 services with images
At this point, we have completed the production of a webpage. If you want to further improve it, you can consider the following actions:
Add a navigation bar area at the top of the page
Add a background image to the header area
Adjust the font size or thickness of the text content in the header area
……
7、 Upload web pages and images to GitHub
After writing a webpage, we can try to upload the webpage and images to the hosting platform GitHub, and then combine with the subsequent deployment operations to publish the webpage that can only be opened locally as an accessible webpage for everyone.
To upload web pages and images to GitHub, follow the following steps:
Create a GitHub account (if not already available) and visit