Please enable JavaScript to use CodeHS

Outline


1. Getting Started - What is the Web?
1.1 Welcome
Video 1.1.1 Welcome to Web Design
Check for Understanding 1.1.2 Welcome to Web Design Quiz
Free Response 1.1.3 Websites in Your Life
Free Response 1.1.4 What is Web Design?
Free Response 1.1.5 Course Goals
Connection 1.1.6 Web Design and Web Development
Connection 1.1.7 Meet a Web Developer
1.2 The Internet
Video 1.2.1 What is The Internet?
Check for Understanding 1.2.2 What is the Internet? Quiz
Connection 1.2.3 Internet Censorship: Google's Dragonfly Project
Free Response 1.2.4 Internet Censorship Reflection
Connection 1.2.5 The Right to Remain Anonymous?
Free Response 1.2.6 Anonymity Reflection
Video 1.2.7 How does the Internet Work?
Check for Understanding 1.2.8 How does the Internet Work? Quiz
Free Response 1.2.9 Internet Protocols
1.3 Browsers
Video 1.3.1 Browsers
Check for Understanding 1.3.2 Browser Quiz
Connection 1.3.3 What is a Browser?
Connection 1.3.4 Your Browser
Free Response 1.3.5 Explaining a Browser
1.4 Viewing Websites
Video 1.4.1 Viewing Websites
Check for Understanding 1.4.2 Viewing Websites Quiz
Free Response 1.4.3 Explaining a URL
1.5 Getting Started - What is the Web? Quiz
Unit Quiz 1.5.1 Getting Started - What is the Web? Quiz
Badge 1.5.2 Getting Started Badge
2. HTML - Structuring Websites
2.1 Introduction to HTML
Video 2.1.1 Introduction to HTML
Check for Understanding 2.1.2 Introduction to HTML Quiz
Example 2.1.3 Our First HTML Page
Exercise 2.1.4 Say Hello!
2.2 Structure of an HTML Page
Video 2.2.1 Structure of an HTML Page
Check for Understanding 2.2.2 Structure of an HTML Page Quiz
Example 2.2.3 HTML Template
Example 2.2.4 Hello World Page
Exercise 2.2.5 The <title> Tag
Exercise 2.2.6 Your First HTML Page
2.3 Formatting Text
Video 2.3.1 Formatting Text
Check for Understanding 2.3.2 Formatting Text Quiz
Example 2.3.3 Dictionary
Exercise 2.3.4 Word Definitions
Exercise 2.3.5 Pet Names
Exercise 2.3.6 Call of the Wild
Badge 2.3.7 Formatting Badge
2.4 Links
Video 2.4.1 Links
Check for Understanding 2.4.2 Links Quiz
Example 2.4.3 The <a> Tag
Exercise 2.4.4 Bookmarks
Exercise 2.4.5 Encyclopedias
2.5 Images
Video 2.5.1 Images
Check for Understanding 2.5.2 Images Quiz
Example 2.5.3 The <img> Tag
Example 2.5.4 Building the CodeHS Homepage
Exercise 2.5.5 Collage on a Theme
Exercise 2.5.6 Linking an Image
Exercise 2.5.7 National Parks
2.6 Copyright
Video 2.6.1 Copyright
Check for Understanding 2.6.2 Copyright Quiz
Example 2.6.3 Citing Sources Example
Connection 2.6.4 Exploring Creative Commons
Free Response 2.6.5 Response: Creative Commons
Free Response 2.6.6 Finding Images
Exercise 2.6.7 Make a Collage
Free Response 2.6.8 Why Copyright is Important
2.7 HTML Lists
Video 2.7.1 HTML Lists
Check for Understanding 2.7.2 HTML Lists Quiz
Example 2.7.3 Grocery Shopping
Exercise 2.7.4 Class Planning
Exercise 2.7.5 Dream Destinations
Exercise 2.7.6 Vacation Guides
2.8 HTML Tables
Video 2.8.1 HTML Tables
Check for Understanding 2.8.2 HTML Tables Quiz
Example 2.8.3 Address Book
Exercise 2.8.4 National Sports
Exercise 2.8.5 Table of Favorites
2.9 HTML Styling
Video 2.9.1 HTML Styling
Check for Understanding 2.9.2 HTML Styling Quiz
Example 2.9.3 Stylish Address Book
Exercise 2.9.4 Background Colors
Exercise 2.9.5 Style Your Class List
Badge 2.9.6 Styling Badge
2.10 HTML Colors
Video 2.10.1 HTML Colors
Check for Understanding 2.10.2 HTML Colors Quiz
Example 2.10.3 HTML Colors Examples
Exercise 2.10.4 Create Your Own Color
Exercise 2.10.5 Gradients
Connection 2.10.6 Color Wheel
Exercise 2.10.7 Using Good Colors
2.11 HTML - Structuring Websites Quiz
Unit Quiz 2.11.1 HTML - Structuring Websites Quiz
Badge 2.11.2 HTML Badge
3. CSS - Styling Websites
3.1 Introduction to CSS
Video 3.1.1 Introduction to CSS
Check for Understanding 3.1.2 Introduction to CSS Quiz
Example 3.1.3 Styling your H1s
Exercise 3.1.4 First style with CSS
Exercise 3.1.5 List Styling
Exercise 3.1.6 Endangered Animals: Skeleton
3.2 CSS Select by Tag
Video 3.2.1 CSS Select by Tag
Check for Understanding 3.2.2 CSS Select by Tag Quiz
Example 3.2.3 Rainbow
Example 3.2.4 Puppy Styling
Exercise 3.2.5 Set List
Exercise 3.2.6 Your Appliance Recommendations
Exercise 3.2.7 Endangered Animals: Style the Headers
3.3 CSS Select by Class
Video 3.3.1 CSS Select by Class
Check for Understanding 3.3.2 CSS Select by Class Quiz
Example 3.3.3 Simple Checkerboard
Exercise 3.3.4 Swim Meet
Exercise 3.3.5 Favorite Things
Exercise 3.3.6 Endangered Animals: Add Color Coding
3.4 CSS Select by ID
Video 3.4.1 CSS Select by ID
Check for Understanding 3.4.2 CSS Select by ID Quiz
Example 3.4.3 Logo
Exercise 3.4.4 Must Do Today!
Exercise 3.4.5 Lomeli's Menu
Exercise 3.4.6 Endangered Animals: Add Pictures
Badge 3.4.7 Selector Badge
3.5 The Cascade
Video 3.5.1 The Cascade
Check for Understanding 3.5.2 The Cascade Quiz
Example 3.5.3 Using Importance
Example 3.5.4 Order of Precedence
Exercise 3.5.5 We Really Like Dairy
Exercise 3.5.6 Style the Table
3.6 CSS - Styling Websites Quiz
Unit Quiz 3.6.1 CSS - Styling Websites Quiz
Badge 3.6.2 CSS Badge
4. Project - Create Your Homepage
4.1 Homepage: Your First Website
Example 4.1.1 Example Homepage
Connection 4.1.2 Real World Homepage
Challenge 4.1.3 Set Up Your codehs.me Website
Challenge 4.1.4 Create Your Homepage
Badge 4.1.5 Create Your Homepage Badge
5. The Internet
5.1 Getting Started - The Internet
Video 5.1.1 Welcome to the Internet
Check for Understanding 5.1.2 Welcome to the Internet Quiz
Free Response 5.1.3 The Internet and You
5.2 Internet Hardware
Video 5.2.1 Hardware of the Internet
Check for Understanding 5.2.2 Internet Hardware Quiz
Connection 5.2.3 The Internet is in the Ocean
5.3 Internet Addresses
Video 5.3.1 Internet Addresses
Check for Understanding 5.3.2 Internet Addresses Quiz
Free Response 5.3.3 The Need for Addresses
Check for Understanding 5.3.4 4-bit Addresses
Free Response 5.3.5 IPv4 vs IPv6
5.4 DNS
Video 5.4.1 DNS
Check for Understanding 5.4.2 DNS Quiz
Connection 5.4.3 How Does DNS Work?
Free Response 5.4.4 How Does DNS Work?
5.5 Routing
Video 5.5.1 Routing
Check for Understanding 5.5.2 Routing Quiz
Free Response 5.5.3 Redundancy
Traceroute 5.5.4 Route Tracing
5.6 Packets and Protocols
Video 5.6.1 Packets and Protocols
Check for Understanding 5.6.2 Packets and Protocols Quiz
Resource 5.6.3 Passing Notes
Connection 5.6.4 How the Internet Works
Free Response 5.6.5 The Story of the Internet
5.7 The Impact of the Internet
Video 5.7.1 The Impact of the Internet
Check for Understanding 5.7.2 The Impact of the Internet Quiz
Connection 5.7.3 Pokemon Go: Unintended Effects
5.8 The Internet Quiz
Unit Quiz 5.8.1 The Internet Quiz
6. Web Design Pretest
6.1 Web Design Pretest
Notes 6.1.1 About the Pretest
Survey 6.1.2 Mindsets
Quiz 6.1.3 Knowledge & Skills: Web Design
7. Advanced HTML and CSS
7.1 Getting Started - Advanced HTML and CSS
Video 7.1.1 Getting Started
Example 7.1.2 Example: Image Filters
Example 7.1.3 Example: Animations
Example 7.1.4 Example: Interactions
7.2 Multi-file Websites
Video 7.2.1 Splitting Your Site into Files
Check for Understanding 7.2.2 Splitting Your Site into Files Quiz
Example 7.2.3 Multipage Site Example
Exercise 7.2.4 Add a Style Sheet
Exercise 7.2.5 Dividing the Site
Exercise 7.2.6 Career Site: Creating Structure
7.3 Embedding iframes
Video 7.3.1 Embedding iframes
Check for Understanding 7.3.2 Embedding IFrames Quiz
Example 7.3.3 Embedding CodeHS
Example 7.3.4 Embedding a Map
Exercise 7.3.5 Embedding a Website
Exercise 7.3.6 Embed a Tweet
Exercise 7.3.7 Embed a Video
Exercise 7.3.8 Career Site: Include Outside Information
7.4 Divs
Video 7.4.1 Divs
Check for Understanding 7.4.2 Divs Quiz
Example 7.4.3 Divvying up the Site
Exercise 7.4.4 Quotes
Exercise 7.4.5 Flags
Exercise 7.4.6 Career Site: Separate the Content
Badge 7.4.7 Div Badge
7.5 Spans
Video 7.5.1 Spans
Check for Understanding 7.5.2 Spans Quiz
Example 7.5.3 Span Formatting
Exercise 7.5.4 Vocabulary
Exercise 7.5.5 Text Decoration
Exercise 7.5.6 Career Site: Style Special Pieces
7.6 Combining CSS Selectors
Video 7.6.1 Combining CSS Selectors
Check for Understanding 7.6.2 Combining CSS Selectors Quiz
Example 7.6.3 More Specific Styling
Exercise 7.6.4 Choosing Nested Tags
Exercise 7.6.5 Highlight the First Item
Exercise 7.6.6 Calorie Recommendations
7.7 The Don't Repeat Yourself Principle
Video 7.7.1 Don't Repeat Yourself
Check for Understanding 7.7.2 Don't Repeat Yourself Quiz
Example 7.7.3 Styling Multiple Tags
Example 7.7.4 Style Similar Items with Same Class
Exercise 7.7.5 Managing Change
Exercise 7.7.6 Condense CSS Rules
Free Response 7.7.7 Why DRY?
7.8 Special Selectors
Video 7.8.1 Special Selectors
Check for Understanding 7.8.2 Special Selectors Quiz
Example 7.8.3 Vote For Me
Example 7.8.4 Vote For Me Pt 2
Exercise 7.8.5 Extend Vote For Me
Exercise 7.8.6 Special Vendors
Exercise 7.8.7 Checklist
Exercise 7.8.8 Career Website: Add Milestones
Badge 7.8.9 Special Selectors Badge
7.9 Visibility
Video 7.9.1 Visibility
Check for Understanding 7.9.2 Visibility Quiz
Example 7.9.3 Display Example
Example 7.9.4 Fading Text
Exercise 7.9.5 Favorite Sea Creature
Exercise 7.9.6 Caption on Demand
7.10 Reading Documentation
Video 7.10.1 Reading Documentation
Check for Understanding 7.10.2 Reading Documentation Quiz
Example 7.10.3 Using Docs: Float
Example 7.10.4 Using Docs: <blockquote> Tag
Exercise 7.10.5 Style the Table
Exercise 7.10.6 Electric Company
Exercise 7.10.7 Career Website: Add Pictures
7.11 Using the Inspector
Video 7.11.1 Using the Inspector
Check for Understanding 7.11.2 Using the Inspector Tool Quiz
Connection 7.11.3 Inspector Quick Start
Check for Understanding 7.11.4 Classes and IDs
Check for Understanding 7.11.5 Exploring the Art Museum
Check for Understanding 7.11.6 What's Your Style?
7.12 The Box Model
Video 7.12.1 The Box Model
Check for Understanding 7.12.2 The Box Model Quiz
Example 7.12.3 Adding Space Using Margin
Example 7.12.4 Adding Space Using Padding
Example 7.12.5 Combining Margin and Padding
Exercise 7.12.6 I need some space!
Exercise 7.12.7 I need some breathing room!
Free Response 7.12.8 Where is space added?
Exercise 7.12.9 Align Content Side by Side
Exercise 7.12.10 Career Website: Separate Content
Connection 7.12.11 Design with the Box Model
Badge 7.12.12 Box Badge
7.13 Image Manipulation
Video 7.13.1 Image Manipulation
Check for Understanding 7.13.2 Image Manipulation Quiz
Example 7.13.3 Grayscale Filter
Example 7.13.4 Blur Filter
Example 7.13.5 Hue Rotation
Exercise 7.13.6 Invert Filter
Exercise 7.13.7 Blurred
Exercise 7.13.8 Hue Rotation Comparisons
Exercise 7.13.9 Overexposure
Exercise 7.13.10 Grayscale Art
Exercise 7.13.11 Aesop's Fables Part 1
Exercise 7.13.12 Aesop's Fables Part 2
7.14 Animation
Video 7.14.1 Animation
Check for Understanding 7.14.2 Animation Quiz
Example 7.14.3 Animated Image Filter
Exercise 7.14.4 Animated Invert Filter
Exercise 7.14.5 Album Cover
Exercise 7.14.6 Aesop's Fables Part 3
7.15 Interaction
Video 7.15.1 Interaction
Check for Understanding 7.15.2 Interaction Quiz
Example 7.15.3 Interactive Image Filter
Example 7.15.4 Smooth Interactive Image Filter
Example 7.15.5 Smooth Change on Click
Exercise 7.15.6 Button Interaction
Exercise 7.15.7 Create Your Own Tooltip
Exercise 7.15.8 Aesop's Fables Part 4
Exercise 7.15.9 Career Website: Engage the User
Connection 7.15.10 CSS Tricks
7.16 Advanced HTML and CSS Quiz
Unit Quiz 7.16.1 Advanced HTML and CSS Quiz
Badge 7.16.2 Advanced HTML and CSS Badge
8. Project - Tell a Story
8.1 Project: Tell a Story
Connection 8.1.1 Real World Example: Infographic
Challenge 8.1.2 Project: Tell a Story
Badge 8.1.3 Tell a Story Badge
9. Bootstrap
9.1 What is Bootstrap?
Video 9.1.1 What is Bootstrap?
Example 9.1.2 Example Bootstrap Mobile Site
Connection 9.1.3 Real World Bootstrap: OneNYC
Free Response 9.1.4 Responsive vs Unresponsive
Free Response 9.1.5 Favorite Bootstrap Site
9.2 Getting Started with Bootstrap
Video 9.2.1 Getting Started with Bootstrap
Check for Understanding 9.2.2 Getting Started Quiz
Example 9.2.3 First Bootstrap Page
Example 9.2.4 Container-Fluid Page
Exercise 9.2.5 Using the Bootstrap Skeleton
Exercise 9.2.6 Your First Bootstrap
Challenge 9.2.7 1. Photo Portfolio
Connection 9.2.8 Container Docs
9.3 Jumbotron Pages
Video 9.3.1 Jumbotron Pages
Check for Understanding 9.3.2 Jumbotron Pages Quiz
Example 9.3.3 First Jumbotron Page
Example 9.3.4 Realty: Jumbotron
Exercise 9.3.5 Your First Jumbotron
Exercise 9.3.6 Add a Jumbotron!
Challenge 9.3.7 2. Photo Portfolio
Connection 9.3.8 Jumbotron Docs
Badge 9.3.9 Jumbotron Badge
9.4 The Bootstrap Grid System
Video 9.4.1 The Grid System
Check for Understanding 9.4.2 The Bootstrap Grid Quiz
Example 9.4.3 Grid System Example
Example 9.4.4 Column Overflow
Example 9.4.5 Different Device Sizes
Example 9.4.6 Example Layout
Example 9.4.7 Realty: Grid System
Exercise 9.4.8 Grid Practice
Exercise 9.4.9 Endangered Animals
Challenge 9.4.10 3. Photo Portfolio
Connection 9.4.11 Grid System Docs
9.5 Bootstrap Components
Video 9.5.1 Bootstrap Components
Check for Understanding 9.5.2 Bootstrap Components Quiz
Example 9.5.3 Page Headers
Example 9.5.4 Making Buttons
Example 9.5.5 Button Groups
Example 9.5.6 Using Glyphicons
Example 9.5.7 Realty: Buttons and Page Headers
Exercise 9.5.8 Header and Buttons
Exercise 9.5.9 Glyphicon Buttons
Challenge 9.5.10 4. Photo Portfolio
Connection 9.5.11 Button Docs
Connection 9.5.12 Glyphicon Docs
9.6 More Bootstrap Components
Video 9.6.1 More Bootstrap Components
Check for Understanding 9.6.2 More Bootstrap Components Quiz
Example 9.6.3 Thumbnail Skeleton
Example 9.6.4 Kitten Thumbnails
Example 9.6.5 Table Skeleton
Example 9.6.6 Striped Tables
Example 9.6.7 Realty: Thumbnails
Exercise 9.6.8 Shoe Shop
Exercise 9.6.9 Adding Captions
Exercise 9.6.10 Bootstrap Tables
Exercise 9.6.11 Favorite TV Shows
Exercise 9.6.12 Favorite Animals
Challenge 9.6.13 5. Photo Portfolio
Connection 9.6.14 Thumbnail Docs
Connection 9.6.15 Table Docs
9.7 Navigation Bars
Video 9.7.1 Navigation Bars
Check for Understanding 9.7.2 Navigation Bars Quiz
Connection 9.7.3 Navbar Docs
Example 9.7.4 Simple Nav Tabs
Example 9.7.5 Basic Navbar
Example 9.7.6 Basic Collapsable Navbar
Example 9.7.7 Realty: Navbar
Example 9.7.8 Realty: Collapsable Navbar
Exercise 9.7.9 Navigation Links
Exercise 9.7.10 Navbar Alignment
Exercise 9.7.11 Making Navbars
Challenge 9.7.12 6. Photo Portfolio
9.8 Drop Down Menus
Video 9.8.1 Drop Down Menus
Check for Understanding 9.8.2 Drop Down Menus Quiz
Example 9.8.3 Basic Dropdown
Example 9.8.4 Realty: Dropdown
Exercise 9.8.5 World Traveller
Exercise 9.8.6 Which Animal?
Exercise 9.8.7 Dropdown Nav
Challenge 9.8.8 7. Photo Portfolio
Connection 9.8.9 Drop Down Menu Docs
Badge 9.8.10 Menu Badge
9.9 Using Bootstrap Examples
Video 9.9.1 Using Bootstrap Examples
Check for Understanding 9.9.2 Using Bootstrap Examples Quiz
Connection 9.9.3 Bootstrap Starter Templates
Example 9.9.4 Realty: Carousel
Example 9.9.5 Blog Bootstrap Template
Example 9.9.6 Carousel Bootstrap Template
Example 9.9.7 Dashboard Bootstrap Template
Example 9.9.8 Cover Bootstrap Template
Example 9.9.9 Cover Site From Template
Challenge 9.9.10 Modify the Template
Challenge 9.9.11 8. Photo Portfolio
9.10 Bootstrap Challenges
Challenge 9.10.1 Sticky Navbar
Challenge 9.10.2 Adding Interactions
Challenge 9.10.3 Team Page
Challenge 9.10.4 9. Photo Portfolio
9.11 Bootstrap Quiz
Unit Quiz 9.11.1 Bootstrap Quiz
Badge 9.11.2 Bootstrap Badge
10. Bootstrap Project
10.1 Bootstrap Project
Example 10.1.1 Example Mobile Responsive Website
Connection 10.1.2 Real World Bootstrap: University of Washington
Connection 10.1.3 Real World Bootstrap: Maple
Challenge 10.1.4 Project: Create a Mobile Responsive Website
Badge 10.1.5 Bootstrap Project Badge
11. Designing User Interfaces
11.1 Intro to Design Thinking
Video 11.1.1 Intro to Design Thinking
Check for Understanding 11.1.2 Intro to Design Thinking
Free Response 11.1.3 User Interface Scavenger Hunt
Connection 11.1.4 Case Study: Helping Blind People See
Free Response 11.1.5 Case Study Responses
Connection 11.1.6 Crash Course: Empathize
Free Response 11.1.7 Empathize Notes
Connection 11.1.8 Crash Course: Define
Free Response 11.1.9 Problem Statement
Connection 11.1.10 Crash Course: Ideate
Free Response 11.1.11 Ideate Notes
Connection 11.1.12 Crash Course: Prototype and Test
Free Response 11.1.13 Testing Notes
Free Response 11.1.14 Topic Brainstorm
Free Response 11.1.15 Narrowing Down Topics
11.2 Empathy
Video 11.2.1 Empathy
Check for Understanding 11.2.2 Empathy Quiz
Connection 11.2.3 A Cafeteria Designed for Me
Free Response 11.2.4 A Cafeteria Designed for Me
Connection 11.2.5 Accessibility
Free Response 11.2.6 Accessibility Tips
Free Response 11.2.7 Accessibility: Designing for ALL
Connection 11.2.8 How to Interview
Free Response 11.2.9 How to Interview
Free Response 11.2.10 User Interview
11.3 Define
Video 11.3.1 Define
Check for Understanding 11.3.2 Define Quiz
Connection 11.3.3 Make a Composite Character Profile
Free Response 11.3.4 Composite Character Profile
Free Response 11.3.5 Point-of-View Statement Brainstorm
Free Response 11.3.6 POV Statement
11.4 Ideate
Video 11.4.1 Ideate
Check for Understanding 11.4.2 Ideate Quiz
Connection 11.4.3 Stoke
Free Response 11.4.4 Get Stoked
Connection 11.4.5 Brainstorming Tips
Free Response 11.4.6 Ideate!
11.5 Prototype
Video 11.5.1 Prototype
Check for Understanding 11.5.2 Prototype Quiz
Connection 11.5.3 Brainstorm Selection
Free Response 11.5.4 Harvest Ideas from the Brainstorm
Connection 11.5.5 Wizard of Oz Prototyping
Connection 11.5.6 Example Wizard of Oz Paper Prototype
Free Response 11.5.7 Make Your Paper Prototypes!
11.6 Test
Video 11.6.1 Test
Check for Understanding 11.6.2 Testing Quiz
Connection 11.6.3 Testing with Users
Connection 11.6.4 Example: How to User Test
Free Response 11.6.5 How to User Test Responses
Connection 11.6.6 Example: How NOT to User Test
Free Response 11.6.7 How NOT to User Test Responses
Free Response 11.6.8 Test Prototype 1
Free Response 11.6.9 Test Prototype 2
Free Response 11.6.10 Improve Your Prototype
11.7 Designing User Interfaces Quiz
Unit Quiz 11.7.1 Designing User Interfaces Quiz
Badge 11.7.2 Designing User Interfaces Badge
12. Final Project
12.1 Final Web Design Project
Free Response 12.1.1 Milestones
Challenge 12.1.2 Final Project
Badge 12.1.3 Final Project Badge
Badge 12.1.4 Web Design Completed