Activity | Points | Item Type |
---|---|---|
Getting Started - What is the Web? | ||
1.1 Welcome | Lesson | |
1.1.1 Welcome to Web Design | 1 | Video |
1.1.2 Welcome to Web Design Quiz | 3 | Check for Understanding |
1.1.3 Websites in Your Life | 5 | Free Response |
1.1.4 What is Web Design? | 5 | Free Response |
1.1.5 Course Goals | 5 | Free Response |
1.1.6 Meet a Web Developer | 1 | Connection |
1.2 The Internet | Lesson | |
1.2.1 What is The Internet? | 1 | Video |
1.2.2 What is the Internet? Quiz | 2 | Check for Understanding |
1.2.3 Internet Censorship: Google's Dragonfly Project | 1 | Connection |
1.2.4 Internet Censorship Reflection | 5 | Free Response |
1.2.5 The Right to Remain Anonymous? | 1 | Connection |
1.2.6 Anonymity Reflection | 5 | Free Response |
1.2.7 How does the Internet Work? | 1 | Video |
1.2.8 How does the Internet Work? Quiz | 2 | Check for Understanding |
1.2.9 Internet Protocols | 5 | Free Response |
1.3 Browsers | Lesson | |
1.3.1 Browsers | 1 | Video |
1.3.2 Browser Quiz | 2 | Check for Understanding |
1.3.3 What is a Browser? | 1 | Connection |
1.3.4 Your Browser | 1 | Connection |
1.3.5 Explaining a Browser | 5 | Free Response |
1.4 Viewing Websites | Lesson | |
1.4.1 Viewing Websites | 1 | Video |
1.4.2 Viewing Websites Quiz | 5 | Check for Understanding |
1.4.3 Explaining a URL | 5 | Free Response |
1.5 Getting Started - What is the Web? Quiz | Lesson | |
1.5.1 Getting Started - What is the Web? Quiz | 12 | Unit Quiz |
1.5.2 Getting Started Badge | 1 | Badge |
HTML - Structuring Websites | ||
2.1 Introduction to HTML | Lesson | |
2.1.1 Introduction to HTML | 1 | Video |
2.1.2 Introduction to HTML Quiz | 2 | Check for Understanding |
2.1.3 Our First HTML Page | 1 | Example |
2.1.4 Say Hello! | 5 | Exercise |
2.2 Structure of an HTML Page | Lesson | |
2.2.1 Structure of an HTML Page | 1 | Video |
2.2.2 Structure of an HTML Page Quiz | 1 | Check for Understanding |
2.2.3 HTML Template | 1 | Example |
2.2.4 Hello World Page | 1 | Example |
2.2.5 Using Comments | 5 | Example |
2.2.6 The <title> Tag | 5 | Exercise |
2.2.7 Your First HTML Page | 5 | Exercise |
2.3 Formatting Text | Lesson | |
2.3.1 Formatting Text | 1 | Video |
2.3.2 Formatting Text Quiz | 1 | Check for Understanding |
2.3.3 Dictionary | 1 | Example |
2.3.4 Word Definitions | 5 | Exercise |
2.3.5 Pet Names | 5 | Exercise |
2.3.6 Call of the Wild | 5 | Exercise |
2.3.7 Formatting Badge | 1 | Badge |
2.4 Links | Lesson | |
2.4.1 Links | 1 | Video |
2.4.2 Links Quiz | 1 | Check for Understanding |
2.4.3 The <a> Tag | 1 | Example |
2.4.4 Bookmarks | 5 | Exercise |
2.4.5 Encyclopedias | 5 | Exercise |
2.5 Images | Lesson | |
2.5.1 Images | 1 | Video |
2.5.2 Images Quiz | 1 | Check for Understanding |
2.5.3 The <img> Tag | 1 | Example |
2.5.4 Building the CodeHS Homepage | 1 | Example |
2.5.5 Collage on a Theme | 5 | Exercise |
2.5.6 Linking an Image | 5 | Exercise |
2.5.7 National Parks | 5 | Exercise |
2.6 Copyright | Lesson | |
2.6.1 Copyright | 1 | Video |
2.6.2 Copyright Quiz | 2 | Check for Understanding |
2.6.3 Citing Sources Example | 1 | Example |
2.6.4 Exploring Creative Commons | 1 | Connection |
2.6.5 Response: Creative Commons | 5 | Free Response |
2.6.6 Finding Images | 5 | Free Response |
2.6.7 Make a Collage | 5 | Exercise |
2.6.8 Why Copyright is Important | 5 | Free Response |
2.7 HTML Lists | Lesson | |
2.7.1 HTML Lists | 1 | Video |
2.7.2 HTML Lists Quiz | 1 | Check for Understanding |
2.7.3 Grocery Shopping | 1 | Example |
2.7.4 Class Planning | 5 | Exercise |
2.7.5 Dream Destinations | 5 | Exercise |
2.7.6 Vacation Guides | 5 | Exercise |
2.8 HTML Tables | Lesson | |
2.8.1 HTML Tables | 1 | Video |
2.8.2 HTML Tables Quiz | 3 | Check for Understanding |
2.8.3 Address Book | 1 | Example |
2.8.4 National Sports | 5 | Exercise |
2.8.5 Table of Favorites | 5 | Exercise |
2.9 HTML Styling | Lesson | |
2.9.1 HTML Styling | 1 | Video |
2.9.2 HTML Styling Quiz | 1 | Check for Understanding |
2.9.3 Stylish Address Book | 1 | Example |
2.9.4 Background Colors | 5 | Exercise |
2.9.5 Style Your Class List | 5 | Exercise |
2.9.6 Styling Badge | 1 | Badge |
2.10 HTML Colors | Lesson | |
2.10.1 HTML Colors | 1 | Video |
2.10.2 HTML Colors Quiz | 2 | Check for Understanding |
2.10.3 HTML Colors Examples | 1 | Example |
2.10.4 Create Your Own Color | 5 | Exercise |
2.10.5 Gradients | 5 | Exercise |
2.10.6 Color Wheel | 1 | Connection |
2.10.7 Using Good Colors | 5 | Exercise |
2.11 HTML - Structuring Websites Quiz | Lesson | |
2.11.1 HTML - Structuring Websites Quiz | 9 | Unit Quiz |
2.11.2 HTML Badge | 1 | Badge |
CSS - Styling Websites | ||
3.1 Introduction to CSS | Lesson | |
3.1.1 Introduction to CSS | 1 | Video |
3.1.2 Introduction to CSS Quiz | 2 | Check for Understanding |
3.1.3 Styling your H1s | 1 | Example |
3.1.4 First style with CSS | 5 | Exercise |
3.1.5 List Styling | 5 | Exercise |
3.1.6 Endangered Animals: Skeleton | 5 | Exercise |
3.2 CSS Select by Tag | Lesson | |
3.2.1 CSS Select by Tag | 1 | Video |
3.2.2 CSS Select by Tag Quiz | 1 | Check for Understanding |
3.2.3 Rainbow | 1 | Example |
3.2.4 Puppy Styling | 1 | Example |
3.2.5 Set List | 5 | Exercise |
3.2.6 Your Appliance Recommendations | 5 | Exercise |
3.2.7 Endangered Animals: Style the Headers | 5 | Exercise |
3.3 CSS Select by Class | Lesson | |
3.3.1 CSS Select by Class | 1 | Video |
3.3.2 CSS Select by Class Quiz | 1 | Check for Understanding |
3.3.3 Simple Checkerboard | 1 | Example |
3.3.4 Swim Meet | 5 | Exercise |
3.3.5 Favorite Things | 5 | Exercise |
3.3.6 Endangered Animals: Add Color Coding | 5 | Exercise |
3.4 CSS Select by ID | Lesson | |
3.4.1 CSS Select by ID | 1 | Video |
3.4.2 CSS Select by ID Quiz | 1 | Check for Understanding |
3.4.3 Logo | 1 | Example |
3.4.4 Must Do Today! | 5 | Exercise |
3.4.5 Lomeli's Menu | 5 | Exercise |
3.4.6 Endangered Animals: Add Pictures | 5 | Exercise |
3.4.7 Selector Badge | 1 | Badge |
3.5 The Cascade | Lesson | |
3.5.1 The Cascade | 1 | Video |
3.5.2 The Cascade Quiz | 3 | Check for Understanding |
3.5.3 Using Importance | 1 | Example |
3.5.4 Order of Precedence | 1 | Example |
3.5.5 We Really Like Dairy | 5 | Exercise |
3.5.6 Style the Table | 5 | Exercise |
3.6 CSS - Styling Websites Quiz | Lesson | |
3.6.1 CSS - Styling Websites Quiz | 7 | Unit Quiz |
3.6.2 CSS Badge | 1 | Badge |
Project - Create Your Homepage | ||
4.1 Homepage: Your First Website | Lesson | |
4.1.1 Example Homepage | 1 | Example |
4.1.2 Real World Homepage | 1 | Connection |
4.1.3 Set Up Your codehs.me Website | 10 | Challenge |
4.1.4 Create Your Homepage | 10 | Challenge |
4.1.5 Create Your Homepage Badge | 1 | Badge |
Advanced HTML and CSS | ||
5.1 Getting Started - Advanced HTML and CSS - Update | Lesson | |
5.1.1 Getting Started | 1 | Video |
5.1.2 Example: Image Filters | 1 | Example |
5.1.3 Example: Animations | 1 | Example |
5.1.4 Example: Interactions | 1 | Example |
5.2 Multi-file Websites | Lesson | |
5.2.1 Splitting Your Site into Files | 1 | Video |
5.2.2 Splitting Your Site into Files Quiz | 2 | Check for Understanding |
5.2.3 Multipage Site Example | 1 | Example |
5.2.4 Add a Style Sheet | 5 | Exercise |
5.2.5 Dividing the Site | 5 | Exercise |
5.2.6 Career Site: Creating Structure | 5 | Exercise |
5.3 Embedding iframes | Lesson | |
5.3.1 Embedding iframes | 1 | Video |
5.3.2 Embedding iFrames Quiz | 2 | Check for Understanding |
5.3.3 Embedding CodeHS Program | 1 | Example |
5.3.4 Embedding a Map | 1 | Example |
5.3.5 Embedding a Website | 5 | Exercise |
5.3.6 Embed a Video | 5 | Exercise |
5.3.7 Career Site: Include Outside Information | 5 | Exercise |
5.4 Divs | Lesson | |
5.4.1 Divs | 1 | Video |
5.4.2 Divs Quiz | 2 | Check for Understanding |
5.4.3 Divvying up the Site | 1 | Example |
5.4.4 Quotes | 5 | Exercise |
5.4.5 Flags | 5 | Exercise |
5.4.6 Career Site: Separate the Content | 5 | Exercise |
5.4.7 Div Badge | 1 | Badge |
5.5 Spans | Lesson | |
5.5.1 Spans | 1 | Video |
5.5.2 Spans Quiz | 1 | Check for Understanding |
5.5.3 Span Formatting | 1 | Example |
5.5.4 Vocabulary | 5 | Exercise |
5.5.5 Text Decoration | 5 | Exercise |
5.5.6 Career Site: Style Special Pieces | 5 | Exercise |
5.6 Semantic Tags | Lesson | |
5.6.1 Semantic Tags | 5 | Video |
5.6.2 Semantic Skeleton | 5 | Example |
5.6.3 Section Flowchart Example | 5 | Example |
5.6.4 Semantic Article | 5 | Example |
5.6.5 Great Quotes | 5 | Exercise |
5.6.6 Article of Interest | 5 | Exercise |
5.6.7 Career Site: Semantic Tags | 5 | Exercise |
5.7 Combining CSS Selectors | Lesson | |
5.7.1 Combining CSS Selectors | 1 | Video |
5.7.2 Combining CSS Selectors Quiz | 2 | Check for Understanding |
5.7.3 More Specific Styling | 1 | Example |
5.7.4 Choosing Nested Tags | 5 | Exercise |
5.7.5 Highlight the First Item | 5 | Exercise |
5.7.6 Mars Helicopter Data | 5 | Exercise |
5.8 The Don't Repeat Yourself Principle | Lesson | |
5.8.1 Don't Repeat Yourself | 1 | Video |
5.8.2 Don't Repeat Yourself Quiz | 2 | Check for Understanding |
5.8.3 Styling Multiple Tags | 1 | Example |
5.8.4 Style Similar Items with Same Class | 1 | Example |
5.8.5 Managing Change | 5 | Exercise |
5.8.6 Condense CSS Rules | 5 | Exercise |
5.8.7 Why DRY? | 5 | Free Response |
5.9 Special Selectors | Lesson | |
5.9.1 Special Selectors | 1 | Video |
5.9.2 Special Selectors Quiz | 2 | Check for Understanding |
5.9.3 Vote For Me | 1 | Example |
5.9.4 Vote For Me Pt 2 | 1 | Example |
5.9.5 Extend Vote For Me | 5 | Exercise |
5.9.6 Special Vendors | 5 | Exercise |
5.9.7 Checklist | 5 | Exercise |
5.9.8 Career Website: Add Milestones | 5 | Exercise |
5.9.9 Special Selectors Badge | 1 | Badge |
5.10 Visibility | Lesson | |
5.10.1 Visibility | 1 | Video |
5.10.2 Visibility Quiz | 2 | Check for Understanding |
5.10.3 Display Example | 1 | Example |
5.10.4 Fading Text | 1 | Example |
5.10.5 Favorite Sea Creature | 5 | Exercise |
5.10.6 Caption on Demand | 5 | Exercise |
5.11 Reading Documentation | Lesson | |
5.11.1 Reading Documentation | 1 | Video |
5.11.2 Reading Documentation Quiz | 2 | Check for Understanding |
5.11.3 Using Docs: Float | 1 | Example |
5.11.4 Using Docs: <blockquote> Tag | 1 | Example |
5.11.5 Style the Table | 5 | Exercise |
5.11.6 Electric Company | 5 | Exercise |
5.11.7 Career Website: Add Pictures | 5 | Exercise |
5.12 Using the Inspector | Lesson | |
5.12.1 Using the Inspector | 1 | Video |
5.12.2 Using the Inspector Tool Quiz | 1 | Check for Understanding |
5.12.3 Inspector Quick Start | 1 | Connection |
5.12.4 Classes and IDs | 4 | Check for Understanding |
5.12.5 Exploring the Art Museum | 4 | Check for Understanding |
5.12.6 What's Your Style? | 5 | Quiz |
5.13 The Box Model | Lesson | |
5.13.1 The Box Model | 1 | Video |
5.13.2 The Box Model Quiz | 2 | Check for Understanding |
5.13.3 Adding Space Using Margin | 1 | Example |
5.13.4 Adding Space Using Padding | 1 | Example |
5.13.5 Combining Margin and Padding | 1 | Example |
5.13.6 I need some space! | 5 | Exercise |
5.13.7 I need some breathing room! | 5 | Exercise |
5.13.8 Where is space added? | 5 | Free Response |
5.13.9 Measuring Space | 5 | Example |
5.13.10 Align Content Side by Side | 5 | Exercise |
5.13.11 Career Website: Separate Content | 5 | Exercise |
5.13.12 Design with the Box Model | 1 | Connection |
5.13.13 Box Badge | 1 | Badge |
5.14 Image Manipulation | Lesson | |
5.14.1 Image Manipulation | 1 | Video |
5.14.2 Image Manipulation Quiz | 2 | Check for Understanding |
5.14.3 Grayscale Filter | 1 | Example |
5.14.4 Blur Filter | 1 | Example |
5.14.5 Hue Rotation | 1 | Example |
5.14.6 Invert Filter | 5 | Exercise |
5.14.7 Blurred | 5 | Exercise |
5.14.8 Hue Rotation Comparisons | 5 | Exercise |
5.14.9 Overexposure | 5 | Exercise |
5.14.10 Grayscale Art | 5 | Exercise |
5.14.11 Worldwide Foods Part 1 | 5 | Exercise |
5.14.12 Worldwide Foods Part 2 | 5 | Exercise |
5.15 Animation | Lesson | |
5.15.1 Animation | 1 | Video |
5.15.2 Animation Quiz | 2 | Check for Understanding |
5.15.3 Animated Image Filter | 1 | Example |
5.15.4 Animated Invert Filter | 5 | Exercise |
5.15.5 Album Cover | 5 | Exercise |
5.15.6 Worldwide Foods Part 3 | 5 | Exercise |
5.16 Interaction | Lesson | |
5.16.1 Interaction | 1 | Video |
5.16.2 Interaction Quiz | 2 | Check for Understanding |
5.16.3 Interactive Image Filter | 1 | Example |
5.16.4 Smooth Interactive Image Filter | 1 | Example |
5.16.5 Smooth Change on Click | 1 | Example |
5.16.6 Button Interaction | 5 | Exercise |
5.16.7 Create Your Own Tooltip | 5 | Exercise |
5.16.8 Worldwide Foods Part 4 | 5 | Exercise |
5.16.9 Career Website: Engage the User | 5 | Exercise |
5.16.10 CSS Tricks | 1 | Connection |
5.17 Advanced HTML and CSS Quiz | Lesson | |
5.17.1 Advanced HTML and CSS Quiz | 15 | Unit Quiz |
5.17.2 Advanced HTML and CSS Badge | 1 | Badge |
Designing User Interfaces | ||
6.1 Intro to Design Thinking | Lesson | |
6.1.1 Intro to Design Thinking | 1 | Video |
6.1.2 Intro to Design Thinking | 2 | Check for Understanding |
6.1.3 User Interface Scavenger Hunt | 5 | Free Response |
6.1.4 Case Study: Helping Blind People See | 1 | Connection |
6.1.5 Case Study Responses | 5 | Free Response |
6.1.6 Crash Course: Empathize | 1 | Connection |
6.1.7 Empathize Notes | 5 | Free Response |
6.1.8 Crash Course: Define | 1 | Connection |
6.1.9 Problem Statement | 5 | Free Response |
6.1.10 Crash Course: Ideate | 1 | Connection |
6.1.11 Ideate Notes | 5 | Free Response |
6.1.12 Crash Course: Prototype and Test | 1 | Connection |
6.1.13 Testing Notes | 5 | Free Response |
6.1.14 Topic Brainstorm | 5 | Free Response |
6.1.15 Narrowing Down Topics | 5 | Free Response |
6.2 Empathy | Lesson | |
6.2.1 Empathy | 1 | Video |
6.2.2 Empathy Quiz | 2 | Check for Understanding |
6.2.3 A Cafeteria Designed for Me | 1 | Connection |
6.2.4 A Cafeteria Designed for Me | 5 | Free Response |
6.2.5 Accessibility | 1 | Connection |
6.2.6 Accessibility Tips | 5 | Free Response |
6.2.7 Inaccessible Site Review | 5 | Example |
6.2.8 Improve Site's Accessibility | 5 | Exercise |
6.2.9 How to Interview | 1 | Connection |
6.2.10 How to Interview | 5 | Free Response |
6.2.11 User Interview | 5 | Free Response |
6.3 Define | Lesson | |
6.3.1 Define | 1 | Video |
6.3.2 Define Quiz | 2 | Check for Understanding |
6.3.3 Make a Composite Character Profile | 1 | Connection |
6.3.4 Composite Character Profile | 5 | Free Response |
6.3.5 Point-of-View Statement Brainstorm | 5 | Free Response |
6.3.6 POV Statement | 5 | Free Response |
6.4 Ideate | Lesson | |
6.4.1 Ideate | 1 | Video |
6.4.2 Ideate Quiz | 1 | Check for Understanding |
6.4.3 Stoke | 1 | Connection |
6.4.4 Get Stoked | 5 | Free Response |
6.4.5 Brainstorming Tips | 1 | Connection |
6.4.6 Ideate! | 5 | Free Response |
6.5 Prototype | Lesson | |
6.5.1 Prototype | 1 | Video |
6.5.2 Prototype Quiz | 1 | Check for Understanding |
6.5.3 Brainstorm Selection | 1 | Connection |
6.5.4 Harvest Ideas from the Brainstorm | 5 | Free Response |
6.5.5 Wizard of Oz Prototyping | 1 | Connection |
6.5.6 Example Wizard of Oz Paper Prototype | 1 | Connection |
6.5.7 Make Your Paper Prototypes! | 5 | Free Response |
6.6 Test | Lesson | |
6.6.1 Test | 1 | Video |
6.6.2 Testing Quiz | 1 | Check for Understanding |
6.6.3 Testing with Users | 1 | Connection |
6.6.4 Example: How to User Test | 1 | Connection |
6.6.5 How to User Test Responses | 5 | Free Response |
6.6.6 Example: How NOT to User Test | 1 | Connection |
6.6.7 How NOT to User Test Responses | 5 | Free Response |
6.6.8 Test Prototype 1 | 5 | Free Response |
6.6.9 Test Prototype 2 | 5 | Free Response |
6.6.10 Improve Your Prototype | 5 | Free Response |
6.7 Designing User Interfaces Quiz | Lesson | |
6.7.1 Designing User Interfaces Quiz | 10 | Unit Quiz |
6.7.2 Designing User Interfaces Badge | 1 | Badge |
Final Project | ||
7.1 Final Web Design Project | Lesson | |
7.1.1 Milestones | 5 | Free Response |
7.1.2 Final Project | 10 | Challenge |
7.1.3 Final Project Badge | 1 | Badge |
7.1.4 Web Design Completed | 1 | Badge |
The Internet | ||
8.1 Getting Started - The Internet | Lesson | |
8.1.1 Welcome to the Internet | 1 | Video |
8.1.2 Welcome to the Internet Quiz | 1 | Check for Understanding |
8.1.3 The Internet and You | 5 | Free Response |
8.2 Internet Hardware | Lesson | |
8.2.1 Hardware of the Internet | 1 | Video |
8.2.2 Internet Hardware Quiz | 3 | Check for Understanding |
8.2.3 The Internet is in the Ocean | 1 | Connection |
8.3 Internet Addresses | Lesson | |
8.3.1 Internet Addresses | 1 | Video |
8.3.2 Internet Addresses Quiz | 1 | Check for Understanding |
8.3.3 The Need for Addresses | 5 | Free Response |
8.3.4 4-bit Addresses | 1 | Check for Understanding |
8.3.5 IPv4 vs IPv6 | 5 | Free Response |
8.4 DNS | Lesson | |
8.4.1 DNS | 1 | Video |
8.4.2 DNS Quiz | 2 | Check for Understanding |
8.4.3 How Does DNS Work? | 1 | Connection |
8.4.4 How Does DNS Work? | 5 | Free Response |
8.5 Routing | Lesson | |
8.5.1 Routing | 1 | Video |
8.5.2 Routing Quiz | 1 | Check for Understanding |
8.5.3 Redundancy | 5 | Free Response |
8.5.4 Route Tracing | 5 | Traceroute |
8.6 Packets and Protocols | Lesson | |
8.6.1 Packets and Protocols | 1 | Video |
8.6.2 Packets and Protocols Quiz | 1 | Check for Understanding |
8.6.3 Passing Notes | 10 | Resource |
8.6.4 How the Internet Works | 1 | Connection |
8.6.5 The Story of the Internet | 5 | Free Response |
8.7 The Impact of the Internet | Lesson | |
8.7.1 The Impact of the Internet | 1 | Video |
8.7.2 The Impact of the Internet Quiz | 2 | Check for Understanding |
8.7.3 Pokemon Go: Unintended Effects | 1 | Connection |
8.8 The Internet Quiz | Lesson | |
8.8.1 The Internet Quiz | 15 | Unit Quiz |
Design Research Project | ||
9.1 Design Research Project | Lesson | |
9.1.1 Research a Design Concept | 5 | Free Response |
9.1.2 Explain Your Design Concept | 5 | Free Response |
9.1.3 Create an Example | 10 | Challenge |
9.1.4 Present Your Design Concept | 15 | Presentation |
Sign up for a free teacher account to get access to curriculum, teacher tools and teacher resources.
Teacher SignupSign up as a student if you are in a school and have a class code given to you by your teacher.
Student Signup