Please enable JavaScript to use CodeHS

Web Design (Kahlo) - Outline

  1. 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. Connection 1.1.5 Meet a Web Developer
    7. Free Response 1.1.6 Course Goals

    8. 1.2 The Internet

    9. Video 1.2.1 What is The Internet?
    10. Check for Understanding 1.2.2 What is the Internet? Quiz
    11. Free Response 1.2.3 A Day Without the Internet
    12. Video 1.2.4 The Impact of the Internet: Crowdsourcing
    13. Free Response 1.2.5 Exploring Crowdsourcing

    14. 1.3 Viewing Websites

    15. Video 1.3.1 Viewing Websites
    16. Check for Understanding 1.3.2 Viewing Websites Quiz
    17. Free Response 1.3.3 Free Response: Explaining a URL
    18. Connection 1.3.4 What is a Browser?
    19. Connection 1.3.5 Your Browser
    20. Free Response 1.3.6 Explaining a Browser
    21. Connection 1.3.7 Viewing Websites In Different Browsers
    22. Free Response 1.3.8 Reflection: Using Different Browsers

    23. 1.4 Digital Footprint and Reputation

    24. Video 1.4.1 Digital Footprint and Reputation
    25. Check for Understanding 1.4.2 Digital Footprint and Reputation
    26. Example 1.4.3 Social Media Clean-up
    27. Free Response 1.4.4 Building a Positive Digital Footprint
    28. Connection 1.4.5 Right to be Forgotten?
    29. Free Response 1.4.6 Right to be Forgotten
    30. Free Response 1.4.7 What is your Digital Footprint?

    31. 1.5 Getting Started - What is the Web? Quiz

    32. Unit Quiz 1.5.1 Getting Started - What is the Web? Quiz
    33. 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 Creating Your First Webpage
    6. Example 2.1.5 Your Second Tag
    7. Exercise 2.1.6 Dear Diary

    8. 2.2 Structure of an HTML Page

    9. Video 2.2.1 Structure of an HTML Page
    10. Check for Understanding 2.2.2 Structure of an HTML Page Quiz
    11. Example 2.2.3 HTML Template
    12. Example 2.2.4 Hello World Page
    13. Example 2.2.5 Using Comments
    14. Exercise 2.2.6 Working Within the Page Structure
    15. Exercise 2.2.7 Introduce Yourself

    16. 2.3 Formatting Text

    17. Video 2.3.1 Formatting Text
    18. Check for Understanding 2.3.2 Formatting Text Quiz
    19. Example 2.3.3 Dictionary Entry
    20. Exercise 2.3.4 Online Recipe
    21. Exercise 2.3.5 Class Schedule
    22. Exercise 2.3.6 Reading List

    23. 2.4 Creating 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 Search Engine Links
    28. Exercise 2.4.5 Linkbran.ch
    29. Exercise 2.4.6 Wiki Page

    30. 2.5 Incorporating Images

    31. Video 2.5.1 Images
    32. Check for Understanding 2.5.2 Images Quiz
    33. Example 2.5.3 The <img> Tag
    34. Example 2.5.4 Using an Image as a Link
    35. Exercise 2.5.5 Images of Space
    36. Exercise 2.5.6 Your Favorite Image
    37. Exercise 2.5.7 Gallery Layout

    38. 2.6 Using Lists

    39. Video 2.6.1 HTML Lists
    40. Check for Understanding 2.6.2 HTML Lists Quiz
    41. Example 2.6.3 Grocery Shopping
    42. Exercise 2.6.4 Chores
    43. Exercise 2.6.5 Favorites
    44. Exercise 2.6.6 Adding to Your Favorites

    45. 2.7 HTML Tables

    46. Video 2.7.1 HTML Tables
    47. Check for Understanding 2.7.2 HTML Tables Quiz
    48. Example 2.7.3 Address Book
    49. Exercise 2.7.4 State Flowers
    50. Exercise 2.7.5 Report Card

    51. 2.8 Copyright

    52. Video 2.8.1 Copyright
    53. Check for Understanding 2.8.2 Copyright Quiz
    54. Example 2.8.3 Citing Sources Example
    55. Connection 2.8.4 Exploring Creative Commons
    56. Free Response 2.8.5 Response: Creative Commons
    57. Free Response 2.8.6 Finding Images
    58. Exercise 2.8.7 Image Squares
    59. Free Response 2.8.8 Why Copyright is Important

    60. 2.9 Applying Styling

    61. Video 2.9.1 HTML Styling
    62. Check for Understanding 2.9.2 HTML Styling Quiz
    63. Example 2.9.3 Styling the Grocery List
    64. Exercise 2.9.4 Styling an Article
    65. Exercise 2.9.5 Does Taylor Swift Lack Style?

    66. 2.10 HTML Colors

    67. Video 2.10.1 HTML Colors
    68. Check for Understanding 2.10.2 HTML Colors Quiz
    69. Example 2.10.3 HTML Colors Examples
    70. Exercise 2.10.4 Shoelaces
    71. Exercise 2.10.5 Rainbow
    72. Connection 2.10.6 Color Wheel
    73. Exercise 2.10.7 All About You

    74. 2.11 Quiz: Exploring Web Design

    75. Quiz 2.11.1 Exploring Web Design

  3. Project - Create a Basic homepage

    1. 3.1 Homepage: Your First Website

    2. Example 3.1.1 Example Homepage
    3. Connection 3.1.2 Real World Homepage
    4. Challenge 3.1.3 Set Up Your codehs.me Website
    5. Challenge 3.1.4 Create Your Homepage
    6. Badge 3.1.5 Create Your Homepage Badge

  4. CSS - Styling Websites

    1. 4.1 Introduction to CSS Styling

    2. Video 4.1.1 Introduction to CSS Styling
    3. Check for Understanding 4.1.2 Introduction to CSS Quiz
    4. Example 4.1.3 Styling with CSS
    5. Exercise 4.1.4 Styling a List
    6. Exercise 4.1.5 Adding CSS Styling
    7. Exercise 4.1.6 Global Trip Skeleton

    8. 4.2 CSS Select by Tag

    9. Video 4.2.1 CSS Select by Tag
    10. Check for Understanding 4.2.2 CSS Select by Tag Quiz
    11. Example 4.2.3 Rainbow
    12. Example 4.2.4 Puppy Styling
    13. Exercise 4.2.5 Today's Top Videos
    14. Exercise 4.2.6 World Heritage Sites
    15. Exercise 4.2.7 Global Trip: Style Headers

    16. 4.3 CSS Select by Class

    17. Video 4.3.1 CSS Select by Class
    18. Check for Understanding 4.3.2 CSS Select by Class Quiz
    19. Example 4.3.3 Simple Checkerboard
    20. Exercise 4.3.4 Football Divisons
    21. Exercise 4.3.5 Favorite Navigation
    22. Exercise 4.3.6 Global Trip: Emphasize with Styles

    23. 4.4 CSS Select by ID

    24. Video 4.4.1 CSS Select by ID
    25. Check for Understanding 4.4.2 CSS Select by ID Quiz
    26. Example 4.4.3 Logo
    27. Exercise 4.4.4 Water Cycle
    28. Exercise 4.4.5 Aquarium Features
    29. Exercise 4.4.6 Global Trip: Add Photos
    30. Badge 4.4.7 Selector Badge

    31. 4.5 The Cascade

    32. Video 4.5.1 The Cascade
    33. Check for Understanding 4.5.2 The Cascade Quiz
    34. Example 4.5.3 Using Importance
    35. Example 4.5.4 Order of Precedence
    36. Exercise 4.5.5 Planning for the Weekend
    37. Exercise 4.5.6 Highlight to Remember
    38. Exercise 4.5.7 Top Theme Parks

    39. 4.6 Add CSS Styling to your Homepage

    40. Challenge 4.6.1 Add Styling to Homepage

    41. 4.7 CSS - Styling Websites Quiz

    42. Unit Quiz 4.7.1 CSS - Styling Websites Quiz
    43. Badge 4.7.2 CSS 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 Farmer's Market
    11. Exercise 5.2.5 Bakery Stand
    12. Exercise 5.2.6 More About Bakeries

    13. 5.3 Divs

    14. Video 5.3.1 Divs
    15. Check for Understanding 5.3.2 Divs Quiz
    16. Example 5.3.3 Divvying up the Site
    17. Exercise 5.3.4 Email
    18. Exercise 5.3.5 Navigation Bar
    19. Exercise 5.3.6 Volcanoes
    20. Badge 5.3.7 Div Badge

    21. 5.4 Spans

    22. Video 5.4.1 Spans
    23. Check for Understanding 5.4.2 Spans Quiz
    24. Example 5.4.3 Span Formatting
    25. Exercise 5.4.4 Butterfly Lifecycles
    26. Exercise 5.4.5 Caterpillar Webs
    27. Exercise 5.4.6 Party Invitation

    28. 5.5 Combining CSS Selectors

    29. Video 5.5.1 Combining CSS Selectors
    30. Check for Understanding 5.5.2 Combining CSS Selectors Quiz
    31. Example 5.5.3 More Specific Styling
    32. Exercise 5.5.4 Daily Agenda
    33. Exercise 5.5.5 Captions
    34. Exercise 5.5.6 Restaurant Info

    35. 5.6 Special Selectors

    36. Video 5.6.1 Special Selectors
    37. Check for Understanding 5.6.2 Special Selectors Quiz
    38. Example 5.6.3 Vote For Me
    39. Example 5.6.4 Vote For Me Pt 2
    40. Exercise 5.6.5 Voting Strategies
    41. Exercise 5.6.6 Emphasize Your Options
    42. Exercise 5.6.7 Club Membership
    43. Badge 5.6.8 Special Selectors Badge

    44. 5.7 Visibility

    45. Video 5.7.1 Visibility
    46. Check for Understanding 5.7.2 Visibility Quiz
    47. Example 5.7.3 Display Example
    48. Example 5.7.4 Fading Text
    49. Exercise 5.7.5 In a Jam
    50. Exercise 5.7.6 Planets and Moons
    51. Exercise 5.7.7 Parody

    52. 5.8 Reading Documentation

    53. Video 5.8.1 Reading Documentation
    54. Check for Understanding 5.8.2 Reading Documentation Quiz
    55. Example 5.8.3 Using Docs: Float
    56. Example 5.8.4 Using Docs: <blockquote> Tag
    57. Exercise 5.8.5 Finding Color Names
    58. Exercise 5.8.6 Mathematical Formulas
    59. Exercise 5.8.7 Help Karel's Code

    60. 5.9 Image Manipulation

    61. Video 5.9.1 Image Manipulation
    62. Check for Understanding 5.9.2 Image Manipulation Quiz
    63. Example 5.9.3 Grayscale Filter
    64. Example 5.9.4 Blur Filter
    65. Example 5.9.5 Hue Rotation
    66. Exercise 5.9.6 The Brightness Filter
    67. Exercise 5.9.7 Filter Settings
    68. Exercise 5.9.8 Choose a Filter

    69. 5.10 Animation

    70. Video 5.10.1 Animation
    71. Check for Understanding 5.10.2 Animation Quiz
    72. Example 5.10.3 Animated Image Filter
    73. Exercise 5.10.4 Animate Your Image
    74. Exercise 5.10.5 Animate Text Color
    75. Exercise 5.10.6 Add Animation to Your Homepage

    76. 5.11 Interaction

    77. Video 5.11.1 Interaction
    78. Check for Understanding 5.11.2 Interaction Quiz
    79. Example 5.11.3 Interactive Image Filter
    80. Example 5.11.4 Smooth Interactive Image Filter
    81. Example 5.11.5 Smooth Change on Click
    82. Exercise 5.11.6 Identify the Image
    83. Exercise 5.11.7 A Button
    84. Exercise 5.11.8 Film Strip
    85. Connection 5.11.9 CSS Tricks

    86. 5.12 Advanced HTML and CSS Quiz

    87. Unit Quiz 5.12.1 Advanced HTML and CSS Quiz
    88. Badge 5.12.2 Advanced HTML and CSS Badge

  6. Final Project

    1. 6.1 Final Project

    2. Free Response 6.1.1 Gathering Ideas
    3. Challenge 6.1.2 Community Website
    4. Badge 6.1.3 Final Project Badge
    5. Badge 6.1.4 Web Design Completed