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.