Web Design Playground logo

Web Design Playground

Menu

Book Lessons

  • Chapter 1—Getting to Know HTML and CSS
    • Lesson 1.1: Introducing HTML Tags
    • Lesson 1.2: Introducing CSS Properties
  • Chapter 2—Building Your First Web Page
    • Lesson 2.1: Laying the Basic Page Structure
    • Lesson 2.2: Adding a Title
    • Lesson 2.3: Adding Some Text
    • Lesson 2.4: Marking Important Text
    • Lesson 2.5: Formatting Keywords
    • Lesson 2.6: Emphasizing Text
    • Lesson 2.7: Formatting Alternative Text
    • Lesson 2.8: Quoting Text
    • Lesson 2.9: Working with Headings
    • Lesson 2.10: Crafting Links
  • Chapter 3—Adding Structure to Your Page
    • Lesson 3.1: Working with Paragraphs
    • Lesson 3.2: Inserting Line Breaks
    • Lesson 3.3: Dividing Web Page Text
    • Lesson 3.4: Creating Inline Containers
    • Lesson 3.5: Adding a Visual Break Between Blocks
    • Lesson 3.6: Adding a Numbered List
    • Lesson 3.7: Adding a Bulleted List
  • Chapter 4—Formatting Your Web Page
    • Lesson 4.1: Specifying a Generic Font
    • Lesson 4.2: Specifying a System Font
    • Lesson 4.3: Setting the Type Size
    • Lesson 4.4: Making Text Bold
    • Lesson 4.5: Making Text Italic
    • Lesson 4.6: Aligning Paragraphs Horizontally
    • Lesson 4.7: Indenting Paragraph Text
    • Lesson 4.8: Using Color Keywords
    • Lesson 4.9: Working with Background Colors
  • Chapter 6—Adding Images and Media
    • Lesson 6.1: Adding an Image to the Page
    • Lesson 6.2: Working with Background Images
    • Lesson 6.3: Embedding Video in a Web Page
    • Lesson 6.4: Embedding Audio in a Web Page
  • Chapter 7—Learning More About Styles
    • Lesson 7.1: Inserting Inline Styles
    • Lesson 7.2: Adding an Internal Style Sheet
    • Lesson 7.3: Referencing an External Style Sheet
    • Lesson 7.4: Using Class Selectors
  • Chapter 8—Floating and Positioning Elements
    • Lesson 8.1: Floating Elements
    • Lesson 8.2: Positioning Elements
  • Chapter 9—Styling Sizes, Borders, and Margins
    • Lesson 9.1: Setting the Width and Height
    • Lesson 9.2: Adding Padding
    • Lesson 9.3: Applying a Simple Border
    • Lesson 9.4: Controlling the Margins
  • Chapter 11—Learning Basic Page Layouts
    • Lesson 11.1: Creating the Holy Grail Layout with Floats
    • Lesson 11.2: Creating the Holy Grail Layout with Inline Blocks
  • Chapter 12—Creating Page Layouts with Flexbox
    • Lesson 12.1: Working with Flexbox Containers
    • Lesson 12.2: Working with Flexbox Items
    • Lesson 12.3: Creating the Holy Grail Layout with Flexbox
  • Chapter 13—Designing Responsive Web Pages
    • Lesson 13.1: Why Fixed-Width Layouts Are the Enemy
    • Lesson 13.2: Creating a Liquid Layout
    • Lesson 13.3: Creating a Flexible Layout
    • Lesson 13.4: Creating a Adaptive Layout
    • Lesson 13.5: Creating a Mobile-First Layout
  • Chapter 14—Making Your Images and Typography Responsive
    • Lesson 14.1: Creating Fluid Images
    • Lesson 14.2: Delivering Images Responsively
    • Lesson 14.3: Using Responsive Font Sizes
    • Lesson 14.4: Using Responsive Measurements
  • Chapter 16—More Elements and Styles for Web Designers
    • Lesson 16.1: Other Text-Level Elements You Should Know
    • Lesson 16.2: Linking to Anchors
  • Chapter 17—Adding a Splash of Color to Your Web Designs
    • Lesson 17.1: Specifying Red, Green, and Blue with the rgb() Function
    • Lesson 17.2: Specifying Hue, Saturation, and Luminance with the hsl() Function
    • Lesson 17.3: Using RGB Codes
    • Lesson 17.4: Creating a Linear Gradient
    • Lesson 17.5: Creating a Radial Gradient
    • Lesson 17.6: Gradients and Vendor Prefixes
    • Lesson 17.7: Changing the Transparency
  • Chapter 18—Enhancing Page Text with Typography
    • Lesson 18.1: Working with Font Stacks
    • Lesson 18.2: Using Third-Party Hosted Fonts
    • Lesson 18.3: Hosting Your Own Fonts
    • Lesson 18.4: Styling Small Caps
    • Lesson 18.5: Setting the Line Height
    • Lesson 18.6: Using the Shorthand Font Property
  • Chapter 19—Levelling Up Your Style Game
    • Lesson 19.1: Using ID Selectors
    • Lesson 19.2: The Descendant Selector
    • Lesson 19.3: The Child Selector
    • Lesson 19.4: The Sibling Selector
    • Lesson 19.5: The ::before and ::after Pseudo-Elements
    • Lesson 19.6: Understanding Inheritance
    • Lesson 19.7: Learning About the Cascade
    • Lesson 19.8: Introducing Specificity

Book Projects

  • Creating a Landing Page
  • Creating a Personal Home Page
  • Creating a Photo Gallery
  • Creating a Portfolio Page

Tools

  • Color Chooser
  • Color Scheme Calculator
  • CSS Color Keywords
  • HTML5 Entity Browser
  • Line Length Helper
  • RGB Visualizer

Construction Kits

  • Gradient Construction Kit

Tutorials

  • Getting Started with CSS Grid
  • Gearing Up for CSS Variables

Playground

  • New Sandbox
  • Download Code
  • Change Settings…

Support

  • Tour the Playground
  • Get Help
  • Learn About the Book
  • Send Feedback…
  • Get the example files (GitHub)
Jump to previous pagePrevious Page
Next PageJump to next page

Welcome
✓ Copied

HTML

  • Display errors
  • Copy to clipboard
 
1
                            
✓ Copied

CSS

  • Display errors
  • Copy to clipboard
xxxxxxxxxx
1
 
1
                            
✓ Copied

JavaScript

  • Display errors
  • Copy to clipboard
xxxxxxxxxx
1
 
1
                            
Settings
Book edition: