9 Adding lists to your pages

 

This chapter covers

  • Prompting ChatGPT to build a bulleted list
  • Asking ChatGPT to generate a numbered list
  • Customizing your lists
  • Crafting a ChatGPT prompt for building a recipe page
  • Examining and customizing the ChatGPT-generated code

“Content is king” is an old (and, alas, sexist) adage from the early days of the web. It meant that what was most important on every web page was the content it contained. In other words, if you published great content, the world would beat a path to your website door.

That may have been true in the 1990s when people didn’t expect much from each web page they visited. Nowadays, however, having great content doesn’t amount to anything if you present that content poorly. If you’ve gone through any of the web projects in the previous chapters, you may have been surprised (but hopefully not dismayed) by how specific all my ChatGPT prompts have been. That level of detail is needed because otherwise, ChatGPT will generate code for pages that are decidedly unattractive: dull, cramped, and poorly laid out. Yes, you have awesome content you want to share, but to prevent visitors from leaving seconds after they arrive, you need to present that content engagingly.

9.1 Checking out this chapter’s project

9.2 Building a bulleted list

9.2.1 Handling longer list items

9.2.2 Nesting bulleted lists

9.2.3 Changing the bullet type

9.3 Building a numbered list

9.3.1 Reversing the list order

9.3.2 Changing the list’s starting number

9.3.3 Nesting numbered lists

9.3.4 Changing the numbering style

9.4 Crafting the prompt for the recipe page

9.5 Examining the recipe page code

9.5.1 Examining the HTML

9.5.2 Examining the CSS

9.6 Customizing the recipe page

Summary