Contents at a Glance

Part I: Getting Started on the Web

LESSON 1: Understanding How the Web Works

A Brief History of HTML and the World Wide Web

Creating Web Content

Understanding Web Content Delivery

Selecting a Web Hosting Provider

Testing with Multiple Web Browsers and Devices

Creating a Sample File

Using FTP to Transfer Files

Understanding Where to Place Files on the Web Server

Distributing Content Without a Web Server

Tips for Testing Web Content

Summary

Q&A

Workshop

Exercises

LESSON 2: Structuring an HTML Document

Getting Prepared

Getting Started with a Simple Web Page

HTML Tags Every Web Page Must Have

Organizing a Page with Paragraphs and Line Breaks

Organizing Your Content with Headings

Understanding Semantic Elements

Using <header> in Multiple Ways

Understanding the <section> Element

Using <article>

Implementing the <nav> Element

When to Use <aside>

Using <footer> Effectively

Summary

Q&A

Workshop

Exercises

LESSON 3: Understanding Cascading Style Sheets

How CSS Works

A Basic Style Sheet

A CSS Style Primer

Using Style Classes

Using Style IDs

Internal Style Sheets and Inline Styles

Summary

Q&A

Workshop

Exercises

LESSON 4: Understanding JavaScript

Learning Web Scripting Basics

How JavaScript Fits into a Web Page

Exploring JavaScript’s Capabilities

Displaying Time with JavaScript

Testing the Script

Summary

Q&A

Workshop

Exercises

LESSON 5: Validating and Debugging Your Code

Validating Your Web Content

Debugging HTML and CSS Using Developer Tools

Debugging JavaScript Using Developer Tools

Summary

Q&A

Workshop

Exercises

Part II: Building Blocks of Practical Web Design

LESSON 6: Working with Fonts, Text Blocks, Lists, and Tables

Working with Special Characters

Boldface, Italic, and Special Text Formatting

Tweaking the Font

Using Web Fonts

Aligning Text on a Page

The Three Types of HTML Lists

Placing Lists Within Lists

Creating a Simple Table

Controlling Table Sizes

Alignment and Spanning Within Tables

Page Layout with Tables

Using CSS Columns

Summary

Q&A

Workshop

Exercises

LESSON 7: Using External and Internal Links

Using Web Addresses

Linking Within a Page Using Anchors

Linking Between Your Own Web Content

Linking to Non-HTML Files

Linking to External Web Content

Linking to an Email Address

Opening a Link in a New Browser Window

Giving Titles to Links

Using CSS to Style Hyperlinks

Using Links Effectively

Summary

Q&A

Workshop

Exercises

LESSON 8: Working with Colors, Images, and Multimedia

Best Practices for Choosing Colors

Understanding Web Colors

Using Hexadecimal Values for Colors

Using RGB and RGBa Values for Colors

Using CSS to Set Background, Text, and Border Colors

Choosing Graphics Software

The Least You Need to Know About Graphics

Preparing Photographic Images

Creating Banners and Buttons

Optimizing Images by Reducing or Removing Colors

Creating Tiled Background Images

Placing Images on a Web Page

Describing Images with Text

Specifying Image Height and Width

Aligning Images

Turning Images into Links

Using Background Images

Using Image Maps

Linking to Multimedia Files

Embedding Multimedia Files

Additional Tips for Using Multimedia

Summary

Q&A

Workshop

Exercises

Part III: Advanced Web Page Design with CSS

LESSON 9: Working with Margins, Padding, Alignment, and Floating

Using Margins

Padding Elements

Keeping Everything Aligned

Centering Blocks of Content

Understanding the float Property

Summary

Q&A

Workshop

Exercises

LESSON 10: Understanding the CSS Box Model and Positioning

The CSS Box Model

Changing the Box Model

The Whole Scoop on Positioning

Controlling the Way Things Stack Up

Managing the Flow of Text

Summary

Q&A

Workshop

Exercises

LESSON 11: Using CSS to Do More with Lists, Text, and Navigation

HTML List Refresher

How the CSS Box Model Affects Lists

Placing List Item Indicators

Creating Image Maps with List Items and CSS

How Navigation Lists Differ from Regular Lists

Creating Vertical Navigation with CSS

Creating Horizontal Navigation with CSS

Summary

Q&A

Workshop

Exercises

LESSON 12: Creating Layouts Using Modern CSS Techniques

Getting Ready to Do Page Layout

The Importance of Putting Mobile Devices First

Understanding Fixed Layouts

Understanding Liquid Layouts

Creating a Fixed/Liquid Hybrid Layout

Using Modern CSS Layout Techniques

Summary

Q&A

Workshop

Exercises

LESSON 13: Taking Control of Backgrounds and Borders

Reviewing Background and Border Basics

Using Multiple Borders and Backgrounds

Using Forgotten Background Properties

Using Gradients as Backgrounds

Rounding the Corners of HTML Elements

Using Images as Borders

Understanding CSS Outlines

Summary

Q&A

Workshop

Exercises

LESSON 14: Using CSS Transformations and Transitions

Understanding CSS 2D Transformations

Transforming Elements in Three Dimensions

Working with CSS Transitions

Using JavaScript to Trigger Transitions

Summary

Q&A

Workshop

Exercises

LESSON 15: Animating with CSS and the Canvas

Understanding CSS Animation

Using the CSS Canvas

Choosing Between CSS Animation and Canvas Animation

Summary

Q&A

Workshop

Exercises

Part IV: Responsive Web Design

LESSON 16: Understanding the Importance of Responsive Web Design

What Is Responsive Web Design?

What Is Progressive Enhancement?

Writing HTML for Responsive Web Design

Validating HTML, CSS, and JavaScript

Summary

Q&A

Workshop

Exercises

LESSON 17: Designing for Mobile Devices

Designing for Mobile Devices

Understanding Mobile First Design

Using Responsive Tables and Images

Creating Responsive Layouts Without Media Queries

Alternatives for Mobile Design Besides RWD

Summary

Q&A

Workshop

Exercise

LESSON 18: Using Media Queries and Breakpoints

What Is a Media Query?

Using Media Query Expressions

What Is a Breakpoint?

How to Define Breakpoints in Your CSS

Optimal Breakpoints

Summary

Q&A

Workshop

Exercises

Part V: Getting Started with Dynamic Sites

LESSON 19: Understanding Dynamic Websites and HTML5 Applications

Understanding the Different Types of Scripting

Including JavaScript in HTML

Displaying Random Content

Understanding the Document Object Model

Changing Images Based on User Interaction

Thinking Ahead to Developing HTML5 Applications

Summary

Q&A

Workshop

Exercises

LESSON 20: Getting Started with JavaScript Programming

Basic Concepts

JavaScript Syntax Rules

Using Comments

Best Practices for JavaScript

Understanding JSON

Summary

Q&A

Workshop

Exercises

LESSON 21: Working with the Document Object Model (DOM)

Understanding the Document Object Model

Using window Objects

Working with the document Object

Accessing Browser History

Working with the location Object

More About the DOM Structure

Working with DOM Nodes

Creating Positionable Elements (Layers)

Hiding and Showing Objects

Modifying Text in a Page

Adding Text to a Page

Summary

Q&A

Workshop

Exercises

LESSON 22: Using JavaScript Variables, Strings, and Arrays

Using Variables

Understanding Expressions and Operators

Data Types in JavaScript

Converting Between Data Types

Using String Objects

Working with Substrings

Using Numeric Arrays

Using String Arrays

Sorting a Numeric Array

Using Functions

Introducing Objects

Using Objects to Simplify Scripting

Extending Built-in Objects

Using the Math Object

Working with Math Methods

Working with Dates

Summary

Q&A

Workshop

Exercises

LESSON 23: Controlling Flow with Conditions and Loops

The if Statement

Using Shorthand Conditional Expressions

Testing Multiple Conditions with if and else

Using Multiple Conditions with switch

Using for Loops

Using while Loops

Using do...while Loops

Working with Loops

Looping Through Object Properties

Summary

Q&A

Workshop

Exercises

LESSON 24: Responding to Events and Using Windows

Understanding Event Handlers

Using Mouse Events

Using Keyboard Events

Using the load and unload Events

Using click to Change the Appearance of a <div>

Controlling Windows with Objects

Moving and Resizing Windows

Using Timeouts

Displaying Dialog Boxes

Summary

Q&A

Workshop

Exercises

LESSON 25: JavaScript Best Practices

Scripting Best Practices

Reading Browser Information

Cross-Browser Scripting

Supporting Non-JavaScript-Enabled Browsers

Creating an Unobtrusive Script

Summary

Q&A

Workshop

Exercises

LESSON 26: Using Third-Party JavaScript Libraries and Frameworks

Using Third-Party JavaScript Libraries

Adding JavaScript Effects by Using a Third-Party Library

Using JavaScript Frameworks

Summary

Q&A

Workshop

Exercises

Part VI: Advanced Website Functionality and Management

LESSON 27: Working with Web-Based Forms

How HTML Forms Work

Creating a Form

Accepting Text Input

Naming Each Piece of Form Data

Labeling Each Piece of Form Data

Grouping Form Elements

Exploring Form Input Controls

Using HTML5 Form Validation

Submitting Form Data

Accessing Form Elements with JavaScript

Summary

Q&A

Workshop

Exercises

LESSON 28: Organizing and Managing a Website

When One Page Is Enough

Organizing a Simple Site

Organizing a Larger Site

Optimizing Your Site for Search Engines

Writing Maintainable Code

Thinking About Version Control

Using HTML and CSS Frameworks

Summary

Q&A

Workshop

Exercises

Index