-
4.1 Getting Started - Advanced HTML and CSS
-
Video
4.1.1 Getting Started
-
Example
4.1.2 Example: Image Filters
-
Example
4.1.3 Example: Animations
-
Example
4.1.4 Example: Interactions
-
4.2 Embedding iframes
-
Video
4.2.1 Embedding iframes
-
Check for Understanding
4.2.2 Embedding IFrames Quiz
-
Example
4.2.3 Embedding CodeHS
-
Exercise
4.2.4 Embedding a Website
-
Exercise
4.2.5 Embed a Tweet
-
Exercise
4.2.6 Embed a Video
-
Exercise
4.2.7 Career Site: Include Outside Information
-
4.3 Divs
-
Video
4.3.1 Divs
-
Check for Understanding
4.3.2 Divs Quiz
-
Example
4.3.3 Divvying up the Site
-
Exercise
4.3.4 Quotes
-
Exercise
4.3.5 Flags
-
Exercise
4.3.6 Career Site: Separate the Content
-
Badge
4.3.7 Div Badge
-
4.4 Spans
-
Video
4.4.1 Spans
-
Check for Understanding
4.4.2 Spans Quiz
-
Example
4.4.3 Span Formatting
-
Exercise
4.4.4 Vocabulary
-
Exercise
4.4.5 Text Decoration
-
Exercise
4.4.6 Career Site: Style Special Pieces
-
4.5 Semantic Tags
-
Video
4.5.1 Semantic Tags
-
Example
4.5.2 Semantic Skeleton
-
Example
4.5.3 Section Flowchart Example
-
Example
4.5.4 Semantic Article
-
Exercise
4.5.5 Great Quotes
-
Exercise
4.5.6 Article of Interest
-
Exercise
4.5.7 Career Site: Semantic Tags
-
4.6 Combining CSS Selectors
-
Video
4.6.1 Combining CSS Selectors
-
Check for Understanding
4.6.2 Combining CSS Selectors Quiz
-
Example
4.6.3 More Specific Styling
-
Exercise
4.6.4 Choosing Nested Tags
-
Exercise
4.6.5 Highlight the First Item
-
Exercise
4.6.6 Calorie Recommendations
-
4.7 The Don't Repeat Yourself Principle
-
Video
4.7.1 Don't Repeat Yourself
-
Check for Understanding
4.7.2 Don't Repeat Yourself Quiz
-
Example
4.7.3 Styling Multiple Tags
-
Example
4.7.4 Style Similar Items with Same Class
-
Exercise
4.7.5 Managing Change
-
Exercise
4.7.6 Condense CSS Rules
-
Free Response
4.7.7 Why DRY?
-
4.8 Special Selectors
-
Video
4.8.1 Special Selectors
-
Check for Understanding
4.8.2 Special Selectors Quiz
-
Example
4.8.3 Vote For Me
-
Example
4.8.4 Vote For Me Pt 2
-
Exercise
4.8.5 Extend Vote For Me
-
Exercise
4.8.6 Special Vendors
-
Exercise
4.8.7 Checklist
-
Exercise
4.8.8 Career Website: Add Milestones
-
Badge
4.8.9 Special Selectors Badge
-
4.9 Visibility
-
Video
4.9.1 Visibility
-
Check for Understanding
4.9.2 Visibility Quiz
-
Example
4.9.3 Display Example
-
Example
4.9.4 Fading Text
-
Exercise
4.9.5 Favorite Sea Creature
-
Exercise
4.9.6 Caption on Demand
-
4.10 Reading Documentation
-
Video
4.10.1 Reading Documentation
-
Check for Understanding
4.10.2 Reading Documentation Quiz
-
Example
4.10.3 Using Docs: Float
-
Example
4.10.4 Using Docs: <blockquote> Tag
-
Example
4.10.5 HTML Forms
-
Exercise
4.10.6 Style the Table
-
Exercise
4.10.7 Electric Company
-
Exercise
4.10.8 Career Website: Add Pictures
-
4.11 Using the Inspector
-
Video
4.11.1 Using the Inspector
-
Check for Understanding
4.11.2 Using the Inspector Tool Quiz
-
Connection
4.11.3 Inspector Quick Start
-
Check for Understanding
4.11.4 Classes and IDs
-
Check for Understanding
4.11.5 Exploring the Art Museum
-
Check for Understanding
4.11.6 What's Your Style?
-
4.12 The Box Model
-
Video
4.12.1 The Box Model
-
Check for Understanding
4.12.2 The Box Model Quiz
-
Example
4.12.3 Adding Space Using Margin
-
Example
4.12.4 Adding Space Using Padding
-
Example
4.12.5 Combining Margin and Padding
-
Example
4.12.6 Margin and Padding with em
-
Exercise
4.12.7 I need some space!
-
Exercise
4.12.8 I need some breathing room!
-
Free Response
4.12.9 Where is space added?
-
Free Response
4.12.10 Relative Measurements
-
Exercise
4.12.11 Align Content Side by Side
-
Exercise
4.12.12 Career Website: Separate Content
-
Connection
4.12.13 Design with the Box Model
-
Badge
4.12.14 Box Badge
-
4.13 Image Manipulation
-
Video
4.13.1 Image Manipulation
-
Check for Understanding
4.13.2 Image Manipulation Quiz
-
Example
4.13.3 Grayscale Filter
-
Example
4.13.4 Blur Filter
-
Example
4.13.5 Hue Rotation
-
Exercise
4.13.6 Invert Filter
-
Exercise
4.13.7 Blurred
-
Exercise
4.13.8 Hue Rotation Comparisons
-
Exercise
4.13.9 Overexposure
-
Exercise
4.13.10 Grayscale Art
-
Exercise
4.13.11 Aesop's Fables Part 1
-
Exercise
4.13.12 Aesop's Fables Part 2
-
4.14 Animation
-
Video
4.14.1 Animation
-
Check for Understanding
4.14.2 Animation Quiz
-
Example
4.14.3 Animated Image Filter
-
Exercise
4.14.4 Animated Invert Filter
-
Exercise
4.14.5 Album Cover
-
Exercise
4.14.6 Aesop's Fables Part 3
-
4.15 Interaction
-
Video
4.15.1 Interaction
-
Check for Understanding
4.15.2 Interaction Quiz
-
Example
4.15.3 Interactive Image Filter
-
Example
4.15.4 Smooth Interactive Image Filter
-
Example
4.15.5 Smooth Change on Click
-
Exercise
4.15.6 Button Interaction
-
Exercise
4.15.7 Create Your Own Tooltip
-
Exercise
4.15.8 Aesop's Fables Part 4
-
Exercise
4.15.9 Career Website: Engage the User
-
Connection
4.15.10 CSS Tricks
-
4.16 The CSS Grid Layout
-
Video
4.16.1 The CSS Grid Layout
-
Quiz
4.16.2 CSS Grid Layout Quiz
-
Example
4.16.3 Grid Layout
-
Example
4.16.4 Applying The Grid Model
-
Exercise
4.16.5 The Rainbow in a Grid
-
Exercise
4.16.6 Image Gallery
-
4.17 Web Accessibility
-
Connection
4.17.1 Accessibility
-
Free Response
4.17.2 Accessibility Tips
-
Example
4.17.3 Inaccessible Site Review
-
Exercise
4.17.4 Improve Site's Accessibility
-
4.18 Advanced HTML and CSS Quiz
-
Unit Quiz
4.18.1 Advanced HTML and CSS Quiz
-
Badge
4.18.2 Advanced HTML and CSS Badge