| 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 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 | 12 | 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 Using Comments | 5 | Example |
| 2.2.6 The <title> Tag | 5 | Exercise |
| 2.2.7 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 |
| Advanced HTML and CSS | ||
| 5.1 Getting Started - Advanced HTML and CSS - Update | Lesson | |
| 5.1.1 Getting Started | 1 | Video |
| 5.1.2 Example: Image Filters | 1 | Example |
| 5.1.3 Example: Animations | 1 | Example |
| 5.1.4 Example: Interactions | 1 | Example |
| 5.2 Multi-file Websites | Lesson | |
| 5.2.1 Splitting Your Site into Files | 1 | Video |
| 5.2.2 Splitting Your Site into Files Quiz | 2 | Check for Understanding |
| 5.2.3 Multipage Site Example | 1 | Example |
| 5.2.4 Add a Style Sheet | 5 | Exercise |
| 5.2.5 Dividing the Site | 5 | Exercise |
| 5.2.6 Career Site: Creating Structure | 5 | Exercise |
| 5.3 Embedding iframes | Lesson | |
| 5.3.1 Embedding iframes | 1 | Video |
| 5.3.2 Embedding iFrames Quiz | 2 | Check for Understanding |
| 5.3.3 Embedding CodeHS Program | 1 | Example |
| 5.3.4 Embedding a Map | 1 | Example |
| 5.3.5 Embedding a Website | 5 | Exercise |
| 5.3.6 Embed a Video | 5 | Exercise |
| 5.3.7 Career Site: Include Outside Information | 5 | Exercise |
| 5.4 Divs | Lesson | |
| 5.4.1 Divs | 1 | Video |
| 5.4.2 Divs Quiz | 2 | Check for Understanding |
| 5.4.3 Divvying up the Site | 1 | Example |
| 5.4.4 Quotes | 5 | Exercise |
| 5.4.5 Flags | 5 | Exercise |
| 5.4.6 Career Site: Separate the Content | 5 | Exercise |
| 5.4.7 Div Badge | 1 | Badge |
| 5.5 Spans | Lesson | |
| 5.5.1 Spans | 1 | Video |
| 5.5.2 Spans Quiz | 1 | Check for Understanding |
| 5.5.3 Span Formatting | 1 | Example |
| 5.5.4 Vocabulary | 5 | Exercise |
| 5.5.5 Text Decoration | 5 | Exercise |
| 5.5.6 Career Site: Style Special Pieces | 5 | Exercise |
| 5.6 Semantic Tags | Lesson | |
| 5.6.1 Semantic Tags | 5 | Video |
| 5.6.2 Semantic Skeleton | 5 | Example |
| 5.6.3 Section Flowchart Example | 5 | Example |
| 5.6.4 Semantic Article | 5 | Example |
| 5.6.5 Great Quotes | 5 | Exercise |
| 5.6.6 Article of Interest | 5 | Exercise |
| 5.6.7 Career Site: Semantic Tags | 5 | Exercise |
| 5.7 Combining CSS Selectors | Lesson | |
| 5.7.1 Combining CSS Selectors | 1 | Video |
| 5.7.2 Combining CSS Selectors Quiz | 2 | Check for Understanding |
| 5.7.3 More Specific Styling | 1 | Example |
| 5.7.4 Choosing Nested Tags | 5 | Exercise |
| 5.7.5 Highlight the First Item | 5 | Exercise |
| 5.7.6 Mars Helicopter Data | 5 | Exercise |
| 5.8 The Don't Repeat Yourself Principle | Lesson | |
| 5.8.1 Don't Repeat Yourself | 1 | Video |
| 5.8.2 Don't Repeat Yourself Quiz | 2 | Check for Understanding |
| 5.8.3 Styling Multiple Tags | 1 | Example |
| 5.8.4 Style Similar Items with Same Class | 1 | Example |
| 5.8.5 Managing Change | 5 | Exercise |
| 5.8.6 Condense CSS Rules | 5 | Exercise |
| 5.8.7 Why DRY? | 5 | Free Response |
| 5.9 Special Selectors | Lesson | |
| 5.9.1 Special Selectors | 1 | Video |
| 5.9.2 Special Selectors Quiz | 2 | Check for Understanding |
| 5.9.3 Vote For Me | 1 | Example |
| 5.9.4 Vote For Me Pt 2 | 1 | Example |
| 5.9.5 Extend Vote For Me | 5 | Exercise |
| 5.9.6 Special Vendors | 5 | Exercise |
| 5.9.7 Checklist | 5 | Exercise |
| 5.9.8 Career Website: Add Milestones | 5 | Exercise |
| 5.9.9 Special Selectors Badge | 1 | Badge |
| 5.10 Visibility | Lesson | |
| 5.10.1 Visibility | 1 | Video |
| 5.10.2 Visibility Quiz | 2 | Check for Understanding |
| 5.10.3 Display Example | 1 | Example |
| 5.10.4 Fading Text | 1 | Example |
| 5.10.5 Favorite Sea Creature | 5 | Exercise |
| 5.10.6 Caption on Demand | 5 | Exercise |
| 5.11 Reading Documentation | Lesson | |
| 5.11.1 Reading Documentation | 1 | Video |
| 5.11.2 Reading Documentation Quiz | 2 | Check for Understanding |
| 5.11.3 Using Docs: Float | 1 | Example |
| 5.11.4 Using Docs: <blockquote> Tag | 1 | Example |
| 5.11.5 Style the Table | 5 | Exercise |
| 5.11.6 Electric Company | 5 | Exercise |
| 5.11.7 Career Website: Add Pictures | 5 | Exercise |
| 5.12 Using the Inspector | Lesson | |
| 5.12.1 Using the Inspector | 1 | Video |
| 5.12.2 Using the Inspector Tool Quiz | 1 | Check for Understanding |
| 5.12.3 Inspector Quick Start | 1 | Connection |
| 5.12.4 Classes and IDs | 4 | Check for Understanding |
| 5.12.5 Exploring the Art Museum | 4 | Check for Understanding |
| 5.12.6 What's Your Style? | 5 | Quiz |
| 5.13 The Box Model | Lesson | |
| 5.13.1 The Box Model | 1 | Video |
| 5.13.2 The Box Model Quiz | 2 | Check for Understanding |
| 5.13.3 Adding Space Using Margin | 1 | Example |
| 5.13.4 Adding Space Using Padding | 1 | Example |
| 5.13.5 Combining Margin and Padding | 1 | Example |
| 5.13.6 I need some space! | 5 | Exercise |
| 5.13.7 I need some breathing room! | 5 | Exercise |
| 5.13.8 Where is space added? | 5 | Free Response |
| 5.13.9 Measuring Space | 5 | Example |
| 5.13.10 Align Content Side by Side | 5 | Exercise |
| 5.13.11 Career Website: Separate Content | 5 | Exercise |
| 5.13.12 Design with the Box Model | 1 | Connection |
| 5.13.13 Box Badge | 1 | Badge |
| 5.14 Image Manipulation | Lesson | |
| 5.14.1 Image Manipulation | 1 | Video |
| 5.14.2 Image Manipulation Quiz | 2 | Check for Understanding |
| 5.14.3 Grayscale Filter | 1 | Example |
| 5.14.4 Blur Filter | 1 | Example |
| 5.14.5 Hue Rotation | 1 | Example |
| 5.14.6 Invert Filter | 5 | Exercise |
| 5.14.7 Blurred | 5 | Exercise |
| 5.14.8 Hue Rotation Comparisons | 5 | Exercise |
| 5.14.9 Overexposure | 5 | Exercise |
| 5.14.10 Grayscale Art | 5 | Exercise |
| 5.14.11 Worldwide Foods Part 1 | 5 | Exercise |
| 5.14.12 Worldwide Foods Part 2 | 5 | Exercise |
| 5.15 Animation | Lesson | |
| 5.15.1 Animation | 1 | Video |
| 5.15.2 Animation Quiz | 2 | Check for Understanding |
| 5.15.3 Animated Image Filter | 1 | Example |
| 5.15.4 Animated Invert Filter | 5 | Exercise |
| 5.15.5 Album Cover | 5 | Exercise |
| 5.15.6 Worldwide Foods Part 3 | 5 | Exercise |
| 5.16 Interaction | Lesson | |
| 5.16.1 Interaction | 1 | Video |
| 5.16.2 Interaction Quiz | 2 | Check for Understanding |
| 5.16.3 Interactive Image Filter | 1 | Example |
| 5.16.4 Smooth Interactive Image Filter | 1 | Example |
| 5.16.5 Smooth Change on Click | 1 | Example |
| 5.16.6 Button Interaction | 5 | Exercise |
| 5.16.7 Create Your Own Tooltip | 5 | Exercise |
| 5.16.8 Worldwide Foods Part 4 | 5 | Exercise |
| 5.16.9 Career Website: Engage the User | 5 | Exercise |
| 5.16.10 CSS Tricks | 1 | Connection |
| 5.17 Advanced HTML and CSS Quiz | Lesson | |
| 5.17.1 Advanced HTML and CSS Quiz | 15 | Unit Quiz |
| 5.17.2 Advanced HTML and CSS Badge | 1 | Badge |
| Project - Tell a Story | ||
| 6.1 Project: Tell a Story | Lesson | |
| 6.1.1 Real World Example: Infographic | 1 | Connection |
| 6.1.2 Project: Tell a Story | 10 | Challenge |
| 6.1.3 Tell a Story Badge | 1 | Badge |
| Bootstrap | ||
| 7.1 What is Bootstrap? | Lesson | |
| 7.1.1 What is Bootstrap? | 1 | Video |
| 7.1.2 Example Bootstrap Mobile Site | 1 | Example |
| 7.1.3 Real World Bootstrap: OneNYC | 1 | Connection |
| 7.1.4 Responsive vs Unresponsive | 5 | Free Response |
| 7.1.5 Favorite Bootstrap Site | 5 | Free Response |
| 7.2 Getting Started with Bootstrap | Lesson | |
| 7.2.1 Getting Started with Bootstrap | 1 | Video |
| 7.2.2 Getting Started Quiz | 2 | Check for Understanding |
| 7.2.3 First Bootstrap Page | 1 | Example |
| 7.2.4 Container-Fluid Page | 1 | Example |
| 7.2.5 Using the Bootstrap Skeleton | 5 | Exercise |
| 7.2.6 Your First Bootstrap | 5 | Exercise |
| 7.2.7 1. Photo Portfolio | 10 | Challenge |
| 7.2.8 Container Docs | 1 | Connection |
| 7.3 The Bootstrap Grid System | Lesson | |
| 7.3.1 The Grid System | 1 | Video |
| 7.3.2 The Bootstrap Grid Quiz | 2 | Check for Understanding |
| 7.3.3 Grid System Example | 1 | Example |
| 7.3.4 Column Overflow | 1 | Example |
| 7.3.5 Different Device Sizes | 1 | Example |
| 7.3.6 Example Layout | 1 | Example |
| 7.3.7 Realty: Grid System | 1 | Example |
| 7.3.8 Grid Practice | 5 | Exercise |
| 7.3.9 Endangered Animals | 5 | Exercise |
| 7.3.10 2. Photo Portfolio | 10 | Challenge |
| 7.3.11 Grid System Docs | 1 | Connection |
| 7.4 Bootstrap Components | Lesson | |
| 7.4.1 Bootstrap Components | 1 | Video |
| 7.4.2 Bootstrap Components Quiz | 2 | Quiz |
| 7.4.3 Text Formats | 1 | Example |
| 7.4.4 Making Buttons | 1 | Example |
| 7.4.5 Button Groups | 1 | Example |
| 7.4.6 Using Icons | 1 | Example |
| 7.4.7 Realty: Buttons and Page Headers | 1 | Example |
| 7.4.8 Header and Buttons | 5 | Exercise |
| 7.4.9 Icon Buttons | 5 | Exercise |
| 7.4.10 3. Photo Portfolio | 10 | Challenge |
| 7.4.11 Button Docs | 1 | Connection |
| 7.4.12 Icon Docs | 1 | Connection |
| 7.5 More Bootstrap Components | Lesson | |
| 7.5.1 More Bootstrap Components | 1 | Video |
| 7.5.2 More Bootstrap Components Quiz | 2 | Check for Understanding |
| 7.5.3 Thumbnail Skeleton | 1 | Example |
| 7.5.4 Kitten Thumbnails | 1 | Example |
| 7.5.5 Table Skeleton | 1 | Example |
| 7.5.6 Striped Tables | 1 | Example |
| 7.5.7 Realty: Thumbnail Links | 1 | Example |
| 7.5.8 Shoe Shop | 5 | Exercise |
| 7.5.9 Adding Captions | 5 | Exercise |
| 7.5.10 Bootstrap Tables | 5 | Exercise |
| 7.5.11 Favorite TV Shows | 5 | Exercise |
| 7.5.12 Favorite Animals | 5 | Exercise |
| 7.5.13 4. Photo Portfolio | 10 | Challenge |
| 7.5.14 Thumbnail Docs | 1 | Connection |
| 7.5.15 Table Docs | 1 | Connection |
| 7.6 Navigation Bars | Lesson | |
| 7.6.1 Navigation Bars | 1 | Video |
| 7.6.2 Navigation Bars Quiz | 2 | Check for Understanding |
| 7.6.3 Navbar Docs | 1 | Connection |
| 7.6.4 Simple Nav Tabs | 1 | Example |
| 7.6.5 Basic Navbar | 1 | Example |
| 7.6.6 Basic Collapsable Navbar | 1 | Example |
| 7.6.7 Realty: Navbar | 1 | Example |
| 7.6.8 Realty: Collapsable Navbar | 1 | Example |
| 7.6.9 Navigation Links | 5 | Exercise |
| 7.6.10 Navbar Puzzles | 5 | Exercise |
| 7.6.11 Making Navbars | 5 | Exercise |
| 7.6.12 5. Photo Portfolio | 10 | Challenge |
| 7.7 Drop Down Menus | Lesson | |
| 7.7.1 Drop Down Menus | 1 | Video |
| 7.7.2 Drop Down Menus Quiz | 1 | Check for Understanding |
| 7.7.3 Basic Dropdown | 1 | Example |
| 7.7.4 Realty: Dropdown | 1 | Example |
| 7.7.5 World Traveller | 5 | Exercise |
| 7.7.6 Which Animal? | 5 | Exercise |
| 7.7.7 Dropdown Nav | 5 | Exercise |
| 7.7.8 6. Photo Portfolio | 10 | Challenge |
| 7.7.9 Drop Down Menu Docs | 1 | Connection |
| 7.7.10 Menu Badge | 1 | Badge |
| 7.8 Using Bootstrap Examples | Lesson | |
| 7.8.1 Using Bootstrap Examples | 1 | Video |
| 7.8.2 Using Bootstrap Examples Quiz | 2 | Check for Understanding |
| 7.8.3 Bootstrap Starter Templates | 1 | Connection |
| 7.8.4 Realty: Carousel | 1 | Example |
| 7.8.5 Blog Bootstrap Template | 1 | Example |
| 7.8.6 Carousel Bootstrap Template | 1 | Example |
| 7.8.7 Dashboard Bootstrap Template | 1 | Example |
| 7.8.8 Cover Bootstrap Template | 1 | Example |
| 7.8.9 Cover Site From Template | 1 | Example |
| 7.8.10 Modify the Template | 10 | Challenge |
| 7.8.11 7. Photo Portfolio | 10 | Challenge |
| 7.9 Bootstrap Challenges | Lesson | |
| 7.9.1 Sticky Navbar | 10 | Challenge |
| 7.9.2 Adding Interactions | 10 | Challenge |
| 7.9.3 Team Page | 10 | Challenge |
| 7.9.4 8. Photo Portfolio | 10 | Challenge |
| 7.10 Bootstrap Quiz | Lesson | |
| 7.10.1 Bootstrap Quiz | 10 | Unit Quiz |
| 7.10.2 Bootstrap Badge | 1 | Badge |
| Bootstrap Project | ||
| 8.1 Bootstrap Project | Lesson | |
| 8.1.1 Example Mobile Responsive Website | 1 | Example |
| 8.1.2 Real World Bootstrap: University of Washington | 1 | Connection |
| 8.1.3 Real World Bootstrap: Maple | 1 | Connection |
| 8.1.4 Project: Create a Mobile Responsive Website | 10 | Challenge |
| 8.1.5 Bootstrap Project Badge | 1 | Badge |
| Designing User Interfaces | ||
| 9.1 Intro to Design Thinking | Lesson | |
| 9.1.1 Intro to Design Thinking | 1 | Video |
| 9.1.2 Intro to Design Thinking | 2 | Check for Understanding |
| 9.1.3 User Interface Scavenger Hunt | 5 | Free Response |
| 9.1.4 Case Study: Helping Blind People See | 1 | Connection |
| 9.1.5 Case Study Responses | 5 | Free Response |
| 9.1.6 Crash Course: Empathize | 1 | Connection |
| 9.1.7 Empathize Notes | 5 | Free Response |
| 9.1.8 Crash Course: Define | 1 | Connection |
| 9.1.9 Problem Statement | 5 | Free Response |
| 9.1.10 Crash Course: Ideate | 1 | Connection |
| 9.1.11 Ideate Notes | 5 | Free Response |
| 9.1.12 Crash Course: Prototype and Test | 1 | Connection |
| 9.1.13 Testing Notes | 5 | Free Response |
| 9.1.14 Topic Brainstorm | 5 | Free Response |
| 9.1.15 Narrowing Down Topics | 5 | Free Response |
| 9.2 Empathy | Lesson | |
| 9.2.1 Empathy | 1 | Video |
| 9.2.2 Empathy Quiz | 2 | Check for Understanding |
| 9.2.3 A Cafeteria Designed for Me | 1 | Connection |
| 9.2.4 A Cafeteria Designed for Me | 5 | Free Response |
| 9.2.5 Accessibility | 1 | Connection |
| 9.2.6 Accessibility Tips | 5 | Free Response |
| 9.2.7 Inaccessible Site Review | 5 | Example |
| 9.2.8 Improve Site's Accessibility | 5 | Exercise |
| 9.2.9 How to Interview | 1 | Connection |
| 9.2.10 How to Interview | 5 | Free Response |
| 9.2.11 User Interview | 5 | Free Response |
| 9.3 Define | Lesson | |
| 9.3.1 Define | 1 | Video |
| 9.3.2 Define Quiz | 2 | Check for Understanding |
| 9.3.3 Make a Composite Character Profile | 1 | Connection |
| 9.3.4 Composite Character Profile | 5 | Free Response |
| 9.3.5 Point-of-View Statement Brainstorm | 5 | Free Response |
| 9.3.6 POV Statement | 5 | Free Response |
| 9.4 Ideate | Lesson | |
| 9.4.1 Ideate | 1 | Video |
| 9.4.2 Ideate Quiz | 1 | Check for Understanding |
| 9.4.3 Stoke | 1 | Connection |
| 9.4.4 Get Stoked | 5 | Free Response |
| 9.4.5 Brainstorming Tips | 1 | Connection |
| 9.4.6 Ideate! | 5 | Free Response |
| 9.5 Prototype | Lesson | |
| 9.5.1 Prototype | 1 | Video |
| 9.5.2 Prototype Quiz | 1 | Check for Understanding |
| 9.5.3 Brainstorm Selection | 1 | Connection |
| 9.5.4 Harvest Ideas from the Brainstorm | 5 | Free Response |
| 9.5.5 Wizard of Oz Prototyping | 1 | Connection |
| 9.5.6 Example Wizard of Oz Paper Prototype | 1 | Connection |
| 9.5.7 Make Your Paper Prototypes! | 5 | Free Response |
| 9.6 Test | Lesson | |
| 9.6.1 Test | 1 | Video |
| 9.6.2 Testing Quiz | 1 | Check for Understanding |
| 9.6.3 Testing with Users | 1 | Connection |
| 9.6.4 Example: How to User Test | 1 | Connection |
| 9.6.5 How to User Test Responses | 5 | Free Response |
| 9.6.6 Example: How NOT to User Test | 1 | Connection |
| 9.6.7 How NOT to User Test Responses | 5 | Free Response |
| 9.6.8 Test Prototype 1 | 5 | Free Response |
| 9.6.9 Test Prototype 2 | 5 | Free Response |
| 9.6.10 Improve Your Prototype | 5 | Free Response |
| 9.7 Designing User Interfaces Quiz | Lesson | |
| 9.7.1 Designing User Interfaces Quiz | 10 | Unit Quiz |
| 9.7.2 Designing User Interfaces Badge | 1 | Badge |
| Final Project | ||
| 10.1 Final Web Design Project | Lesson | |
| 10.1.1 Milestones | 5 | Free Response |
| 10.1.2 Final Project | 10 | Challenge |
| 10.1.3 Final Project Badge | 1 | Badge |
| 10.1.4 Web Design Completed | 1 | Badge |
| Midterm | ||
| 11.1 Midterm | Lesson | |
| 11.1.1 Midterm | 15 | Quiz |
| The Internet | ||
| 12.1 Getting Started - The Internet | Lesson | |
| 12.1.1 Welcome to the Internet | 1 | Video |
| 12.1.2 Welcome to the Internet Quiz | 1 | Check for Understanding |
| 12.1.3 The Internet and You | 5 | Free Response |
| 12.2 Internet Hardware | Lesson | |
| 12.2.1 Hardware of the Internet | 1 | Video |
| 12.2.2 Internet Hardware Quiz | 3 | Check for Understanding |
| 12.2.3 The Internet is in the Ocean | 1 | Connection |
| 12.3 Internet Addresses | Lesson | |
| 12.3.1 Internet Addresses | 1 | Video |
| 12.3.2 Internet Addresses Quiz | 1 | Check for Understanding |
| 12.3.3 The Need for Addresses | 5 | Free Response |
| 12.3.4 4-bit Addresses | 1 | Check for Understanding |
| 12.3.5 IPv4 vs IPv6 | 5 | Free Response |
| 12.4 DNS | Lesson | |
| 12.4.1 DNS | 1 | Video |
| 12.4.2 DNS Quiz | 2 | Check for Understanding |
| 12.4.3 How Does DNS Work? | 1 | Connection |
| 12.4.4 How Does DNS Work? | 5 | Free Response |
| 12.5 Routing | Lesson | |
| 12.5.1 Routing | 1 | Video |
| 12.5.2 Routing Quiz | 1 | Check for Understanding |
| 12.5.3 Redundancy | 5 | Free Response |
| 12.5.4 Route Tracing | 5 | Traceroute |
| 12.6 Packets and Protocols | Lesson | |
| 12.6.1 Packets and Protocols | 1 | Video |
| 12.6.2 Packets and Protocols Quiz | 1 | Check for Understanding |
| 12.6.3 Passing Notes | 10 | Resource |
| 12.6.4 How the Internet Works | 1 | Connection |
| 12.6.5 The Story of the Internet | 5 | Free Response |
| 12.7 The Impact of the Internet | Lesson | |
| 12.7.1 The Impact of the Internet | 1 | Video |
| 12.7.2 The Impact of the Internet Quiz | 2 | Check for Understanding |
| 12.7.3 Pokemon Go: Unintended Effects | 1 | Connection |
| 12.8 The Internet Quiz | Lesson | |
| 12.8.1 The Internet Quiz | 15 | Unit Quiz |
| Design Research Project | ||
| 13.1 Design Research Project | Lesson | |
| 13.1.1 Research a Design Concept | 5 | Free Response |
| 13.1.2 Explain Your Design Concept | 5 | Free Response |
| 13.1.3 Create an Example | 10 | Challenge |
| 13.1.4 Present Your Design Concept | 15 | Presentation |
| Web Design Level 1 Certification Practice | ||
| 14.1 Practice #1: Intro to the Internet | Lesson | |
| 14.1.1 Quiz: Intro to the Internet | 5 | Quiz |
| 14.1.2 Practice #1 Reflection | 5 | Notes |
| 14.2 Practice #2: HTML | Lesson | |
| 14.2.1 Quiz: HTML | 12 | Quiz |
| 14.2.2 Practice#2 Reflection | 5 | Notes |
| 14.3 Practice #3: CSS | Lesson | |
| 14.3.1 Quiz: CSS | 13 | Quiz |
| 14.3.2 Practice #3 Reflection | 5 | Notes |
| 14.4 Practice #4: Advanced HTML & CSS | Lesson | |
| 14.4.1 Quiz: Advanced HTML & CSS | 10 | Quiz |
| 14.4.2 Practice #4 Reflection | 5 | Notes |
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
