Please enable JavaScript to use CodeHS

Web Design (Deep Copy) - Outline

  1. Getting Started - What is the Web?

    1. 1.1 Welcome

    2. Video 1.1.1 Welcome to Web Design
    3. Quiz 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. Quiz 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. Quiz 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. Quiz 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. Quiz 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. 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. Quiz 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. Quiz 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. Quiz 2.3.1 Formatting Text Quiz
    15. Exercise 2.3.2 Pet Names
    16. Badge 2.3.3 Formatting Badge

    17. 2.4 Links

    18. Video 2.4.1 Links
    19. Quiz 2.4.2 Links Quiz
    20. Example 2.4.3 The <a> Tag
    21. Exercise 2.4.4 Bookmarks
    22. Exercise 2.4.5 Encyclopedias

    23. 2.5 Images

    24. Video 2.5.1 Images
    25. Quiz 2.5.2 Images Quiz
    26. Example 2.5.3 The <img> Tag
    27. Example 2.5.4 Building the CodeHS Homepage
    28. Exercise 2.5.5 Collage on a Theme
    29. Exercise 2.5.6 Linking an Image
    30. Exercise 2.5.7 National Parks

    31. 2.6 Copyright

    32. Video 2.6.1 Copyright
    33. Quiz 2.6.2 Copyright Quiz
    34. Example 2.6.3 Citing Sources Example
    35. Connection 2.6.4 Creative Commons, Pt 1
    36. Free Response 2.6.5 Creative Commons Pt 2
    37. Free Response 2.6.6 Finding Images
    38. Exercise 2.6.7 Make a Collage
    39. Free Response 2.6.8 Why Copyright is Important

    40. 2.7 HTML Lists

    41. Video 2.7.1 HTML Lists
    42. Quiz 2.7.2 HTML Lists Quiz
    43. Example 2.7.3 Grocery Shopping
    44. Exercise 2.7.4 Class Planning
    45. Exercise 2.7.5 Dream Destinations

    46. 2.8 HTML Tables

    47. Video 2.8.1 HTML Tables
    48. Quiz 2.8.2 HTML Tables Quiz
    49. Example 2.8.3 Address Book
    50. Exercise 2.8.4 National Sports
    51. Exercise 2.8.5 Table of Favorites

    52. 2.9 HTML Styling

    53. Video 2.9.1 HTML Styling
    54. Quiz 2.9.2 HTML Styling Quiz
    55. Example 2.9.3 Stylish Address Book
    56. Exercise 2.9.4 Background Colors
    57. Badge 2.9.5 Styling Badge

    58. 2.10 HTML Colors

    59. Video 2.10.1 HTML Colors
    60. Quiz 2.10.2 HTML Colors Quiz
    61. Example 2.10.3 HTML Colors Examples
    62. Exercise 2.10.4 Create Your Own Color
    63. Exercise 2.10.5 Gradients
    64. Connection 2.10.6 Color Wheel
    65. Exercise 2.10.7 Using Good Colors

    66. 2.11 HTML - Structuring Websites Quiz

    67. Quiz 2.11.1 HTML - Structuring Websites Quiz
    68. 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. Quiz 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. Quiz 3.2.2 CSS Select by Tag Quiz
    11. Example 3.2.3 Rainbow
    12. Example 3.2.4 Dog Styling
    13. Exercise 3.2.5 Set List
    14. Exercise 3.2.6 Your Appliance Recommendations

    15. 3.3 CSS Select by Class

    16. Video 3.3.1 CSS Select by Class
    17. Quiz 3.3.2 CSS Select by Class Quiz
    18. Example 3.3.3 Simple Checkerboard
    19. Exercise 3.3.4 Swim Meet

    20. 3.4 CSS Select by ID

    21. Video 3.4.1 CSS Select by ID
    22. Quiz 3.4.2 CSS Select by ID Quiz
    23. Example 3.4.3 Logo
    24. Exercise 3.4.4 Must Do Today!
    25. Exercise 3.4.5 Lomeli's Menu
    26. Badge 3.4.6 Selector Badge

    27. 3.5 The Cascade

    28. Video 3.5.1 The Cascade
    29. Quiz 3.5.2 The Cascade Quiz
    30. Example 3.5.3 Using Importance
    31. Example 3.5.4 Order of Precedence
    32. Exercise 3.5.5 We Really Like Dairy
    33. Exercise 3.5.6 Style the Table

    34. 3.6 CSS - Styling Websites Quiz

    35. Quiz 3.6.1 CSS - Styling Websites Quiz
    36. Badge 3.6.2 CSS Badge

  4. Project - Create Your Homepage

    1. 4.1 Homepage: Your First Website

    2. Connection 4.1.1 Real World Homepage
    3. Challenge 4.1.2 Set Up Your codehs.me Website
    4. Challenge 4.1.3 Create Your Homepage
    5. Badge 4.1.4 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. Example 5.2.2 Multipage Site Example
    9. Exercise 5.2.3 Add a Style Sheet
    10. Exercise 5.2.4 Dividing the Site
    11. Exercise 5.2.5 Career Site: Creating Structure

    12. 5.3 Embedding iframes

    13. Video 5.3.1 Embedding iframes
    14. Quiz 5.3.2 Embedding IFrames Quiz
    15. Example 5.3.3 Embedding CodeHS
    16. Example 5.3.4 Embedding a Map
    17. Exercise 5.3.5 Embedding a Website
    18. Exercise 5.3.6 Embed a Tweet
    19. Exercise 5.3.7 Embed a Video

    20. 5.4 Divs

    21. Video 5.4.1 Divs
    22. Quiz 5.4.2 Divs Quiz
    23. Example 5.4.3 Divvying up the Site
    24. Exercise 5.4.4 Quotes
    25. Exercise 5.4.5 Flags
    26. Badge 5.4.6 Div Badge

    27. 5.5 Spans

    28. Video 5.5.1 Spans
    29. Quiz 5.5.2 Spans Quiz
    30. Example 5.5.3 Span Formatting
    31. Exercise 5.5.4 Vocabulary
    32. Exercise 5.5.5 Text Decoration

    33. 5.6 Combining CSS Selectors

    34. Video 5.6.1 Combining CSS Selectors
    35. Quiz 5.6.2 Combining CSS Selectors Quiz
    36. Exercise 5.6.3 Highlight the First Item
    37. Exercise 5.6.4 Calorie Recommendations

    38. 5.7 The Don't Repeat Yourself Principle

    39. Video 5.7.1 Don't Repeat Yourself
    40. Quiz 5.7.2 Don't Repeat Yourself Quiz
    41. Exercise 5.7.3 Condense CSS Rules

    42. 5.8 Special Selectors

    43. Video 5.8.1 Special Selectors
    44. Quiz 5.8.2 Special Selectors Quiz
    45. Example 5.8.3 Vote For Me
    46. Example 5.8.4 Vote For Me Pt 2
    47. Exercise 5.8.5 Extend Vote For Me
    48. Exercise 5.8.6 Checklist
    49. Badge 5.8.7 Special Selectors Badge

    50. 5.9 Visibility

    51. Video 5.9.1 Visibility
    52. Quiz 5.9.2 Visibility Quiz
    53. Example 5.9.3 Display Example
    54. Example 5.9.4 Fading Text

    55. 5.10 Reading Documentation

    56. Video 5.10.1 Reading Documentation
    57. Quiz 5.10.2 Reading Documentation Quiz
    58. Example 5.10.3 Using Docs: blockquote

    59. 5.11 Using the Inspector

    60. Video 5.11.1 Using the Inspector
    61. Quiz 5.11.2 Using the Inspector Tool Quiz
    62. Connection 5.11.3 Inspector Quick Start
    63. Quiz 5.11.4 Classes and IDs
    64. Quiz 5.11.5 Exploring the Art Museum

    65. 5.12 The Box Model

    66. Quiz 5.12.1 The Box Model Quiz
    67. Exercise 5.12.2 I need some space!
    68. Exercise 5.12.3 I need some breathing room!
    69. Connection 5.12.4 Design with the Box Model
    70. Badge 5.12.5 Box Badge

    71. 5.13 Image Manipulation

    72. Video 5.13.1 Image Manipulation
    73. Quiz 5.13.2 Image Manipulation Quiz
    74. Example 5.13.3 Grayscale Filter
    75. Example 5.13.4 Blur Filter
    76. Example 5.13.5 Hue Rotation
    77. Exercise 5.13.6 Invert Filter
    78. Exercise 5.13.7 Hue Rotation Comparisons
    79. Exercise 5.13.8 Overexposure
    80. Exercise 5.13.9 Grayscale Art

    81. 5.14 Animation

    82. Video 5.14.1 Animation
    83. Quiz 5.14.2 Animation Quiz
    84. Example 5.14.3 Animated Image Filter
    85. Exercise 5.14.4 Animated Invert Filter

    86. 5.15 Interaction

    87. Video 5.15.1 Interaction
    88. Quiz 5.15.2 Interaction Quiz
    89. Example 5.15.3 Interactive Image Filter
    90. Example 5.15.4 Smooth Interactive Image Filter
    91. Example 5.15.5 Smooth Change on Click
    92. Exercise 5.15.6 Button Interaction
    93. Connection 5.15.7 CSS Tricks

    94. 5.16 Advanced HTML and CSS Quiz

    95. Quiz 5.16.1 Advanced HTML and CSS Quiz
    96. Badge 5.16.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. Connection 7.1.2 Real World Bootstrap: OneNYC
    4. Free Response 7.1.3 Responsive vs Unresponsive
    5. Free Response 7.1.4 Favorite Bootstrap Site

    6. 7.2 Getting Started with Bootstrap

    7. Quiz 7.2.1 Getting Started Quiz
    8. Challenge 7.2.2 1. Photo Portfolio

    9. 7.3 The Bootstrap Grid System

    10. Quiz 7.3.1 The Bootstrap Grid Quiz
    11. Challenge 7.3.2 2. Photo Portfolio
    12. Challenge 7.3.3 3. Photo Portfolio
    13. Connection 7.3.4 Grid System Docs

    14. 7.4 Bootstrap Components

    15. Challenge 7.4.1 4. Photo Portfolio

    16. 7.5 More Bootstrap Components

    17. Quiz 7.5.1 More Bootstrap Components Quiz
    18. Example 7.5.2 Thumbnail Skeleton
    19. Example 7.5.3 Kitten Thumbnails
    20. Example 7.5.4 Table Skeleton
    21. Example 7.5.5 Striped Tables
    22. Example 7.5.6 Realty: Thumbnails
    23. Exercise 7.5.7 Shoe Shop
    24. Exercise 7.5.8 Adding Captions
    25. Exercise 7.5.9 Bootstrap Tables
    26. Exercise 7.5.10 Favorite TV Shows
    27. Exercise 7.5.11 Favorite Animals
    28. Challenge 7.5.12 5. Photo Portfolio
    29. Connection 7.5.13 Thumbnail Docs
    30. Connection 7.5.14 Table Docs

    31. 7.6 Navigation Bars

    32. Quiz 7.6.1 Navigation Bars Quiz
    33. Connection 7.6.2 Navbar Docs
    34. Example 7.6.3 Simple Nav Tabs
    35. Example 7.6.4 Basic Navbar
    36. Example 7.6.5 Basic Collapsable Navbar
    37. Example 7.6.6 Realty: Navbar
    38. Example 7.6.7 Realty: Collapsable Navbar
    39. Exercise 7.6.8 Navigation Links
    40. Exercise 7.6.9 Navbar Alignment
    41. Exercise 7.6.10 Making Navbars
    42. Challenge 7.6.11 6. Photo Portfolio

    43. 7.7 Drop Down Menus

    44. Quiz 7.7.1 Drop Down Menus Quiz
    45. Example 7.7.2 Basic Dropdown
    46. Example 7.7.3 Realty: Dropdown
    47. Exercise 7.7.4 World Traveller
    48. Exercise 7.7.5 Which Animal?
    49. Exercise 7.7.6 Dropdown Nav
    50. Challenge 7.7.7 7. Photo Portfolio
    51. Connection 7.7.8 Drop Down Menu Docs
    52. Badge 7.7.9 Menu Badge

    53. 7.8 Using Bootstrap Examples

    54. Quiz 7.8.1 Using Bootstrap Examples Quiz
    55. Connection 7.8.2 Bootstrap Starter Templates
    56. Example 7.8.3 Realty: Carousel
    57. Example 7.8.4 Blog Bootstrap Template
    58. Example 7.8.5 Carousel Bootstrap Template
    59. Example 7.8.6 Dashboard Bootstrap Template
    60. Example 7.8.7 Cover Bootstrap Template
    61. Example 7.8.8 Cover Site From Template
    62. Challenge 7.8.9 Modify the Template
    63. Challenge 7.8.10 8. Photo Portfolio

    64. 7.9 Bootstrap Challenges

    65. Challenge 7.9.1 Sticky Navbar
    66. Challenge 7.9.2 Adding Interactions
    67. Challenge 7.9.3 Team Page
    68. Challenge 7.9.4 9. Photo Portfolio

    69. 7.10 Bootstrap Quiz

    70. Quiz 7.10.1 Bootstrap Quiz
    71. 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. Quiz 9.1.2 Intro to Design Thinking
    4. Free Response 9.1.3 User Interface Scavenger Hunt
    5. Free Response 9.1.4 Case Study Responses
    6. Free Response 9.1.5 Empathize Notes
    7. Free Response 9.1.6 Problem Statement
    8. Free Response 9.1.7 Ideate Notes
    9. Free Response 9.1.8 Testing Notes
    10. Free Response 9.1.9 Topic Brainstorm
    11. Free Response 9.1.10 Narrowing Down Topics

    12. 9.2 Empathy

    13. Video 9.2.1 Empathy
    14. Quiz 9.2.2 Empathy Quiz
    15. Connection 9.2.3 A Cafeteria Designed for Me
    16. Free Response 9.2.4 A Cafeteria Designed for Me
    17. Connection 9.2.5 How to Interview
    18. Free Response 9.2.6 How to Interview
    19. Free Response 9.2.7 User Interview

    20. 9.3 Define

    21. Video 9.3.1 Define
    22. Quiz 9.3.2 Define Quiz
    23. Free Response 9.3.3 Composite Character Profile
    24. Free Response 9.3.4 POV Statement

    25. 9.4 Ideate

    26. Video 9.4.1 Ideate
    27. Quiz 9.4.2 Ideate Quiz
    28. Free Response 9.4.3 Ideate!

    29. 9.5 Prototype

    30. Video 9.5.1 Prototype
    31. Quiz 9.5.2 Prototype Quiz
    32. Free Response 9.5.3 Harvest Ideas from the Brainstorm
    33. Connection 9.5.4 Example Wizard of Oz Paper Prototype
    34. Free Response 9.5.5 Make Your Paper Prototypes!

    35. 9.6 Test

    36. Video 9.6.1 Test
    37. Quiz 9.6.2 Testing Quiz
    38. Connection 9.6.3 Example: How to User Test
    39. Free Response 9.6.4 How to User Test Responses
    40. Connection 9.6.5 Example: How NOT to User Test
    41. Free Response 9.6.6 How NOT to User Test Responses
    42. Free Response 9.6.7 Test Prototype 1
    43. Free Response 9.6.8 Test Prototype 2
    44. Free Response 9.6.9 Improve Your Prototype

    45. 9.7 Designing User Interfaces Quiz

    46. Quiz 9.7.1 Designing User Interfaces Quiz
    47. 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. The Internet

    1. 11.1 Getting Started - The Internet

    2. Video 11.1.1 Welcome to the Internet
    3. Quiz 11.1.2 Welcome to the Internet Quiz
    4. Free Response 11.1.3 The Internet and You

    5. 11.2 Internet Hardware

    6. Video 11.2.1 Hardware of the Internet
    7. Quiz 11.2.2 Internet Hardware Quiz
    8. Connection 11.2.3 The Internet is in the Ocean

    9. 11.3 Internet Addresses

    10. Video 11.3.1 Internet Addresses
    11. Quiz 11.3.2 Internet Addresses Quiz
    12. Free Response 11.3.3 The Need for Addresses
    13. Quiz 11.3.4 4-bit Addresses
    14. Free Response 11.3.5 IPv4 vs IPv6

    15. 11.4 DNS

    16. Video 11.4.1 DNS
    17. Quiz 11.4.2 DNS Quiz
    18. Connection 11.4.3 How Does DNS Work?
    19. Free Response 11.4.4 How Does DNS Work?

    20. 11.5 Routing

    21. Video 11.5.1 Routing
    22. Quiz 11.5.2 Routing Quiz
    23. Free Response 11.5.3 Redundancy
    24. Traceroute 11.5.4 Route Tracing

    25. 11.6 Packets and Protocols

    26. Video 11.6.1 Packets and Protocols
    27. Quiz 11.6.2 Packets and Protocols Quiz
    28. Resource 11.6.3 Passing Notes
    29. Connection 11.6.4 How the Internet Works
    30. Free Response 11.6.5 The Story of the Internet

    31. 11.7 Cybersecurity

    32. Video 11.7.1 Cybersecurity
    33. Quiz 11.7.2 Cybersecurity Quiz
    34. Connection 11.7.3 Password Strength
    35. Free Response 11.7.4 Password Strength

    36. 11.8 The Impact of the Internet

    37. Video 11.8.1 The Impact of the Internet
    38. Quiz 11.8.2 The Impact of the Internet Quiz
    39. Connection 11.8.3 Are All Bits Created Equal?

    40. 11.9 The Internet Quiz

    41. Quiz 11.9.1 The Internet Quiz

    42. 11.10 Practice PT: The Effects of the Internet

    43. Free Response 11.10.1 Topic Brainstorm
    44. Free Response 11.10.2 Gathering Resources
    45. Presentation 11.10.3 Make Your Artifact
    46. Free Response 11.10.4 Written Responses

  12. Design Research Project

    1. 12.1 Design Research Project

    2. Free Response 12.1.1 Research a Design Concept
    3. Free Response 12.1.2 Explain Your Design Concept
    4. Challenge 12.1.3 Create an Example
    5. Presentation 12.1.4 Present Your Design Concept