A photo gallery is a web page that presents multiple photographs, usually as thumbnails linked to larger originals. A polished gallery combines images, navigation, captions, and a structured layout. section 15.0 section 15.6
Build a gallery incrementally:
- Prepare thumbnail and full-size versions of the photographs. section 15.10
- Sketch the page, choose typefaces and colors, then create the initial HTML and global CSS. section 15.10
- Organize the page with semantic header, navigation, main, and footer elements. section 15.6
- Use Flexbox to center the page, arrange thumbnails with wrapping, and keep the footer at the bottom. section 15.6
- Add navigation links, active-page styling, full-size image links, and optional sticky navigation or dynamic captions. section 15.10 section 15.6
Thumbnail linked to an original
Place each thumbnail inside a link pointing to its full-size image, such as an image01-thumbnail.jpg thumbnail linking to image01.jpg. Repeat the pattern for the gallery’s photographs. section 15.6
body {
display: flex; #1
flex-direction: column; #1
justify-content: flex-start; #1
align-items: center; #1
min-height: 100vh; #2
font-family: Optima, Calibri, sans-serif; #3
background-color: #221900; #3
color: #ecd078; #3
}
This CSS example shows the gallery’s body as a single-column Flexbox container with centered content, full-height behavior, typography, and colors. section 15.6
