FOREWORD .................................................................................................... xi
PREFACE ....................................................................................................... xiii
PART I. GETTING STARTED
1. Getting Started in Web Design ..........................................3
Where Do I Start? ............................................................................. 4
It Takes a Village (Website Creation Roles)........................................ 4
Gearing Up for Web Design ............................................................ 14
What You’ve Learned ...................................................................... 20
Test Yourself ................................................................................... 20
2. How the Web Works........................................................ 21
The Internet Versus the Web ........................................................... 21
Serving Up Your Information .......................................................... 22
A Word About Browsers.................................................................. 23
Web Page Addresses (URLs)............................................................ 24
The Anatomy of a Web Page............................................................ 27
Putting It All Together..................................................................... 32
Test Yourself ................................................................................... 34
3. Some Big Concepts You Need to Know............................ 35
A Multitude of Devices ................................................................... 36
Sticking with the Standards............................................................. 38
Progressive Enhancement ................................................................ 38
iii
Responsive Web Design .................................................................. 40
One Web for All (Accessibility) ....................................................... 42
The Need for Speed (Site Performance)............................................ 44
Test Yourself ................................................................................... 46
PART II. HTML FOR STRUCTURE
4. Creating a Simple Page ................................................... 49
A Web Page, Step-By-Step ............................................................... 49
Launch a Text Editor....................................................................... 50
Step 1: Start with Content ............................................................... 53
Step 2: Give the HTML Document Structure................................... 55
Step 3: Identify Text Elements ......................................................... 59
Step 4: Add an Image ...................................................................... 62
Step 5: Change the Look with a Style Sheet ..................................... 66
When Good Pages Go Bad .............................................................. 67
Validating Your Documents............................................................. 68
Test Yourself ................................................................................... 70
Element Review: HTML Document Setup ...................................... 70
5. Marking Up Text.............................................................. 71
Paragraphs ...................................................................................... 71
Headings......................................................................................... 72
Thematic Breaks (Horizontal Rule).................................................. 74
Lists................................................................................................ 74
More Content Elements................................................................... 78
Organizing Page Content................................................................. 82
The Inline Element Roundup........................................................... 88
Generic Elements (div and span)...................................................... 98
Improving Accessibility with ARIA ............................................... 102
Character Escapes......................................................................... 105
Putting It All Together................................................................... 108
Test Yourself ..................................................................................111
Element Review: Text Elements..................................................... 112
iv Contents
6. Adding Links ................................................................. 113
The href Attribute ..........................................................................114
Linking to Pages on the Web......................................................... 115
Linking Within Your Own Site ......................................................116
Targeting a New Browser Window ................................................ 126
Mail Links .................................................................................... 127
Telephone Links............................................................................ 128
Test Yourself ................................................................................. 128
Element Review: Links.................................................................. 130
7. Adding Images .............................................................. 131
First, a Word on Image Formats .................................................... 132
The img Element........................................................................... 134
Adding SVG Images ...................................................................... 139
Responsive Image Markup ............................................................ 146
Whew! We’re Finished .................................................................. 159
Test Yourself ................................................................................. 159
Element Review: Images ................................................................162
8. Table Markup................................................................ 163
How to Use Tables ........................................................................ 163
Minimal Table Structure ............................................................... 165
Table Headers ............................................................................... 167
Spanning Cells.............................................................................. 168
Table Accessibility .........................................................................169
Row and Column Groups...............................................................171
Wrapping Up Tables...................................................................... 173
Test Yourself ..................................................................................175
Element Review: Tables..................................................................176
9. Forms ........................................................................... 177
How Forms Work.......................................................................... 177
The form Element...........................................................................179
Variables and Content................................................................... 182
The Great Form Control Roundup................................................. 183
Form Accessibility Features........................................................... 203
Contents v
Form Layout and Design ............................................................... 206
Test Yourself ................................................................................. 208
Element Review: Forms................................................................. 209
10.Embedded Media.......................................................... 215
Window-In-A-Window (iframe) .................................................... 215
Multipurpose Embedder (object) ....................................................218
Video and Audio ........................................................................... 219
Canvas.......................................................................................... 228
Test Yourself ................................................................................. 233
Element Review: Embedded Media................................................ 234
PART III. CSS FOR PRESENTATION
11.Introducing Cascading Style Sheets .............................. 239
The Benefits of CSS....................................................................... 239
How Style Sheets Work ................................................................. 240
The Big Concepts.......................................................................... 246
CSS Units of Measurement............................................................ 253
Developer Tools Right in Your Browser ......................................... 256
Moving Forward with CSS ............................................................ 258
Test Yourself ................................................................................. 259
12.Formatting Text ............................................................ 261
Basic Font Properties..................................................................... 261
Advanced Typography with CSS3.................................................. 277
Changing Text Color..................................................................... 280
A Few More Selector Types ........................................................... 281
Text Line Adjustments .................................................................. 287
Underlines and Other “Decorations” ............................................. 290
Changing Capitalization................................................................ 291
Spaced Out ................................................................................... 292
Text Shadow ................................................................................. 293
Changing List Bullets and Numbers.............................................. 296
Test Yourself ................................................................................. 299
CSS Review: Font and Text Properties........................................... 301
vi Contents
13.Colors and Backgrounds ............................................... 303
Specifying Color Values................................................................. 303
Foreground Color...........................................................................311
Background Color......................................................................... 312
Clipping the Background................................................................314
Playing with Opacity..................................................................... 315
Pseudo-Class Selectors ...................................................................316
Pseudo-Element Selectors.............................................................. 320
Attribute Selectors......................................................................... 323
Background Images........................................................................324
The Shorthand background Property............................................. 338
Like a Rainbow (Gradients)........................................................... 340
Finally, External Style Sheets......................................................... 348
Wrapping It Up............................................................................. 351
Test Yourself ................................................................................. 352
CSS Review: Color and Background Properties.............................. 354
14.Thinking Inside the Box ................................................ 355
The Element Box........................................................................... 355
Specifying Box Dimensions ........................................................... 356
Padding ........................................................................................ 361
Borders ......................................................................................... 366
Margins .........................................................................................376
Assigning Display Types................................................................ 380
Box Drop Shadows........................................................................ 382
Test Yourself ................................................................................. 384
CSS Review: Box Properties .......................................................... 384
15.Floating and Positioning............................................... 387
Normal Flow................................................................................. 387
Floating ........................................................................................ 388
Fancy Text Wrap with CSS Shapes ............................................... 399
Positioning Basics.......................................................................... 405
Relative Positioning ....................................................................... 407
Absolute Positioning...................................................................... 408
Fixed Positioning............................................................................416
Contents vii
Test Yourself ..................................................................................417
CSS Review: Floating and Positioning Properties............................418
16.CSS Layout with Flexbox and Grid................................. 419
Flexible Boxes with CSS Flexbox....................................................419
CSS Grid Layout ........................................................................... 447
Test Yourself ................................................................................. 478
CSS Review: Layout Properties...................................................... 482
17.Responsive Web Design ................................................ 485
Why RWD?................................................................................... 485
The Responsive Recipe .................................................................. 486
Choosing Breakpoints................................................................... 495
Designing Responsively................................................................. 499
A Few Words About Testing.......................................................... 512
More RWD Resources....................................................................514
Test Yourself ..................................................................................516
18.Transitions, Transforms, and Animation ....................... 517
Ease-y Does It (CSS Transitions).....................................................517
CSS Transforms ............................................................................ 527
Keyframe Animation ..................................................................... 536
Wrapping Up ................................................................................ 542
Test Yourself ................................................................................. 542
CSS Review: Transitions, Transforms, and Animation ................... 545
19.More CSS Techniques .................................................... 547
Styling Forms................................................................................ 547
Styling Tables................................................................................ 551
A Clean Slate (Reset and Normalize.css)........................................ 554
Image Replacement Techniques..................................................... 556
CSS Sprites.................................................................................... 557
CSS Feature Detection................................................................... 559
Wrapping Up Style Sheets ............................................................. 564
Test Yourself ................................................................................. 564
CSS Review: Table Properties........................................................ 566
viii Contents
20.Modern Web Development Tools................................... 567
Getting Cozy with the Command Line.......................................... 567
CSS Power Tools (Processors)........................................................ 572
Build Tools (Grunt and Gulp)........................................................ 578
Version Control with Git and GitHub............................................ 581
Conclusion.................................................................................... 588
Test Yourself ................................................................................. 589
PART IV. JAVASCRIPT FOR BEHAVIOR
21.Introduction to JavaScript............................................ 593
What Is JavaScript?....................................................................... 593
Adding JavaScript to a Page........................................................... 597
The Anatomy of a Script................................................................ 598
The Browser Object....................................................................... 612
Events........................................................................................... 613
Putting It All Together....................................................................616
Learning More About JavaScript ....................................................617
Test Yourself ................................................................................. 619
22.Using JavaScript........................................................... 621
Meet the DOM.............................................................................. 621
Polyfills......................................................................................... 630
JavaScript Libraries....................................................................... 632
Big Finish...................................................................................... 637
Test Yourself ................................................................................. 637
PART V. WEB IMAGES
23.Web Image Basics ......................................................... 641
Image Sources............................................................................... 641
Meet the Formats.......................................................................... 644
Image Size and Resolution............................................................. 657
Image Asset Strategy ..................................................................... 660
Favicons........................................................................................ 665
Contents ix
Summing Up Images..................................................................... 668
Test Yourself ................................................................................ 668
24.Image Asset Production................................................ 671
Saving Images in Web Formats...................................................... 671
Working with Transparency .......................................................... 676
Responsive Image Production Tips ................................................ 680
Image Optimization ...................................................................... 691
Test Yourself ..................................................................................701
25.SVG .............................................................................. 703
Drawing with XML....................................................................... 705
Features of SVG as XML ............................................................... 713
SVG Tools..................................................................................... 718
SVG Production Tips..................................................................... 721
Responsive SVGs........................................................................... 724
Further SVG Exploration............................................................... 731
Test Yourself ................................................................................ 731
And...We’re Done! ......................................................................... 733
PART VI. APPENDICES
A. Answers ........................................................................ 737
B. HTML5 Global Attributes ............................................... 753
C. CSS Selectors, Levels 3 and 4 ........................................ 755
D. From HTML+ to HTML5.................................................. 759
INDEX...................................................................................