Please enable JavaScript to use CodeHS

Outline


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