Please enable JavaScript to use CodeHS

California Software and Systems Development I

Advanced HTML and CSS

This module dives deeper into different things we can do with HTML and CSS. Students practice advanced topics in HTML and CSS, including visibility, image filtering, interaction, and animation, to develop more advanced websites.

Lessons

4.1 Getting Started - Advanced HTML and CSS

  • Getting Started
  • Example: Image Filters
  • Example: Animations
  • Example: Interactions
  • Common Doctypes
  • +1 more

4.2 Multi-file Websites

  • Splitting Your Site into Files
  • Splitting Your Site into Files Quiz
  • Multipage Site Example
  • Add a Style Sheet
  • Dividing the Site
  • +1 more

4.3 Embedding iframes

  • Embedding iframes
  • Embedding iFrames Quiz
  • Embedding CodeHS Program
  • Embedding a Map
  • Embedding a Website
  • +4 more

4.4 Divs

  • Divs
  • Divs Quiz
  • Divvying up the Site
  • Quotes
  • Flags
  • +2 more

4.5 Spans

  • Spans
  • Spans Quiz
  • Span Formatting
  • Vocabulary
  • Text Decoration
  • +1 more

4.6 Semantic Tags

  • Semantic Tags
  • Semantic Skeleton
  • Section Flowchart Example
  • Semantic Article
  • Great Quotes
  • +2 more

4.7 Audio and Video Tags

  • Audio and Video Tags
  • Audio and Video Quiz
  • Camping Adventure
  • Foley Art
  • Foley Art Reflection
  • +1 more

4.8 Combining CSS Selectors

  • Combining CSS Selectors
  • Combining CSS Selectors Quiz
  • More Specific Styling
  • Choosing Nested Tags
  • Highlight the First Item
  • +1 more

4.9 The Don't Repeat Yourself Principle

  • Don't Repeat Yourself
  • Don't Repeat Yourself Quiz
  • Styling Multiple Tags
  • Style Similar Items with Same Class
  • Managing Change
  • +2 more

4.10 Special Selectors

  • Special Selectors
  • Special Selectors Quiz
  • Vote For Me
  • Vote For Me Pt 2
  • Extend Vote For Me
  • +4 more

4.11 Visibility

  • Visibility
  • Visibility Quiz
  • Display Example
  • Fading Text
  • Favorite Sea Creature
  • +1 more

4.12 Reading Documentation

  • Reading Documentation
  • Reading Documentation Quiz
  • Using Docs: Float
  • Using Docs: <blockquote> Tag
  • Style the Table
  • +2 more

4.13 Using the Inspector

  • Using the Inspector
  • Using the Inspector Tool Quiz
  • Inspector Quick Start
  • Classes and IDs
  • Exploring the Art Museum
  • +1 more

4.14 The Box Model

  • The Box Model
  • The Box Model Quiz
  • Adding Space Using Margin
  • Adding Space Using Padding
  • Combining Margin and Padding
  • +8 more

4.15 Position Properties and Z-index

  • Position Properties and Z-index
  • Positioning Exploration
  • Position Properties and Z-Index Reflection
  • Positioning Boxes

4.16 Image Manipulation

  • Image Manipulation
  • Image Manipulation Quiz
  • Grayscale Filter
  • Blur Filter
  • Hue Rotation
  • +7 more

4.17 Animation

  • Animation
  • Animation Quiz
  • Animated Image Filter
  • Animated Invert Filter
  • Album Cover
  • +1 more

4.18 Interaction

  • Interaction
  • Interaction Quiz
  • Interactive Image Filter
  • Smooth Interactive Image Filter
  • Smooth Change on Click
  • +5 more

4.19 Sitemaps and Information Architecture

  • Introduction to Sitemaps and IA
  • Information Architecture
  • Information Architecture Reflection
  • Sitemaps
  • Sitemaps Reflection
  • +3 more

4.20 Advanced HTML and CSS Quiz

  • Advanced HTML and CSS Quiz
  • Advanced HTML and CSS Badge

Courses that include this module