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
Quiz 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?
Quiz 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?
Quiz 1.2.8 How does the Internet Work? Quiz
Free Response 1.2.9 Internet Protocols
1.3 Browsers
Video 1.3.1 Browsers
Quiz 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
Quiz 1.4.2 Viewing Websites Quiz
Free Response 1.4.3 Explaining a URL
1.5 Getting Started - What is the Web? Quiz
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
Quiz 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
Quiz 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
Quiz 2.3.1 Formatting Text Quiz
Exercise 2.3.2 Pet Names
Badge 2.3.3 Formatting Badge
2.4 Links
Video 2.4.1 Links
Quiz 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
Quiz 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
Quiz 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
Quiz 2.7.2 HTML Lists Quiz
Example 2.7.3 Grocery Shopping
Exercise 2.7.4 Class Planning
Exercise 2.7.5 Dream Destinations
2.8 HTML Tables
Video 2.8.1 HTML Tables
Quiz 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
Quiz 2.9.2 HTML Styling Quiz
Example 2.9.3 Stylish Address Book
Exercise 2.9.4 Background Colors
Badge 2.9.5 Styling Badge
2.10 HTML Colors
Video 2.10.1 HTML Colors
Quiz 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
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
Quiz 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
Quiz 3.2.2 CSS Select by Tag Quiz
Example 3.2.3 Rainbow
Example 3.2.4 Dog Styling
Exercise 3.2.5 Set List
Exercise 3.2.6 Your Appliance Recommendations
3.3 CSS Select by Class
Video 3.3.1 CSS Select by Class
Quiz 3.3.2 CSS Select by Class Quiz
Example 3.3.3 Simple Checkerboard
Exercise 3.3.4 Swim Meet
3.4 CSS Select by ID
Video 3.4.1 CSS Select by ID
Quiz 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
Badge 3.4.6 Selector Badge
3.5 The Cascade
Video 3.5.1 The Cascade
Quiz 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
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
Connection 4.1.1 Real World Homepage
Challenge 4.1.2 Set Up Your codehs.me Website
Challenge 4.1.3 Create Your Homepage
Badge 4.1.4 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
Example 5.2.2 Multipage Site Example
Exercise 5.2.3 Add a Style Sheet
Exercise 5.2.4 Dividing the Site
Exercise 5.2.5 Career Site: Creating Structure
5.3 Embedding iframes
Video 5.3.1 Embedding iframes
Quiz 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
5.4 Divs
Video 5.4.1 Divs
Quiz 5.4.2 Divs Quiz
Example 5.4.3 Divvying up the Site
Exercise 5.4.4 Quotes
Exercise 5.4.5 Flags
Badge 5.4.6 Div Badge
5.5 Spans
Video 5.5.1 Spans
Quiz 5.5.2 Spans Quiz
Example 5.5.3 Span Formatting
Exercise 5.5.4 Vocabulary
Exercise 5.5.5 Text Decoration
5.6 Combining CSS Selectors
Video 5.6.1 Combining CSS Selectors
Quiz 5.6.2 Combining CSS Selectors Quiz
Exercise 5.6.3 Highlight the First Item
Exercise 5.6.4 Calorie Recommendations
5.7 The Don't Repeat Yourself Principle
Video 5.7.1 Don't Repeat Yourself
Quiz 5.7.2 Don't Repeat Yourself Quiz
Exercise 5.7.3 Condense CSS Rules
5.8 Special Selectors
Video 5.8.1 Special Selectors
Quiz 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 Checklist
Badge 5.8.7 Special Selectors Badge
5.9 Visibility
Video 5.9.1 Visibility
Quiz 5.9.2 Visibility Quiz
Example 5.9.3 Display Example
Example 5.9.4 Fading Text
5.10 Reading Documentation
Video 5.10.1 Reading Documentation
Quiz 5.10.2 Reading Documentation Quiz
Example 5.10.3 Using Docs: blockquote
5.11 Using the Inspector
Video 5.11.1 Using the Inspector
Quiz 5.11.2 Using the Inspector Tool Quiz
Connection 5.11.3 Inspector Quick Start
Quiz 5.11.4 Classes and IDs
Quiz 5.11.5 Exploring the Art Museum
5.12 The Box Model
Quiz 5.12.1 The Box Model Quiz
Exercise 5.12.2 I need some space!
Exercise 5.12.3 I need some breathing room!
Connection 5.12.4 Design with the Box Model
Badge 5.12.5 Box Badge
5.13 Image Manipulation
Video 5.13.1 Image Manipulation
Quiz 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 Hue Rotation Comparisons
Exercise 5.13.8 Overexposure
Exercise 5.13.9 Grayscale Art
5.14 Animation
Video 5.14.1 Animation
Quiz 5.14.2 Animation Quiz
Example 5.14.3 Animated Image Filter
Exercise 5.14.4 Animated Invert Filter
5.15 Interaction
Video 5.15.1 Interaction
Quiz 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
Connection 5.15.7 CSS Tricks
5.16 Advanced HTML and CSS Quiz
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?
Connection 7.1.2 Real World Bootstrap: OneNYC
Free Response 7.1.3 Responsive vs Unresponsive
Free Response 7.1.4 Favorite Bootstrap Site
7.2 Getting Started with Bootstrap
Quiz 7.2.1 Getting Started Quiz
Challenge 7.2.2 1. Photo Portfolio
7.3 The Bootstrap Grid System
Quiz 7.3.1 The Bootstrap Grid Quiz
Challenge 7.3.2 2. Photo Portfolio
Challenge 7.3.3 3. Photo Portfolio
Connection 7.3.4 Grid System Docs
7.4 Bootstrap Components
Challenge 7.4.1 4. Photo Portfolio
7.5 More Bootstrap Components
Quiz 7.5.1 More Bootstrap Components Quiz
Example 7.5.2 Thumbnail Skeleton
Example 7.5.3 Kitten Thumbnails
Example 7.5.4 Table Skeleton
Example 7.5.5 Striped Tables
Example 7.5.6 Realty: Thumbnails
Exercise 7.5.7 Shoe Shop
Exercise 7.5.8 Adding Captions
Exercise 7.5.9 Bootstrap Tables
Exercise 7.5.10 Favorite TV Shows
Exercise 7.5.11 Favorite Animals
Challenge 7.5.12 5. Photo Portfolio
Connection 7.5.13 Thumbnail Docs
Connection 7.5.14 Table Docs
7.6 Navigation Bars
Quiz 7.6.1 Navigation Bars Quiz
Connection 7.6.2 Navbar Docs
Example 7.6.3 Simple Nav Tabs
Example 7.6.4 Basic Navbar
Example 7.6.5 Basic Collapsable Navbar
Example 7.6.6 Realty: Navbar
Example 7.6.7 Realty: Collapsable Navbar
Exercise 7.6.8 Navigation Links
Exercise 7.6.9 Navbar Alignment
Exercise 7.6.10 Making Navbars
Challenge 7.6.11 6. Photo Portfolio
7.7 Drop Down Menus
Quiz 7.7.1 Drop Down Menus Quiz
Example 7.7.2 Basic Dropdown
Example 7.7.3 Realty: Dropdown
Exercise 7.7.4 World Traveller
Exercise 7.7.5 Which Animal?
Exercise 7.7.6 Dropdown Nav
Challenge 7.7.7 7. Photo Portfolio
Connection 7.7.8 Drop Down Menu Docs
Badge 7.7.9 Menu Badge
7.8 Using Bootstrap Examples
Quiz 7.8.1 Using Bootstrap Examples Quiz
Connection 7.8.2 Bootstrap Starter Templates
Example 7.8.3 Realty: Carousel
Example 7.8.4 Blog Bootstrap Template
Example 7.8.5 Carousel Bootstrap Template
Example 7.8.6 Dashboard Bootstrap Template
Example 7.8.7 Cover Bootstrap Template
Example 7.8.8 Cover Site From Template
Challenge 7.8.9 Modify the Template
Challenge 7.8.10 8. Photo Portfolio
7.9 Bootstrap Challenges
Challenge 7.9.1 Sticky Navbar
Challenge 7.9.2 Adding Interactions
Challenge 7.9.3 Team Page
Challenge 7.9.4 9. Photo Portfolio
7.10 Bootstrap Quiz
Quiz 7.10.1 Bootstrap Quiz
Badge 7.10.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
Quiz 9.1.2 Intro to Design Thinking
Free Response 9.1.3 User Interface Scavenger Hunt
Free Response 9.1.4 Case Study Responses
Free Response 9.1.5 Empathize Notes
Free Response 9.1.6 Problem Statement
Free Response 9.1.7 Ideate Notes
Free Response 9.1.8 Testing Notes
Free Response 9.1.9 Topic Brainstorm
Free Response 9.1.10 Narrowing Down Topics
9.2 Empathy
Video 9.2.1 Empathy
Quiz 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 How to Interview
Free Response 9.2.6 How to Interview
Free Response 9.2.7 User Interview
9.3 Define
Video 9.3.1 Define
Quiz 9.3.2 Define Quiz
Free Response 9.3.3 Composite Character Profile
Free Response 9.3.4 POV Statement
9.4 Ideate
Video 9.4.1 Ideate
Quiz 9.4.2 Ideate Quiz
Free Response 9.4.3 Ideate!
9.5 Prototype
Video 9.5.1 Prototype
Quiz 9.5.2 Prototype Quiz
Free Response 9.5.3 Harvest Ideas from the Brainstorm
Connection 9.5.4 Example Wizard of Oz Paper Prototype
Free Response 9.5.5 Make Your Paper Prototypes!
9.6 Test
Video 9.6.1 Test
Quiz 9.6.2 Testing Quiz
Connection 9.6.3 Example: How to User Test
Free Response 9.6.4 How to User Test Responses
Connection 9.6.5 Example: How NOT to User Test
Free Response 9.6.6 How NOT to User Test Responses
Free Response 9.6.7 Test Prototype 1
Free Response 9.6.8 Test Prototype 2
Free Response 9.6.9 Improve Your Prototype
9.7 Designing User Interfaces Quiz
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