Bootstrap Triptych

Annunciation Triptych

As with the triptych above, we’re going to create a three-paneled look at the same subject. That is, you’re going to create the same single page three separate times. Each version of the page—what we’ll call a “panel”—will contain the same content, but will be created differently. Some details:

  • For content, you may choose any unified topic you’d like (it could be giraffes, NBC’s The Good Place, your portfolio, whatever, really.)
  • Every panel must include:
    • A navbar, including
      • A site title
      • A site logo, if you’d like
      • Links to all three panels in each panel
    • A jumbotron / hero section
    • A call to action button
    • A portion of the page that has more than one column in a horizontal layout
    • Images
    • A non-system font
  • All panels must meet the following criteria:
    • Thoughtful responsive design throughout, including:
      • Optimization at minimum for mobile and desktop
      • Responsive images
    • An eye toward aesthetics

Panel One (due Wednesday 2/27)

In Panel One, you’ll create your site from scratch, using only standard Bootstrap components. Your focus is learning how to achieve the layout and look you want using standard components.

Panel Two (due Friday 3/1)

For Panel Two, you’ll take your content from Panel One and place it in a theme/template of your choosing. However, in this panel, you may edit only the content (HTML) of your template, not the appearance (CSS). This panel should take the least time of the three, and is really intended primarily as a record of your progress from Panel One to Panel Three.

Panel Three (due Friday 3/8)

In this panel, you’ll take what you created in Panel Two and customize every detail just the way you’d like—colors, images, layout, etc. The end result should be a fantastic-looking Bootstrap page that, while bearing a resemblance to Panel Two, looks uniquely yours.


Use this folder structure to organize Project Two. Download the .zip file and place its contents in your project-two folder on Dropbox. Then, copy files from here to your server as they’re ready.

On the main index.html, you’ll create a small cover page / reflection for the project. In the reflection, you discuss:

  • New skills acquired
  • Struggles faced
  • Things you’re proud of
  • Additional things you’d like to learn / work on in the future