Please enable JavaScript to use CodeHS

Web Design (Matisse) - 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 Web Design and Web Development
    8. Connection 1.1.7 Meet a Web Developer
    9. 1.2 The Internet

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

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

    26. Video 1.4.1 Viewing Websites
    27. Check for Understanding 1.4.2 Viewing Websites Quiz
    28. Free Response 1.4.3 Explaining a URL
    29. 1.5 Getting Started - What is the Web? Quiz

    30. Unit Quiz 1.5.1 Getting Started - What is the Web? Quiz
    31. 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. Exercise 2.2.5 The <title> Tag
    12. Exercise 2.2.6 Your First HTML Page
    13. 2.3 Formatting Text

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

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

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

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

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

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

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

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

    73. Unit Quiz 2.11.1 HTML - Structuring Websites Quiz
    74. 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

    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 Tweet
    20. Exercise 5.3.7 Embed a Video
    21. Exercise 5.3.8 Career Site: Include Outside Information
    22. 5.4 Divs

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

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

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

    46. Video 5.7.1 Combining CSS Selectors
    47. Check for Understanding 5.7.2 Combining CSS Selectors Quiz
    48. Example 5.7.3 More Specific Styling
    49. Exercise 5.7.4 Choosing Nested Tags
    50. Exercise 5.7.5 Highlight the First Item
    51. Exercise 5.7.6 Calorie Recommendations
    52. 5.8 The Don't Repeat Yourself Principle

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

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

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

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

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

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

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

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

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

    138. Unit Quiz 5.17.1 Advanced HTML and CSS Quiz
    139. Badge 5.17.2 Advanced HTML and CSS Badge
  6. Designing User Interfaces

    1. 6.1 Intro to Design Thinking

    2. Video 6.1.1 Intro to Design Thinking
    3. Check for Understanding 6.1.2 Intro to Design Thinking
    4. Free Response 6.1.3 User Interface Scavenger Hunt
    5. Connection 6.1.4 Case Study: Helping Blind People See
    6. Free Response 6.1.5 Case Study Responses
    7. Connection 6.1.6 Crash Course: Empathize
    8. Free Response 6.1.7 Empathize Notes
    9. Connection 6.1.8 Crash Course: Define
    10. Free Response 6.1.9 Problem Statement
    11. Connection 6.1.10 Crash Course: Ideate
    12. Free Response 6.1.11 Ideate Notes
    13. Connection 6.1.12 Crash Course: Prototype and Test
    14. Free Response 6.1.13 Testing Notes
    15. Free Response 6.1.14 Topic Brainstorm
    16. Free Response 6.1.15 Narrowing Down Topics
    17. 6.2 Empathy

    18. Video 6.2.1 Empathy
    19. Check for Understanding 6.2.2 Empathy Quiz
    20. Connection 6.2.3 A Cafeteria Designed for Me
    21. Free Response 6.2.4 A Cafeteria Designed for Me
    22. Connection 6.2.5 Accessibility
    23. Free Response 6.2.6 Accessibility Tips
    24. Example 6.2.7 Inaccessible Site Review
    25. Exercise 6.2.8 Improve Site's Accessibility
    26. Connection 6.2.9 How to Interview
    27. Free Response 6.2.10 How to Interview
    28. Free Response 6.2.11 User Interview
    29. 6.3 Define

    30. Video 6.3.1 Define
    31. Check for Understanding 6.3.2 Define Quiz
    32. Connection 6.3.3 Make a Composite Character Profile
    33. Free Response 6.3.4 Composite Character Profile
    34. Free Response 6.3.5 Point-of-View Statement Brainstorm
    35. Free Response 6.3.6 POV Statement
    36. 6.4 Ideate

    37. Video 6.4.1 Ideate
    38. Check for Understanding 6.4.2 Ideate Quiz
    39. Connection 6.4.3 Stoke
    40. Free Response 6.4.4 Get Stoked
    41. Connection 6.4.5 Brainstorming Tips
    42. Free Response 6.4.6 Ideate!
    43. 6.5 Prototype

    44. Video 6.5.1 Prototype
    45. Check for Understanding 6.5.2 Prototype Quiz
    46. Connection 6.5.3 Brainstorm Selection
    47. Free Response 6.5.4 Harvest Ideas from the Brainstorm
    48. Connection 6.5.5 Wizard of Oz Prototyping
    49. Connection 6.5.6 Example Wizard of Oz Paper Prototype
    50. Free Response 6.5.7 Make Your Paper Prototypes!
    51. 6.6 Test

    52. Video 6.6.1 Test
    53. Check for Understanding 6.6.2 Testing Quiz
    54. Connection 6.6.3 Testing with Users
    55. Connection 6.6.4 Example: How to User Test
    56. Free Response 6.6.5 How to User Test Responses
    57. Connection 6.6.6 Example: How NOT to User Test
    58. Free Response 6.6.7 How NOT to User Test Responses
    59. Free Response 6.6.8 Test Prototype 1
    60. Free Response 6.6.9 Test Prototype 2
    61. Free Response 6.6.10 Improve Your Prototype
    62. 6.7 Designing User Interfaces Quiz

    63. Unit Quiz 6.7.1 Designing User Interfaces Quiz
    64. Badge 6.7.2 Designing User Interfaces Badge
  7. Final Project

    1. 7.1 Final Web Design Project

    2. Free Response 7.1.1 Milestones
    3. Challenge 7.1.2 Final Project
    4. Badge 7.1.3 Final Project Badge
    5. Badge 7.1.4 Web Design Completed
  8. The Internet

    1. 8.1 Getting Started - The Internet

    2. Video 8.1.1 Welcome to the Internet
    3. Check for Understanding 8.1.2 Welcome to the Internet Quiz
    4. Free Response 8.1.3 The Internet and You
    5. 8.2 Internet Hardware

    6. Video 8.2.1 Hardware of the Internet
    7. Check for Understanding 8.2.2 Internet Hardware Quiz
    8. Connection 8.2.3 The Internet is in the Ocean
    9. 8.3 Internet Addresses

    10. Video 8.3.1 Internet Addresses
    11. Check for Understanding 8.3.2 Internet Addresses Quiz
    12. Free Response 8.3.3 The Need for Addresses
    13. Check for Understanding 8.3.4 4-bit Addresses
    14. Free Response 8.3.5 IPv4 vs IPv6
    15. 8.4 DNS

    16. Video 8.4.1 DNS
    17. Check for Understanding 8.4.2 DNS Quiz
    18. Connection 8.4.3 How Does DNS Work?
    19. Free Response 8.4.4 How Does DNS Work?
    20. 8.5 Routing

    21. Video 8.5.1 Routing
    22. Check for Understanding 8.5.2 Routing Quiz
    23. Free Response 8.5.3 Redundancy
    24. Traceroute 8.5.4 Route Tracing
    25. 8.6 Packets and Protocols

    26. Video 8.6.1 Packets and Protocols
    27. Check for Understanding 8.6.2 Packets and Protocols Quiz
    28. Resource 8.6.3 Passing Notes
    29. Connection 8.6.4 How the Internet Works
    30. Free Response 8.6.5 The Story of the Internet
    31. 8.7 The Impact of the Internet

    32. Video 8.7.1 The Impact of the Internet
    33. Check for Understanding 8.7.2 The Impact of the Internet Quiz
    34. Connection 8.7.3 Pokemon Go: Unintended Effects
    35. 8.8 The Internet Quiz

    36. Unit Quiz 8.8.1 The Internet Quiz
  9. Design Research Project

    1. 9.1 Design Research Project

    2. Free Response 9.1.1 Research a Design Concept
    3. Free Response 9.1.2 Explain Your Design Concept
    4. Challenge 9.1.3 Create an Example
    5. Presentation 9.1.4 Present Your Design Concept