Please enable JavaScript to use CodeHS

Utah Web Development 1 - Outline

  1. The Internet

    1. 1.1 Welcome to the Internet

    2. Video 1.1.1 Welcome to the Internet
    3. Check for Understanding 1.1.2 Welcome to the Internet Quiz
    4. Free Response 1.1.3 Reflection: The Internet and You
    5. Free Response 1.1.4 An Internet Timeline

    6. 1.2 Viewing Websites

    7. Video 1.2.1 Viewing Websites
    8. Check for Understanding 1.2.2 Viewing Websites Quiz
    9. Free Response 1.2.3 Free Response: Explaining a URL
    10. Connection 1.2.4 Viewing Websites In Different Browsers
    11. Free Response 1.2.5 Reflection: Using Different Browsers

    12. 1.3 Digital Footprint and Reputation

    13. Video 1.3.1 Digital Footprint and Reputation
    14. Check for Understanding 1.3.2 Digital Footprint and Reputation
    15. Example 1.3.3 Social Media Clean-up
    16. Free Response 1.3.4 Building a Positive Digital Footprint
    17. Connection 1.3.5 Right to be Forgotten?
    18. Free Response 1.3.6 Right to be Forgotten
    19. Free Response 1.3.7 What is your Digital Footprint?

    20. 1.4 Ethics and Legal Considerations

    21. Article 1.4.1 Legal, Ethics, and Bias in Computing
    22. Article 1.4.2 Which Laws?
    23. Connection 1.4.3 Self-driving Cars
    24. Free Response 1.4.4 Self-driving Cars
    25. Free Response 1.4.5 Negative Consequences

    26. 1.5 Cybersecurity

    27. Video 1.5.1 Cybersecurity
    28. Check for Understanding 1.5.2 Cybersecurity Quiz
    29. Example 1.5.3 You Can Be Tracked!
    30. Connection 1.5.4 Password Strength
    31. Free Response 1.5.5 Reflection: Password Strength
    32. Example 1.5.6 Phishing Simulator
    33. Connection 1.5.7 Rogue Access Points
    34. Connection 1.5.8 Phishing for Your Info
    35. Free Response 1.5.9 Phishing Reflection

    36. 1.6 Computer Science Careers

    37. Video 1.6.1 Computer Science All Around Us
    38. Quiz 1.6.2 Computer Science All Around Us
    39. Connection 1.6.3 CS Careers
    40. Free Response 1.6.4 CS Career Response
    41. Connection 1.6.5 Coding in the Wild
    42. Free Response 1.6.6 Coding in the Wild Response
    43. Connection 1.6.7 Inclusive Coding
    44. Free Response 1.6.8 Inclusive Coding Response
    45. Resource 1.6.9 Career Research
    46. Notes 1.6.10 Career & Technical Student Organizations (CTSO)
    47. Free Response 1.6.11 Refection: CTSOs

  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. Example 2.2.5 Using Comments
    12. Exercise 2.2.6 The <title> Tag
    13. Exercise 2.2.7 Your First HTML Page

    14. 2.3 Formatting Text

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

    23. 2.4 Links

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

    29. 2.5 Images

    30. Video 2.5.1 Images
    31. Check for Understanding 2.5.2 Images Quiz
    32. Example 2.5.3 The <img> Tag
    33. Exercise 2.5.4 Collage on a Theme
    34. Exercise 2.5.5 Linking an Image
    35. Exercise 2.5.6 National Parks

    36. 2.6 Copyright

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

    45. 2.7 HTML Lists

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

    52. 2.8 HTML Tables

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

    58. 2.9 HTML Styling

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

    65. 2.10 HTML Colors

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

    73. 2.11 HTML - Structuring Websites Quiz

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

    39. Video 3.6.1 Splitting Your Site Into Files
    40. Quiz 3.6.2 Splitting Your Site Into Files Quiz
    41. Example 3.6.3 Multipage Site Examples
    42. Example 3.6.4 Absolute versus Relative Links
    43. Exercise 3.6.5 Add a Style Sheet
    44. Exercise 3.6.6 Dividing the Site
    45. Exercise 3.6.7 Career Site: Creating Structure

    46. 3.7 What is Web Optimization?

    47. Video 3.7.1 What is Web Optimization?
    48. Check for Understanding 3.7.2 What is Web Optimization?
    49. Connection 3.7.3 Website Folder Structure
    50. Notes 3.7.4 File Conventions
    51. Free Response 3.7.5 Folders and Files

    52. 3.8 CSS - Styling Websites Quiz

    53. Video 3.8.1 Optimizing Web Information
    54. Check for Understanding 3.8.2 Optimizing Web Information
    55. Connection 3.8.3 How Search Works
    56. Free Response 3.8.4 How Search Works
    57. Connection 3.8.5 What is Search Engine Optimization (SEO)?
    58. Free Response 3.8.6 SEO Definition
    59. Connection 3.8.7 Ethical Search Optimization
    60. Free Response 3.8.8 Ethical Search Optimization
    61. Connection 3.8.9 Yoast Analyzer
    62. Free Response 3.8.10 Yoast Tool Activity
    63. Unit Quiz 3.8.11 CSS - Styling Websites Quiz
    64. Badge 3.8.12 CSS Badge

  4. Advanced HTML and CSS

    1. 4.1 Getting Started - Advanced HTML and CSS

    2. Video 4.1.1 Getting Started
    3. Example 4.1.2 Example: Image Filters
    4. Example 4.1.3 Example: Animations
    5. Example 4.1.4 Example: Interactions

    6. 4.2 Embedding iframes

    7. Video 4.2.1 Embedding iframes
    8. Check for Understanding 4.2.2 Embedding IFrames Quiz
    9. Example 4.2.3 Embedding CodeHS
    10. Exercise 4.2.4 Embedding a Website
    11. Exercise 4.2.5 Embed a Tweet
    12. Exercise 4.2.6 Embed a Video
    13. Exercise 4.2.7 Career Site: Include Outside Information

    14. 4.3 Divs

    15. Video 4.3.1 Divs
    16. Check for Understanding 4.3.2 Divs Quiz
    17. Example 4.3.3 Divvying up the Site
    18. Exercise 4.3.4 Quotes
    19. Exercise 4.3.5 Flags
    20. Exercise 4.3.6 Career Site: Separate the Content
    21. Badge 4.3.7 Div Badge

    22. 4.4 Spans

    23. Video 4.4.1 Spans
    24. Check for Understanding 4.4.2 Spans Quiz
    25. Example 4.4.3 Span Formatting
    26. Exercise 4.4.4 Vocabulary
    27. Exercise 4.4.5 Text Decoration
    28. Exercise 4.4.6 Career Site: Style Special Pieces

    29. 4.5 Semantic Tags

    30. Video 4.5.1 Semantic Tags
    31. Example 4.5.2 Semantic Skeleton
    32. Example 4.5.3 Section Flowchart Example
    33. Example 4.5.4 Semantic Article
    34. Exercise 4.5.5 Great Quotes
    35. Exercise 4.5.6 Article of Interest
    36. Exercise 4.5.7 Career Site: Semantic Tags

    37. 4.6 Combining CSS Selectors

    38. Video 4.6.1 Combining CSS Selectors
    39. Check for Understanding 4.6.2 Combining CSS Selectors Quiz
    40. Example 4.6.3 More Specific Styling
    41. Exercise 4.6.4 Choosing Nested Tags
    42. Exercise 4.6.5 Highlight the First Item
    43. Exercise 4.6.6 Calorie Recommendations

    44. 4.7 The Don't Repeat Yourself Principle

    45. Video 4.7.1 Don't Repeat Yourself
    46. Check for Understanding 4.7.2 Don't Repeat Yourself Quiz
    47. Example 4.7.3 Styling Multiple Tags
    48. Example 4.7.4 Style Similar Items with Same Class
    49. Exercise 4.7.5 Managing Change
    50. Exercise 4.7.6 Condense CSS Rules
    51. Free Response 4.7.7 Why DRY?

    52. 4.8 Special Selectors

    53. Video 4.8.1 Special Selectors
    54. Check for Understanding 4.8.2 Special Selectors Quiz
    55. Example 4.8.3 Vote For Me
    56. Example 4.8.4 Vote For Me Pt 2
    57. Exercise 4.8.5 Extend Vote For Me
    58. Exercise 4.8.6 Special Vendors
    59. Exercise 4.8.7 Checklist
    60. Exercise 4.8.8 Career Website: Add Milestones
    61. Badge 4.8.9 Special Selectors Badge

    62. 4.9 Visibility

    63. Video 4.9.1 Visibility
    64. Check for Understanding 4.9.2 Visibility Quiz
    65. Example 4.9.3 Display Example
    66. Example 4.9.4 Fading Text
    67. Exercise 4.9.5 Favorite Sea Creature
    68. Exercise 4.9.6 Caption on Demand

    69. 4.10 Reading Documentation

    70. Video 4.10.1 Reading Documentation
    71. Check for Understanding 4.10.2 Reading Documentation Quiz
    72. Example 4.10.3 Using Docs: Float
    73. Example 4.10.4 Using Docs: <blockquote> Tag
    74. Example 4.10.5 HTML Forms
    75. Exercise 4.10.6 Style the Table
    76. Exercise 4.10.7 Electric Company
    77. Exercise 4.10.8 Career Website: Add Pictures

    78. 4.11 Using the Inspector

    79. Video 4.11.1 Using the Inspector
    80. Check for Understanding 4.11.2 Using the Inspector Tool Quiz
    81. Connection 4.11.3 Inspector Quick Start
    82. Check for Understanding 4.11.4 Classes and IDs
    83. Check for Understanding 4.11.5 Exploring the Art Museum
    84. Check for Understanding 4.11.6 What's Your Style?

    85. 4.12 The Box Model

    86. Video 4.12.1 The Box Model
    87. Check for Understanding 4.12.2 The Box Model Quiz
    88. Example 4.12.3 Adding Space Using Margin
    89. Example 4.12.4 Adding Space Using Padding
    90. Example 4.12.5 Combining Margin and Padding
    91. Example 4.12.6 Margin and Padding with em
    92. Exercise 4.12.7 I need some space!
    93. Exercise 4.12.8 I need some breathing room!
    94. Free Response 4.12.9 Where is space added?
    95. Free Response 4.12.10 Relative Measurements
    96. Exercise 4.12.11 Align Content Side by Side
    97. Exercise 4.12.12 Career Website: Separate Content
    98. Connection 4.12.13 Design with the Box Model
    99. Badge 4.12.14 Box Badge

    100. 4.13 Image Manipulation

    101. Video 4.13.1 Image Manipulation
    102. Check for Understanding 4.13.2 Image Manipulation Quiz
    103. Example 4.13.3 Grayscale Filter
    104. Example 4.13.4 Blur Filter
    105. Example 4.13.5 Hue Rotation
    106. Exercise 4.13.6 Invert Filter
    107. Exercise 4.13.7 Blurred
    108. Exercise 4.13.8 Hue Rotation Comparisons
    109. Exercise 4.13.9 Overexposure
    110. Exercise 4.13.10 Grayscale Art
    111. Exercise 4.13.11 Aesop's Fables Part 1
    112. Exercise 4.13.12 Aesop's Fables Part 2

    113. 4.14 Animation

    114. Video 4.14.1 Animation
    115. Check for Understanding 4.14.2 Animation Quiz
    116. Example 4.14.3 Animated Image Filter
    117. Exercise 4.14.4 Animated Invert Filter
    118. Exercise 4.14.5 Album Cover
    119. Exercise 4.14.6 Aesop's Fables Part 3

    120. 4.15 Interaction

    121. Video 4.15.1 Interaction
    122. Check for Understanding 4.15.2 Interaction Quiz
    123. Example 4.15.3 Interactive Image Filter
    124. Example 4.15.4 Smooth Interactive Image Filter
    125. Example 4.15.5 Smooth Change on Click
    126. Exercise 4.15.6 Button Interaction
    127. Exercise 4.15.7 Create Your Own Tooltip
    128. Exercise 4.15.8 Aesop's Fables Part 4
    129. Exercise 4.15.9 Career Website: Engage the User
    130. Connection 4.15.10 CSS Tricks

    131. 4.16 CSS Frameworks

    132. Video 4.16.1 What is a CSS Framework?
    133. Example 4.16.2 Making Buttons
    134. Example 4.16.3 Mobile Site Bootstrap Example
    135. Connection 4.16.4 Real World Bootstrap: OneNYC
    136. Connection 4.16.5 Real World Tailwind: Alastair Gray's Portfolio
    137. Notes 4.16.6 Tailwind CSS Component Examples
    138. Free Response 4.16.7 Reflection: Using CSS Frameworks

    139. 4.17 The CSS Grid Layout

    140. Video 4.17.1 The CSS Grid Layout
    141. Quiz 4.17.2 CSS Grid Layout Quiz
    142. Example 4.17.3 Grid Layout
    143. Example 4.17.4 Applying The Grid Model
    144. Exercise 4.17.5 The Rainbow in a Grid
    145. Exercise 4.17.6 Image Gallery

    146. 4.18 Web Accessibility

    147. Connection 4.18.1 Accessibility
    148. Free Response 4.18.2 Accessibility Tips
    149. Example 4.18.3 Inaccessible Site Review
    150. Exercise 4.18.4 Improve Site's Accessibility

    151. 4.19 Advanced HTML and CSS Quiz

    152. Unit Quiz 4.19.1 Advanced HTML and CSS Quiz
    153. Badge 4.19.2 Advanced HTML and CSS Badge

  5. Project - Create Your Homepage

    1. 5.1 Homepage: Your First Website

    2. Example 5.1.1 Example Homepage
    3. Connection 5.1.2 Real World Homepage
    4. Challenge 5.1.3 Set Up Your codehs.me Website
    5. Free Response 5.1.4 Analyzing Requirements
    6. Free Response 5.1.5 Planning your Homepage
    7. Challenge 5.1.6 Create Your Homepage
    8. Free Response 5.1.7 Testing your homepage
    9. Badge 5.1.8 Create Your Homepage Badge