Please enable JavaScript to use CodeHS

Points

Activity Points
Getting Started - What is the Web?
1.1 Welcome
1.1.1 Welcome to Web Design 1
1.1.2 Welcome to Web Design Quiz 3
1.1.3 Websites in Your Life 5
1.1.4 What is Web Design? 5
1.1.5 Course Goals 5
1.1.6 Meet a Web Developer 1
1.2 The Internet
1.2.1 What is The Internet? 1
1.2.2 What is the Internet? Quiz 2
1.2.3 Internet Censorship: Google's Dragonfly Project 1
1.2.4 Internet Censorship Reflection 5
1.2.5 The Right to Remain Anonymous? 1
1.2.6 Anonymity Reflection 5
1.2.7 How does the Internet Work? 1
1.2.8 How does the Internet Work? Quiz 2
1.2.9 Internet Protocols 5
1.3 Browsers
1.3.1 Browsers 1
1.3.2 Browser Quiz 5
1.3.3 What is a Browser? 1
1.3.4 Your Browser 1
1.3.5 Explaining a Browser 5
1.4 Viewing Websites
1.4.1 Viewing Websites 1
1.4.2 Viewing Websites Quiz 5
1.4.3 Explaining a URL 5
1.5 Getting Started - What is the Web? Quiz
1.5.1 Getting Started - What is the Web? Quiz 10
1.5.2 Getting Started Badge 1
HTML - Structuring Websites
2.1 Introduction to HTML
2.1.1 Introduction to HTML 1
2.1.2 Introduction to HTML Quiz 5
2.1.3 Our First HTML Page 1
2.1.4 Say Hello! 5
2.2 Structure of an HTML Page
2.2.1 Structure of an HTML Page 1
2.2.2 Structure of an HTML Page Quiz 5
2.2.3 HTML Template 1
2.2.4 Hello World Page 1
2.2.5 Using Comments 5
2.2.6 The <title> Tag 5
2.2.7 Your First HTML Page 5
2.3 Formatting Text
2.3.1 Formatting Text 1
2.3.2 Formatting Text Quiz 5
2.3.3 Dictionary 1
2.3.4 Word Definitions 5
2.3.5 Pet Names 5
2.3.6 Call of the Wild 5
2.3.7 Formatting Badge 1
2.4 Links
2.4.1 Links 1
2.4.2 Links Quiz 5
2.4.3 The <a> Tag 1
2.4.4 Bookmarks 5
2.4.5 Encyclopedias 5
2.5 Images
2.5.1 Images 1
2.5.2 Images Quiz 5
2.5.3 The <img> Tag 1
2.5.4 Building the CodeHS Homepage 1
2.5.5 Collage on a Theme 5
2.5.6 Linking an Image 5
2.5.7 National Parks 5
2.6 Copyright
2.6.1 Copyright 1
2.6.2 Copyright Quiz 5
2.6.3 Citing Sources Example 1
2.6.4 Exploring Creative Commons 1
2.6.5 Response: Creative Commons 5
2.6.6 Finding Images 5
2.6.7 Make a Collage 5
2.6.8 Why Copyright is Important 5
2.7 HTML Lists
2.7.1 HTML Lists 1
2.7.2 HTML Lists Quiz 5
2.7.3 Grocery Shopping 1
2.7.4 Class Planning 5
2.7.5 Dream Destinations 5
2.7.6 Vacation Guides 5
2.8 HTML Tables
2.8.1 HTML Tables 1
2.8.2 HTML Tables Quiz 5
2.8.3 Address Book 1
2.8.4 National Sports 5
2.8.5 Table of Favorites 5
2.9 HTML Styling
2.9.1 HTML Styling 1
2.9.2 HTML Styling Quiz 5
2.9.3 Stylish Address Book 1
2.9.4 Background Colors 5
2.9.5 Style Your Class List 5
2.9.6 Styling Badge 1
2.10 HTML Colors
2.10.1 HTML Colors 1
2.10.2 HTML Colors Quiz 5
2.10.3 HTML Colors Examples 1
2.10.4 Create Your Own Color 5
2.10.5 Gradients 5
2.10.6 Color Wheel 1
2.10.7 Using Good Colors 5
2.11 HTML - Structuring Websites Quiz
2.11.1 HTML - Structuring Websites Quiz 10
2.11.2 HTML Badge 1
CSS - Styling Websites
3.1 Introduction to CSS
3.1.1 Introduction to CSS 1
3.1.2 Introduction to CSS Quiz 5
3.1.3 Styling your H1s 1
3.1.4 First style with CSS 5
3.1.5 List Styling 5
3.1.6 Endangered Animals: Skeleton 5
3.2 CSS Select by Tag
3.2.1 CSS Select by Tag 1
3.2.2 CSS Select by Tag Quiz 5
3.2.3 Rainbow 1
3.2.4 Puppy Styling 1
3.2.5 Set List 5
3.2.6 Your Appliance Recommendations 5
3.2.7 Endangered Animals: Style the Headers 5
3.3 CSS Select by Class
3.3.1 CSS Select by Class 1
3.3.2 CSS Select by Class Quiz 5
3.3.3 Simple Checkerboard 1
3.3.4 Swim Meet 5
3.3.5 Favorite Things 5
3.3.6 Endangered Animals: Add Color Coding 5
3.4 CSS Select by ID
3.4.1 CSS Select by ID 1
3.4.2 CSS Select by ID Quiz 5
3.4.3 Logo 1
3.4.4 Must Do Today! 5
3.4.5 Lomeli's Menu 5
3.4.6 Endangered Animals: Add Pictures 5
3.4.7 Selector Badge 1
3.5 The Cascade
3.5.1 The Cascade 1
3.5.2 The Cascade Quiz 5
3.5.3 Using Importance 1
3.5.4 Order of Precedence 1
3.5.5 We Really Like Dairy 5
3.5.6 Style the Table 5
3.6 CSS - Styling Websites Quiz
3.6.1 CSS - Styling Websites Quiz 10
3.6.2 CSS Badge 1
Project - Create Your Homepage
4.1 Homepage: Your First Website
4.1.1 Example Homepage 1
4.1.2 Real World Homepage 1
4.1.3 Set Up Your codehs.me Website 10
4.1.4 Create Your Homepage 10
4.1.5 Create Your Homepage Badge 1
Advanced HTML and CSS
5.1 Getting Started - Advanced HTML and CSS - Update
5.1.1 Getting Started 1
5.1.2 Example: Image Filters 1
5.1.3 Example: Animations 1
5.1.4 Example: Interactions 1
5.2 Multi-file Websites
5.2.1 Splitting Your Site into Files 1
5.2.2 Splitting Your Site into Files Quiz 5
5.2.3 Multipage Site Example 1
5.2.4 Add a Style Sheet 5
5.2.5 Dividing the Site 5
5.2.6 Career Site: Creating Structure 5
5.3 Embedding iframes
5.3.1 Embedding iframes 1
5.3.2 Embedding iFrames Quiz 2
5.3.3 Embedding CodeHS Program 1
5.3.4 Embedding a Map 1
5.3.5 Embedding a Website 5
5.3.6 Embed a Video 5
5.3.7 Career Site: Include Outside Information 5
5.4 Divs
5.4.1 Divs 1
5.4.2 Divs Quiz 2
5.4.3 Divvying up the Site 1
5.4.4 Quotes 5
5.4.5 Flags 5
5.4.6 Career Site: Separate the Content 5
5.4.7 Div Badge 1
5.5 Spans
5.5.1 Spans 1
5.5.2 Spans Quiz 1
5.5.3 Span Formatting 1
5.5.4 Vocabulary 5
5.5.5 Text Decoration 5
5.5.6 Career Site: Style Special Pieces 5
5.6 Semantic Tags
5.6.1 Semantic Tags 5
5.6.2 Semantic Skeleton 5
5.6.3 Section Flowchart Example 5
5.6.4 Semantic Article 5
5.6.5 Great Quotes 5
5.6.6 Article of Interest 5
5.6.7 Career Site: Semantic Tags 5
5.7 Combining CSS Selectors
5.7.1 Combining CSS Selectors 1
5.7.2 Combining CSS Selectors Quiz 2
5.7.3 More Specific Styling 1
5.7.4 Choosing Nested Tags 5
5.7.5 Highlight the First Item 5
5.7.6 5.7.6 Mars Helicopter Data 5
5.8 The Don't Repeat Yourself Principle
5.8.1 Don't Repeat Yourself 1
5.8.2 Don't Repeat Yourself Quiz 2
5.8.3 Styling Multiple Tags 1
5.8.4 Style Similar Items with Same Class 1
5.8.5 Managing Change 5
5.8.6 Condense CSS Rules 5
5.8.7 Why DRY? 5
5.9 Special Selectors
5.9.1 Special Selectors 1
5.9.2 Special Selectors Quiz 2
5.9.3 Vote For Me 1
5.9.4 Vote For Me Pt 2 1
5.9.5 Extend Vote For Me 5
5.9.6 Special Vendors 5
5.9.7 Checklist 5
5.9.8 Career Website: Add Milestones 5
5.9.9 Special Selectors Badge 1
5.10 Visibility
5.10.1 Visibility 1
5.10.2 Visibility Quiz 2
5.10.3 Display Example 1
5.10.4 Fading Text 1
5.10.5 Favorite Sea Creature 5
5.10.6 Caption on Demand 5
5.11 Reading Documentation
5.11.1 Reading Documentation 1
5.11.2 Reading Documentation Quiz 2
5.11.3 Using Docs: Float 1
5.11.4 Using Docs: <blockquote> Tag 1
5.11.5 Style the Table 5
5.11.6 Electric Company 5
5.11.7 Career Website: Add Pictures 5
5.12 Using the Inspector
5.12.1 Using the Inspector 1
5.12.2 Using the Inspector Tool Quiz 1
5.12.3 Inspector Quick Start 1
5.12.4 Classes and IDs 5
5.12.5 Exploring the Art Museum 5
5.12.6 What's Your Style? 5
5.13 The Box Model
5.13.1 The Box Model 1
5.13.2 The Box Model Quiz 2
5.13.3 Adding Space Using Margin 1
5.13.4 Adding Space Using Padding 1
5.13.5 Combining Margin and Padding 1
5.13.6 I need some space! 5
5.13.7 I need some breathing room! 5
5.13.8 Where is space added? 5
5.13.9 Measuring Space 5
5.13.10 Align Content Side by Side 5
5.13.11 Career Website: Separate Content 5
5.13.12 Design with the Box Model 1
5.13.13 Box Badge 1
5.14 Image Manipulation
5.14.1 Image Manipulation 1
5.14.2 Image Manipulation Quiz 2
5.14.3 Grayscale Filter 1
5.14.4 Blur Filter 1
5.14.5 Hue Rotation 1
5.14.6 Invert Filter 5
5.14.7 Blurred 5
5.14.8 Hue Rotation Comparisons 5
5.14.9 Overexposure 5
5.14.10 Grayscale Art 5
5.14.11 Worldwide Foods Part 1 5
5.14.12 Worldwide Foods Part 2 5
5.15 Animation
5.15.1 Animation 1
5.15.2 Animation Quiz 2
5.15.3 Animated Image Filter 1
5.15.4 Animated Invert Filter 5
5.15.5 Album Cover 5
5.15.6 Worldwide Foods Part 3 5
5.16 Interaction
5.16.1 Interaction 1
5.16.2 Interaction Quiz 2
5.16.3 Interactive Image Filter 1
5.16.4 Smooth Interactive Image Filter 1
5.16.5 Smooth Change on Click 1
5.16.6 Button Interaction 5
5.16.7 Create Your Own Tooltip 5
5.16.8 Worldwide Foods Part 4 5
5.16.9 Career Website: Engage the User 5
5.16.10 CSS Tricks 1
5.17 Advanced HTML and CSS Quiz
5.17.1 Advanced HTML and CSS Quiz 15
5.17.2 Advanced HTML and CSS Badge 1
Project - Tell a Story
6.1 Project: Tell a Story
6.1.1 Real World Example: Infographic 1
6.1.2 Project: Tell a Story 10
6.1.3 Tell a Story Badge 1
Bootstrap
7.1 What is Bootstrap?
7.1.1 What is Bootstrap? 1
7.1.2 Example Bootstrap Mobile Site 1
7.1.3 Real World Bootstrap: OneNYC 1
7.1.4 Responsive vs Unresponsive 5
7.1.5 Favorite Bootstrap Site 5
7.2 Getting Started with Bootstrap
7.2.1 Getting Started with Bootstrap 1
7.2.2 Getting Started Quiz 2
7.2.3 First Bootstrap Page 1
7.2.4 Container-Fluid Page 1
7.2.5 Using the Bootstrap Skeleton 5
7.2.6 Your First Bootstrap 5
7.2.7 1. Photo Portfolio 10
7.2.8 Container Docs 1
7.3 The Bootstrap Grid System
7.3.1 The Grid System 1
7.3.2 The Bootstrap Grid Quiz 2
7.3.3 Grid System Example 1
7.3.4 Column Overflow 1
7.3.5 Different Device Sizes 1
7.3.6 Example Layout 1
7.3.7 Realty: Grid System 1
7.3.8 Grid Practice 5
7.3.9 Endangered Animals 5
7.3.10 2. Photo Portfolio 10
7.3.11 Grid System Docs 1
7.4 Bootstrap Components
7.4.1 Bootstrap Components 1
7.4.2 Bootstrap Components Quiz 0
7.4.3 Text Formats 1
7.4.4 Making Buttons 1
7.4.5 Button Groups 1
7.4.6 Using Icons 1
7.4.7 Realty: Buttons and Page Headers 1
7.4.8 Header and Buttons 5
7.4.9 Icon Buttons 5
7.4.10 3. Photo Portfolio 10
7.4.11 Button Docs 1
7.4.12 Icon Docs 1
7.5 More Bootstrap Components
7.5.1 More Bootstrap Components 1
7.5.2 More Bootstrap Components Quiz 2
7.5.3 Thumbnail Skeleton 1
7.5.4 Kitten Thumbnails 1
7.5.5 Table Skeleton 1
7.5.6 Striped Tables 1
7.5.7 Realty: Thumbnail Links 1
7.5.8 Shoe Shop 5
7.5.9 Adding Captions 5
7.5.10 Bootstrap Tables 5
7.5.11 Favorite TV Shows 5
7.5.12 Favorite Animals 5
7.5.13 4. Photo Portfolio 10
7.5.14 Thumbnail Docs 1
7.5.15 Table Docs 1
7.6 Navigation Bars
7.6.1 Navigation Bars 1
7.6.2 Navigation Bars Quiz 2
7.6.3 Navbar Docs 1
7.6.4 Simple Nav Tabs 1
7.6.5 Basic Navbar 1
7.6.6 Basic Collapsable Navbar 1
7.6.7 Realty: Navbar 1
7.6.8 Realty: Collapsable Navbar 1
7.6.9 Navigation Links 5
7.6.10 Navbar Puzzles 5
7.6.11 Making Navbars 5
7.6.12 5. Photo Portfolio 10
7.7 Drop Down Menus
7.7.1 Drop Down Menus 1
7.7.2 Drop Down Menus Quiz 1
7.7.3 Basic Dropdown 1
7.7.4 Realty: Dropdown 1
7.7.5 World Traveller 5
7.7.6 Which Animal? 5
7.7.7 Dropdown Nav 5
7.7.8 6. Photo Portfolio 10
7.7.9 Drop Down Menu Docs 1
7.7.10 Menu Badge 1
7.8 Using Bootstrap Examples
7.8.1 Using Bootstrap Examples 1
7.8.2 Using Bootstrap Examples Quiz 2
7.8.3 Bootstrap Starter Templates 1
7.8.4 Realty: Carousel 1
7.8.5 Blog Bootstrap Template 1
7.8.6 Carousel Bootstrap Template 1
7.8.7 Dashboard Bootstrap Template 1
7.8.8 Cover Bootstrap Template 1
7.8.9 Cover Site From Template 1
7.8.10 Modify the Template 10
7.8.11 7. Photo Portfolio 10
7.9 Bootstrap Challenges
7.9.1 Sticky Navbar 10
7.9.2 Adding Interactions 10
7.9.3 Team Page 10
7.9.4 8. Photo Portfolio 10
7.10 Bootstrap Quiz
7.10.1 Bootstrap Quiz 10
7.10.2 Bootstrap Badge 1
Bootstrap Project
8.1 Bootstrap Project
8.1.1 Example Mobile Responsive Website 1
8.1.2 Real World Bootstrap: University of Washington 1
8.1.3 Real World Bootstrap: Maple 1
8.1.4 Project: Create a Mobile Responsive Website 10
8.1.5 Bootstrap Project Badge 1
Designing User Interfaces
9.1 Intro to Design Thinking
9.1.1 Intro to Design Thinking 1
9.1.2 Intro to Design Thinking 2
9.1.3 User Interface Scavenger Hunt 5
9.1.4 Case Study: Helping Blind People See 1
9.1.5 Case Study Responses 5
9.1.6 Crash Course: Empathize 1
9.1.7 Empathize Notes 5
9.1.8 Crash Course: Define 1
9.1.9 Problem Statement 5
9.1.10 Crash Course: Ideate 1
9.1.11 Ideate Notes 5
9.1.12 Crash Course: Prototype and Test 1
9.1.13 Testing Notes 5
9.1.14 Topic Brainstorm 5
9.1.15 Narrowing Down Topics 5
9.2 Empathy
9.2.1 Empathy 1
9.2.2 Empathy Quiz 2
9.2.3 A Cafeteria Designed for Me 1
9.2.4 A Cafeteria Designed for Me 5
9.2.5 Accessibility 1
9.2.6 Accessibility Tips 5
9.2.7 Inaccessible Site Review 5
9.2.8 Improve Site's Accessibility 5
9.2.9 How to Interview 1
9.2.10 How to Interview 5
9.2.11 User Interview 5
9.3 Define
9.3.1 Define 1
9.3.2 Define Quiz 2
9.3.3 Make a Composite Character Profile 1
9.3.4 Composite Character Profile 5
9.3.5 Point-of-View Statement Brainstorm 5
9.3.6 POV Statement 5
9.4 Ideate
9.4.1 Ideate 1
9.4.2 Ideate Quiz 5
9.4.3 Stoke 1
9.4.4 Get Stoked 5
9.4.5 Brainstorming Tips 1
9.4.6 Ideate! 5
9.5 Prototype
9.5.1 Prototype 1
9.5.2 Prototype Quiz 5
9.5.3 Brainstorm Selection 1
9.5.4 Harvest Ideas from the Brainstorm 5
9.5.5 Wizard of Oz Prototyping 1
9.5.6 Example Wizard of Oz Paper Prototype 1
9.5.7 Make Your Paper Prototypes! 5
9.6 Test
9.6.1 Test 1
9.6.2 Testing Quiz 5
9.6.3 Testing with Users 1
9.6.4 Example: How to User Test 1
9.6.5 How to User Test Responses 5
9.6.6 Example: How NOT to User Test 1
9.6.7 How NOT to User Test Responses 5
9.6.8 Test Prototype 1 5
9.6.9 Test Prototype 2 5
9.6.10 Improve Your Prototype 5
9.7 Designing User Interfaces Quiz
9.7.1 Designing User Interfaces Quiz 25
9.7.2 Designing User Interfaces Badge 1
Final Project
10.1 Final Web Design Project
10.1.1 Milestones 5
10.1.2 Final Project 10
10.1.3 Final Project Badge 1
10.1.4 Web Design Completed 1
Midterm
11.1 Midterm
11.1.1 Midterm 25
The Internet
12.1 Getting Started - The Internet
12.1.1 Welcome to the Internet 1
12.1.2 Welcome to the Internet Quiz 5
12.1.3 The Internet and You 5
12.2 Internet Hardware
12.2.1 Hardware of the Internet 1
12.2.2 Internet Hardware Quiz 5
12.2.3 The Internet is in the Ocean 1
12.3 Internet Addresses
12.3.1 Internet Addresses 1
12.3.2 Internet Addresses Quiz 5
12.3.3 The Need for Addresses 5
12.3.4 4-bit Addresses 10
12.3.5 IPv4 vs IPv6 5
12.4 DNS
12.4.1 DNS 1
12.4.2 DNS Quiz 5
12.4.3 How Does DNS Work? 1
12.4.4 How Does DNS Work? 5
12.5 Routing
12.5.1 Routing 1
12.5.2 Routing Quiz 5
12.5.3 Redundancy 5
12.5.4 Route Tracing 5
12.6 Packets and Protocols
12.6.1 Packets and Protocols 1
12.6.2 Packets and Protocols Quiz 5
12.6.3 Passing Notes 10
12.6.4 How the Internet Works 1
12.6.5 The Story of the Internet 5
12.7 The Impact of the Internet
12.7.1 The Impact of the Internet 1
12.7.2 The Impact of the Internet Quiz 5
12.7.3 Pokemon Go: Unintended Effects 1
12.8 The Internet Quiz
12.8.1 The Internet Quiz 10
Design Research Project
13.1 Design Research Project
13.1.1 Research a Design Concept 5
13.1.2 Explain Your Design Concept 5
13.1.3 Create an Example 10
13.1.4 Present Your Design Concept 15
Web Design Level 1 Certification Practice
14.1 Practice #1: Intro to the Internet
14.1.1 Quiz: Intro to the Internet 5
14.1.2 Practice #1 Reflection 5
14.2 Practice #2: HTML
14.2.1 Quiz: HTML 5
14.2.2 Practice#2 Reflection 5
14.3 Practice #3: CSS
14.3.1 Quiz: CSS 5
14.3.2 Practice #3 Reflection 5
14.4 Practice #4: Advanced HTML & CSS
14.4.1 Quiz: Advanced HTML & CSS 5
14.4.2 Practice #4 Reflection 5