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
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
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
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
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
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> Tag
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
5.13 Advanced HTML and CSS Quiz
Quiz 5.13.1 Advanced HTML and CSS Quiz
Badge 5.13.2 Advanced HTML and CSS Badge
6. Designing User Interfaces
6.1 Intro to Design Thinking
Video 6.1.1 Intro to Design Thinking
Check for Understanding 6.1.2 Intro to Design Thinking
Free Response 6.1.3 User Interface Scavenger Hunt
Connection 6.1.4 Case Study: Helping Blind People See
Free Response 6.1.5 Case Study Responses
Connection 6.1.6 Crash Course: Empathize
Free Response 6.1.7 Empathize Notes
Connection 6.1.8 Crash Course: Define
Free Response 6.1.9 Problem Statement
Connection 6.1.10 Crash Course: Ideate
Free Response 6.1.11 Ideate Notes
Connection 6.1.12 Crash Course: Prototype and Test
Free Response 6.1.13 Testing Notes
Free Response 6.1.14 Topic Brainstorm
Free Response 6.1.15 Narrowing Down Topics
6.2 Empathy
Video 6.2.1 Empathy
Check for Understanding 6.2.2 Empathy Quiz
Connection 6.2.3 A Cafeteria Designed for Me
Free Response 6.2.4 A Cafeteria Designed for Me
Connection 6.2.5 Accessibility
Free Response 6.2.6 Accessibility Tips
Free Response 6.2.7 Accessibility: Designing for ALL
Connection 6.2.8 How to Interview
Free Response 6.2.9 How to Interview
Free Response 6.2.10 User Interview
6.3 Define
Video 6.3.1 Define
Check for Understanding 6.3.2 Define Quiz
Connection 6.3.3 Make a Composite Character Profile
Free Response 6.3.4 Composite Character Profile
Free Response 6.3.5 Point-of-View Statement Brainstorm
Free Response 6.3.6 POV Statement
6.4 Ideate
Video 6.4.1 Ideate
Check for Understanding 6.4.2 Ideate Quiz
Connection 6.4.3 Stoke
Free Response 6.4.4 Get Stoked
Connection 6.4.5 Brainstorming Tips
Free Response 6.4.6 Ideate!
6.5 Prototype
Video 6.5.1 Prototype
Check for Understanding 6.5.2 Prototype Quiz
Connection 6.5.3 Brainstorm Selection
Free Response 6.5.4 Harvest Ideas from the Brainstorm
Connection 6.5.5 Wizard of Oz Prototyping
Connection 6.5.6 Example Wizard of Oz Paper Prototype
Free Response 6.5.7 Make Your Paper Prototypes!
6.6 Test
Video 6.6.1 Test
Check for Understanding 6.6.2 Testing Quiz
Connection 6.6.3 Testing with Users
Connection 6.6.4 Example: How to User Test
Free Response 6.6.5 How to User Test Responses
Connection 6.6.6 Example: How NOT to User Test
Free Response 6.6.7 How NOT to User Test Responses
Free Response 6.6.8 Test Prototype 1
Free Response 6.6.9 Test Prototype 2
Free Response 6.6.10 Improve Your Prototype
6.7 Designing User Interfaces Quiz
Unit Quiz 6.7.1 Designing User Interfaces Quiz
Badge 6.7.2 Designing User Interfaces Badge
7. Final Project
7.1 Final Web Design Project
Free Response 7.1.1 Brainstorming
Free Response 7.1.2 Milestones
Challenge 7.1.3 Final Project
Badge 7.1.4 Final Project Badge
Badge 7.1.5 Web Design Completed