Table of Contents for

Learning Web Design, 5th Edition

Contents

Foreword

Preface

Part I. Getting Started

1. Getting Started in Web Design

Where Do I Start?

It Takes a Village (Website Creation Roles)

Gearing Up for Web Design

What You’ve Learned

Test Yourself

2. How the Web Works

The Internet Versus the Web

Serving Up Your Information

A Word About Browsers

Web Page Addresses (URLs)

The Anatomy of a Web Page

Putting It All Together

Test Yourself

3. Some Big Concepts You Need to Know

A Multitude of Devices

Sticking with the Standards

Progressive Enhancement

Responsive Web Design

One Web for All (Accessibility)

The Need for Speed (Site Performance)

Test Yourself

Part II. HTML for STRUCTURE

4. Creating a Simple Page

A Web Page, Step-By-Step

Launch a Text Editor

Step 1: Start with Content

Step 2: Give the HTML Document Structure

Step 3: Identify Text Elements

Step 4: Add an Image

Step 5: Change the Look with a Style Sheet

When Good Pages Go Bad

Validating Your Documents

Test Yourself

Element Review: HTML Document Setup

5. Marking Up Text

Paragraphs

Headings

Thematic Breaks (Horizontal Rule)

Lists

More Content Elements

Organizing Page Content

The Inline Element Roundup

Generic Elements (div and span)

Improving Accessibility with ARIA

Character Escapes

Putting It All Together

Test Yourself

Element Review: Text Elements

6. Adding Links

The href Attribute

Linking to Pages on the Web

Linking Within Your Own Site

Targeting a New Browser Window

Mail Links

Telephone Links

Test Yourself

Element Review: Links

7. Adding Images

First, a Word on Image Formats

The img Element

Adding SVG Images

Responsive Image Markup

Whew! We’re Finished

Test Yourself

Element Review: Images

8. Table Markup

How to Use Tables

Minimal Table Structure

Table Headers

Spanning Cells

Table Accessibility

Row and Column Groups

Wrapping Up Tables

Test Yourself

Element Review: Tables

9. Forms

How Forms Work

The form Element

Variables and Content

The Great Form Control Roundup

Form Accessibility Features

Form Layout and Design

Test Yourself

Element Review: Forms

10. Embedded Media

Window-In-A-Window (iframe)

Multipurpose Embedder (object)

Video and Audio

Canvas

Test Yourself

Element Review: Embedded Media

Part III. CSS for Presentation

11. Introducing Cascading Style Sheets

The Benefits of CSS

How Style Sheets Work

The Big Concepts

CSS Units of Measurement

Developer Tools Right in Your Browser

Moving Forward with CSS

Test Yourself

12. Formatting Text

Basic Font Properties

Advanced Typography with CSS3

Changing Text Color

A Few More Selector Types

Text Line Adjustments

Underlines and Other “Decorations”

Changing Capitalization

Spaced Out

Text Shadow

Changing List Bullets and Numbers

Test Yourself

CSS Review: Font and Text Properties

13. Colors and Backgrounds

Specifying Color Values

Foreground Color

Background Color

Clipping the Background

Playing with Opacity

Pseudo-Class Selectors

Pseudo-Element Selectors

Attribute Selectors

Background Images

The Shorthand background Property

Like a Rainbow (Gradients)

Finally, External Style Sheets

Wrapping It Up

Test Yourself

CSS Review: Color and Background Properties

14. Thinking Inside the Box

The Element Box

Specifying Box Dimensions

Padding

Borders

Margins

Assigning Display Types

Box Drop Shadows

Test Yourself

CSS Review: Box Properties

15. Floating and Positioning

Normal Flow

Floating

Fancy Text Wrap with CSS Shapes

Positioning Basics

Relative Positioning

Absolute Positioning

Fixed Positioning

Test Yourself

CSS Review: Floating and Positioning Properties

16. CSS Layout with Flexbox and Grid

Flexible Boxes with CSS Flexbox

CSS Grid Layout

Test Yourself

CSS Review: Layout Properties

17. Responsive Web Design

Why RWD?

The Responsive Recipe

Choosing Breakpoints

Designing Responsively

A Few Words About Testing

More RWD Resources

Test Yourself

18. Transitions, Transforms, and Animation

Ease-y Does It (CSS Transitions)

CSS Transforms

Keyframe Animation

Wrapping Up

Test Yourself

CSS Review: Transitions, Transforms, and Animation

19. More CSS Techniques

Styling Forms

Styling Tables

A Clean Slate (Reset and Normalize.css)

Image Replacement Techniques

CSS Sprites

CSS Feature Detection

Wrapping Up Style Sheets

Test Yourself

CSS Review: Table Properties

20. Modern Web Development Tools

Getting Cozy with the Command Line

CSS Power Tools (Processors)

Build Tools (Grunt and Gulp)

Version Control with Git and GitHub

Conclusion

Test Yourself

Part IV. JavaScript for Behavior

21. Introduction to JavaScript

What Is JavaScript?

Adding JavaScript to a Page

The Anatomy of a Script

The Browser Object

Events

Putting It All Together

Learning More About JavaScript

Test Yourself

22. Using JavaScript

Meet the DOM

Polyfills

JavaScript Libraries

Big Finish

Test Yourself

Part V. Web Images

23. Web Image Basics

Image Sources

Meet the Formats

Image Size and Resolution

Image Asset Strategy

Favicons

Summing Up Images

Test Yourself

24. Image Asset Production

Saving Images in Web Formats

Working with Transparency

Responsive Image Production Tips

Image Optimization

Test Yourself

25. SVG

Drawing with XML

Features of SVG as XML

SVG Tools

SVG Production Tips

Responsive SVGs

Further SVG Exploration

Test Yourself

And...We’re Done!

Part VI. Appendices

A. Answers

B. HTML5 Global Attributes

C. CSS Selectors, Levels 3 and 4

D. From HTML+ to HTML5

An Abbreviated History of HTML

HTML5: More Than Markup

Where We Go From Here