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

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, 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: 32 puzzles, moving crates onto their spots on a loading dock with Flexbox;
  • Grid Town: 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 divs.
  • 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:

    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:

    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

Related