,Contents at a Glance
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Book 1: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPTER 1: Getting Acquainted with HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . 7
CHAPTER 2: Getting Ready to Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
CHAPTER 3: Finding and Setting Up a Web Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPTER 4: Testing and Validating Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Book 2: Learning HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
CHAPTER 1: Building Good Bones: Structuring the Page . . . . . . . . . . . . . . . . . . . . . . . . 79
CHAPTER 2: Adding Links, Lists, and Other Text Tidbits . . . . . . . . . . . . . . . . . . . . . . . . 97
CHAPTER 3: Working with Images, Video, and other Media . . . . . . . . . . . . . . . . . . . . 123
CHAPTER 4: Building Tables with Your Bare Hands . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
CHAPTER 5: Using Forms to Make a Page Interactive . . . . . . . . . . . . . . . . . . . . . . . . . 163
CHAPTER 6: Making Your Web Pages Accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Book 3: Learning CSS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
CHAPTER 1: Figuring Out the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
CHAPTER 2: Getting to Know the CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
CHAPTER 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements . . . . 251
CHAPTER 4: Making CSS Make Sense . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
CHAPTER 5: Taking the Measure of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
CHAPTER 6: Fancifying Pages with Colors and Backgrounds . . . . . . . . . . . . . . . . . . . 337
CHAPTER 7: Taking Your Text Up a Notch with Web Typography . . . . . . . . . . . . . . . 363
Book 4: Building Dynamic Pages with JavaScript . . . . . . . . . . 397
CHAPTER 1: JavaScript: The Bird’s-Eye View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
CHAPTER 2: Understanding Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
CHAPTER 3: Building Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
CHAPTER 4: Controlling the Flow of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
CHAPTER 5: Harnessing the Power of Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
CHAPTER 6: Playing with the Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . 513
CHAPTER 7: Working with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
CHAPTER 8: Manipulating Strings, Dates, and Numbers . . . . . . . . . . . . . . . . . . . . . . . 583
CHAPTER 9: Storing User Data in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
CHAPTER 10: Debugging Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
CHAPTER 11: Processing Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
,Book 5: Looking Good with Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . 673
CHAPTER 1: Exploring Some Layout Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675
CHAPTER 2: Getting Fancy with Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703
CHAPTER 3: Laying Out a Page with CSS Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737
CHAPTER 4: Creating Responsive Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801
, Table of Contents
INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Getting started with the book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
My “No AI” guarantee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Foolish Assumptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Icons Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Beyond the Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
BOOK 1: GETTING STARTED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPTER 1: Getting Acquainted with HTML,
CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
What Do HTML, CSS, and JavaScript Do, Exactly? . . . . . . . . . . . . . . . . . . . 8
Why Learn HTML, CSS, and JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Seeing How It All Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
To get started, launch a new text file . . . . . . . . . . . . . . . . . . . . . . . . .11
Notes about saving HTML files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
This book in four words: Edit. Save. Reload. Repeat. . . . . . . . . . . . .12
Adding Structure with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
What is HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Getting the hang of HTML elements and tags . . . . . . . . . . . . . . . . . .15
Understanding tag attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
A barebones HTML page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Some notes on structure versus style . . . . . . . . . . . . . . . . . . . . . . . .23
Adding Style with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Figuring out cascading style sheets . . . . . . . . . . . . . . . . . . . . . . . . . .24
Getting the hang of CSS rules and declarations . . . . . . . . . . . . . . . .26
Adding styles to a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Adding Dynamism with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Adding a script to a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
The <script> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Where do you put the <script> tag? . . . . . . . . . . . . . . . . . . . . . . . . . .34
Example #1: Displaying a message to the user . . . . . . . . . . . . . . . . .35
Example #2: Writing text to the page . . . . . . . . . . . . . . . . . . . . . . . . .37
CHAPTER 2: Getting Ready to Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Setting Up Your Test Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Creating Your Local Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
First, create the local root folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Now create the local subfolders, if any . . . . . . . . . . . . . . . . . . . . . . .41
Table of Contents v
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Book 1: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPTER 1: Getting Acquainted with HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . 7
CHAPTER 2: Getting Ready to Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
CHAPTER 3: Finding and Setting Up a Web Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPTER 4: Testing and Validating Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Book 2: Learning HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
CHAPTER 1: Building Good Bones: Structuring the Page . . . . . . . . . . . . . . . . . . . . . . . . 79
CHAPTER 2: Adding Links, Lists, and Other Text Tidbits . . . . . . . . . . . . . . . . . . . . . . . . 97
CHAPTER 3: Working with Images, Video, and other Media . . . . . . . . . . . . . . . . . . . . 123
CHAPTER 4: Building Tables with Your Bare Hands . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
CHAPTER 5: Using Forms to Make a Page Interactive . . . . . . . . . . . . . . . . . . . . . . . . . 163
CHAPTER 6: Making Your Web Pages Accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Book 3: Learning CSS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
CHAPTER 1: Figuring Out the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
CHAPTER 2: Getting to Know the CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
CHAPTER 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements . . . . 251
CHAPTER 4: Making CSS Make Sense . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
CHAPTER 5: Taking the Measure of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
CHAPTER 6: Fancifying Pages with Colors and Backgrounds . . . . . . . . . . . . . . . . . . . 337
CHAPTER 7: Taking Your Text Up a Notch with Web Typography . . . . . . . . . . . . . . . 363
Book 4: Building Dynamic Pages with JavaScript . . . . . . . . . . 397
CHAPTER 1: JavaScript: The Bird’s-Eye View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
CHAPTER 2: Understanding Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
CHAPTER 3: Building Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
CHAPTER 4: Controlling the Flow of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
CHAPTER 5: Harnessing the Power of Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
CHAPTER 6: Playing with the Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . 513
CHAPTER 7: Working with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
CHAPTER 8: Manipulating Strings, Dates, and Numbers . . . . . . . . . . . . . . . . . . . . . . . 583
CHAPTER 9: Storing User Data in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
CHAPTER 10: Debugging Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
CHAPTER 11: Processing Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
,Book 5: Looking Good with Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . 673
CHAPTER 1: Exploring Some Layout Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675
CHAPTER 2: Getting Fancy with Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703
CHAPTER 3: Laying Out a Page with CSS Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737
CHAPTER 4: Creating Responsive Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801
, Table of Contents
INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Getting started with the book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
My “No AI” guarantee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Foolish Assumptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Icons Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Beyond the Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
BOOK 1: GETTING STARTED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPTER 1: Getting Acquainted with HTML,
CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
What Do HTML, CSS, and JavaScript Do, Exactly? . . . . . . . . . . . . . . . . . . . 8
Why Learn HTML, CSS, and JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Seeing How It All Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
To get started, launch a new text file . . . . . . . . . . . . . . . . . . . . . . . . .11
Notes about saving HTML files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
This book in four words: Edit. Save. Reload. Repeat. . . . . . . . . . . . .12
Adding Structure with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
What is HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Getting the hang of HTML elements and tags . . . . . . . . . . . . . . . . . .15
Understanding tag attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
A barebones HTML page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Some notes on structure versus style . . . . . . . . . . . . . . . . . . . . . . . .23
Adding Style with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Figuring out cascading style sheets . . . . . . . . . . . . . . . . . . . . . . . . . .24
Getting the hang of CSS rules and declarations . . . . . . . . . . . . . . . .26
Adding styles to a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Adding Dynamism with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Adding a script to a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
The <script> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Where do you put the <script> tag? . . . . . . . . . . . . . . . . . . . . . . . . . .34
Example #1: Displaying a message to the user . . . . . . . . . . . . . . . . .35
Example #2: Writing text to the page . . . . . . . . . . . . . . . . . . . . . . . . .37
CHAPTER 2: Getting Ready to Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Setting Up Your Test Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Creating Your Local Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
First, create the local root folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Now create the local subfolders, if any . . . . . . . . . . . . . . . . . . . . . . .41
Table of Contents v
