| Activity | Points | Item Type |
|---|---|---|
| Advanced HTML and CSS | ||
| 1.1 Getting Started - Advanced HTML and CSS | Lesson | |
| 1.1.1 Getting Started | 1 | Video |
| 1.1.2 Example: Image Filters | 1 | Example |
| 1.1.3 Example: Animations | 1 | Example |
| 1.1.4 Example: Interactions | 1 | Example |
| 1.2 Multi-file Websites | Lesson | |
| 1.2.1 Splitting Your Site into Files | 1 | Video |
| 1.2.2 Splitting Your Site into Files Quiz | 2 | Check for Understanding |
| 1.2.3 Multipage Site Example | 1 | Example |
| 1.2.4 Add a Style Sheet | 5 | Exercise |
| 1.2.5 Dividing the Site | 5 | Exercise |
| 1.2.6 Career Site: Creating Structure | 5 | Exercise |
| 1.3 Embedding iframes | Lesson | |
| 1.3.1 Embedding iframes | 1 | Video |
| 1.3.2 Embedding IFrames Quiz | 2 | Check for Understanding |
| 1.3.3 Embedding CodeHS | 1 | Example |
| 1.3.4 Embedding a Map | 1 | Example |
| 1.3.5 Embedding a Website | 5 | Exercise |
| 1.3.6 Embed a Tweet | 5 | Exercise |
| 1.3.7 Embed a Video | 5 | Exercise |
| 1.3.8 Career Site: Include Outside Information | 5 | Exercise |
| 1.4 Divs | Lesson | |
| 1.4.1 Divs | 1 | Video |
| 1.4.2 Divs Quiz | 2 | Check for Understanding |
| 1.4.3 Divvying up the Site | 1 | Example |
| 1.4.4 Quotes | 5 | Exercise |
| 1.4.5 Flags | 5 | Exercise |
| 1.4.6 Career Site: Separate the Content | 5 | Exercise |
| 1.4.7 Div Badge | 1 | Badge |
| 1.5 Spans | Lesson | |
| 1.5.1 Spans | 1 | Video |
| 1.5.2 Spans Quiz | 1 | Check for Understanding |
| 1.5.3 Span Formatting | 1 | Example |
| 1.5.4 Vocabulary | 5 | Exercise |
| 1.5.5 Text Decoration | 5 | Exercise |
| 1.5.6 Career Site: Style Special Pieces | 5 | Exercise |
| 1.6 Combining CSS Selectors | Lesson | |
| 1.6.1 Combining CSS Selectors | 1 | Video |
| 1.6.2 Combining CSS Selectors Quiz | 2 | Check for Understanding |
| 1.6.3 More Specific Styling | 1 | Example |
| 1.6.4 Choosing Nested Tags | 5 | Exercise |
| 1.6.5 Highlight the First Item | 5 | Exercise |
| 1.6.6 Calorie Recommendations | 5 | Exercise |
| 1.7 The Don't Repeat Yourself Principle | Lesson | |
| 1.7.1 Don't Repeat Yourself | 1 | Video |
| 1.7.2 Don't Repeat Yourself Quiz | 2 | Check for Understanding |
| 1.7.3 Styling Multiple Tags | 1 | Example |
| 1.7.4 Style Similar Items with Same Class | 1 | Example |
| 1.7.5 Managing Change | 5 | Exercise |
| 1.7.6 Condense CSS Rules | 5 | Exercise |
| 1.7.7 Why DRY? | 5 | Free Response |
| 1.8 Special Selectors | Lesson | |
| 1.8.1 Special Selectors | 1 | Video |
| 1.8.2 Special Selectors Quiz | 2 | Check for Understanding |
| 1.8.3 Vote For Me | 1 | Example |
| 1.8.4 Vote For Me Pt 2 | 1 | Example |
| 1.8.5 Extend Vote For Me | 5 | Exercise |
| 1.8.6 Special Vendors | 5 | Exercise |
| 1.8.7 Checklist | 5 | Exercise |
| 1.8.8 Career Website: Add Milestones | 5 | Exercise |
| 1.8.9 Special Selectors Badge | 1 | Badge |
| 1.9 Visibility | Lesson | |
| 1.9.1 Visibility | 1 | Video |
| 1.9.2 Visibility Quiz | 2 | Check for Understanding |
| 1.9.3 Display Example | 1 | Example |
| 1.9.4 Fading Text | 1 | Example |
| 1.9.5 Favorite Sea Creature | 5 | Exercise |
| 1.9.6 Caption on Demand | 5 | Exercise |
| 1.10 Reading Documentation | Lesson | |
| 1.10.1 Reading Documentation | 1 | Video |
| 1.10.2 Reading Documentation Quiz | 2 | Check for Understanding |
| 1.10.3 Using Docs: Float | 1 | Example |
| 1.10.4 Using Docs: blockquote | 1 | Example |
| 1.10.5 Style the Table | 5 | Exercise |
| 1.10.6 Electric Company | 5 | Exercise |
| 1.10.7 Career Website: Add Pictures | 5 | Exercise |
| 1.11 Using the Inspector | Lesson | |
| 1.11.1 Using the Inspector | 1 | Video |
| 1.11.2 Using the Inspector Tool Quiz | 1 | Check for Understanding |
| 1.11.3 Inspector Quick Start | 1 | Connection |
| 1.11.4 Classes and IDs | 4 | Check for Understanding |
| 1.11.5 Exploring the Art Museum | 4 | Check for Understanding |
| 1.11.6 What's Your Style? | 5 | Check for Understanding |
| 1.12 The Box Model | Lesson | |
| 1.12.1 The Box Model | 1 | Video |
| 1.12.2 The Box Model Quiz | 2 | Check for Understanding |
| 1.12.3 Adding Space Using Margin | 1 | Example |
| 1.12.4 Adding Space Using Padding | 1 | Example |
| 1.12.5 Combining Margin and Padding | 1 | Example |
| 1.12.6 I need some space! | 5 | Exercise |
| 1.12.7 I need some breathing room! | 5 | Exercise |
| 1.12.8 Where is space added? | 5 | Free Response |
| 1.12.9 Align Content Side by Side | 5 | Exercise |
| 1.12.10 Career Website: Separate Content | 5 | Exercise |
| 1.12.11 Design with the Box Model | 1 | Connection |
| 1.12.12 Box Badge | 1 | Badge |
| 1.13 Image Manipulation | Lesson | |
| 1.13.1 Image Manipulation | 1 | Video |
| 1.13.2 Image Manipulation Quiz | 2 | Check for Understanding |
| 1.13.3 Grayscale Filter | 1 | Example |
| 1.13.4 Blur Filter | 1 | Example |
| 1.13.5 Hue Rotation | 1 | Example |
| 1.13.6 Invert Filter | 5 | Exercise |
| 1.13.7 Blurred | 5 | Exercise |
| 1.13.8 Hue Rotation Comparisons | 5 | Exercise |
| 1.13.9 Overexposure | 5 | Exercise |
| 1.13.10 Grayscale Art | 5 | Exercise |
| 1.13.11 Aesop's Fables Part 1 | 5 | Exercise |
| 1.13.12 Aesop's Fables Part 2 | 5 | Exercise |
| 1.14 Animation | Lesson | |
| 1.14.1 Animation | 1 | Video |
| 1.14.2 Animation Quiz | 2 | Check for Understanding |
| 1.14.3 Animated Image Filter | 1 | Example |
| 1.14.4 Animated Invert Filter | 5 | Exercise |
| 1.14.5 Album Cover | 5 | Exercise |
| 1.14.6 Aesop's Fables Part 3 | 5 | Exercise |
| 1.15 Interaction | Lesson | |
| 1.15.1 Interaction | 1 | Video |
| 1.15.2 Interaction Quiz | 2 | Check for Understanding |
| 1.15.3 Interactive Image Filter | 1 | Example |
| 1.15.4 Smooth Interactive Image Filter | 1 | Example |
| 1.15.5 Smooth Change on Click | 1 | Example |
| 1.15.6 Button Interaction | 5 | Exercise |
| 1.15.7 Create Your Own Tooltip | 5 | Exercise |
| 1.15.8 Aesop's Fables Part 4 | 5 | Exercise |
| 1.15.9 Career Website: Engage the User | 5 | Exercise |
| 1.15.10 CSS Tricks | 1 | Connection |
| 1.16 Advanced HTML and CSS Quiz | Lesson | |
| 1.16.1 Advanced HTML and CSS Quiz | 15 | Unit Quiz |
| 1.16.2 Advanced HTML and CSS Badge | 1 | Badge |
| Project - Tell a Story | ||
| 2.1 Project: Tell a Story | Lesson | |
| 2.1.1 Real World Example: Infographic | 1 | Connection |
| 2.1.2 Project: Tell a Story | 10 | Challenge |
| 2.1.3 Tell a Story Badge | 1 | Badge |
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