This page is a work in progress.You can help improve it. →

Travel Together!

Your team has been contracted by the city of St Pete to build out a site about local tourism. Luckily for us, our team has a designer and has completed their mocks up of what they envision the site to look like. Your task is, in small groups (2-3) pair program and recreate the site as close as possible.

This is an in-class activity to help reinforce concepts and provide milage to be more comfortable with CSS.


  • Practice HTML and CSS
  • Work on replicating a mock-up


  • form small groups of 2-3
  • recreate this website
  • We will meet periodically to discuss progress, topics, and ideas. Keep an eye on slack.


degit $GITHUB_USER/html-css-ts-project-template TravelSite

Explorer Mode

For explorer mode, work to recreate the site exactly

  • Start with build the HTML, focus on semantics
  • After you are happy with the HTML, build out the mobile view
  • Build out the desktop view
  • deploy your app

Adventure Mode

Tips and Tricks

  • This looks and feels a lot like our example from yesterday. Use that as inspiration.
  • The site is live at here. You can use for inspiration or if you get stuck
  • Even though we see the website from a top perspective, you can develop a site's sections in any order. If you get stuck on one section, move on the next
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.