10 Setting up a photo gallery

 

This chapter covers

  • Using images on a web page
  • Working with thumbnail versions of images
  • Displaying images in a lightbox
  • Laying out a page using Flexbox
  • Crafting a ChatGPT prompt for building a photo gallery page
  • Examining and customizing the ChatGPT-generated code

After you learned a few image basics in chapter 4, the projects in this book have mostly included a single image: a site logo in the page header. That’s a great start, but you no doubt know from your own online gadabouts that images are everywhere on the web. A well-placed and well-chosen photo or artwork can really perk up a page and offer some welcome eye candy for text-weary visitors.

In this chapter, you learn a bit more about images and how they work on the web, which will enable you to incorporate additional images on your pages. Go big or go home, as the saying goes—so this chapter goes big with images by showing you not only how to build a working photo gallery that you can use to show off your photographic skills but also how to use a modern layout technique to make your page look awesome. You then put all this image and layout list know-how to work to create a detailed prompt for ChatGPT to generate the code for the photo gallery.

This chapter also provides annotated versions of the ChatGPT-generated HTML and CSS to help you understand how the photo gallery works. You also get a few useful tips for customizing the code.

10.1 Checking out this chapter’s project

10.2 A closer look at images

10.2.1 Checking out the <img> tag

10.2.2 Adding placeholder images

10.2.3 Working with image thumbnails

10.2.4 Adding image captions

10.3 Implementing a lightbox overlay

10.4 The lightbox: Powered by JavaScript

10.5 Laying out the gallery with Flexbox

10.6 Crafting the prompt for the photo gallery

10.7 Examining the photo gallery code

10.7.1 Examining the HTML

10.7.2 Examining the CSS

10.7.3 Examining the JavaScript

10.8 Customizing the photo gallery

Summary