GRPH 325 · Project 3

Build a responsive gallery website

Design a four-page gallery site in Figma, then build it with HTML, CSS and JavaScript and publish it live.

Your site is built on a Triad: one theme and three topics within it. The home page introduces the theme, and each of the three gallery pages features one topic with a paragraph and an interactive image gallery. For example, the theme De Stijl with the topics Red, Blue and Yellow.

Work through the steps in order. Each page covers one small task, explains what the code means, and ends with a link to the next step.

Copy it, then read it

You start from a starter folder of prepared code, and you may copy any code in this guide. What matters is that you understand it: read the explanation that comes with every block, and be ready to explain what each part of your HTML, CSS and JavaScript does. You will add your own comments to the lightbox script in step 4.2, and you will explain one build problem in your presentation.

Start with step 1.1 See the example site

What’s new in this project

In the Dog Website you built one page from a blank file. This project adds:

Design first: a style guide, components and 12 responsive frames in Figma before any code
A multi-page site: four pages that share one header, navigation, footer and style sheet, with aria-current marking the current page
A starter folder: instead of typing everything, you read, adapt and extend prepared code
Image sourcing and licensing: Creative Commons, a credits table, thumbnail and large versions, and WebP
Fluid layouts: repeat(auto-fit, minmax()) grids and two breakpoints (600px and 1000px) instead of one
JavaScript: an accessible lightbox gallery built on the <dialog> element
Publishing: a live site on Netlify, first as a draft, then as the final version

Steps marked Review (2.1 and 3.1) recap HTML and CSS from Projects 1 and 2. Skim them and use them as a reference.

What you will build

Page	File	Contents
Home	`index.html`	Theme introduction and three topic cards linking to the galleries
Gallery 1–3	`red.html`, `blue.html`, `yellow.html` (your topic names)	Topic paragraph and 9–12 images that open in a lightbox

Every page must work on phones, tablets and desktops, use Google Fonts, meet accessibility basics, and be published at a live URL.

What you will learn

Organize a multi-page website’s files and write relative paths.
Find images you have permission to use, credit them, and prepare them for screens.
Design a responsive site in Figma with styles, components and Auto Layout.
Structure pages with semantic HTML.
Style a site for every screen size with design tokens, fluid grids and media queries.
Load and pair Google Fonts.
Add interaction with JavaScript: an accessible image lightbox.
Test for accessibility and quality, then publish and present your work.

Milestones

Due dates are on Canvas.

Milestone	Steps	What is due
1. Plan and design	1.1–1.3	Project folders, images and credits table, and in Figma: style guide, 12 frames and a working desktop and phone prototype. Due at critique.
2. Home page	2.1–3.5	`index.html` styled with your fonts and colors, working at phone, tablet and desktop widths
3. Gallery pages and draft	4.1–4.3	Three gallery pages with working lightboxes, published as a draft at a live Netlify URL
4. Finish	5.1–5.3	Titles, descriptions and favicon; QA checklist; reflection; final site published; files submitted; 3-minute presentation

What you will hand in

Item	Details
Project folder	`LastnameFirstInitial_triad-website.zip` (compressed folder) containing: LastnameFirstInitial_triad-website/ ├── LastnameFirstInitial_triad-website.fig ├── LastnameFirstInitial_reflection.pdf ├── resources/ └── site/ `resources` holds your original images and `image-credits.xlsx`. `site` holds the published website: `index.html`, three gallery pages, `favicon.png`, `css/`, `js/` and `images/`.
Live URL	Your Netlify address, pasted in the Canvas submission comment
Reflection	150–250 words comparing your Figma design with the finished build (step 5.2)
Presentation	3 minutes in class, showing your live site (step 5.3)

How your project is assessed

Criterion	Full marks look like
Design in Figma	Complete style guide, consistent components, 12 frames and a working prototype; layers named after the HTML
Images and credits	Licensed images, sized and named correctly, credited in captions and the credits table, each with useful alt text
HTML structure	Valid, semantic HTML with logical heading order, matching header and footer on every page, and a unique title and description on each
Visual design and CSS	The build matches the Figma design; colors and fonts come from design tokens; text passes 4.5:1 contrast; spacing is consistent
Responsive layout	Looks intentional at every width from 320px up, with no sideways scrolling
Gallery interaction	The lightbox works with mouse and keyboard, and the script has your own comments explaining each part
Publishing and presentation	The live site works on a phone; the reflection and presentation explain your design decisions and one problem you solved

The full quality checklist is in step 5.2. The stretch options in step 4.2 earn bonus credit.