CHAPTER 7
Building Your First Website Using ChatGPT
Getting Started with ChatGPT In this chapter, we'll guide you through the process of building your first website using HTML and CSS while leveraging ChatGPT to assist you at every step. We'll start with a simple "Hello, World!" webpage and gradually enhance it with the power of ChatGPT.
Step 1: Creating the HTML Skeleton
Begin by creating the HTML structure for your webpage:
HTML Prompt:
1. Ask ChatGPT to generate a basic HTML structure: plaintext
Generate a basic HTML structure for a webpage.
ChatGPT will provide you with the essential HTML code for your webpage:
html
<!DOCTYPE html><html><head><title>My First Website</title></head><body><!-- Your content goes here --></body></html>Step 2: Adding Content
Now, let's add the "Hello, World!" text to your webpage:
HTML Prompt:
1. Request ChatGPT to insert a "Hello, World!" heading inside the <body> tags: plaintext
Please add a heading that says "Hello, World!" to my webpage.
ChatGPT will generate the HTML code for your header:
html
<h1>Hello, World!</h1>TIP: sometimes ChatGPT will just spit out a line of code when you want the whole revised code. I use the prompt “Provide the complete revised version of the HTML code so that I can easily copy and paste it to save time.”
Step 3: Styling with CSS
To style your webpage, let's create a CSS file and link it to your HTML document. Begin by generating the CSS link:
HTML Prompt:
1. Ask ChatGPT to create a CSS link in your HTML document: plaintext
Generate a CSS link in my HTML document to style the webpage.
ChatGPT will provide you with the code to link your CSS file:
html
<link rel="stylesheet" type="text/css" href="style.css">Next, let's create the CSS rules to style your "Hello, World!" heading:
CSS Prompt:
1. Instruct ChatGPT to style the heading to be centered, bold, with a larger font size, and set against a black background: plaintext
Style the "Hello, World!" heading to be centered, bold, with a larger font size, and set against a black background.
ChatGPT will generate the CSS code for your styling:
css
body {background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}h1 {
font-size: 2rem;
font-weight: bold;
color: white;
}1.
Step 4: Turning "Hello" into a Link
Now, let's make the "Hello, World!" text a link to your Twitter profile or website. Describe your intention to ChatGPT:
Text Prompt:
1. Specify that you want to replace "Hello, World!" with a link to your Twitter profile: plaintext
Replace "Hello, World!" with a link to my Twitter profile.
ChatGPT will generate the HTML code for the link:
html
<a href="https://twitter.com/your_username">Visit my Twitter
profile</a>1. Modify the link's href attribute to point to your Twitter profile or website.
Step 5: Adding an Image
To create a landing page, let's add an image centered on top of the text. Instruct ChatGPT:
Text Prompt:
1. Request ChatGPT to add an image to your webpage, centered on top of the text: plaintext
Add an image to my webpage. It should be centered on top of the "Hello, World!" text.
Oops!? We updated that, remember?
<a href="https://twitter.com/your_username">Visit my Twitter
profile</a>Because ChatGPT is just an LLM that predicts the next word of a conversation it is easily confused by user prompts. So make sure you don’t make mistakes like this or you might have to start a new chat.
ChatGPT will generate the HTML code for the image:
html
<div class="container"><img src="your_image_url.jpg" alt="Your Image Description"><h1><a href="https://twitter.com/your_username">Visit my Twitter
profile</a></h1></div>1. Replace "your_image_url.jpg" with the URL of your desired image and customize the alt text accordingly.
Congrats!
Congratulations! If you completed all of the steps and ran them locally or on your IDE then you've successfully built your first webpage using HTML and CSS, while ChatGPT helped you generate code snippets for various elements. This chapter demonstrated how ChatGPT can be a valuable tool in web development, assisting you in creating websites from scratch with ease and creativity. If you got stuck or just need a little more help, feel free to join our webinars where you can see us go over this and much more as we program with ChatGPT in real-time with students.