Web Design Playground
Run Code
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)
Previous Page
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
Close
AutoRun
Indent with tabs instead of spaces
Indent width
Theme
Light
Dark
Book edition:
First edition
Second edition
Save
Cancel