Contents at a Glance
Book 1: Getting
Book 2: Learning HTML
CHAPTER 1: Building Good Bones: Structuring
CHAPTER 2: Adding Links,
Working
CHAPTER 4: Building Tables with Your Bare Hands
CHAPTER 5: Using Forms to Make a Page Interactive
CHAPTER 6: Making
Book 3: Learning CSS Basics
CHAPTER 1: Figuring Out the CSS Box Model
CHAPTER 2: Getting to Know the CSS Selectors
CHAPTER 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements
CHAPTER 4: Making
CHAPTER 5: Taking the Measure of
CHAPTER 6: Fancifying Pages with Colors and Backgrounds
CHAPTER 7: Taking Your Text Up a Notch with Web Typography
Book 4: Building Dynamic Pages with JavaScript
CHAPTER 1: JavaScript: The Bird’s-Eye View
CHAPTER 2: Understanding Variables
CHAPTER
CHAPTER 5: Harnessing the Power of Functions
CHAPTER 6: Playing with the Document Object Model
CHAPTER 7: Working with Arrays
CHAPTER 8: Manipulating Strings, Dates, and Numbers
CHAPTER 9: Storing User Data in the Browser
CHAPTER 10: Debugging Your Code
CHAPTER 11: Processing Form Data
Book 5: Looking Good with Layouts
CHAPTER 1: Exploring Some Layout Basics
CHAPTER 2: Getting Fancy with Flexbox
CHAPTER 3: Laying Out a Page with CSS Grid
CHAPTER 4: Creating Responsive Layouts
The <main> tag
The <article> tag
The <section> tag
The <aside> tag
The <footer> tag
Handling words and characters with <span>
Commenting Your Code
Anchors aweigh: Internal links
Building
A Few More HTML Text Tags to Know
<abbr>: The abbreviation text tag
<address>: The address text tag
<cite>: The citation text tag
<code>: The code text tag
<dfn>: The definition text tag
<dl>: The description list text tag
<kbd>: The keyboard input text tag
<mark>: The mark text tag
<pre>: The preformatted text tag
<s>: The strikethrough text tag
<sub>: The subscript text tag
<sup>: The superscript text tag
Cruising along Server Street
Taking a walk down Local
Making Text Accessible
Making Media Accessible
Specifying alt text for images
Buffing Up Your Page Accessibility Semantics
Adding form field labels
Making Your Pages Keyboard-Friendly
Adding an element to the tab order
Removing an element from the tab order
Ensuring Sufficient Color Contrast
1: Figuring Out the CSS Box Model
Thinking Outside (but Also Inside) the Box Model
Understanding the components of the box model
Understanding
Changing
Adding Padding
CHAPTER 2: Getting to Know the CSS Selectors
The descendant combinator ( )
The child combinator (>)
The subsequent-sibling combinator (~)
The next-sibling combinator (+)
Selecting Elements by Attribute
CHAPTER 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements
Scratching Your Head Over Pseudo-Classes
Introducing the pseudo-class
Styling elements with pseudo-classes
Matching child elements
Matching child elements by type
Matching form elements by state
Matching elements by user action
Matching links
Working with functional pseudo-classes
Getting Up to Speed with Pseudo-Elements
Working with pseudo-elements
Generating a last child with ::after
Generating a first child with ::before
Styling the opening letter with ::first-letter
Styling the opening line with ::first-line
CHAPTER 4: Making CSS Make Sense
Commenting Your CSS Code
Commenting non-obvious code
Marking stylesheet sections with comments
Popping
Understanding origin types
Declaration type, origin type, and weight
Figuring out specificity
Specificity and :is(), :where(), :not(), and :has()
The ultimate tiebreaker: source code order
Putting it all together: the cascade algorithm
CHAPTER 5: Taking the Measure of CSS
Getting Comfy with CSS Measurement Units
Checking Out the Absolute Measurement Units
Getting to Know the Relative Measurement Units
Using
Getting a handle on the em unit
Meeting your CSS measurement best friend: the rem unit
Here’s
Calculating with
Finding the smallest value with min()
Finding the largest value with max()
Setting bounds with clamp()
Taking Care of Your Text
Getting to know typefaces (and fonts, too)
All in the font family: Applying a typeface
Introducing the font stack
Generic font families
System font families
Web
The Typographic Trinity: Setting Type Size, Line Height, and Line Length
4: BUILDING DYNAMIC
Understanding Variables
Declaring
Checking
Naming Variables: Rules and Best Practices
CHAPTER 4:
Using the OR (||) operator
Using the NOT (!) Operator
Advanced notes on the && and || operators
Understanding
The order of precedence
Controlling the order of precedence
Controlling the Flow of JavaScript
Making True/False Decisions with if Statements
Branching with if. . .else Statements
Making Multiple Decisions
Using the AND (??) and OR (||) operators
Stringing together multiple if statements
Using the switch statement
Understanding Code Looping
Using while Loops
Using for Loops
Using do. . .while Loops
Controlling Loop Execution
Exiting a loop using the break statement
Bypassing loop statements using the continue
Avoiding Infinite Loops
CHAPTER 5: Harnessing the Power of Functions
What Is a Function?
Where Do You Put a Function?
Calling
Calling a function when the <script> tag is parsed
Calling
Calling
Passing
Passing
Making an argument optional
Returning
Getting
Assigning
Replacing
Moving to Arrow
Running Functions in the Future
Using
Using
Manipulating
The Web APIs: Some special objects
Getting
Specifying Elements
Specifying an element by id
Specifying elements by tag name
Specifying elements by class name
Specifying elements by selector
Working
Traversing the DOM
Getting
Getting
Manipulating Elements
Adding
Inserting
Changing
Tweaking
Declaring and populating an array at the same time
Using a loop to populate an array
How Do I Iterate Thee? Let Me Count the Ways
Iterating an array: forEach()
Iterating an array: for. . .of
Iterating to test an array’s elements: every() and some()
Iterating to create a new array: map()
Iterating an array down to a value: reduce()
Iterating to locate an element: find()
Creating Multidimensional Arrays
Manipulating Arrays
The length property
Concatenating to create a new array: concat()
Creating a string from an array’s elements: join()
Removing an array’s last element: pop()
Adding elements to the end of an array: push()
Reversing the order of an array’s elements: reverse()
Removing an array’s first element: shift()
Returning a subset of an array: slice()
Ordering array elements: sort()
Removing, replacing, and inserting elements: splice()
Inserting elements at the beginning of an array: unshift()
8: Manipulating Strings, Dates, and Numbers
Manipulating Text with the String Object
Working with string templates
Determining the length of a string
Searching for substrings
Methods that extract substrings
Dealing with Dates and Times
Arguments used with the Date object
Working with the Date object
Extracting information about a date
Setting
Performing
571
573
576
577
580
582
Removing
Logic
Getting to Know Your Debugging Tools
Debugging with the Console
Displaying the console in various browsers
Logging data to the Console
Executing code in the Console
Pausing Your Code
Entering break mode
Exiting break mode
Stepping Through Your Code
Stepping one statement at a time
Stepping into some code
Stepping over some code
Stepping out of some code
Monitoring Script Values
Viewing a single variable value
Viewing
Adding a watch expression
More Debugging Strategies
Looking
Programming Selection Lists
Checking out the HTMLSelectElement object
Checking out the HTMLOptionElement object
Referencing selection list options
Getting the selected list option
Changing the selected option
Handling and Triggering Form Events
Setting
Monitoring the focus event
Monitoring the blur event
Listening for element changes
Creating Keyboard Shortcuts for Form Controls
Dealing with the Form Data
BOOK 5: LOOKING GOOD WITH LAYOUTS
CHAPTER 1: Exploring Some Layout Basics
Getting a Grip on Page Flow
Floating Elements
Example: Creating a pull quote
Clearing your floats
Collapsing containers ahead!
Positioning Elements
Using relative positioning
Giving absolute positioning a whirl
Trying out fixed positioning
Making
Stacking Elements
Aligning
Centering
Aligning
Adding
Taking Control of Flex Items
Allowing flex items to grow
Allowing flex items to shrink
Suggesting a flex item size
Using the flex shorthand property
Laying out content columns with Flexbox
Changing the order of flex items
CHAPTER 3: Laying Out a Page with CSS Grid
Introducing CSS Grid
Setting Up the Grid Container
Specifying the Grid Rows and Columns
Setting your own columns and rows: the explicit grid
Letting the browser do some of the work: the implicit grid
Creating grid gaps
Taking Control: Assigning Grid Items
Assigning grid items to columns and rows
Assigning grid items to named grid areas
What is a Responsive Layout?
Going with the Flow: Fluid Layouts
Taking advantage of viewport units
Querying Your
Interrogating the screen with media queries
Exploring
Pick a testing width that makes sense for your site
Get your content to scale with the device
Build your CSS the mobile-first way
Pick a “non-mobile” breakpoint that makes sense for your content
