15 Project: Creating a Photo Gallery
People love photos. If you start publishing photos, they will quickly become the most popular part of your site. —Brian Bailey
This chapter covers
- Planning and sketching your photo gallery
- Choosing typefaces for your page
- Adding the header and navigation links
- Adding the image thumbnails
- Adding dynamic captions and links to full-size images
Unlike with your first two projects—the personal home page that you built in Chapter 5 and the landing page you built in Chapter 10—you now know enough to create a page that looks like it was designed and coded by a professional. If that seems like a stretch at this point in your web-design journey, this chapter will prove that I'm right. Here, I'll take you through the construction of a full-featured photo gallery, complete with dynamically generated captions, links to full-size versions of each thumbnail, and much more. You'll be leveraging many of the tools and techniques that you've learned so far, including class selectors, the CSS box model, images (of course), and layouts. Let's get to work!
What You’ll Be Building
This project is an online gallery for showing off your photos. The page will consist of at least half a dozen thumbnails, which are reduced-size versions of your images. The idea is that a site visitor should be able to click one of these thumbnails to display the full-size version of the image. Each thumbnail should also display a short caption that describes the image.