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.

Objectives

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

Requirements

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

Setup

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
  • images are here
• After you are happy with the HTML, build out the mobile view
• Build out the desktop view
• deploy your app

Adventure Mode

• The color is interesting to say the least, change the color scheme to something you like better. Tools like https://coolors.co/ and http://paletton.com/ will help.

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