Please enable JavaScript to use CodeHS

Web Design (Picasso) - Outline

  1. Getting Started - What is the Web?

    1. 1.1 Welcome

    2. Video 1.1.1 Welcome to Web Design
    3. Check for Understanding 1.1.2 Welcome to Web Design Quiz
    4. Free Response 1.1.3 Websites in Your Life
    5. Free Response 1.1.4 What is Web Design?
    6. Free Response 1.1.5 Course Goals
    7. Connection 1.1.6 Meet a Web Developer

    8. 1.2 The Internet

    9. Video 1.2.1 What is The Internet?
    10. Check for Understanding 1.2.2 What is the Internet? Quiz
    11. Connection 1.2.3 Internet Censorship: Google's Dragonfly Project
    12. Free Response 1.2.4 Internet Censorship Reflection
    13. Connection 1.2.5 The Right to Remain Anonymous?
    14. Free Response 1.2.6 Anonymity Reflection
    15. Video 1.2.7 How does the Internet Work?
    16. Check for Understanding 1.2.8 How does the Internet Work? Quiz
    17. Free Response 1.2.9 Internet Protocols

    18. 1.3 Browsers

    19. Video 1.3.1 Browsers
    20. Check for Understanding 1.3.2 Browser Quiz
    21. Connection 1.3.3 What is a Browser?
    22. Connection 1.3.4 Your Browser
    23. Free Response 1.3.5 Explaining a Browser

    24. 1.4 Viewing Websites

    25. Video 1.4.1 Viewing Websites
    26. Check for Understanding 1.4.2 Viewing Websites Quiz
    27. Free Response 1.4.3 Explaining a URL

    28. 1.5 Getting Started - What is the Web? Quiz

    29. Unit Quiz 1.5.1 Getting Started - What is the Web? Quiz
    30. Badge 1.5.2 Getting Started Badge

  2. HTML - Structuring Websites

    1. 2.1 Introduction to HTML

    2. Video 2.1.1 Introduction to HTML
    3. Check for Understanding 2.1.2 Introduction to HTML Quiz
    4. Example 2.1.3 Our First HTML Page
    5. Exercise 2.1.4 Say Hello!

    6. 2.2 Structure of an HTML Page

    7. Video 2.2.1 Structure of an HTML Page
    8. Check for Understanding 2.2.2 Structure of an HTML Page Quiz
    9. Example 2.2.3 HTML Template
    10. Example 2.2.4 Hello World Page
    11. Example 2.2.5 Using Comments
    12. Exercise 2.2.6 The <title> Tag
    13. Exercise 2.2.7 Your First HTML Page

    14. 2.3 Formatting Text

    15. Video 2.3.1 Formatting Text
    16. Check for Understanding 2.3.2 Formatting Text Quiz
    17. Example 2.3.3 Dictionary
    18. Exercise 2.3.4 Word Definitions
    19. Exercise 2.3.5 Pet Names
    20. Exercise 2.3.6 Call of the Wild
    21. Badge 2.3.7 Formatting Badge

    22. 2.4 Links

    23. Video 2.4.1 Links
    24. Check for Understanding 2.4.2 Links Quiz
    25. Example 2.4.3 The <a> Tag
    26. Exercise 2.4.4 Bookmarks
    27. Exercise 2.4.5 Encyclopedias

    28. 2.5 Images

    29. Video 2.5.1 Images
    30. Check for Understanding 2.5.2 Images Quiz
    31. Example 2.5.3 The <img> Tag
    32. Example 2.5.4 Building the CodeHS Homepage
    33. Exercise 2.5.5 Collage on a Theme
    34. Exercise 2.5.6 Linking an Image
    35. Exercise 2.5.7 National Parks

    36. 2.6 Copyright

    37. Video 2.6.1 Copyright
    38. Check for Understanding 2.6.2 Copyright Quiz
    39. Example 2.6.3 Citing Sources Example
    40. Connection 2.6.4 Exploring Creative Commons
    41. Free Response 2.6.5 Response: Creative Commons
    42. Free Response 2.6.6 Finding Images
    43. Exercise 2.6.7 Make a Collage
    44. Free Response 2.6.8 Why Copyright is Important

    45. 2.7 HTML Lists

    46. Video 2.7.1 HTML Lists
    47. Check for Understanding 2.7.2 HTML Lists Quiz
    48. Example 2.7.3 Grocery Shopping
    49. Exercise 2.7.4 Class Planning
    50. Exercise 2.7.5 Dream Destinations
    51. Exercise 2.7.6 Vacation Guides

    52. 2.8 HTML Tables

    53. Video 2.8.1 HTML Tables
    54. Check for Understanding 2.8.2 HTML Tables Quiz
    55. Example 2.8.3 Address Book
    56. Exercise 2.8.4 National Sports
    57. Exercise 2.8.5 Table of Favorites

    58. 2.9 HTML Styling

    59. Video 2.9.1 HTML Styling
    60. Check for Understanding 2.9.2 HTML Styling Quiz
    61. Example 2.9.3 Stylish Address Book
    62. Exercise 2.9.4 Background Colors
    63. Exercise 2.9.5 Style Your Class List
    64. Badge 2.9.6 Styling Badge

    65. 2.10 HTML Colors

    66. Video 2.10.1 HTML Colors
    67. Check for Understanding 2.10.2 HTML Colors Quiz
    68. Example 2.10.3 HTML Colors Examples
    69. Exercise 2.10.4 Create Your Own Color
    70. Exercise 2.10.5 Gradients
    71. Connection 2.10.6 Color Wheel
    72. Exercise 2.10.7 Using Good Colors

    73. 2.11 HTML - Structuring Websites Quiz

    74. Unit Quiz 2.11.1 HTML - Structuring Websites Quiz
    75. Badge 2.11.2 HTML Badge

  3. CSS - Styling Websites

    1. 3.1 Introduction to CSS

    2. Video 3.1.1 Introduction to CSS
    3. Check for Understanding 3.1.2 Introduction to CSS Quiz
    4. Example 3.1.3 Styling your H1s
    5. Exercise 3.1.4 First style with CSS
    6. Exercise 3.1.5 List Styling
    7. Exercise 3.1.6 Endangered Animals: Skeleton

    8. 3.2 CSS Select by Tag

    9. Video 3.2.1 CSS Select by Tag
    10. Check for Understanding 3.2.2 CSS Select by Tag Quiz
    11. Example 3.2.3 Rainbow
    12. Example 3.2.4 Puppy Styling
    13. Exercise 3.2.5 Set List
    14. Exercise 3.2.6 Your Appliance Recommendations
    15. Exercise 3.2.7 Endangered Animals: Style the Headers

    16. 3.3 CSS Select by Class

    17. Video 3.3.1 CSS Select by Class
    18. Check for Understanding 3.3.2 CSS Select by Class Quiz
    19. Example 3.3.3 Simple Checkerboard
    20. Exercise 3.3.4 Swim Meet
    21. Exercise 3.3.5 Favorite Things
    22. Exercise 3.3.6 Endangered Animals: Add Color Coding

    23. 3.4 CSS Select by ID

    24. Video 3.4.1 CSS Select by ID
    25. Check for Understanding 3.4.2 CSS Select by ID Quiz
    26. Example 3.4.3 Logo
    27. Exercise 3.4.4 Must Do Today!
    28. Exercise 3.4.5 Lomeli's Menu
    29. Exercise 3.4.6 Endangered Animals: Add Pictures
    30. Badge 3.4.7 Selector Badge

    31. 3.5 The Cascade

    32. Video 3.5.1 The Cascade
    33. Check for Understanding 3.5.2 The Cascade Quiz
    34. Example 3.5.3 Using Importance
    35. Example 3.5.4 Order of Precedence
    36. Exercise 3.5.5 We Really Like Dairy
    37. Exercise 3.5.6 Style the Table

    38. 3.6 CSS - Styling Websites Quiz

    39. Unit Quiz 3.6.1 CSS - Styling Websites Quiz
    40. Badge 3.6.2 CSS Badge

  4. Project - Create Your Homepage

    1. 4.1 Homepage: Your First Website

    2. Example 4.1.1 Example Homepage
    3. Connection 4.1.2 Real World Homepage
    4. Challenge 4.1.3 Set Up Your codehs.me Website
    5. Challenge 4.1.4 Create Your Homepage
    6. Badge 4.1.5 Create Your Homepage Badge

  5. Advanced HTML and CSS

    1. 5.1 Getting Started - Advanced HTML and CSS - Update

    2. Video 5.1.1 Getting Started
    3. Example 5.1.2 Example: Image Filters
    4. Example 5.1.3 Example: Animations
    5. Example 5.1.4 Example: Interactions

    6. 5.2 Multi-file Websites

    7. Video 5.2.1 Splitting Your Site into Files
    8. Check for Understanding 5.2.2 Splitting Your Site into Files Quiz
    9. Example 5.2.3 Multipage Site Example
    10. Exercise 5.2.4 Add a Style Sheet
    11. Exercise 5.2.5 Dividing the Site
    12. Exercise 5.2.6 Career Site: Creating Structure

    13. 5.3 Embedding iframes

    14. Video 5.3.1 Embedding iframes
    15. Check for Understanding 5.3.2 Embedding iFrames Quiz
    16. Example 5.3.3 Embedding CodeHS Program
    17. Example 5.3.4 Embedding a Map
    18. Exercise 5.3.5 Embedding a Website
    19. Exercise 5.3.6 Embed a Video
    20. Exercise 5.3.7 Career Site: Include Outside Information

    21. 5.4 Divs

    22. Video 5.4.1 Divs
    23. Check for Understanding 5.4.2 Divs Quiz
    24. Example 5.4.3 Divvying up the Site
    25. Exercise 5.4.4 Quotes
    26. Exercise 5.4.5 Flags
    27. Exercise 5.4.6 Career Site: Separate the Content
    28. Badge 5.4.7 Div Badge

    29. 5.5 Spans

    30. Video 5.5.1 Spans
    31. Check for Understanding 5.5.2 Spans Quiz
    32. Example 5.5.3 Span Formatting
    33. Exercise 5.5.4 Vocabulary
    34. Exercise 5.5.5 Text Decoration
    35. Exercise 5.5.6 Career Site: Style Special Pieces

    36. 5.6 Semantic Tags

    37. Video 5.6.1 Semantic Tags
    38. Example 5.6.2 Semantic Skeleton
    39. Example 5.6.3 Section Flowchart Example
    40. Example 5.6.4 Semantic Article
    41. Exercise 5.6.5 Great Quotes
    42. Exercise 5.6.6 Article of Interest
    43. Exercise 5.6.7 Career Site: Semantic Tags

    44. 5.7 Combining CSS Selectors

    45. Video 5.7.1 Combining CSS Selectors
    46. Check for Understanding 5.7.2 Combining CSS Selectors Quiz
    47. Example 5.7.3 More Specific Styling
    48. Exercise 5.7.4 Choosing Nested Tags
    49. Exercise 5.7.5 Highlight the First Item
    50. Exercise 5.7.6 Mars Helicopter Data

    51. 5.8 The Don't Repeat Yourself Principle

    52. Video 5.8.1 Don't Repeat Yourself
    53. Check for Understanding 5.8.2 Don't Repeat Yourself Quiz
    54. Example 5.8.3 Styling Multiple Tags
    55. Example 5.8.4 Style Similar Items with Same Class
    56. Exercise 5.8.5 Managing Change
    57. Exercise 5.8.6 Condense CSS Rules
    58. Free Response 5.8.7 Why DRY?

    59. 5.9 Special Selectors

    60. Video 5.9.1 Special Selectors
    61. Check for Understanding 5.9.2 Special Selectors Quiz
    62. Example 5.9.3 Vote For Me
    63. Example 5.9.4 Vote For Me Pt 2
    64. Exercise 5.9.5 Extend Vote For Me
    65. Exercise 5.9.6 Special Vendors
    66. Exercise 5.9.7 Checklist
    67. Exercise 5.9.8 Career Website: Add Milestones
    68. Badge 5.9.9 Special Selectors Badge

    69. 5.10 Visibility

    70. Video 5.10.1 Visibility
    71. Check for Understanding 5.10.2 Visibility Quiz
    72. Example 5.10.3 Display Example
    73. Example 5.10.4 Fading Text
    74. Exercise 5.10.5 Favorite Sea Creature
    75. Exercise 5.10.6 Caption on Demand

    76. 5.11 Reading Documentation

    77. Video 5.11.1 Reading Documentation
    78. Check for Understanding 5.11.2 Reading Documentation Quiz
    79. Example 5.11.3 Using Docs: Float
    80. Example 5.11.4 Using Docs: <blockquote> Tag
    81. Exercise 5.11.5 Style the Table
    82. Exercise 5.11.6 Electric Company
    83. Exercise 5.11.7 Career Website: Add Pictures

    84. 5.12 Using the Inspector

    85. Video 5.12.1 Using the Inspector
    86. Check for Understanding 5.12.2 Using the Inspector Tool Quiz
    87. Connection 5.12.3 Inspector Quick Start
    88. Check for Understanding 5.12.4 Classes and IDs
    89. Check for Understanding 5.12.5 Exploring the Art Museum
    90. Quiz 5.12.6 What's Your Style?

    91. 5.13 The Box Model

    92. Video 5.13.1 The Box Model
    93. Check for Understanding 5.13.2 The Box Model Quiz
    94. Example 5.13.3 Adding Space Using Margin
    95. Example 5.13.4 Adding Space Using Padding
    96. Example 5.13.5 Combining Margin and Padding
    97. Exercise 5.13.6 I need some space!
    98. Exercise 5.13.7 I need some breathing room!
    99. Free Response 5.13.8 Where is space added?
    100. Example 5.13.9 Measuring Space
    101. Exercise 5.13.10 Align Content Side by Side
    102. Exercise 5.13.11 Career Website: Separate Content
    103. Connection 5.13.12 Design with the Box Model
    104. Badge 5.13.13 Box Badge

    105. 5.14 Image Manipulation

    106. Video 5.14.1 Image Manipulation
    107. Check for Understanding 5.14.2 Image Manipulation Quiz
    108. Example 5.14.3 Grayscale Filter
    109. Example 5.14.4 Blur Filter
    110. Example 5.14.5 Hue Rotation
    111. Exercise 5.14.6 Invert Filter
    112. Exercise 5.14.7 Blurred
    113. Exercise 5.14.8 Hue Rotation Comparisons
    114. Exercise 5.14.9 Overexposure
    115. Exercise 5.14.10 Grayscale Art
    116. Exercise 5.14.11 Worldwide Foods Part 1
    117. Exercise 5.14.12 Worldwide Foods Part 2

    118. 5.15 Animation

    119. Video 5.15.1 Animation
    120. Check for Understanding 5.15.2 Animation Quiz
    121. Example 5.15.3 Animated Image Filter
    122. Exercise 5.15.4 Animated Invert Filter
    123. Exercise 5.15.5 Album Cover
    124. Exercise 5.15.6 Worldwide Foods Part 3

    125. 5.16 Interaction

    126. Video 5.16.1 Interaction
    127. Check for Understanding 5.16.2 Interaction Quiz
    128. Example 5.16.3 Interactive Image Filter
    129. Example 5.16.4 Smooth Interactive Image Filter
    130. Example 5.16.5 Smooth Change on Click
    131. Exercise 5.16.6 Button Interaction
    132. Exercise 5.16.7 Create Your Own Tooltip
    133. Exercise 5.16.8 Worldwide Foods Part 4
    134. Exercise 5.16.9 Career Website: Engage the User
    135. Connection 5.16.10 CSS Tricks

    136. 5.17 Advanced HTML and CSS Quiz

    137. Unit Quiz 5.17.1 Advanced HTML and CSS Quiz
    138. Badge 5.17.2 Advanced HTML and CSS Badge

  6. Project - Tell a Story

    1. 6.1 Project: Tell a Story

    2. Connection 6.1.1 Real World Example: Infographic
    3. Challenge 6.1.2 Project: Tell a Story
    4. Badge 6.1.3 Tell a Story Badge

  7. Bootstrap

    1. 7.1 What is Bootstrap?

    2. Video 7.1.1 What is Bootstrap?
    3. Example 7.1.2 Example Bootstrap Mobile Site
    4. Connection 7.1.3 Real World Bootstrap: OneNYC
    5. Free Response 7.1.4 Responsive vs Unresponsive
    6. Free Response 7.1.5 Favorite Bootstrap Site

    7. 7.2 Getting Started with Bootstrap

    8. Video 7.2.1 Getting Started with Bootstrap
    9. Check for Understanding 7.2.2 Getting Started Quiz
    10. Example 7.2.3 First Bootstrap Page
    11. Example 7.2.4 Container-Fluid Page
    12. Exercise 7.2.5 Using the Bootstrap Skeleton
    13. Exercise 7.2.6 Your First Bootstrap
    14. Challenge 7.2.7 1. Photo Portfolio
    15. Connection 7.2.8 Container Docs

    16. 7.3 The Bootstrap Grid System

    17. Video 7.3.1 The Grid System
    18. Check for Understanding 7.3.2 The Bootstrap Grid Quiz
    19. Example 7.3.3 Grid System Example
    20. Example 7.3.4 Column Overflow
    21. Example 7.3.5 Different Device Sizes
    22. Example 7.3.6 Example Layout
    23. Example 7.3.7 Realty: Grid System
    24. Exercise 7.3.8 Grid Practice
    25. Exercise 7.3.9 Endangered Animals
    26. Challenge 7.3.10 2. Photo Portfolio
    27. Connection 7.3.11 Grid System Docs

    28. 7.4 Bootstrap Components

    29. Video 7.4.1 Bootstrap Components
    30. Quiz 7.4.2 Bootstrap Components Quiz
    31. Example 7.4.3 Text Formats
    32. Example 7.4.4 Making Buttons
    33. Example 7.4.5 Button Groups
    34. Example 7.4.6 Using Icons
    35. Example 7.4.7 Realty: Buttons and Page Headers
    36. Exercise 7.4.8 Header and Buttons
    37. Exercise 7.4.9 Icon Buttons
    38. Challenge 7.4.10 3. Photo Portfolio
    39. Connection 7.4.11 Button Docs
    40. Connection 7.4.12 Icon Docs

    41. 7.5 More Bootstrap Components

    42. Video 7.5.1 More Bootstrap Components
    43. Check for Understanding 7.5.2 More Bootstrap Components Quiz
    44. Example 7.5.3 Thumbnail Skeleton
    45. Example 7.5.4 Kitten Thumbnails
    46. Example 7.5.5 Table Skeleton
    47. Example 7.5.6 Striped Tables
    48. Example 7.5.7 Realty: Thumbnail Links
    49. Exercise 7.5.8 Shoe Shop
    50. Exercise 7.5.9 Adding Captions
    51. Exercise 7.5.10 Bootstrap Tables
    52. Exercise 7.5.11 Favorite TV Shows
    53. Exercise 7.5.12 Favorite Animals
    54. Challenge 7.5.13 4. Photo Portfolio
    55. Connection 7.5.14 Thumbnail Docs
    56. Connection 7.5.15 Table Docs

    57. 7.6 Navigation Bars

    58. Video 7.6.1 Navigation Bars
    59. Check for Understanding 7.6.2 Navigation Bars Quiz
    60. Connection 7.6.3 Navbar Docs
    61. Example 7.6.4 Simple Nav Tabs
    62. Example 7.6.5 Basic Navbar
    63. Example 7.6.6 Basic Collapsable Navbar
    64. Example 7.6.7 Realty: Navbar
    65. Example 7.6.8 Realty: Collapsable Navbar
    66. Exercise 7.6.9 Navigation Links
    67. Exercise 7.6.10 Navbar Puzzles
    68. Exercise 7.6.11 Making Navbars
    69. Challenge 7.6.12 5. Photo Portfolio

    70. 7.7 Drop Down Menus

    71. Video 7.7.1 Drop Down Menus
    72. Check for Understanding 7.7.2 Drop Down Menus Quiz
    73. Example 7.7.3 Basic Dropdown
    74. Example 7.7.4 Realty: Dropdown
    75. Exercise 7.7.5 World Traveller
    76. Exercise 7.7.6 Which Animal?
    77. Exercise 7.7.7 Dropdown Nav
    78. Challenge 7.7.8 6. Photo Portfolio
    79. Connection 7.7.9 Drop Down Menu Docs
    80. Badge 7.7.10 Menu Badge

    81. 7.8 Using Bootstrap Examples

    82. Video 7.8.1 Using Bootstrap Examples
    83. Check for Understanding 7.8.2 Using Bootstrap Examples Quiz
    84. Connection 7.8.3 Bootstrap Starter Templates
    85. Example 7.8.4 Realty: Carousel
    86. Example 7.8.5 Blog Bootstrap Template
    87. Example 7.8.6 Carousel Bootstrap Template
    88. Example 7.8.7 Dashboard Bootstrap Template
    89. Example 7.8.8 Cover Bootstrap Template
    90. Example 7.8.9 Cover Site From Template
    91. Challenge 7.8.10 Modify the Template
    92. Challenge 7.8.11 7. Photo Portfolio

    93. 7.9 Bootstrap Challenges

    94. Challenge 7.9.1 Sticky Navbar
    95. Challenge 7.9.2 Adding Interactions
    96. Challenge 7.9.3 Team Page
    97. Challenge 7.9.4 8. Photo Portfolio

    98. 7.10 Bootstrap Quiz

    99. Unit Quiz 7.10.1 Bootstrap Quiz
    100. Badge 7.10.2 Bootstrap Badge

  8. Bootstrap Project

    1. 8.1 Bootstrap Project

    2. Example 8.1.1 Example Mobile Responsive Website
    3. Connection 8.1.2 Real World Bootstrap: University of Washington
    4. Connection 8.1.3 Real World Bootstrap: Maple
    5. Challenge 8.1.4 Project: Create a Mobile Responsive Website
    6. Badge 8.1.5 Bootstrap Project Badge

  9. Designing User Interfaces

    1. 9.1 Intro to Design Thinking

    2. Video 9.1.1 Intro to Design Thinking
    3. Check for Understanding 9.1.2 Intro to Design Thinking
    4. Free Response 9.1.3 User Interface Scavenger Hunt
    5. Connection 9.1.4 Case Study: Helping Blind People See
    6. Free Response 9.1.5 Case Study Responses
    7. Connection 9.1.6 Crash Course: Empathize
    8. Free Response 9.1.7 Empathize Notes
    9. Connection 9.1.8 Crash Course: Define
    10. Free Response 9.1.9 Problem Statement
    11. Connection 9.1.10 Crash Course: Ideate
    12. Free Response 9.1.11 Ideate Notes
    13. Connection 9.1.12 Crash Course: Prototype and Test
    14. Free Response 9.1.13 Testing Notes
    15. Free Response 9.1.14 Topic Brainstorm
    16. Free Response 9.1.15 Narrowing Down Topics

    17. 9.2 Empathy

    18. Video 9.2.1 Empathy
    19. Check for Understanding 9.2.2 Empathy Quiz
    20. Connection 9.2.3 A Cafeteria Designed for Me
    21. Free Response 9.2.4 A Cafeteria Designed for Me
    22. Connection 9.2.5 Accessibility
    23. Free Response 9.2.6 Accessibility Tips
    24. Example 9.2.7 Inaccessible Site Review
    25. Exercise 9.2.8 Improve Site's Accessibility
    26. Connection 9.2.9 How to Interview
    27. Free Response 9.2.10 How to Interview
    28. Free Response 9.2.11 User Interview

    29. 9.3 Define

    30. Video 9.3.1 Define
    31. Check for Understanding 9.3.2 Define Quiz
    32. Connection 9.3.3 Make a Composite Character Profile
    33. Free Response 9.3.4 Composite Character Profile
    34. Free Response 9.3.5 Point-of-View Statement Brainstorm
    35. Free Response 9.3.6 POV Statement

    36. 9.4 Ideate

    37. Video 9.4.1 Ideate
    38. Check for Understanding 9.4.2 Ideate Quiz
    39. Connection 9.4.3 Stoke
    40. Free Response 9.4.4 Get Stoked
    41. Connection 9.4.5 Brainstorming Tips
    42. Free Response 9.4.6 Ideate!

    43. 9.5 Prototype

    44. Video 9.5.1 Prototype
    45. Check for Understanding 9.5.2 Prototype Quiz
    46. Connection 9.5.3 Brainstorm Selection
    47. Free Response 9.5.4 Harvest Ideas from the Brainstorm
    48. Connection 9.5.5 Wizard of Oz Prototyping
    49. Connection 9.5.6 Example Wizard of Oz Paper Prototype
    50. Free Response 9.5.7 Make Your Paper Prototypes!

    51. 9.6 Test

    52. Video 9.6.1 Test
    53. Check for Understanding 9.6.2 Testing Quiz
    54. Connection 9.6.3 Testing with Users
    55. Connection 9.6.4 Example: How to User Test
    56. Free Response 9.6.5 How to User Test Responses
    57. Connection 9.6.6 Example: How NOT to User Test
    58. Free Response 9.6.7 How NOT to User Test Responses
    59. Free Response 9.6.8 Test Prototype 1
    60. Free Response 9.6.9 Test Prototype 2
    61. Free Response 9.6.10 Improve Your Prototype

    62. 9.7 Designing User Interfaces Quiz

    63. Unit Quiz 9.7.1 Designing User Interfaces Quiz
    64. Badge 9.7.2 Designing User Interfaces Badge

  10. Final Project

    1. 10.1 Final Web Design Project

    2. Free Response 10.1.1 Milestones
    3. Challenge 10.1.2 Final Project
    4. Badge 10.1.3 Final Project Badge
    5. Badge 10.1.4 Web Design Completed

  11. Midterm

    1. 11.1 Midterm

    2. Quiz 11.1.1 Midterm

  12. The Internet

    1. 12.1 Getting Started - The Internet

    2. Video 12.1.1 Welcome to the Internet
    3. Check for Understanding 12.1.2 Welcome to the Internet Quiz
    4. Free Response 12.1.3 The Internet and You

    5. 12.2 Internet Hardware

    6. Video 12.2.1 Hardware of the Internet
    7. Check for Understanding 12.2.2 Internet Hardware Quiz
    8. Connection 12.2.3 The Internet is in the Ocean

    9. 12.3 Internet Addresses

    10. Video 12.3.1 Internet Addresses
    11. Check for Understanding 12.3.2 Internet Addresses Quiz
    12. Free Response 12.3.3 The Need for Addresses
    13. Check for Understanding 12.3.4 4-bit Addresses
    14. Free Response 12.3.5 IPv4 vs IPv6

    15. 12.4 DNS

    16. Video 12.4.1 DNS
    17. Check for Understanding 12.4.2 DNS Quiz
    18. Connection 12.4.3 How Does DNS Work?
    19. Free Response 12.4.4 How Does DNS Work?

    20. 12.5 Routing

    21. Video 12.5.1 Routing
    22. Check for Understanding 12.5.2 Routing Quiz
    23. Free Response 12.5.3 Redundancy
    24. Traceroute 12.5.4 Route Tracing

    25. 12.6 Packets and Protocols

    26. Video 12.6.1 Packets and Protocols
    27. Check for Understanding 12.6.2 Packets and Protocols Quiz
    28. Resource 12.6.3 Passing Notes
    29. Connection 12.6.4 How the Internet Works
    30. Free Response 12.6.5 The Story of the Internet

    31. 12.7 The Impact of the Internet

    32. Video 12.7.1 The Impact of the Internet
    33. Check for Understanding 12.7.2 The Impact of the Internet Quiz
    34. Connection 12.7.3 Pokemon Go: Unintended Effects

    35. 12.8 The Internet Quiz

    36. Unit Quiz 12.8.1 The Internet Quiz

  13. Design Research Project

    1. 13.1 Design Research Project

    2. Free Response 13.1.1 Research a Design Concept
    3. Free Response 13.1.2 Explain Your Design Concept
    4. Challenge 13.1.3 Create an Example
    5. Presentation 13.1.4 Present Your Design Concept

  14. Web Design Level 1 Certification Practice

    1. 14.1 Practice #1: Intro to the Internet

    2. Quiz 14.1.1 Quiz: Intro to the Internet
    3. Notes 14.1.2 Practice #1 Reflection

    4. 14.2 Practice #2: HTML

    5. Quiz 14.2.1 Quiz: HTML
    6. Notes 14.2.2 Practice#2 Reflection

    7. 14.3 Practice #3: CSS

    8. Quiz 14.3.1 Quiz: CSS
    9. Notes 14.3.2 Practice #3 Reflection

    10. 14.4 Practice #4: Advanced HTML & CSS

    11. Quiz 14.4.1 Quiz: Advanced HTML & CSS
    12. Notes 14.4.2 Practice #4 Reflection