| Activity | Points | Item Type |
|---|---|---|
| Getting Started - What is the Web? | ||
| 1.1 Welcome | Lesson | |
| 1.1.1 Welcome to Web Design | 1 | Video |
| 1.1.2 Welcome to Web Design Quiz | 3 | Check for Understanding |
| 1.1.3 Websites in Your Life | 5 | Free Response |
| 1.1.4 What is Web Design? | 5 | Free Response |
| 1.1.5 Course Goals | 5 | Free Response |
| 1.1.6 Web Design and Web Development | 1 | Connection |
| 1.1.7 Meet a Web Developer | 1 | Connection |
| 1.2 The Internet | Lesson | |
| 1.2.1 What is The Internet? | 1 | Video |
| 1.2.2 What is the Internet? Quiz | 2 | Check for Understanding |
| 1.2.3 Internet Censorship: Google's Dragonfly Project | 1 | Connection |
| 1.2.4 Internet Censorship Reflection | 5 | Free Response |
| 1.2.5 The Right to Remain Anonymous? | 1 | Connection |
| 1.2.6 Anonymity Reflection | 5 | Free Response |
| 1.2.7 How does the Internet Work? | 1 | Video |
| 1.2.8 How does the Internet Work? Quiz | 2 | Check for Understanding |
| 1.2.9 Internet Protocols | 5 | Free Response |
| 1.3 Browsers | Lesson | |
| 1.3.1 Browsers | 1 | Video |
| 1.3.2 Browser Quiz | 2 | Check for Understanding |
| 1.3.3 What is a Browser? | 1 | Connection |
| 1.3.4 Your Browser | 1 | Connection |
| 1.3.5 Explaining a Browser | 5 | Free Response |
| 1.4 Viewing Websites | Lesson | |
| 1.4.1 Viewing Websites | 1 | Video |
| 1.4.2 Viewing Websites Quiz | 5 | Check for Understanding |
| 1.4.3 Explaining a URL | 5 | Free Response |
| 1.5 Getting Started - What is the Web? Quiz | Lesson | |
| 1.5.1 Getting Started - What is the Web? Quiz | 10 | Unit Quiz |
| 1.5.2 Getting Started Badge | 1 | Badge |
| HTML - Structuring Websites | ||
| 2.1 Introduction to HTML | Lesson | |
| 2.1.1 Introduction to HTML | 1 | Video |
| 2.1.2 Introduction to HTML Quiz | 2 | Check for Understanding |
| 2.1.3 Our First HTML Page | 1 | Example |
| 2.1.4 Say Hello! | 5 | Exercise |
| 2.2 Structure of an HTML Page | Lesson | |
| 2.2.1 Structure of an HTML Page | 1 | Video |
| 2.2.2 Structure of an HTML Page Quiz | 1 | Check for Understanding |
| 2.2.3 HTML Template | 1 | Example |
| 2.2.4 Hello World Page | 1 | Example |
| 2.2.5 The <title> Tag | 5 | Exercise |
| 2.2.6 Your First HTML Page | 5 | Exercise |
| 2.3 Formatting Text | Lesson | |
| 2.3.1 Formatting Text | 1 | Video |
| 2.3.2 Formatting Text Quiz | 1 | Check for Understanding |
| 2.3.3 Dictionary | 1 | Example |
| 2.3.4 Word Definitions | 5 | Exercise |
| 2.3.5 Pet Names | 5 | Exercise |
| 2.3.6 Call of the Wild | 5 | Exercise |
| 2.3.7 Formatting Badge | 1 | Badge |
| 2.4 Links | Lesson | |
| 2.4.1 Links | 1 | Video |
| 2.4.2 Links Quiz | 1 | Check for Understanding |
| 2.4.3 The <a> Tag | 1 | Example |
| 2.4.4 Bookmarks | 5 | Exercise |
| 2.4.5 Encyclopedias | 5 | Exercise |
| 2.5 Images | Lesson | |
| 2.5.1 Images | 1 | Video |
| 2.5.2 Images Quiz | 1 | Check for Understanding |
| 2.5.3 The <img> Tag | 1 | Example |
| 2.5.4 Building the CodeHS Homepage | 1 | Example |
| 2.5.5 Collage on a Theme | 5 | Exercise |
| 2.5.6 Linking an Image | 5 | Exercise |
| 2.5.7 National Parks | 5 | Exercise |
| 2.6 Copyright | Lesson | |
| 2.6.1 Copyright | 1 | Video |
| 2.6.2 Copyright Quiz | 2 | Check for Understanding |
| 2.6.3 Citing Sources Example | 1 | Example |
| 2.6.4 Exploring Creative Commons | 1 | Connection |
| 2.6.5 Response: Creative Commons | 5 | Free Response |
| 2.6.6 Finding Images | 5 | Free Response |
| 2.6.7 Make a Collage | 5 | Exercise |
| 2.6.8 Why Copyright is Important | 5 | Free Response |
| 2.7 HTML Lists | Lesson | |
| 2.7.1 HTML Lists | 1 | Video |
| 2.7.2 HTML Lists Quiz | 1 | Check for Understanding |
| 2.7.3 Grocery Shopping | 1 | Example |
| 2.7.4 Class Planning | 5 | Exercise |
| 2.7.5 Dream Destinations | 5 | Exercise |
| 2.7.6 Vacation Guides | 5 | Exercise |
| 2.8 HTML Tables | Lesson | |
| 2.8.1 HTML Tables | 1 | Video |
| 2.8.2 HTML Tables Quiz | 3 | Check for Understanding |
| 2.8.3 Address Book | 1 | Example |
| 2.8.4 National Sports | 5 | Exercise |
| 2.8.5 Table of Favorites | 5 | Exercise |
| 2.9 HTML Styling | Lesson | |
| 2.9.1 HTML Styling | 1 | Video |
| 2.9.2 HTML Styling Quiz | 1 | Check for Understanding |
| 2.9.3 Stylish Address Book | 1 | Example |
| 2.9.4 Background Colors | 5 | Exercise |
| 2.9.5 Style Your Class List | 5 | Exercise |
| 2.9.6 Styling Badge | 1 | Badge |
| 2.10 HTML Colors | Lesson | |
| 2.10.1 HTML Colors | 1 | Video |
| 2.10.2 HTML Colors Quiz | 2 | Check for Understanding |
| 2.10.3 HTML Colors Examples | 1 | Example |
| 2.10.4 Create Your Own Color | 5 | Exercise |
| 2.10.5 Gradients | 5 | Exercise |
| 2.10.6 Color Wheel | 1 | Connection |
| 2.10.7 Using Good Colors | 5 | Exercise |
| 2.11 HTML - Structuring Websites Quiz | Lesson | |
| 2.11.1 HTML - Structuring Websites Quiz | 9 | Unit Quiz |
| 2.11.2 HTML Badge | 1 | Badge |
| CSS - Styling Websites | ||
| 3.1 Introduction to CSS | Lesson | |
| 3.1.1 Introduction to CSS | 1 | Video |
| 3.1.2 Introduction to CSS Quiz | 2 | Check for Understanding |
| 3.1.3 Styling your H1s | 1 | Example |
| 3.1.4 First style with CSS | 5 | Exercise |
| 3.1.5 List Styling | 5 | Exercise |
| 3.1.6 Endangered Animals: Skeleton | 5 | Exercise |
| 3.2 CSS Select by Tag | Lesson | |
| 3.2.1 CSS Select by Tag | 1 | Video |
| 3.2.2 CSS Select by Tag Quiz | 1 | Check for Understanding |
| 3.2.3 Rainbow | 1 | Example |
| 3.2.4 Puppy Styling | 1 | Example |
| 3.2.5 Set List | 5 | Exercise |
| 3.2.6 Your Appliance Recommendations | 5 | Exercise |
| 3.2.7 Endangered Animals: Style the Headers | 5 | Exercise |
| 3.3 CSS Select by Class | Lesson | |
| 3.3.1 CSS Select by Class | 1 | Video |
| 3.3.2 CSS Select by Class Quiz | 1 | Check for Understanding |
| 3.3.3 Simple Checkerboard | 1 | Example |
| 3.3.4 Swim Meet | 5 | Exercise |
| 3.3.5 Favorite Things | 5 | Exercise |
| 3.3.6 Endangered Animals: Add Color Coding | 5 | Exercise |
| 3.4 CSS Select by ID | Lesson | |
| 3.4.1 CSS Select by ID | 1 | Video |
| 3.4.2 CSS Select by ID Quiz | 1 | Check for Understanding |
| 3.4.3 Logo | 1 | Example |
| 3.4.4 Must Do Today! | 5 | Exercise |
| 3.4.5 Lomeli's Menu | 5 | Exercise |
| 3.4.6 Endangered Animals: Add Pictures | 5 | Exercise |
| 3.4.7 Selector Badge | 1 | Badge |
| 3.5 The Cascade | Lesson | |
| 3.5.1 The Cascade | 1 | Video |
| 3.5.2 The Cascade Quiz | 3 | Check for Understanding |
| 3.5.3 Using Importance | 1 | Example |
| 3.5.4 Order of Precedence | 1 | Example |
| 3.5.5 We Really Like Dairy | 5 | Exercise |
| 3.5.6 Style the Table | 5 | Exercise |
| 3.6 CSS - Styling Websites Quiz | Lesson | |
| 3.6.1 CSS - Styling Websites Quiz | 7 | Unit Quiz |
| 3.6.2 CSS Badge | 1 | Badge |
| Project - Create Your Homepage | ||
| 4.1 Homepage: Your First Website | Lesson | |
| 4.1.1 Example Homepage | 1 | Example |
| 4.1.2 Real World Homepage | 1 | Connection |
| 4.1.3 Set Up Your codehs.me Website | 10 | Challenge |
| 4.1.4 Create Your Homepage | 10 | Challenge |
| 4.1.5 Create Your Homepage Badge | 1 | Badge |
| The Internet | ||
| 5.1 Getting Started - The Internet | Lesson | |
| 5.1.1 Welcome to the Internet | 1 | Video |
| 5.1.2 Welcome to the Internet Quiz | 1 | Check for Understanding |
| 5.1.3 The Internet and You | 5 | Free Response |
| 5.2 Internet Hardware | Lesson | |
| 5.2.1 Hardware of the Internet | 1 | Video |
| 5.2.2 Internet Hardware Quiz | 3 | Check for Understanding |
| 5.2.3 The Internet is in the Ocean | 1 | Connection |
| 5.3 Internet Addresses | Lesson | |
| 5.3.1 Internet Addresses | 1 | Video |
| 5.3.2 Internet Addresses Quiz | 1 | Check for Understanding |
| 5.3.3 The Need for Addresses | 5 | Free Response |
| 5.3.4 4-bit Addresses | 1 | Check for Understanding |
| 5.3.5 IPv4 vs IPv6 | 5 | Free Response |
| 5.4 DNS | Lesson | |
| 5.4.1 DNS | 1 | Video |
| 5.4.2 DNS Quiz | 2 | Check for Understanding |
| 5.4.3 How Does DNS Work? | 1 | Connection |
| 5.4.4 How Does DNS Work? | 5 | Free Response |
| 5.5 Routing | Lesson | |
| 5.5.1 Routing | 1 | Video |
| 5.5.2 Routing Quiz | 1 | Check for Understanding |
| 5.5.3 Redundancy | 5 | Free Response |
| 5.5.4 Route Tracing | 5 | Traceroute |
| 5.6 Packets and Protocols | Lesson | |
| 5.6.1 Packets and Protocols | 1 | Video |
| 5.6.2 Packets and Protocols Quiz | 1 | Check for Understanding |
| 5.6.3 Passing Notes | 10 | Resource |
| 5.6.4 How the Internet Works | 1 | Connection |
| 5.6.5 The Story of the Internet | 5 | Free Response |
| 5.7 The Impact of the Internet | Lesson | |
| 5.7.1 The Impact of the Internet | 1 | Video |
| 5.7.2 The Impact of the Internet Quiz | 2 | Check for Understanding |
| 5.7.3 Pokemon Go: Unintended Effects | 1 | Connection |
| 5.8 The Internet Quiz | Lesson | |
| 5.8.1 The Internet Quiz | 15 | Unit Quiz |
| Web Design Pretest | ||
| 6.1 Web Design Pretest | Lesson | |
| 6.1.1 About the Pretest | 1 | Notes |
| 6.1.2 Mindsets | 1 | Survey |
| 6.1.3 Knowledge & Skills: Web Design | 15 | Quiz |
| Advanced HTML and CSS | ||
| 7.1 Getting Started - Advanced HTML and CSS | Lesson | |
| 7.1.1 Getting Started | 1 | Video |
| 7.1.2 Example: Image Filters | 1 | Example |
| 7.1.3 Example: Animations | 1 | Example |
| 7.1.4 Example: Interactions | 1 | Example |
| 7.2 Multi-file Websites | Lesson | |
| 7.2.1 Splitting Your Site into Files | 1 | Video |
| 7.2.2 Splitting Your Site into Files Quiz | 2 | Check for Understanding |
| 7.2.3 Multipage Site Example | 1 | Example |
| 7.2.4 Add a Style Sheet | 5 | Exercise |
| 7.2.5 Dividing the Site | 5 | Exercise |
| 7.2.6 Career Site: Creating Structure | 5 | Exercise |
| 7.3 Embedding iframes | Lesson | |
| 7.3.1 Embedding iframes | 1 | Video |
| 7.3.2 Embedding IFrames Quiz | 2 | Check for Understanding |
| 7.3.3 Embedding CodeHS | 1 | Example |
| 7.3.4 Embedding a Map | 1 | Example |
| 7.3.5 Embedding a Website | 5 | Exercise |
| 7.3.6 Embed a Tweet | 5 | Exercise |
| 7.3.7 Embed a Video | 5 | Exercise |
| 7.3.8 Career Site: Include Outside Information | 5 | Exercise |
| 7.4 Divs | Lesson | |
| 7.4.1 Divs | 1 | Video |
| 7.4.2 Divs Quiz | 2 | Check for Understanding |
| 7.4.3 Divvying up the Site | 1 | Example |
| 7.4.4 Quotes | 5 | Exercise |
| 7.4.5 Flags | 5 | Exercise |
| 7.4.6 Career Site: Separate the Content | 5 | Exercise |
| 7.4.7 Div Badge | 1 | Badge |
| 7.5 Spans | Lesson | |
| 7.5.1 Spans | 1 | Video |
| 7.5.2 Spans Quiz | 1 | Check for Understanding |
| 7.5.3 Span Formatting | 1 | Example |
| 7.5.4 Vocabulary | 5 | Exercise |
| 7.5.5 Text Decoration | 5 | Exercise |
| 7.5.6 Career Site: Style Special Pieces | 5 | Exercise |
| 7.6 Combining CSS Selectors | Lesson | |
| 7.6.1 Combining CSS Selectors | 1 | Video |
| 7.6.2 Combining CSS Selectors Quiz | 2 | Check for Understanding |
| 7.6.3 More Specific Styling | 1 | Example |
| 7.6.4 Choosing Nested Tags | 5 | Exercise |
| 7.6.5 Highlight the First Item | 5 | Exercise |
| 7.6.6 Calorie Recommendations | 5 | Exercise |
| 7.7 The Don't Repeat Yourself Principle | Lesson | |
| 7.7.1 Don't Repeat Yourself | 1 | Video |
| 7.7.2 Don't Repeat Yourself Quiz | 2 | Check for Understanding |
| 7.7.3 Styling Multiple Tags | 1 | Example |
| 7.7.4 Style Similar Items with Same Class | 1 | Example |
| 7.7.5 Managing Change | 5 | Exercise |
| 7.7.6 Condense CSS Rules | 5 | Exercise |
| 7.7.7 Why DRY? | 5 | Free Response |
| 7.8 Special Selectors | Lesson | |
| 7.8.1 Special Selectors | 1 | Video |
| 7.8.2 Special Selectors Quiz | 2 | Check for Understanding |
| 7.8.3 Vote For Me | 1 | Example |
| 7.8.4 Vote For Me Pt 2 | 1 | Example |
| 7.8.5 Extend Vote For Me | 5 | Exercise |
| 7.8.6 Special Vendors | 5 | Exercise |
| 7.8.7 Checklist | 5 | Exercise |
| 7.8.8 Career Website: Add Milestones | 5 | Exercise |
| 7.8.9 Special Selectors Badge | 1 | Badge |
| 7.9 Visibility | Lesson | |
| 7.9.1 Visibility | 1 | Video |
| 7.9.2 Visibility Quiz | 2 | Check for Understanding |
| 7.9.3 Display Example | 1 | Example |
| 7.9.4 Fading Text | 1 | Example |
| 7.9.5 Favorite Sea Creature | 5 | Exercise |
| 7.9.6 Caption on Demand | 5 | Exercise |
| 7.10 Reading Documentation | Lesson | |
| 7.10.1 Reading Documentation | 1 | Video |
| 7.10.2 Reading Documentation Quiz | 2 | Check for Understanding |
| 7.10.3 Using Docs: Float | 1 | Example |
| 7.10.4 Using Docs: <blockquote> Tag | 1 | Example |
| 7.10.5 Style the Table | 5 | Exercise |
| 7.10.6 Electric Company | 5 | Exercise |
| 7.10.7 Career Website: Add Pictures | 5 | Exercise |
| 7.11 Using the Inspector | Lesson | |
| 7.11.1 Using the Inspector | 1 | Video |
| 7.11.2 Using the Inspector Tool Quiz | 1 | Check for Understanding |
| 7.11.3 Inspector Quick Start | 1 | Connection |
| 7.11.4 Classes and IDs | 4 | Check for Understanding |
| 7.11.5 Exploring the Art Museum | 4 | Check for Understanding |
| 7.11.6 What's Your Style? | 5 | Check for Understanding |
| 7.12 The Box Model | Lesson | |
| 7.12.1 The Box Model | 1 | Video |
| 7.12.2 The Box Model Quiz | 2 | Check for Understanding |
| 7.12.3 Adding Space Using Margin | 1 | Example |
| 7.12.4 Adding Space Using Padding | 1 | Example |
| 7.12.5 Combining Margin and Padding | 1 | Example |
| 7.12.6 I need some space! | 5 | Exercise |
| 7.12.7 I need some breathing room! | 5 | Exercise |
| 7.12.8 Where is space added? | 5 | Free Response |
| 7.12.9 Align Content Side by Side | 5 | Exercise |
| 7.12.10 Career Website: Separate Content | 5 | Exercise |
| 7.12.11 Design with the Box Model | 1 | Connection |
| 7.12.12 Box Badge | 1 | Badge |
| 7.13 Image Manipulation | Lesson | |
| 7.13.1 Image Manipulation | 1 | Video |
| 7.13.2 Image Manipulation Quiz | 2 | Check for Understanding |
| 7.13.3 Grayscale Filter | 1 | Example |
| 7.13.4 Blur Filter | 1 | Example |
| 7.13.5 Hue Rotation | 1 | Example |
| 7.13.6 Invert Filter | 5 | Exercise |
| 7.13.7 Blurred | 5 | Exercise |
| 7.13.8 Hue Rotation Comparisons | 5 | Exercise |
| 7.13.9 Overexposure | 5 | Exercise |
| 7.13.10 Grayscale Art | 5 | Exercise |
| 7.13.11 Aesop's Fables Part 1 | 5 | Exercise |
| 7.13.12 Aesop's Fables Part 2 | 5 | Exercise |
| 7.14 Animation | Lesson | |
| 7.14.1 Animation | 1 | Video |
| 7.14.2 Animation Quiz | 2 | Check for Understanding |
| 7.14.3 Animated Image Filter | 1 | Example |
| 7.14.4 Animated Invert Filter | 5 | Exercise |
| 7.14.5 Album Cover | 5 | Exercise |
| 7.14.6 Aesop's Fables Part 3 | 5 | Exercise |
| 7.15 Interaction | Lesson | |
| 7.15.1 Interaction | 1 | Video |
| 7.15.2 Interaction Quiz | 2 | Check for Understanding |
| 7.15.3 Interactive Image Filter | 1 | Example |
| 7.15.4 Smooth Interactive Image Filter | 1 | Example |
| 7.15.5 Smooth Change on Click | 1 | Example |
| 7.15.6 Button Interaction | 5 | Exercise |
| 7.15.7 Create Your Own Tooltip | 5 | Exercise |
| 7.15.8 Aesop's Fables Part 4 | 5 | Exercise |
| 7.15.9 Career Website: Engage the User | 5 | Exercise |
| 7.15.10 CSS Tricks | 1 | Connection |
| 7.16 Advanced HTML and CSS Quiz | Lesson | |
| 7.16.1 Advanced HTML and CSS Quiz | 15 | Unit Quiz |
| 7.16.2 Advanced HTML and CSS Badge | 1 | Badge |
| Project - Tell a Story | ||
| 8.1 Project: Tell a Story | Lesson | |
| 8.1.1 Real World Example: Infographic | 1 | Connection |
| 8.1.2 Project: Tell a Story | 10 | Challenge |
| 8.1.3 Tell a Story Badge | 1 | Badge |
| Bootstrap | ||
| 9.1 What is Bootstrap? | Lesson | |
| 9.1.1 What is Bootstrap? | 1 | Video |
| 9.1.2 Example Bootstrap Mobile Site | 1 | Example |
| 9.1.3 Real World Bootstrap: OneNYC | 1 | Connection |
| 9.1.4 Responsive vs Unresponsive | 5 | Free Response |
| 9.1.5 Favorite Bootstrap Site | 5 | Free Response |
| 9.2 Getting Started with Bootstrap | Lesson | |
| 9.2.1 Getting Started with Bootstrap | 1 | Video |
| 9.2.2 Getting Started Quiz | 2 | Check for Understanding |
| 9.2.3 First Bootstrap Page | 1 | Example |
| 9.2.4 Container-Fluid Page | 1 | Example |
| 9.2.5 Using the Bootstrap Skeleton | 5 | Exercise |
| 9.2.6 Your First Bootstrap | 5 | Exercise |
| 9.2.7 1. Photo Portfolio | 10 | Challenge |
| 9.2.8 Container Docs | 1 | Connection |
| 9.3 Jumbotron Pages | Lesson | |
| 9.3.1 Jumbotron Pages | 1 | Video |
| 9.3.2 Jumbotron Pages Quiz | 2 | Check for Understanding |
| 9.3.3 First Jumbotron Page | 1 | Example |
| 9.3.4 Realty: Jumbotron | 1 | Example |
| 9.3.5 Your First Jumbotron | 5 | Exercise |
| 9.3.6 Add a Jumbotron! | 5 | Exercise |
| 9.3.7 2. Photo Portfolio | 10 | Challenge |
| 9.3.8 Jumbotron Docs | 1 | Connection |
| 9.3.9 Jumbotron Badge | 1 | Badge |
| 9.4 The Bootstrap Grid System | Lesson | |
| 9.4.1 The Grid System | 1 | Video |
| 9.4.2 The Bootstrap Grid Quiz | 2 | Check for Understanding |
| 9.4.3 Grid System Example | 1 | Example |
| 9.4.4 Column Overflow | 1 | Example |
| 9.4.5 Different Device Sizes | 1 | Example |
| 9.4.6 Example Layout | 1 | Example |
| 9.4.7 Realty: Grid System | 1 | Example |
| 9.4.8 Grid Practice | 5 | Exercise |
| 9.4.9 Endangered Animals | 5 | Exercise |
| 9.4.10 3. Photo Portfolio | 10 | Challenge |
| 9.4.11 Grid System Docs | 1 | Connection |
| 9.5 Bootstrap Components | Lesson | |
| 9.5.1 Bootstrap Components | 1 | Video |
| 9.5.2 Bootstrap Components Quiz | 2 | Check for Understanding |
| 9.5.3 Page Headers | 1 | Example |
| 9.5.4 Making Buttons | 1 | Example |
| 9.5.5 Button Groups | 1 | Example |
| 9.5.6 Using Glyphicons | 1 | Example |
| 9.5.7 Realty: Buttons and Page Headers | 1 | Example |
| 9.5.8 Header and Buttons | 5 | Exercise |
| 9.5.9 Glyphicon Buttons | 5 | Exercise |
| 9.5.10 4. Photo Portfolio | 10 | Challenge |
| 9.5.11 Button Docs | 1 | Connection |
| 9.5.12 Glyphicon Docs | 1 | Connection |
| 9.6 More Bootstrap Components | Lesson | |
| 9.6.1 More Bootstrap Components | 1 | Video |
| 9.6.2 More Bootstrap Components Quiz | 2 | Check for Understanding |
| 9.6.3 Thumbnail Skeleton | 1 | Example |
| 9.6.4 Kitten Thumbnails | 1 | Example |
| 9.6.5 Table Skeleton | 1 | Example |
| 9.6.6 Striped Tables | 1 | Example |
| 9.6.7 Realty: Thumbnails | 1 | Example |
| 9.6.8 Shoe Shop | 5 | Exercise |
| 9.6.9 Adding Captions | 5 | Exercise |
| 9.6.10 Bootstrap Tables | 5 | Exercise |
| 9.6.11 Favorite TV Shows | 5 | Exercise |
| 9.6.12 Favorite Animals | 5 | Exercise |
| 9.6.13 5. Photo Portfolio | 10 | Challenge |
| 9.6.14 Thumbnail Docs | 1 | Connection |
| 9.6.15 Table Docs | 1 | Connection |
| 9.7 Navigation Bars | Lesson | |
| 9.7.1 Navigation Bars | 1 | Video |
| 9.7.2 Navigation Bars Quiz | 2 | Check for Understanding |
| 9.7.3 Navbar Docs | 1 | Connection |
| 9.7.4 Simple Nav Tabs | 1 | Example |
| 9.7.5 Basic Navbar | 1 | Example |
| 9.7.6 Basic Collapsable Navbar | 1 | Example |
| 9.7.7 Realty: Navbar | 1 | Example |
| 9.7.8 Realty: Collapsable Navbar | 1 | Example |
| 9.7.9 Navigation Links | 5 | Exercise |
| 9.7.10 Navbar Alignment | 5 | Exercise |
| 9.7.11 Making Navbars | 5 | Exercise |
| 9.7.12 6. Photo Portfolio | 10 | Challenge |
| 9.8 Drop Down Menus | Lesson | |
| 9.8.1 Drop Down Menus | 1 | Video |
| 9.8.2 Drop Down Menus Quiz | 1 | Check for Understanding |
| 9.8.3 Basic Dropdown | 1 | Example |
| 9.8.4 Realty: Dropdown | 1 | Example |
| 9.8.5 World Traveller | 5 | Exercise |
| 9.8.6 Which Animal? | 5 | Exercise |
| 9.8.7 Dropdown Nav | 5 | Exercise |
| 9.8.8 7. Photo Portfolio | 10 | Challenge |
| 9.8.9 Drop Down Menu Docs | 1 | Connection |
| 9.8.10 Menu Badge | 1 | Badge |
| 9.9 Using Bootstrap Examples | Lesson | |
| 9.9.1 Using Bootstrap Examples | 1 | Video |
| 9.9.2 Using Bootstrap Examples Quiz | 2 | Check for Understanding |
| 9.9.3 Bootstrap Starter Templates | 1 | Connection |
| 9.9.4 Realty: Carousel | 1 | Example |
| 9.9.5 Blog Bootstrap Template | 1 | Example |
| 9.9.6 Carousel Bootstrap Template | 1 | Example |
| 9.9.7 Dashboard Bootstrap Template | 1 | Example |
| 9.9.8 Cover Bootstrap Template | 1 | Example |
| 9.9.9 Cover Site From Template | 1 | Example |
| 9.9.10 Modify the Template | 10 | Challenge |
| 9.9.11 8. Photo Portfolio | 10 | Challenge |
| 9.10 Bootstrap Challenges | Lesson | |
| 9.10.1 Sticky Navbar | 10 | Challenge |
| 9.10.2 Adding Interactions | 10 | Challenge |
| 9.10.3 Team Page | 10 | Challenge |
| 9.10.4 9. Photo Portfolio | 10 | Challenge |
| 9.11 Bootstrap Quiz | Lesson | |
| 9.11.1 Bootstrap Quiz | 10 | Unit Quiz |
| 9.11.2 Bootstrap Badge | 1 | Badge |
| Bootstrap Project | ||
| 10.1 Bootstrap Project | Lesson | |
| 10.1.1 Example Mobile Responsive Website | 1 | Example |
| 10.1.2 Real World Bootstrap: University of Washington | 1 | Connection |
| 10.1.3 Real World Bootstrap: Maple | 1 | Connection |
| 10.1.4 Project: Create a Mobile Responsive Website | 10 | Challenge |
| 10.1.5 Bootstrap Project Badge | 1 | Badge |
| Designing User Interfaces | ||
| 11.1 Intro to Design Thinking | Lesson | |
| 11.1.1 Intro to Design Thinking | 1 | Video |
| 11.1.2 Intro to Design Thinking | 2 | Check for Understanding |
| 11.1.3 User Interface Scavenger Hunt | 5 | Free Response |
| 11.1.4 Case Study: Helping Blind People See | 1 | Connection |
| 11.1.5 Case Study Responses | 5 | Free Response |
| 11.1.6 Crash Course: Empathize | 1 | Connection |
| 11.1.7 Empathize Notes | 5 | Free Response |
| 11.1.8 Crash Course: Define | 1 | Connection |
| 11.1.9 Problem Statement | 5 | Free Response |
| 11.1.10 Crash Course: Ideate | 1 | Connection |
| 11.1.11 Ideate Notes | 5 | Free Response |
| 11.1.12 Crash Course: Prototype and Test | 1 | Connection |
| 11.1.13 Testing Notes | 5 | Free Response |
| 11.1.14 Topic Brainstorm | 5 | Free Response |
| 11.1.15 Narrowing Down Topics | 5 | Free Response |
| 11.2 Empathy | Lesson | |
| 11.2.1 Empathy | 1 | Video |
| 11.2.2 Empathy Quiz | 2 | Check for Understanding |
| 11.2.3 A Cafeteria Designed for Me | 1 | Connection |
| 11.2.4 A Cafeteria Designed for Me | 5 | Free Response |
| 11.2.5 Accessibility | 1 | Connection |
| 11.2.6 Accessibility Tips | 5 | Free Response |
| 11.2.7 Accessibility: Designing for ALL | 5 | Free Response |
| 11.2.8 How to Interview | 1 | Connection |
| 11.2.9 How to Interview | 5 | Free Response |
| 11.2.10 User Interview | 5 | Free Response |
| 11.3 Define | Lesson | |
| 11.3.1 Define | 1 | Video |
| 11.3.2 Define Quiz | 2 | Check for Understanding |
| 11.3.3 Make a Composite Character Profile | 1 | Connection |
| 11.3.4 Composite Character Profile | 5 | Free Response |
| 11.3.5 Point-of-View Statement Brainstorm | 5 | Free Response |
| 11.3.6 POV Statement | 5 | Free Response |
| 11.4 Ideate | Lesson | |
| 11.4.1 Ideate | 1 | Video |
| 11.4.2 Ideate Quiz | 1 | Check for Understanding |
| 11.4.3 Stoke | 1 | Connection |
| 11.4.4 Get Stoked | 5 | Free Response |
| 11.4.5 Brainstorming Tips | 1 | Connection |
| 11.4.6 Ideate! | 5 | Free Response |
| 11.5 Prototype | Lesson | |
| 11.5.1 Prototype | 1 | Video |
| 11.5.2 Prototype Quiz | 1 | Check for Understanding |
| 11.5.3 Brainstorm Selection | 1 | Connection |
| 11.5.4 Harvest Ideas from the Brainstorm | 5 | Free Response |
| 11.5.5 Wizard of Oz Prototyping | 1 | Connection |
| 11.5.6 Example Wizard of Oz Paper Prototype | 1 | Connection |
| 11.5.7 Make Your Paper Prototypes! | 5 | Free Response |
| 11.6 Test | Lesson | |
| 11.6.1 Test | 1 | Video |
| 11.6.2 Testing Quiz | 1 | Check for Understanding |
| 11.6.3 Testing with Users | 1 | Connection |
| 11.6.4 Example: How to User Test | 1 | Connection |
| 11.6.5 How to User Test Responses | 5 | Free Response |
| 11.6.6 Example: How NOT to User Test | 1 | Connection |
| 11.6.7 How NOT to User Test Responses | 5 | Free Response |
| 11.6.8 Test Prototype 1 | 5 | Free Response |
| 11.6.9 Test Prototype 2 | 5 | Free Response |
| 11.6.10 Improve Your Prototype | 5 | Free Response |
| 11.7 Designing User Interfaces Quiz | Lesson | |
| 11.7.1 Designing User Interfaces Quiz | 10 | Unit Quiz |
| 11.7.2 Designing User Interfaces Badge | 1 | Badge |
| Final Project | ||
| 12.1 Final Web Design Project | Lesson | |
| 12.1.1 Milestones | 5 | Free Response |
| 12.1.2 Final Project | 10 | Challenge |
| 12.1.3 Final Project Badge | 1 | Badge |
| 12.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
