Please enable JavaScript to use CodeHS

TCH048AE2 Web Design 2 - Outline

  1. Advanced HTML and CSS

    1. 1.1 Getting Started - Advanced HTML and CSS

    2. Video 1.1.1 Getting Started
    3. Example 1.1.2 Example: Image Filters
    4. Example 1.1.3 Example: Animations
    5. Example 1.1.4 Example: Interactions

    6. 1.2 Multi-file Websites

    7. Video 1.2.1 Splitting Your Site into Files
    8. Check for Understanding 1.2.2 Splitting Your Site into Files Quiz
    9. Example 1.2.3 Multipage Site Example
    10. Exercise 1.2.4 Add a Style Sheet
    11. Exercise 1.2.5 Dividing the Site
    12. Exercise 1.2.6 Career Site: Creating Structure

    13. 1.3 Embedding iframes

    14. Video 1.3.1 Embedding iframes
    15. Check for Understanding 1.3.2 Embedding IFrames Quiz
    16. Example 1.3.3 Embedding CodeHS
    17. Example 1.3.4 Embedding a Map
    18. Exercise 1.3.5 Embedding a Website
    19. Exercise 1.3.6 Embed a Tweet
    20. Exercise 1.3.7 Embed a Video
    21. Exercise 1.3.8 Career Site: Include Outside Information

    22. 1.4 Divs

    23. Video 1.4.1 Divs
    24. Check for Understanding 1.4.2 Divs Quiz
    25. Example 1.4.3 Divvying up the Site
    26. Exercise 1.4.4 Quotes
    27. Exercise 1.4.5 Flags
    28. Exercise 1.4.6 Career Site: Separate the Content
    29. Badge 1.4.7 Div Badge

    30. 1.5 Spans

    31. Video 1.5.1 Spans
    32. Check for Understanding 1.5.2 Spans Quiz
    33. Example 1.5.3 Span Formatting
    34. Exercise 1.5.4 Vocabulary
    35. Exercise 1.5.5 Text Decoration
    36. Exercise 1.5.6 Career Site: Style Special Pieces

    37. 1.6 Combining CSS Selectors

    38. Video 1.6.1 Combining CSS Selectors
    39. Check for Understanding 1.6.2 Combining CSS Selectors Quiz
    40. Example 1.6.3 More Specific Styling
    41. Exercise 1.6.4 Choosing Nested Tags
    42. Exercise 1.6.5 Highlight the First Item
    43. Exercise 1.6.6 Calorie Recommendations

    44. 1.7 The Don't Repeat Yourself Principle

    45. Video 1.7.1 Don't Repeat Yourself
    46. Check for Understanding 1.7.2 Don't Repeat Yourself Quiz
    47. Example 1.7.3 Styling Multiple Tags
    48. Example 1.7.4 Style Similar Items with Same Class
    49. Exercise 1.7.5 Managing Change
    50. Exercise 1.7.6 Condense CSS Rules
    51. Free Response 1.7.7 Why DRY?

    52. 1.8 Special Selectors

    53. Video 1.8.1 Special Selectors
    54. Check for Understanding 1.8.2 Special Selectors Quiz
    55. Example 1.8.3 Vote For Me
    56. Example 1.8.4 Vote For Me Pt 2
    57. Exercise 1.8.5 Extend Vote For Me
    58. Exercise 1.8.6 Special Vendors
    59. Exercise 1.8.7 Checklist
    60. Exercise 1.8.8 Career Website: Add Milestones
    61. Badge 1.8.9 Special Selectors Badge

    62. 1.9 Visibility

    63. Video 1.9.1 Visibility
    64. Check for Understanding 1.9.2 Visibility Quiz
    65. Example 1.9.3 Display Example
    66. Example 1.9.4 Fading Text
    67. Exercise 1.9.5 Favorite Sea Creature
    68. Exercise 1.9.6 Caption on Demand

    69. 1.10 Reading Documentation

    70. Video 1.10.1 Reading Documentation
    71. Check for Understanding 1.10.2 Reading Documentation Quiz
    72. Example 1.10.3 Using Docs: Float
    73. Example 1.10.4 Using Docs: blockquote
    74. Exercise 1.10.5 Style the Table
    75. Exercise 1.10.6 Electric Company
    76. Exercise 1.10.7 Career Website: Add Pictures

    77. 1.11 Using the Inspector

    78. Video 1.11.1 Using the Inspector
    79. Check for Understanding 1.11.2 Using the Inspector Tool Quiz
    80. Connection 1.11.3 Inspector Quick Start
    81. Check for Understanding 1.11.4 Classes and IDs
    82. Check for Understanding 1.11.5 Exploring the Art Museum
    83. Check for Understanding 1.11.6 What's Your Style?

    84. 1.12 The Box Model

    85. Video 1.12.1 The Box Model
    86. Check for Understanding 1.12.2 The Box Model Quiz
    87. Example 1.12.3 Adding Space Using Margin
    88. Example 1.12.4 Adding Space Using Padding
    89. Example 1.12.5 Combining Margin and Padding
    90. Exercise 1.12.6 I need some space!
    91. Exercise 1.12.7 I need some breathing room!
    92. Free Response 1.12.8 Where is space added?
    93. Exercise 1.12.9 Align Content Side by Side
    94. Exercise 1.12.10 Career Website: Separate Content
    95. Connection 1.12.11 Design with the Box Model
    96. Badge 1.12.12 Box Badge

    97. 1.13 Image Manipulation

    98. Video 1.13.1 Image Manipulation
    99. Check for Understanding 1.13.2 Image Manipulation Quiz
    100. Example 1.13.3 Grayscale Filter
    101. Example 1.13.4 Blur Filter
    102. Example 1.13.5 Hue Rotation
    103. Exercise 1.13.6 Invert Filter
    104. Exercise 1.13.7 Blurred
    105. Exercise 1.13.8 Hue Rotation Comparisons
    106. Exercise 1.13.9 Overexposure
    107. Exercise 1.13.10 Grayscale Art
    108. Exercise 1.13.11 Aesop's Fables Part 1
    109. Exercise 1.13.12 Aesop's Fables Part 2

    110. 1.14 Animation

    111. Video 1.14.1 Animation
    112. Check for Understanding 1.14.2 Animation Quiz
    113. Example 1.14.3 Animated Image Filter
    114. Exercise 1.14.4 Animated Invert Filter
    115. Exercise 1.14.5 Album Cover
    116. Exercise 1.14.6 Aesop's Fables Part 3

    117. 1.15 Interaction

    118. Video 1.15.1 Interaction
    119. Check for Understanding 1.15.2 Interaction Quiz
    120. Example 1.15.3 Interactive Image Filter
    121. Example 1.15.4 Smooth Interactive Image Filter
    122. Example 1.15.5 Smooth Change on Click
    123. Exercise 1.15.6 Button Interaction
    124. Exercise 1.15.7 Create Your Own Tooltip
    125. Exercise 1.15.8 Aesop's Fables Part 4
    126. Exercise 1.15.9 Career Website: Engage the User
    127. Connection 1.15.10 CSS Tricks

    128. 1.16 Advanced HTML and CSS Quiz

    129. Unit Quiz 1.16.1 Advanced HTML and CSS Quiz
    130. Badge 1.16.2 Advanced HTML and CSS Badge

  2. Project - Tell a Story

    1. 2.1 Project: Tell a Story

    2. Connection 2.1.1 Real World Example: Infographic
    3. Challenge 2.1.2 Project: Tell a Story
    4. Badge 2.1.3 Tell a Story Badge