4 Adding structure to a page

In chapter 3, you learned how to get ChatGPT to help you build a personal home page. One of the big takeaways from that process is that the more specific your prompt, the more the resulting code reflects your requirements, and the closer the resulting page will be to your original page vision.

Two aspects that might have surprised you about the process in chapter 3 were the length of the final prompt and the amount of detail it contained. However, long, detailed prompts are the only way to ensure that ChatGPT generates code that meets your design goals. In this chapter, you supply ChatGPT with a bit more detail by adding a couple of structural elements—the page header and the page footer—that are common to almost all web pages. You also learn how to include a couple of useful content elements: one or more images and one or more social media links. All this information then goes into a detailed prompt that you’ll pass along to ChatGPT to produce the code for a book club page that gives you and other club members a home on the web.

This chapter also provides a high-level explanation of the code generated by ChatGPT. It even provides a few tips for customizing the code manually to get everything just the way you want.

4.1 Understanding this chapter’s project

4.2 Building the book club page

4.2.1 Introducing the page header

4.2.2 Introducing the page footer

4.2.3 Introducing padding, borders, and margins

4.2.4 Working with images

4.2.5 Adding social media links

4.2.6 Crafting the prompt

4.3 Examining the code

4.3.1 Examining the HTML

4.3.2 Examining the CSS

4.4 Customizing the page

Summary