-
24.1 Getting Started - Advanced HTML and CSS - Update
-
Video
24.1.1 Getting Started
-
Example
24.1.2 Example: Image Filters
-
Example
24.1.3 Example: Animations
-
Example
24.1.4 Example: Interactions
-
24.2 Multi-file Websites
-
Video
24.2.1 Splitting Your Site into Files
-
Check for Understanding
24.2.2 Splitting Your Site into Files Quiz
-
Example
24.2.3 Multipage Site Example
-
Exercise
24.2.4 Add a Style Sheet
-
Exercise
24.2.5 Dividing the Site
-
Exercise
24.2.6 Career Site: Creating Structure
-
24.3 Embedding iframes
-
Video
24.3.1 Embedding iframes
-
Check for Understanding
24.3.2 Embedding iFrames Quiz
-
Example
24.3.3 Embedding CodeHS Program
-
Example
24.3.4 Embedding a Map
-
Exercise
24.3.5 Embedding a Website
-
Exercise
24.3.6 Embed a Tweet
-
Exercise
24.3.7 Embed a Video
-
Exercise
24.3.8 Career Site: Include Outside Information
-
24.4 Divs
-
Video
24.4.1 Divs
-
Check for Understanding
24.4.2 Divs Quiz
-
Example
24.4.3 Divvying up the Site
-
Exercise
24.4.4 Quotes
-
Exercise
24.4.5 Flags
-
Exercise
24.4.6 Career Site: Separate the Content
-
Badge
24.4.7 Div Badge
-
24.5 Spans
-
Video
24.5.1 Spans
-
Check for Understanding
24.5.2 Spans Quiz
-
Example
24.5.3 Span Formatting
-
Exercise
24.5.4 Vocabulary
-
Exercise
24.5.5 Text Decoration
-
Exercise
24.5.6 Career Site: Style Special Pieces
-
24.6 Semantic Tags
-
Video
24.6.1 Semantic Tags
-
Example
24.6.2 Semantic Skeleton
-
Example
24.6.3 Section Flowchart Example
-
Example
24.6.4 Semantic Article
-
Exercise
24.6.5 Great Quotes
-
Exercise
24.6.6 Article of Interest
-
Exercise
24.6.7 Career Site: Semantic Tags
-
24.7 Combining CSS Selectors
-
Video
24.7.1 Combining CSS Selectors
-
Check for Understanding
24.7.2 Combining CSS Selectors Quiz
-
Example
24.7.3 More Specific Styling
-
Exercise
24.7.4 Choosing Nested Tags
-
Exercise
24.7.5 Highlight the First Item
-
Exercise
24.7.6 Mars Helicopter Data
-
24.8 The Don't Repeat Yourself Principle
-
Video
24.8.1 Don't Repeat Yourself
-
Check for Understanding
24.8.2 Don't Repeat Yourself Quiz
-
Example
24.8.3 Styling Multiple Tags
-
Example
24.8.4 Style Similar Items with Same Class
-
Exercise
24.8.5 Managing Change
-
Exercise
24.8.6 Condense CSS Rules
-
Free Response
24.8.7 Why DRY?
-
24.9 Special Selectors
-
Video
24.9.1 Special Selectors
-
Check for Understanding
24.9.2 Special Selectors Quiz
-
Example
24.9.3 Vote For Me
-
Example
24.9.4 Vote For Me Pt 2
-
Exercise
24.9.5 Extend Vote For Me
-
Exercise
24.9.6 Special Vendors
-
Exercise
24.9.7 Checklist
-
Exercise
24.9.8 Career Website: Add Milestones
-
Badge
24.9.9 Special Selectors Badge
-
24.10 Visibility
-
Video
24.10.1 Visibility
-
Check for Understanding
24.10.2 Visibility Quiz
-
Example
24.10.3 Display Example
-
Example
24.10.4 Fading Text
-
Exercise
24.10.5 Favorite Sea Creature
-
Exercise
24.10.6 Caption on Demand
-
24.11 Reading Documentation
-
Video
24.11.1 Reading Documentation
-
Check for Understanding
24.11.2 Reading Documentation Quiz
-
Example
24.11.3 Using Docs: Float
-
Example
24.11.4 Using Docs: <blockquote> Tag
-
Exercise
24.11.5 Style the Table
-
Exercise
24.11.6 Electric Company
-
Exercise
24.11.7 Career Website: Add Pictures
-
24.12 Using the Inspector
-
Video
24.12.1 Using the Inspector
-
Check for Understanding
24.12.2 Using the Inspector Tool Quiz
-
Connection
24.12.3 Inspector Quick Start
-
Check for Understanding
24.12.4 Classes and IDs
-
Check for Understanding
24.12.5 Exploring the Art Museum
-
Quiz
24.12.6 What's Your Style?
-
24.13 The Box Model
-
Video
24.13.1 The Box Model
-
Check for Understanding
24.13.2 The Box Model Quiz
-
Example
24.13.3 Adding Space Using Margin
-
Example
24.13.4 Adding Space Using Padding
-
Example
24.13.5 Combining Margin and Padding
-
Exercise
24.13.6 I need some space!
-
Exercise
24.13.7 I need some breathing room!
-
Free Response
24.13.8 Where is space added?
-
Example
24.13.9 Measuring Space
-
Exercise
24.13.10 Align Content Side by Side
-
Exercise
24.13.11 Career Website: Separate Content
-
Connection
24.13.12 Design with the Box Model
-
Badge
24.13.13 Box Badge
-
24.14 Image Manipulation
-
Video
24.14.1 Image Manipulation
-
Check for Understanding
24.14.2 Image Manipulation Quiz
-
Example
24.14.3 Grayscale Filter
-
Example
24.14.4 Blur Filter
-
Example
24.14.5 Hue Rotation
-
Exercise
24.14.6 Invert Filter
-
Exercise
24.14.7 Blurred
-
Exercise
24.14.8 Hue Rotation Comparisons
-
Exercise
24.14.9 Overexposure
-
Exercise
24.14.10 Grayscale Art
-
Exercise
24.14.11 Worldwide Foods Part 1
-
Exercise
24.14.12 Worldwide Foods Part 2
-
24.15 Animation
-
Video
24.15.1 Animation
-
Check for Understanding
24.15.2 Animation Quiz
-
Example
24.15.3 Animated Image Filter
-
Exercise
24.15.4 Animated Invert Filter
-
Exercise
24.15.5 Album Cover
-
Exercise
24.15.6 Worldwide Foods Part 3
-
24.16 Interaction
-
Video
24.16.1 Interaction
-
Check for Understanding
24.16.2 Interaction Quiz
-
Example
24.16.3 Interactive Image Filter
-
Example
24.16.4 Smooth Interactive Image Filter
-
Example
24.16.5 Smooth Change on Click
-
Exercise
24.16.6 Button Interaction
-
Exercise
24.16.7 Create Your Own Tooltip
-
Exercise
24.16.8 Worldwide Foods Part 4
-
Exercise
24.16.9 Career Website: Engage the User
-
Connection
24.16.10 CSS Tricks
-
24.17 Advanced HTML and CSS Quiz
-
Unit Quiz
24.17.1 Advanced HTML and CSS Quiz
-
Badge
24.17.2 Advanced HTML and CSS Badge