Please enable JavaScript to use CodeHS

Web Design (Monet) - 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. 2.4 Links

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

    26. 2.5 Images

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

    34. 2.6 Copyright

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

    43. 2.7 HTML Lists

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

    50. 2.8 HTML Tables

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

    56. 2.9 HTML Styling

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

    62. 2.10 HTML Colors

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

    70. 2.11 HTML - Structuring Websites Quiz

    71. Unit Quiz 2.11.1 HTML - Structuring Websites Quiz
    72. 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. 3.5 The Cascade

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

    37. 3.6 CSS - Styling Websites Quiz

    38. Unit Quiz 3.6.1 CSS - Styling Websites Quiz
    39. 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
    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. 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 Combining CSS Selectors

    37. Video 5.6.1 Combining CSS Selectors
    38. Check for Understanding 5.6.2 Combining CSS Selectors Quiz
    39. Example 5.6.3 More Specific Styling
    40. Exercise 5.6.4 Choosing Nested Tags
    41. Exercise 5.6.5 Highlight the First Item
    42. Exercise 5.6.6 Calorie Recommendations

    43. 5.7 The Don't Repeat Yourself Principle

    44. Video 5.7.1 Don't Repeat Yourself
    45. Check for Understanding 5.7.2 Don't Repeat Yourself Quiz
    46. Example 5.7.3 Styling Multiple Tags
    47. Example 5.7.4 Style Similar Items with Same Class
    48. Exercise 5.7.5 Managing Change
    49. Exercise 5.7.6 Condense CSS Rules
    50. Free Response 5.7.7 Why DRY?

    51. 5.8 Advanced HTML and CSS Quiz

    52. Quiz 5.8.1 Advanced HTML and CSS Quiz
    53. Badge 5.8.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. Free Response 6.2.7 Accessibility: Designing for ALL
    25. Connection 6.2.8 How to Interview
    26. Free Response 6.2.9 How to Interview
    27. Free Response 6.2.10 User Interview

    28. 6.3 Define

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

    35. 6.4 Ideate

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

    42. 6.5 Prototype

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

    50. 6.6 Test

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

    61. 6.7 Designing User Interfaces Quiz

    62. Unit Quiz 6.7.1 Designing User Interfaces Quiz
    63. Badge 6.7.2 Designing User Interfaces Badge

  7. Final Project

    1. 7.1 Final Web Design Project

    2. Free Response 7.1.1 Brainstorming
    3. Free Response 7.1.2 Milestones
    4. Challenge 7.1.3 Final Project
    5. Badge 7.1.4 Final Project Badge
    6. Badge 7.1.5 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

  10. Bootstrap

    1. 10.1 What is Bootstrap?

    2. Video 10.1.1 What is Bootstrap?
    3. Example 10.1.2 Example Bootstrap Mobile Site
    4. Connection 10.1.3 Real World Bootstrap: OneNYC
    5. Free Response 10.1.4 Responsive vs Unresponsive
    6. Free Response 10.1.5 Favorite Bootstrap Site

    7. 10.2 Getting Started with Bootstrap

    8. Video 10.2.1 Getting Started with Bootstrap
    9. Quiz 10.2.2 Getting Started Quiz
    10. Example 10.2.3 First Bootstrap Page
    11. Example 10.2.4 Container-Fluid Page
    12. Exercise 10.2.5 Using the Bootstrap Skeleton
    13. Exercise 10.2.6 Your First Bootstrap
    14. Challenge 10.2.7 1. Photo Portfolio
    15. Connection 10.2.8 Container Docs

    16. 10.3 Jumbotron Pages

    17. Video 10.3.1 Jumbotron Pages
    18. Quiz 10.3.2 Jumbotron Pages Quiz
    19. Example 10.3.3 First Jumbotron Page
    20. Example 10.3.4 Realty: Jumbotron
    21. Exercise 10.3.5 Your First Jumbotron
    22. Exercise 10.3.6 Add a Jumbotron!
    23. Challenge 10.3.7 2. Photo Portfolio
    24. Connection 10.3.8 Jumbotron Docs

    25. 10.4 The Bootstrap Grid System

    26. Video 10.4.1 The Grid System
    27. Quiz 10.4.2 The Bootstrap Grid Quiz
    28. Example 10.4.3 Grid System Example
    29. Example 10.4.4 Column Overflow
    30. Example 10.4.5 Different Device Sizes
    31. Example 10.4.6 Example Layout
    32. Example 10.4.7 Realty: Grid System
    33. Exercise 10.4.8 Grid Practice
    34. Exercise 10.4.9 Endangered Animals
    35. Challenge 10.4.10 3. Photo Portfolio
    36. Connection 10.4.11 Grid System Docs

    37. 10.5 Bootstrap Components

    38. Video 10.5.1 Bootstrap Components
    39. Quiz 10.5.2 Bootstrap Components Quiz
    40. Example 10.5.3 Page Headers
    41. Example 10.5.4 Making Buttons
    42. Example 10.5.5 Button Groups
    43. Example 10.5.6 Using Glyphicons
    44. Example 10.5.7 Realty: Buttons and Page Headers
    45. Exercise 10.5.8 Header and Buttons
    46. Exercise 10.5.9 Glyphicon Buttons
    47. Challenge 10.5.10 4. Photo Portfolio
    48. Connection 10.5.11 Button Docs
    49. Connection 10.5.12 Glyphicon Docs

    50. 10.6 More Bootstrap Components

    51. Video 10.6.1 More Bootstrap Components
    52. Quiz 10.6.2 More Bootstrap Components Quiz
    53. Example 10.6.3 Thumbnail Skeleton
    54. Example 10.6.4 Kitten Thumbnails
    55. Example 10.6.5 Table Skeleton
    56. Example 10.6.6 Striped Tables
    57. Example 10.6.7 Realty: Thumbnails
    58. Exercise 10.6.8 Shoe Shop
    59. Exercise 10.6.9 Adding Captions
    60. Exercise 10.6.10 Bootstrap Tables
    61. Exercise 10.6.11 Favorite TV Shows
    62. Exercise 10.6.12 Favorite Animals
    63. Challenge 10.6.13 5. Photo Portfolio
    64. Connection 10.6.14 Thumbnail Docs
    65. Connection 10.6.15 Table Docs

    66. 10.7 Navigation Bars

    67. Video 10.7.1 Navigation Bars
    68. Quiz 10.7.2 Navigation Bars Quiz
    69. Example 10.7.3 Simple Nav Tabs
    70. Example 10.7.4 Basic Navbar
    71. Example 10.7.5 Basic Collapsable Navbar
    72. Example 10.7.6 Realty: Navbar
    73. Example 10.7.7 Realty: Collapsable Navbar
    74. Exercise 10.7.8 Navigation Links
    75. Exercise 10.7.9 Navbar Alignment
    76. Exercise 10.7.10 Making Navbars
    77. Challenge 10.7.11 6. Photo Portfolio
    78. Connection 10.7.12 Navbar Docs

    79. 10.8 Drop Down Menus

    80. Video 10.8.1 Drop Down Menus
    81. Quiz 10.8.2 Drop Down Menus Quiz
    82. Example 10.8.3 Basic Dropdown
    83. Example 10.8.4 Realty: Dropdown
    84. Exercise 10.8.5 World Traveller
    85. Exercise 10.8.6 Which Animal?
    86. Exercise 10.8.7 Dropdown Nav
    87. Challenge 10.8.8 7. Photo Portfolio
    88. Connection 10.8.9 Drop Down Menu Docs

    89. 10.9 Using Bootstrap Examples

    90. Video 10.9.1 Using Bootstrap Examples
    91. Quiz 10.9.2 Using Bootstrap Examples Quiz
    92. Connection 10.9.3 Bootstrap Starter Templates
    93. Example 10.9.4 Realty: Carousel
    94. Example 10.9.5 Blog Bootstrap Template
    95. Example 10.9.6 Carousel Bootstrap Template
    96. Example 10.9.7 Dashboard Bootstrap Template
    97. Example 10.9.8 Cover Bootstrap Template
    98. Example 10.9.9 Cover Site From Template
    99. Challenge 10.9.10 Modify the Template
    100. Challenge 10.9.11 8. Photo Portfolio

    101. 10.10 Bootstrap Challenges

    102. Challenge 10.10.1 Sticky Navbar
    103. Challenge 10.10.2 Adding Interactions
    104. Challenge 10.10.3 Team Page
    105. Challenge 10.10.4 9. Photo Portfolio

    106. 10.11 End of Unit Test

    107. Quiz 10.11.1 Bootstrap Unit Test
    108. Badge 10.11.2 Bootstrap Badge