Lesson 30 - Travel Brochure
LEARN
Office Hours
- If you need help please attend office hours
- MWF 1:30-2:30 by Zoom
- Zoom: https://unco.zoom.us/j/99180652183
- Email: mark.seaman@unco.edu
Reading for Today
- Read 4.7 HTML developer guidelines
- Follow Reading Schedule
Today
- Project #11 - Travel Brochure
BUILD
4 Weeks - 4 Projects
- You now know what you need to build great pages
- But you need practices
- The rest of the semester you will build projects
Project #11 - Travel Brochure
- Project 11 Instructions
- Build a marketing brochure for your travel agency
- Create a professional marketing website to promote vacations online
- Build two pages "index.html", "buy.html"
- Your destination can be either fictional or a real place
Source Code
- Build project directory "bacs200/travel"
- Use your page template built on Bootstrap to create a new page
- Create your page at "bacs200/travel/index.html"
- Commit all of your code to your Github repository
Test Your Code
- Test the simple page before your put anything interesting in it
- Publish your page using Github Pages
Validate
- CSS Styles must be declared in a linked file
- CSS Must be validated
- HTML Must be validated
Branding
- Create a name for your travel agency
- Decide on the destination for your vacation plans
- Create a simple graphic for a logo
Marketing Hook
- Create a carousel to display your marketing message
- The carousel should show 3-7 photos with a small amount of text
- Build an appropriate message
- Use photos
Product Packages
- Show your vacation packages
- Create three products at different price points
- Create a graphic for each product package
- Link view details to pages with detailed info
- Use consistent style on these pages
Fun Activities
- Use the "Featurette" section to show fun activities
- Select activities to highlight
- Entice customers to sign up
- Display beautiful photos
Checkout Page
- Build a checkout page
- Do not implement the payments
Bootstrap Examples
- Leverage off Bootstrap Examples
- Bootstrap Carousel Example
- Bootstrap Checkout Example
- Bootstrap Pricing Example