💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Exemplar
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 1: HTML & CSS: Good vs Bad Design

Unit 1 Final Project: My Travel Page

How can one use HTML, CSS, and Bulma together to make an accessible and responsive website?

PreviousU1LA6 Lab: CheeseBook Computers with BulmaNextUnit 2 Overview

Last updated 1 year ago

Teacher Notes

The Travel Page Lab is purposely made open ended for students to connect with it in what ever way they can relate. That being said, use your best judgement when it comes to narrowing down options for your particular students. If students struggle with making an initial decision, recommend a travel site to their a country of their choice or even a specific part of their neighborhood. If students have an idea but struggle with how to start the website, point them to the Bulma templates. See below.

Reminder that these sites are really just digital brochures or posters. Remind students that nothing on the page is expected to be dynamic: drop down menus, links to another html page, data collection, etc. That will all be learned in Unit 2 and beyond. For this lab, the focus is HTML and CSS. If students need an extra challenge, they can incorporate some fun CSS animations. See below.

Students do not require any starter code for this final project as they are showcasing all of the skills they built thus far; they should begin from a blank HTML/CSS project.

Prompt

It's vacation time, and people need your website to help them get started. Will you show the next location they're going to, and entice them with things to do and place to see like this or this ? Will you create a site for the transit in that city including bus routes and trains like ? Or, will your page be a center for available hotels in the area allowing people to book right on the site like or a more generic ?

Directions: Choose a website idea that will help people with their travels, and create a single webpage that is both accessible and responsive. We recommend creating a travel page like the Germany or Dominican Republic site above, but you can alternatively choose to do a transit help page or a Hotel help page for any city.

Once you decide and choose a city, do some research on what similar sites already exist, and determine which parts of the website you want to copy and which parts you want to make better. This is your opportunity to put everything you've learned so far together in one site.

Requirements:

There are a couple of things that should be included in your website:

  1. A Navbar, a Footer, and at least one section of Cards.

  2. A section with a Form containing things like text-boxes, checkboxes, dropdown menus, etc. (For example: a "subscribe now" form, find hotels by date and location, or a quick survey for quality assurance)

  3. Other than the above 4 sections, at least 3 more sections - maybe a second navbar, a hero, a gallery section, etc.

  4. The use of Grid -- either with CSS or with Bulma

  5. It should be 100% Accessible.

  6. It should look good on Mobile and on Desktop; 100% Responsive.

Exemplar

Culturally Responsive Best Practice

Coming Soon

Extra Help?

Having trouble starting, deciding where to go or which to do? Go for a travel page! Remember, it doesn't have to be a country like Germany, the Dominican Republic, or Madagascar, it can be a city like New York, Paris, or Tokyo instead. It can alternatively be a park like Central Park, or even a neighborhood like Harlem or SoHo. You can make it specific to your area, for example "East Jamaica Queens", or you can use a fictional place like Gotham City, Hogwarts School of Witchcraft and Wizardry, or Bikini Bottom.

Extensions

Mild

  • <a href="#contact-form">Email me!</a>
    
    <!-- the link above will take the user to this element -->
    <div id="contact-form">
        ...
    </div>
    html {
        scroll-behavior: smooth;
    }

Medium

Spicy

  • div {
        width: 90%;
        height: 700px;
        background-color: white;
    
        animation-name: dark-mode;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes dark-mode {
        from {
            background-color: white;
            color: black;
        }
        to {
            background-color: black;
            color: white;
        }
    }
    

Reflection Questions:

  • If you had more time to work on your webpage, what else would you have added? What tools would you have used to do so?

  • What was the easiest part of the website to implement? What was most challenging?

Take a look at before you start to sketch what your travel page might look like.

Have an idea but not sure how to begin your website? Check out . Feel free to copy one idea or make a collage of several ideas while you are designing your website. Sketch what your site will look like on a piece of paper before putting it all together. Remember all the individual pieces can be found in .

Some websites' links in the navbar scroll to that section in the page instead of taking you to a different site. For example, if you click "STAY" in the exemplar website, notice that it takes you to the "Find a place to stay" section of the site. Implement this effect in your website. Use this . Here's an example:

Bonus! Slow down the scroll with this CSS ruleset. Use this if you need more information.

Check out the for some more styles you can add to your page. Some of my favorite selectors are :hover, ::first-letter, :first-child, :last-child, and :visited. Explore these and other selectors and properties and find some ways to incorporate them into your site.

let an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. In the example below, I permanently change the background-color from white to black and the font color from black to white:

🎨
this finished example
these Bulma templates
Bulma's documentation
resource on how to write the HTML href attribute
resource on how to make the transition smooth
CSS-Tricks Almanac
CSS animations
Germany travel site
Dominican Republic one
the NYC MTA site
MGM Resorts
Hotels.Com
Extra Help
Extensions