Please enable JavaScript to use CodeHS

Outline


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