Please enable JavaScript to use CodeHS

Web Design (Picasso)

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

5.1 Getting Started - Advanced HTML and CSS - Update

  • Getting Started
  • Example: Image Filters
  • Example: Animations
  • Example: Interactions

5.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

5.3 Embedding iframes

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

5.4 Divs

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

5.5 Spans

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

5.6 Semantic Tags

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

5.7 Combining CSS Selectors

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

5.8 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

5.9 Special Selectors

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

5.10 Visibility

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

5.11 Reading Documentation

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

5.12 Using the Inspector

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

5.13 The Box Model

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

5.14 Image Manipulation

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

5.15 Animation

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

5.16 Interaction

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

5.17 Advanced HTML and CSS Quiz

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

Courses that include this module