Please enable JavaScript to use CodeHS

TCH048BE2 Web Design 2 - Outline

  1. Bootstrap

    1. 1.1 What is Bootstrap?

    2. Video 1.1.1 What is Bootstrap?
    3. Example 1.1.2 Example Bootstrap Mobile Site
    4. Connection 1.1.3 Real World Bootstrap: OneNYC
    5. Free Response 1.1.4 Responsive vs Unresponsive
    6. Free Response 1.1.5 Favorite Bootstrap Site

    7. 1.2 Getting Started with Bootstrap

    8. Video 1.2.1 Getting Started with Bootstrap
    9. Check for Understanding 1.2.2 Getting Started Quiz
    10. Example 1.2.3 First Bootstrap Page
    11. Example 1.2.4 Container-Fluid Page
    12. Exercise 1.2.5 Using the Bootstrap Skeleton
    13. Exercise 1.2.6 Your First Bootstrap
    14. Challenge 1.2.7 1. Photo Portfolio
    15. Connection 1.2.8 Container Docs

    16. 1.3 Jumbotron Pages

    17. Video 1.3.1 Jumbotron Pages
    18. Check for Understanding 1.3.2 Jumbotron Pages Quiz
    19. Example 1.3.3 First Jumbotron Page
    20. Example 1.3.4 Realty: Jumbotron
    21. Exercise 1.3.5 Your First Jumbotron
    22. Exercise 1.3.6 Add a Jumbotron!
    23. Challenge 1.3.7 2. Photo Portfolio
    24. Connection 1.3.8 Jumbotron Docs
    25. Badge 1.3.9 Jumbotron Badge

    26. 1.4 The Bootstrap Grid System

    27. Video 1.4.1 The Grid System
    28. Check for Understanding 1.4.2 The Bootstrap Grid Quiz
    29. Example 1.4.3 Grid System Example
    30. Example 1.4.4 Column Overflow
    31. Example 1.4.5 Different Device Sizes
    32. Example 1.4.6 Example Layout
    33. Example 1.4.7 Realty: Grid System
    34. Exercise 1.4.8 Grid Practice
    35. Exercise 1.4.9 Endangered Animals
    36. Challenge 1.4.10 3. Photo Portfolio
    37. Connection 1.4.11 Grid System Docs

    38. 1.5 Bootstrap Components

    39. Video 1.5.1 Bootstrap Components
    40. Check for Understanding 1.5.2 Bootstrap Components Quiz
    41. Example 1.5.3 Page Headers
    42. Example 1.5.4 Making Buttons
    43. Example 1.5.5 Button Groups
    44. Example 1.5.6 Using Glyphicons
    45. Example 1.5.7 Realty: Buttons and Page Headers
    46. Exercise 1.5.8 Header and Buttons
    47. Exercise 1.5.9 Glyphicon Buttons
    48. Challenge 1.5.10 4. Photo Portfolio
    49. Connection 1.5.11 Button Docs
    50. Connection 1.5.12 Glyphicon Docs

    51. 1.6 More Bootstrap Components

    52. Video 1.6.1 More Bootstrap Components
    53. Check for Understanding 1.6.2 More Bootstrap Components Quiz
    54. Example 1.6.3 Thumbnail Skeleton
    55. Example 1.6.4 Kitten Thumbnails
    56. Example 1.6.5 Table Skeleton
    57. Example 1.6.6 Striped Tables
    58. Example 1.6.7 Realty: Thumbnails
    59. Exercise 1.6.8 Shoe Shop
    60. Exercise 1.6.9 Adding Captions
    61. Exercise 1.6.10 Bootstrap Tables
    62. Exercise 1.6.11 Favorite TV Shows
    63. Exercise 1.6.12 Favorite Animals
    64. Challenge 1.6.13 5. Photo Portfolio
    65. Connection 1.6.14 Thumbnail Docs
    66. Connection 1.6.15 Table Docs

    67. 1.7 Navigation Bars

    68. Video 1.7.1 Navigation Bars
    69. Check for Understanding 1.7.2 Navigation Bars Quiz
    70. Connection 1.7.3 Navbar Docs
    71. Example 1.7.4 Simple Nav Tabs
    72. Example 1.7.5 Basic Navbar
    73. Example 1.7.6 Basic Collapsable Navbar
    74. Example 1.7.7 Realty: Navbar
    75. Example 1.7.8 Realty: Collapsable Navbar
    76. Exercise 1.7.9 Navigation Links
    77. Exercise 1.7.10 Navbar Alignment
    78. Exercise 1.7.11 Making Navbars
    79. Challenge 1.7.12 6. Photo Portfolio

    80. 1.8 Drop Down Menus

    81. Video 1.8.1 Drop Down Menus
    82. Check for Understanding 1.8.2 Drop Down Menus Quiz
    83. Example 1.8.3 Basic Dropdown
    84. Example 1.8.4 Realty: Dropdown
    85. Exercise 1.8.5 World Traveller
    86. Exercise 1.8.6 Which Animal?
    87. Exercise 1.8.7 Dropdown Nav
    88. Challenge 1.8.8 7. Photo Portfolio
    89. Connection 1.8.9 Drop Down Menu Docs
    90. Badge 1.8.10 Menu Badge

    91. 1.9 Using Bootstrap Examples

    92. Video 1.9.1 Using Bootstrap Examples
    93. Check for Understanding 1.9.2 Using Bootstrap Examples Quiz
    94. Connection 1.9.3 Bootstrap Starter Templates
    95. Example 1.9.4 Realty: Carousel
    96. Example 1.9.5 Blog Bootstrap Template
    97. Example 1.9.6 Carousel Bootstrap Template
    98. Example 1.9.7 Dashboard Bootstrap Template
    99. Example 1.9.8 Cover Bootstrap Template
    100. Example 1.9.9 Cover Site From Template
    101. Challenge 1.9.10 Modify the Template
    102. Challenge 1.9.11 8. Photo Portfolio

    103. 1.10 Bootstrap Challenges

    104. Challenge 1.10.1 Sticky Navbar
    105. Challenge 1.10.2 Adding Interactions
    106. Challenge 1.10.3 Team Page
    107. Challenge 1.10.4 9. Photo Portfolio

    108. 1.11 Bootstrap Quiz

    109. Unit Quiz 1.11.1 Bootstrap Quiz
    110. Badge 1.11.2 Bootstrap Badge

  2. Bootstrap Project

    1. 2.1 Bootstrap Project

    2. Example 2.1.1 Example Mobile Responsive Website
    3. Connection 2.1.2 Real World Bootstrap: University of Washington
    4. Connection 2.1.3 Real World Bootstrap: Maple
    5. Challenge 2.1.4 Project: Create a Mobile Responsive Website
    6. Badge 2.1.5 Bootstrap Project Badge

  3. Designing User Interfaces

    1. 3.1 Intro to Design Thinking

    2. Video 3.1.1 Intro to Design Thinking
    3. Check for Understanding 3.1.2 Intro to Design Thinking
    4. Free Response 3.1.3 User Interface Scavenger Hunt
    5. Connection 3.1.4 Case Study: Helping Blind People See
    6. Free Response 3.1.5 Case Study Responses
    7. Connection 3.1.6 Crash Course: Empathize
    8. Free Response 3.1.7 Empathize Notes
    9. Connection 3.1.8 Crash Course: Define
    10. Free Response 3.1.9 Problem Statement
    11. Connection 3.1.10 Crash Course: Ideate
    12. Free Response 3.1.11 Ideate Notes
    13. Connection 3.1.12 Crash Course: Prototype and Test
    14. Free Response 3.1.13 Testing Notes
    15. Free Response 3.1.14 Topic Brainstorm
    16. Free Response 3.1.15 Narrowing Down Topics

    17. 3.2 Empathy

    18. Video 3.2.1 Empathy
    19. Check for Understanding 3.2.2 Empathy Quiz
    20. Connection 3.2.3 A Cafeteria Designed for Me
    21. Free Response 3.2.4 A Cafeteria Designed for Me
    22. Connection 3.2.5 Accessibility
    23. Free Response 3.2.6 Accessibility Tips
    24. Free Response 3.2.7 Accessibility: Designing for ALL
    25. Connection 3.2.8 How to Interview
    26. Free Response 3.2.9 How to Interview
    27. Free Response 3.2.10 User Interview

    28. 3.3 Define

    29. Video 3.3.1 Define
    30. Check for Understanding 3.3.2 Define Quiz
    31. Connection 3.3.3 Make a Composite Character Profile
    32. Free Response 3.3.4 Composite Character Profile
    33. Free Response 3.3.5 Point-of-View Statement Brainstorm
    34. Free Response 3.3.6 POV Statement

    35. 3.4 Ideate

    36. Video 3.4.1 Ideate
    37. Check for Understanding 3.4.2 Ideate Quiz
    38. Connection 3.4.3 Stoke
    39. Free Response 3.4.4 Get Stoked
    40. Connection 3.4.5 Brainstorming Tips
    41. Free Response 3.4.6 Ideate!

    42. 3.5 Prototype

    43. Video 3.5.1 Prototype
    44. Check for Understanding 3.5.2 Prototype Quiz
    45. Connection 3.5.3 Brainstorm Selection
    46. Free Response 3.5.4 Harvest Ideas from the Brainstorm
    47. Connection 3.5.5 Wizard of Oz Prototyping
    48. Connection 3.5.6 Example Wizard of Oz Paper Prototype
    49. Free Response 3.5.7 Make Your Paper Prototypes!

    50. 3.6 Test

    51. Video 3.6.1 Test
    52. Check for Understanding 3.6.2 Testing Quiz
    53. Connection 3.6.3 Testing with Users
    54. Connection 3.6.4 Example: How to User Test
    55. Free Response 3.6.5 How to User Test Responses
    56. Connection 3.6.6 Example: How NOT to User Test
    57. Free Response 3.6.7 How NOT to User Test Responses
    58. Free Response 3.6.8 Test Prototype 1
    59. Free Response 3.6.9 Test Prototype 2
    60. Free Response 3.6.10 Improve Your Prototype

    61. 3.7 Designing User Interfaces Quiz

    62. Unit Quiz 3.7.1 Designing User Interfaces Quiz
    63. Badge 3.7.2 Designing User Interfaces Badge

  4. Final Project

    1. 4.1 Final Web Design Project

    2. Free Response 4.1.1 Milestones
    3. Challenge 4.1.2 Final Project
    4. Badge 4.1.3 Final Project Badge
    5. Badge 4.1.4 Web Design Completed