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.

Getting Your Photos Ready

Sketching the Layout

Choosing Typefaces

Choosing the Colors

Building the Page

The Initial Structure

Try This

Web Page

HTML

The Overall Layout

Try This

CSS

The Header Section

Try This

Web Page

CSS

HTML

The Navigation Section

Try This

Web Page

CSS

HTML

Try This

Web Page

CSS

HTML

The Main Section

Try This

Web Page

CSS

HTML

The Footer Section

Try This