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 Creative Commons, Pt 1
Free Response 2.6.5 Creative Commons Pt 2
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. Advanced HTML and CSS
5.1 Getting Started - Advanced HTML and CSS
Video 5.1.1 Getting Started
Example 5.1.2 Example: Image Filters
Example 5.1.3 Example: Animations
Example 5.1.4 Example: Interactions
5.2 Multi-file Websites
Video 5.2.1 Splitting Your Site into Files
Check for Understanding 5.2.2 Splitting Your Site into Files Quiz
Example 5.2.3 Multipage Site Example
Exercise 5.2.4 Add a Style Sheet
Exercise 5.2.5 Dividing the Site
Exercise 5.2.6 Career Site: Creating Structure
5.3 Embedding iframes
Video 5.3.1 Embedding iframes
Check for Understanding 5.3.2 Embedding IFrames Quiz
Example 5.3.3 Embedding CodeHS
Example 5.3.4 Embedding a Map
Exercise 5.3.5 Embedding a Website
Exercise 5.3.6 Embed a Tweet
Exercise 5.3.7 Embed a Video
Exercise 5.3.8 Career Site: Include Outside Information
5.4 Divs
Video 5.4.1 Divs
Check for Understanding 5.4.2 Divs Quiz
Example 5.4.3 Divvying up the Site
Exercise 5.4.4 Quotes
Exercise 5.4.5 Flags
Exercise 5.4.6 Career Site: Separate the Content
Badge 5.4.7 Div Badge
5.5 Spans
Video 5.5.1 Spans
Check for Understanding 5.5.2 Spans Quiz
Example 5.5.3 Span Formatting
Exercise 5.5.4 Vocabulary
Exercise 5.5.5 Text Decoration
Exercise 5.5.6 Career Site: Style Special Pieces
5.6 Combining CSS Selectors
Video 5.6.1 Combining CSS Selectors
Check for Understanding 5.6.2 Combining CSS Selectors Quiz
Example 5.6.3 More Specific Styling
Exercise 5.6.4 Choosing Nested Tags
Exercise 5.6.5 Highlight the First Item
Exercise 5.6.6 Calorie Recommendations
5.7 The Don't Repeat Yourself Principle
Video 5.7.1 Don't Repeat Yourself
Check for Understanding 5.7.2 Don't Repeat Yourself Quiz
Example 5.7.3 Styling Multiple Tags
Example 5.7.4 Style Similar Items with Same Class
Exercise 5.7.5 Managing Change
Exercise 5.7.6 Condense CSS Rules
Free Response 5.7.7 Why DRY?
5.8 Special Selectors
Video 5.8.1 Special Selectors
Check for Understanding 5.8.2 Special Selectors Quiz
Example 5.8.3 Vote For Me
Example 5.8.4 Vote For Me Pt 2
Exercise 5.8.5 Extend Vote For Me
Exercise 5.8.6 Special Vendors
Exercise 5.8.7 Checklist
Exercise 5.8.8 Career Website: Add Milestones
Badge 5.8.9 Special Selectors Badge
5.9 Visibility
Video 5.9.1 Visibility
Check for Understanding 5.9.2 Visibility Quiz
Example 5.9.3 Display Example
Example 5.9.4 Fading Text
Exercise 5.9.5 Favorite Sea Creature
Exercise 5.9.6 Caption on Demand
5.10 Reading Documentation
Video 5.10.1 Reading Documentation
Check for Understanding 5.10.2 Reading Documentation Quiz
Example 5.10.3 Using Docs: Float
Example 5.10.4 Using Docs: blockquote
Exercise 5.10.5 Style the Table
Exercise 5.10.6 Electric Company
Exercise 5.10.7 Career Website: Add Pictures
5.11 Using the Inspector
Video 5.11.1 Using the Inspector
Check for Understanding 5.11.2 Using the Inspector Tool Quiz
Connection 5.11.3 Inspector Quick Start
Check for Understanding 5.11.4 Classes and IDs
Check for Understanding 5.11.5 Exploring the Art Museum
Check for Understanding 5.11.6 What's Your Style?
5.12 The Box Model
Video 5.12.1 The Box Model
Check for Understanding 5.12.2 The Box Model Quiz
Example 5.12.3 Adding Space Using Margin
Example 5.12.4 Adding Space Using Padding
Example 5.12.5 Combining Margin and Padding
Exercise 5.12.6 I need some space!
Exercise 5.12.7 I need some breathing room!
Free Response 5.12.8 Where is space added?
Exercise 5.12.9 Align Content Side by Side
Exercise 5.12.10 Career Website: Separate Content
Connection 5.12.11 Design with the Box Model
Badge 5.12.12 Box Badge
5.13 Image Manipulation
Video 5.13.1 Image Manipulation
Check for Understanding 5.13.2 Image Manipulation Quiz
Example 5.13.3 Grayscale Filter
Example 5.13.4 Blur Filter
Example 5.13.5 Hue Rotation
Exercise 5.13.6 Invert Filter
Exercise 5.13.7 Blurred
Exercise 5.13.8 Hue Rotation Comparisons
Exercise 5.13.9 Overexposure
Exercise 5.13.10 Grayscale Art
Exercise 5.13.11 Aesop's Fables Part 1
Exercise 5.13.12 Aesop's Fables Part 2
5.14 Animation
Video 5.14.1 Animation
Check for Understanding 5.14.2 Animation Quiz
Example 5.14.3 Animated Image Filter
Exercise 5.14.4 Animated Invert Filter
Exercise 5.14.5 Album Cover
Exercise 5.14.6 Aesop's Fables Part 3
5.15 Interaction
Video 5.15.1 Interaction
Check for Understanding 5.15.2 Interaction Quiz
Example 5.15.3 Interactive Image Filter
Example 5.15.4 Smooth Interactive Image Filter
Example 5.15.5 Smooth Change on Click
Exercise 5.15.6 Button Interaction
Exercise 5.15.7 Create Your Own Tooltip
Exercise 5.15.8 Aesop's Fables Part 4
Exercise 5.15.9 Career Website: Engage the User
Connection 5.15.10 CSS Tricks
5.16 Advanced HTML and CSS Quiz
Unit Quiz 5.16.1 Advanced HTML and CSS Quiz
Badge 5.16.2 Advanced HTML and CSS Badge
6. Project - Tell a Story
6.1 Project: Tell a Story
Connection 6.1.1 Real World Example: Infographic
Challenge 6.1.2 Project: Tell a Story
Badge 6.1.3 Tell a Story Badge
7. Bootstrap
7.1 What is Bootstrap?
Video 7.1.1 What is Bootstrap?
Example 7.1.2 Example Bootstrap Mobile Site
Connection 7.1.3 Real World Bootstrap: OneNYC
Free Response 7.1.4 Responsive vs Unresponsive
Free Response 7.1.5 Favorite Bootstrap Site
7.2 Getting Started with Bootstrap
Video 7.2.1 Getting Started with Bootstrap
Check for Understanding 7.2.2 Getting Started Quiz
Example 7.2.3 First Bootstrap Page
Example 7.2.4 Container-Fluid Page
Exercise 7.2.5 Using the Bootstrap Skeleton
Exercise 7.2.6 Your First Bootstrap
Challenge 7.2.7 1. Photo Portfolio
Connection 7.2.8 Container Docs
7.3 Jumbotron Pages
Video 7.3.1 Jumbotron Pages
Check for Understanding 7.3.2 Jumbotron Pages Quiz
Example 7.3.3 First Jumbotron Page
Example 7.3.4 Realty: Jumbotron
Exercise 7.3.5 Your First Jumbotron
Exercise 7.3.6 Add a Jumbotron!
Challenge 7.3.7 2. Photo Portfolio
Connection 7.3.8 Jumbotron Docs
Badge 7.3.9 Jumbotron Badge
7.4 The Bootstrap Grid System
Video 7.4.1 The Grid System
Check for Understanding 7.4.2 The Bootstrap Grid Quiz
Example 7.4.3 Grid System Example
Example 7.4.4 Column Overflow
Example 7.4.5 Different Device Sizes
Example 7.4.6 Example Layout
Example 7.4.7 Realty: Grid System
Exercise 7.4.8 Grid Practice
Exercise 7.4.9 Endangered Animals
Challenge 7.4.10 3. Photo Portfolio
Connection 7.4.11 Grid System Docs
7.5 Bootstrap Components
Video 7.5.1 Bootstrap Components
Check for Understanding 7.5.2 Bootstrap Components Quiz
Example 7.5.3 Page Headers
Example 7.5.4 Making Buttons
Example 7.5.5 Button Groups
Example 7.5.6 Using Glyphicons
Example 7.5.7 Realty: Buttons and Page Headers
Exercise 7.5.8 Header and Buttons
Exercise 7.5.9 Glyphicon Buttons
Challenge 7.5.10 4. Photo Portfolio
Connection 7.5.11 Button Docs
Connection 7.5.12 Glyphicon Docs
7.6 More Bootstrap Components
Video 7.6.1 More Bootstrap Components
Check for Understanding 7.6.2 More Bootstrap Components Quiz
Example 7.6.3 Thumbnail Skeleton
Example 7.6.4 Kitten Thumbnails
Example 7.6.5 Table Skeleton
Example 7.6.6 Striped Tables
Example 7.6.7 Realty: Thumbnails
Exercise 7.6.8 Shoe Shop
Exercise 7.6.9 Adding Captions
Exercise 7.6.10 Bootstrap Tables
Exercise 7.6.11 Favorite TV Shows
Exercise 7.6.12 Favorite Animals
Challenge 7.6.13 5. Photo Portfolio
Connection 7.6.14 Thumbnail Docs
Connection 7.6.15 Table Docs
7.7 Navigation Bars
Video 7.7.1 Navigation Bars
Check for Understanding 7.7.2 Navigation Bars Quiz
Connection 7.7.3 Navbar Docs
Example 7.7.4 Simple Nav Tabs
Example 7.7.5 Basic Navbar
Example 7.7.6 Basic Collapsable Navbar
Example 7.7.7 Realty: Navbar
Example 7.7.8 Realty: Collapsable Navbar
Exercise 7.7.9 Navigation Links
Exercise 7.7.10 Navbar Alignment
Exercise 7.7.11 Making Navbars
Challenge 7.7.12 6. Photo Portfolio
7.8 Drop Down Menus
Video 7.8.1 Drop Down Menus
Check for Understanding 7.8.2 Drop Down Menus Quiz
Example 7.8.3 Basic Dropdown
Example 7.8.4 Realty: Dropdown
Exercise 7.8.5 World Traveller
Exercise 7.8.6 Which Animal?
Exercise 7.8.7 Dropdown Nav
Challenge 7.8.8 7. Photo Portfolio
Connection 7.8.9 Drop Down Menu Docs
Badge 7.8.10 Menu Badge
7.9 Using Bootstrap Examples
Video 7.9.1 Using Bootstrap Examples
Check for Understanding 7.9.2 Using Bootstrap Examples Quiz
Connection 7.9.3 Bootstrap Starter Templates
Example 7.9.4 Realty: Carousel
Example 7.9.5 Blog Bootstrap Template
Example 7.9.6 Carousel Bootstrap Template
Example 7.9.7 Dashboard Bootstrap Template
Example 7.9.8 Cover Bootstrap Template
Example 7.9.9 Cover Site From Template
Challenge 7.9.10 Modify the Template
Challenge 7.9.11 8. Photo Portfolio
7.10 Bootstrap Challenges
Challenge 7.10.1 Sticky Navbar
Challenge 7.10.2 Adding Interactions
Challenge 7.10.3 Team Page
Challenge 7.10.4 9. Photo Portfolio
7.11 Bootstrap Quiz
Unit Quiz 7.11.1 Bootstrap Quiz
Badge 7.11.2 Bootstrap Badge
8. Bootstrap Project
8.1 Bootstrap Project
Example 8.1.1 Example Mobile Responsive Website
Connection 8.1.2 Real World Bootstrap: University of Washington
Connection 8.1.3 Real World Bootstrap: Maple
Challenge 8.1.4 Project: Create a Mobile Responsive Website
Badge 8.1.5 Bootstrap Project Badge
9. Designing User Interfaces
9.1 Intro to Design Thinking
Video 9.1.1 Intro to Design Thinking
Check for Understanding 9.1.2 Intro to Design Thinking
Free Response 9.1.3 User Interface Scavenger Hunt
Connection 9.1.4 Case Study: Helping Blind People See
Free Response 9.1.5 Case Study Responses
Connection 9.1.6 Crash Course: Empathize
Free Response 9.1.7 Empathize Notes
Connection 9.1.8 Crash Course: Define
Free Response 9.1.9 Problem Statement
Connection 9.1.10 Crash Course: Ideate
Free Response 9.1.11 Ideate Notes
Connection 9.1.12 Crash Course: Prototype and Test
Free Response 9.1.13 Testing Notes
Free Response 9.1.14 Topic Brainstorm
Free Response 9.1.15 Narrowing Down Topics
9.2 Empathy
Video 9.2.1 Empathy
Check for Understanding 9.2.2 Empathy Quiz
Connection 9.2.3 A Cafeteria Designed for Me
Free Response 9.2.4 A Cafeteria Designed for Me
Connection 9.2.5 Accessibility
Free Response 9.2.6 Accessibility Tips
Free Response 9.2.7 Accessibility: Designing for ALL
Connection 9.2.8 How to Interview
Free Response 9.2.9 How to Interview
Free Response 9.2.10 User Interview
9.3 Define
Video 9.3.1 Define
Check for Understanding 9.3.2 Define Quiz
Connection 9.3.3 Make a Composite Character Profile
Free Response 9.3.4 Composite Character Profile
Free Response 9.3.5 Point-of-View Statement Brainstorm
Free Response 9.3.6 POV Statement
9.4 Ideate
Video 9.4.1 Ideate
Check for Understanding 9.4.2 Ideate Quiz
Connection 9.4.3 Stoke
Free Response 9.4.4 Get Stoked
Connection 9.4.5 Brainstorming Tips
Free Response 9.4.6 Ideate!
9.5 Prototype
Video 9.5.1 Prototype
Check for Understanding 9.5.2 Prototype Quiz
Connection 9.5.3 Brainstorm Selection
Free Response 9.5.4 Harvest Ideas from the Brainstorm
Connection 9.5.5 Wizard of Oz Prototyping
Connection 9.5.6 Example Wizard of Oz Paper Prototype
Free Response 9.5.7 Make Your Paper Prototypes!
9.6 Test
Video 9.6.1 Test
Check for Understanding 9.6.2 Testing Quiz
Connection 9.6.3 Testing with Users
Connection 9.6.4 Example: How to User Test
Free Response 9.6.5 How to User Test Responses
Connection 9.6.6 Example: How NOT to User Test
Free Response 9.6.7 How NOT to User Test Responses
Free Response 9.6.8 Test Prototype 1
Free Response 9.6.9 Test Prototype 2
Free Response 9.6.10 Improve Your Prototype
9.7 Designing User Interfaces Quiz
Unit Quiz 9.7.1 Designing User Interfaces Quiz
Badge 9.7.2 Designing User Interfaces Badge
10. Final Project
10.1 Final Web Design Project
Free Response 10.1.1 Milestones
Challenge 10.1.2 Final Project
Badge 10.1.3 Final Project Badge
Badge 10.1.4 Web Design Completed