| Activity | Points | Item Type |
|---|---|---|
| Bootstrap | ||
| 1.1 What is Bootstrap? | Lesson | |
| 1.1.1 What is Bootstrap? | 1 | Video |
| 1.1.2 Example Bootstrap Mobile Site | 1 | Example |
| 1.1.3 Real World Bootstrap: OneNYC | 1 | Connection |
| 1.1.4 Responsive vs Unresponsive | 5 | Free Response |
| 1.1.5 Favorite Bootstrap Site | 5 | Free Response |
| 1.2 Getting Started with Bootstrap | Lesson | |
| 1.2.1 Getting Started with Bootstrap | 1 | Video |
| 1.2.2 Getting Started Quiz | 2 | Check for Understanding |
| 1.2.3 First Bootstrap Page | 1 | Example |
| 1.2.4 Container-Fluid Page | 1 | Example |
| 1.2.5 Using the Bootstrap Skeleton | 5 | Exercise |
| 1.2.6 Your First Bootstrap | 5 | Exercise |
| 1.2.7 1. Photo Portfolio | 10 | Challenge |
| 1.2.8 Container Docs | 1 | Connection |
| 1.3 Jumbotron Pages | Lesson | |
| 1.3.1 Jumbotron Pages | 1 | Video |
| 1.3.2 Jumbotron Pages Quiz | 2 | Check for Understanding |
| 1.3.3 First Jumbotron Page | 1 | Example |
| 1.3.4 Realty: Jumbotron | 1 | Example |
| 1.3.5 Your First Jumbotron | 5 | Exercise |
| 1.3.6 Add a Jumbotron! | 5 | Exercise |
| 1.3.7 2. Photo Portfolio | 10 | Challenge |
| 1.3.8 Jumbotron Docs | 1 | Connection |
| 1.3.9 Jumbotron Badge | 1 | Badge |
| 1.4 The Bootstrap Grid System | Lesson | |
| 1.4.1 The Grid System | 1 | Video |
| 1.4.2 The Bootstrap Grid Quiz | 2 | Check for Understanding |
| 1.4.3 Grid System Example | 1 | Example |
| 1.4.4 Column Overflow | 1 | Example |
| 1.4.5 Different Device Sizes | 1 | Example |
| 1.4.6 Example Layout | 1 | Example |
| 1.4.7 Realty: Grid System | 1 | Example |
| 1.4.8 Grid Practice | 5 | Exercise |
| 1.4.9 Endangered Animals | 5 | Exercise |
| 1.4.10 3. Photo Portfolio | 10 | Challenge |
| 1.4.11 Grid System Docs | 1 | Connection |
| 1.5 Bootstrap Components | Lesson | |
| 1.5.1 Bootstrap Components | 1 | Video |
| 1.5.2 Bootstrap Components Quiz | 2 | Check for Understanding |
| 1.5.3 Page Headers | 1 | Example |
| 1.5.4 Making Buttons | 1 | Example |
| 1.5.5 Button Groups | 1 | Example |
| 1.5.6 Using Glyphicons | 1 | Example |
| 1.5.7 Realty: Buttons and Page Headers | 1 | Example |
| 1.5.8 Header and Buttons | 5 | Exercise |
| 1.5.9 Glyphicon Buttons | 5 | Exercise |
| 1.5.10 4. Photo Portfolio | 10 | Challenge |
| 1.5.11 Button Docs | 1 | Connection |
| 1.5.12 Glyphicon Docs | 1 | Connection |
| 1.6 More Bootstrap Components | Lesson | |
| 1.6.1 More Bootstrap Components | 1 | Video |
| 1.6.2 More Bootstrap Components Quiz | 2 | Check for Understanding |
| 1.6.3 Thumbnail Skeleton | 1 | Example |
| 1.6.4 Kitten Thumbnails | 1 | Example |
| 1.6.5 Table Skeleton | 1 | Example |
| 1.6.6 Striped Tables | 1 | Example |
| 1.6.7 Realty: Thumbnails | 1 | Example |
| 1.6.8 Shoe Shop | 5 | Exercise |
| 1.6.9 Adding Captions | 5 | Exercise |
| 1.6.10 Bootstrap Tables | 5 | Exercise |
| 1.6.11 Favorite TV Shows | 5 | Exercise |
| 1.6.12 Favorite Animals | 5 | Exercise |
| 1.6.13 5. Photo Portfolio | 10 | Challenge |
| 1.6.14 Thumbnail Docs | 1 | Connection |
| 1.6.15 Table Docs | 1 | Connection |
| 1.7 Navigation Bars | Lesson | |
| 1.7.1 Navigation Bars | 1 | Video |
| 1.7.2 Navigation Bars Quiz | 2 | Check for Understanding |
| 1.7.3 Navbar Docs | 1 | Connection |
| 1.7.4 Simple Nav Tabs | 1 | Example |
| 1.7.5 Basic Navbar | 1 | Example |
| 1.7.6 Basic Collapsable Navbar | 1 | Example |
| 1.7.7 Realty: Navbar | 1 | Example |
| 1.7.8 Realty: Collapsable Navbar | 1 | Example |
| 1.7.9 Navigation Links | 5 | Exercise |
| 1.7.10 Navbar Alignment | 5 | Exercise |
| 1.7.11 Making Navbars | 5 | Exercise |
| 1.7.12 6. Photo Portfolio | 10 | Challenge |
| 1.8 Drop Down Menus | Lesson | |
| 1.8.1 Drop Down Menus | 1 | Video |
| 1.8.2 Drop Down Menus Quiz | 1 | Check for Understanding |
| 1.8.3 Basic Dropdown | 1 | Example |
| 1.8.4 Realty: Dropdown | 1 | Example |
| 1.8.5 World Traveller | 5 | Exercise |
| 1.8.6 Which Animal? | 5 | Exercise |
| 1.8.7 Dropdown Nav | 5 | Exercise |
| 1.8.8 7. Photo Portfolio | 10 | Challenge |
| 1.8.9 Drop Down Menu Docs | 1 | Connection |
| 1.8.10 Menu Badge | 1 | Badge |
| 1.9 Using Bootstrap Examples | Lesson | |
| 1.9.1 Using Bootstrap Examples | 1 | Video |
| 1.9.2 Using Bootstrap Examples Quiz | 2 | Check for Understanding |
| 1.9.3 Bootstrap Starter Templates | 1 | Connection |
| 1.9.4 Realty: Carousel | 1 | Example |
| 1.9.5 Blog Bootstrap Template | 1 | Example |
| 1.9.6 Carousel Bootstrap Template | 1 | Example |
| 1.9.7 Dashboard Bootstrap Template | 1 | Example |
| 1.9.8 Cover Bootstrap Template | 1 | Example |
| 1.9.9 Cover Site From Template | 1 | Example |
| 1.9.10 Modify the Template | 10 | Challenge |
| 1.9.11 8. Photo Portfolio | 10 | Challenge |
| 1.10 Bootstrap Challenges | Lesson | |
| 1.10.1 Sticky Navbar | 10 | Challenge |
| 1.10.2 Adding Interactions | 10 | Challenge |
| 1.10.3 Team Page | 10 | Challenge |
| 1.10.4 9. Photo Portfolio | 10 | Challenge |
| 1.11 Bootstrap Quiz | Lesson | |
| 1.11.1 Bootstrap Quiz | 10 | Unit Quiz |
| 1.11.2 Bootstrap Badge | 1 | Badge |
| Bootstrap Project | ||
| 2.1 Bootstrap Project | Lesson | |
| 2.1.1 Example Mobile Responsive Website | 1 | Example |
| 2.1.2 Real World Bootstrap: University of Washington | 1 | Connection |
| 2.1.3 Real World Bootstrap: Maple | 1 | Connection |
| 2.1.4 Project: Create a Mobile Responsive Website | 10 | Challenge |
| 2.1.5 Bootstrap Project Badge | 1 | Badge |
| Designing User Interfaces | ||
| 3.1 Intro to Design Thinking | Lesson | |
| 3.1.1 Intro to Design Thinking | 1 | Video |
| 3.1.2 Intro to Design Thinking | 2 | Check for Understanding |
| 3.1.3 User Interface Scavenger Hunt | 5 | Free Response |
| 3.1.4 Case Study: Helping Blind People See | 1 | Connection |
| 3.1.5 Case Study Responses | 5 | Free Response |
| 3.1.6 Crash Course: Empathize | 1 | Connection |
| 3.1.7 Empathize Notes | 5 | Free Response |
| 3.1.8 Crash Course: Define | 1 | Connection |
| 3.1.9 Problem Statement | 5 | Free Response |
| 3.1.10 Crash Course: Ideate | 1 | Connection |
| 3.1.11 Ideate Notes | 5 | Free Response |
| 3.1.12 Crash Course: Prototype and Test | 1 | Connection |
| 3.1.13 Testing Notes | 5 | Free Response |
| 3.1.14 Topic Brainstorm | 5 | Free Response |
| 3.1.15 Narrowing Down Topics | 5 | Free Response |
| 3.2 Empathy | Lesson | |
| 3.2.1 Empathy | 1 | Video |
| 3.2.2 Empathy Quiz | 2 | Check for Understanding |
| 3.2.3 A Cafeteria Designed for Me | 1 | Connection |
| 3.2.4 A Cafeteria Designed for Me | 5 | Free Response |
| 3.2.5 Accessibility | 1 | Connection |
| 3.2.6 Accessibility Tips | 5 | Free Response |
| 3.2.7 Accessibility: Designing for ALL | 5 | Free Response |
| 3.2.8 How to Interview | 1 | Connection |
| 3.2.9 How to Interview | 5 | Free Response |
| 3.2.10 User Interview | 5 | Free Response |
| 3.3 Define | Lesson | |
| 3.3.1 Define | 1 | Video |
| 3.3.2 Define Quiz | 2 | Check for Understanding |
| 3.3.3 Make a Composite Character Profile | 1 | Connection |
| 3.3.4 Composite Character Profile | 5 | Free Response |
| 3.3.5 Point-of-View Statement Brainstorm | 5 | Free Response |
| 3.3.6 POV Statement | 5 | Free Response |
| 3.4 Ideate | Lesson | |
| 3.4.1 Ideate | 1 | Video |
| 3.4.2 Ideate Quiz | 1 | Check for Understanding |
| 3.4.3 Stoke | 1 | Connection |
| 3.4.4 Get Stoked | 5 | Free Response |
| 3.4.5 Brainstorming Tips | 1 | Connection |
| 3.4.6 Ideate! | 5 | Free Response |
| 3.5 Prototype | Lesson | |
| 3.5.1 Prototype | 1 | Video |
| 3.5.2 Prototype Quiz | 1 | Check for Understanding |
| 3.5.3 Brainstorm Selection | 1 | Connection |
| 3.5.4 Harvest Ideas from the Brainstorm | 5 | Free Response |
| 3.5.5 Wizard of Oz Prototyping | 1 | Connection |
| 3.5.6 Example Wizard of Oz Paper Prototype | 1 | Connection |
| 3.5.7 Make Your Paper Prototypes! | 5 | Free Response |
| 3.6 Test | Lesson | |
| 3.6.1 Test | 1 | Video |
| 3.6.2 Testing Quiz | 1 | Check for Understanding |
| 3.6.3 Testing with Users | 1 | Connection |
| 3.6.4 Example: How to User Test | 1 | Connection |
| 3.6.5 How to User Test Responses | 5 | Free Response |
| 3.6.6 Example: How NOT to User Test | 1 | Connection |
| 3.6.7 How NOT to User Test Responses | 5 | Free Response |
| 3.6.8 Test Prototype 1 | 5 | Free Response |
| 3.6.9 Test Prototype 2 | 5 | Free Response |
| 3.6.10 Improve Your Prototype | 5 | Free Response |
| 3.7 Designing User Interfaces Quiz | Lesson | |
| 3.7.1 Designing User Interfaces Quiz | 10 | Unit Quiz |
| 3.7.2 Designing User Interfaces Badge | 1 | Badge |
| Final Project | ||
| 4.1 Final Web Design Project | Lesson | |
| 4.1.1 Milestones | 5 | Free Response |
| 4.1.2 Final Project | 10 | Challenge |
| 4.1.3 Final Project Badge | 1 | Badge |
| 4.1.4 Web Design Completed | 1 | Badge |
Sign up for a free teacher account to get access to curriculum, teacher tools and teacher resources.
Teacher SignupSign up as a student if you are in a school and have a class code given to you by your teacher.
Student Signup
