Table of Contents

Introduction vii

Chapter 1 Coding in Plain English 1

CSS Is Easy to Memorize 2

You Already Know How to Read CSS 2

Chapter 2 From Picas to Pixels 5

Three Steps to Thinking Like a Web Designer 6

Setting Up Your Web Design Files 11

Chapter 3 Dump Drag and Drop 17

Why You Shouldn't Rely on Software to Set Up Your Paths 18

Web Sites Have Folders Like Your Computer 18

How FTP Works (the Oversimplified Version) 20

Navigating Folders on the Internet 21

It's Like Packaging InDesign Projects 21

Absolute Paths 23

Relative Paths 24

Moving Within the Same Folder 25

Moving Into Deeper Folders 25

Moving Into Higher Folders 25

Putting It Together 25

Starting at Home 26

Leaving Off Index 26

Trailing Slashes 26

This Chapter Will Fix 89.6 Percent of Your Problems Read It Again 26

Chapter 4 You Have to Read the Words 27

It's the Whole Purpose of Coding 28

So What Does HTML Do, Exactly? 29

Chapter 5 Boxes Inside Boxes 33

Learning CSS Happens Fast, Once You Know the Secret 34

HTML Is Made Up of Tags 35

A Dozen Tags You Need to Know 36

New HTML vs. Old HTML 38

Tag Groups (Also Known as Lists) 39

Nesting Tags 44

Adding Attributes to Tags 46

Five Attributes You Need to Know 47

Self-Closing Tags 49

Formatting Code Is Like Setting Type 50

Block and Inline Tags 53

HTML Looks Like a Word Doc 56

Chapters 6 Sculpting with CSS 57

First Things First: Syntax 58

Formatting Your CSS 60

Getting Fancy with Selectors 62

Reading Selectors in Plain English 66

Commenting Your CSS 67

Let's Write Some CSS 68

Setting Type with CSS 68

Laying Out a Web Page 74

Designing for Interaction 85

Let's Make a Web Page Together 88

You Already Know a Lot 92

Chapter 7 Designing with CSS 93

Using Background Images 94

Cropping Images with CSS 101

Making Columns with Background Images 108

Designing with CSS3-Without Images 112

Putting It All Together 119

Making Design Happen 122

Chapter 8 Improving Lives with CSS 123

Empathy Through CSS 124

Designing for Print (with CSS) 124

Designing for Accessibility 127

Writing CSS That Loads Fast 129

Thinking Beyond Visual Design 132

Chapter 9 Starting from Scratch 133

Copying and Pasting Saves Time 134

More HTML Tags 134

The HTML Framework 137

Chapter 10 Prepress for the Web 139

Image Production for Web Design 140

Starting by Planning 140

Understanding Image Formats 144

Saving Your Images 148

Measure Twice, Slice Once 149

Chapter 11 Tools of the Trade 151

Web Design Doesn't Require Many Tools 152

The Web Designer's Toolbox 152

Putting It All Together 155

Chapter 12 Any Questions? 157

Frequently Asked Questions 158

Coding Is an Art 162

There Is No Wrong Way to Learn 162

Index 163