# Exercise: Tribute Page and Flexbox

Build a three-page tribute website with semantic HTML and CSS, then practice layout in our games Flex Freight and Grid Town and use it on your site.

Apprentice · HTML · CSS · Updated October 30, 2026

Time to build a website of your own: a tribute to something you like. A favorite book series, a band, a sports team, a game, a film. It's three pages or more of real HTML and CSS, and it's yours to design.

## Get the exercise files

Open this lesson's GitHub repository, [github.com/ask-codey/exercise-tribute-page-and-flexbox](https://github.com/ask-codey/exercise-tribute-page-and-flexbox), also linked from the **Exercise** box beside the lesson. Click **Code**, then **Download ZIP**, and unzip it into your `bootcamp` folder. It holds an `index.html` with comments showing where each part goes, and an empty `styles.css`.

Open the folder in VS Code. Install the **Live Server** extension (search for it in the Extensions view, **Ctrl+Shift+X**), then right-click `index.html` and choose **Open with Live Server**. Your page opens in the browser, and reloads every time you save.

## Part 1: your tribute site

*HTML elements you'll use most*, at the end of the *HTML* lesson, shows each element you need here, with an example.

The home page needs:

- the title in a large heading, centered;
- a picture, such as a book cover, a team logo or a band photo, in an `images` folder;
- a table with two or more columns, such as characters and the actors who play them;
- two or three quotes, in a semantic quote element (`blockquote`);
- a list of two or three links to other websites;
- links to your detail pages;
- a heading for each section (the table, the quotes and the links), underlined.

Add at least **two detail pages**, linked from the home page, with more about something on it: a character, an album, a season.

Then style it:

- a font for the page;
- a background color, and a text color that's easy to read on it;
- quotes in italics;
- one element in a different font size;
- try `line-height`, and watch how it changes the page.

## Part 2: layout games

Two of our own games teach Flexbox and Grid one small puzzle at a time. You type real CSS and the page changes as you type, and every group of puzzles starts with a guide that shows each value first:

- [Flex Freight](https://www.ask-codey.com/games/flex-freight?course=csharp-full-stack-bootcamp): 32 puzzles, moving crates onto their spots on a loading dock with Flexbox;
- [Grid Town](https://www.ask-codey.com/games/grid-town?course=csharp-full-stack-bootcamp): 32 puzzles, building houses, shops and a park on their lots with Grid.

Get as far as you can in each. Then put them to work on your tribute site: lay out the navigation links in a row with Flexbox, or the quotes side by side with Grid.

## Check your work

There are no tests for a design. Check it yourself instead:

- Every page has a valid skeleton: `<!DOCTYPE html>`, `html`, `head` with a `title`, and `body`.
- You used semantic elements (`header`, `nav`, `main`, `section`, `footer`), not just `div`s.
- Every picture has an `alt` text that describes it.
- Every link works, including the ones between your pages.
- Open your browser's developer tools (**F12**) and look at your page's elements and styles. Is each rule doing what you expected?

## Pictures

Use pictures you're allowed to use: your own photos, or ones whose license allows it. Wikimedia Commons shows the license of every image, and NASA's photos are free to use.

## Submit your exercise

The exercise is how you finish this lesson. When your work is done, put it on GitHub in a repo of your own, then submit that repo's address here.

1. On GitHub, click **+**, then **New repository**. Name it (for example `exercise-tribute-page-and-flexbox`), choose **Public**, and click **Create repository**. Leave out the README: your folder already has one.
2. In a terminal in your exercise folder (Git Bash on Windows), send your work to your new repo. If you downloaded the ZIP:

   ```bash
   git init -b main
   git add .
   git commit -m "My solution"
   git remote add origin https://github.com/your-name/exercise-tribute-page-and-flexbox.git
   git push -u origin main
   ```

   If you cloned the starter instead, point your copy at your own repo, then commit and push:

   ```bash
   git remote set-url origin https://github.com/your-name/exercise-tribute-page-and-flexbox.git
   git add .
   git commit -m "My solution"
   git push -u origin main
   ```

3. Paste your repo's address, such as `https://github.com/your-name/exercise-tribute-page-and-flexbox`, into **Submit your exercise** on this page. The site checks that the repo is public and holds your commits, and then the lesson is complete.

Changed something after you submitted? Push it, and submit again: your latest submission is the one that counts.

## So what

You've built a small website from nothing: structure in HTML, style in CSS, and layout with Flexbox and Grid. Every web app in the rest of this course is built on the same three pieces.

## Key terms

- [Semantic HTML](https://www.ask-codey.com/glossary/semantic-html)
- [Flexbox](https://www.ask-codey.com/glossary/flexbox)
- [CSS Grid](https://www.ask-codey.com/glossary/css-grid)

## Related

- [HTML](https://www.ask-codey.com/lessons/html)
- [Semantic HTML](https://www.ask-codey.com/lessons/html-semantic-html)
- [CSS](https://www.ask-codey.com/lessons/html-css)
- [FlexBox: an overview](https://www.ask-codey.com/lessons/flexbox-an-overview)
- [Grid](https://www.ask-codey.com/lessons/grid)

Source: https://www.ask-codey.com/lessons/exercise-tribute-page-and-flexbox