chapter twelve

12 Building an article page

 

This chapter covers

  • The structure of an article page
  • Laying out the page using CSS Grid
  • Making the article look good on smartphone screens
  • Crafting a ChatGPT prompt for building an article page
  • Examining and customizing the ChatGPT-generated code

There are as many reasons to set up a web page as there are people who want to establish some kind of web presence. However, most of these reasons can be gathered under two broad umbrellas: self-expression and information sharing. So far in this book, you’ve worked with several projects related to self-expression: the personal home page (Chapter 3); the online journal (Chapter 5); the photo gallery (Chapter 10); and the portfolio page (Chapter 11). You’ve also worked with several projects related to information sharing: the book club page (Chapter 4); the information website (Chapter 6); the interest or hobby website (Chapter 7); the event sign-up page (Chapter 8); and the recipe page (Chapter 9).

12.1 Getting to know this chapter’s project

12.2 Building the article page

12.2.1 Reviewing the HTML page layout elements

12.2.2 Working with the article element

12.2.3 Including a sidebar in your page

12.2.4 Adding new sections to the article

12.2.5 Adding new paragraphs to the article, section, or aside

12.2.6 Marking up special words and phrases

12.2.7 Starting the article with a drop cap

12.2.8 Laying out the article with CSS Grid

12.2.9 Adjusting the article page layout for small screens

12.2.10 Crafting the prompt for the article page

12.3 Adding content to the page

12.4 Examining the article page code

12.4.1 Examining the HTML

12.4.2 Examining the CSS

12.5 Customizing the article page

12.6 Where to go from here

12.7 Summary