HTML, CSS, and JavaScript All in One

PART I: GETTING STARTED ON THE WEB
Lesson 1: Understanding How the Web Works 1

A Brief History of HTML and the World Wide Web 2
Creating Web Content 2
Understanding Web Content Delivery 3
Selecting a Web Hosting Provider 6
Testing with Multiple Web Browsers and Devices 8
Creating a Sample File 9
Using FTP to Transfer Files 10
Understanding Where to Place Files on the Web Server 14
Distributing Content Without a Web Server 17
Tips for Testing Web Content 18
Summary 19
Q&A 20
Workshop 20
Exercises 22
Lesson 2: Creating Web Content 2
Getting Prepared 24
Getting Started with a Simple Web Page 25
HTML Tags Every Web Page Must Have 28
Organizing a Page with Paragraphs and Line Breaks 31
Organizing Your Content with Headings 33
Understanding Semantic Elements 36
Using in Multiple Ways 42
Understanding the Element 44
Using 45
Implementing the Element 45
When to Use 47
Using Effectively 48
Summary 49
Q&A 50
Workshop 51
Exercises 53
Lesson 3: Understanding Cascading Style Sheets 55
How CSS Works 56
A Basic Style Sheet 57
A CSS Style Primer 63
Using Style Classes 68
Using Style IDs 70
Internal Style Sheets and Inline Styles 71
Summary 74
Q&A 75
Workshop 75
Exercises 77
Lesson 4: Understanding JavaScript 79
Learning Web Scripting Basics 80
How JavaScript Fits into a Web Page 81
Exploring JavaScript's Capabilities 84
Displaying Time with JavaScript 85
Testing the Script 89
Summary 93
Q&A 93
Workshop 94
Exercises 96
Lesson 5: Validating and Debugging Your Code 97
Validating Your Web Content 97
Debugging HTML and CSS Using Developer Tools 99
Debugging JavaScript Using Developer Tools 112
Summary 118
Q&A 118
Workshop 118
Exercises 120

PART II: BUILDING BLOCKS OF PRACTICAL WEB DESIGN
Lesson 6: Working with Fonts, Text Blocks, Lists, and Tables 121
Working with Special Characters 122
Boldface, Italic, and Special Text Formatting 126
Tweaking the Font 129
Using Web Fonts 133
Aligning Text on a Page 136
The Three Types of HTML Lists 139
Placing Lists Within Lists 142
Creating a Simple Table 147
Controlling Table Sizes 151
Alignment and Spanning Within Tables 154
Page Layout with Tables 157
Using CSS Columns 158
Summary 162
Q&A 164
Workshop 165
Exercises 166
Lesson 7: Using External and Internal Links 167
Using Web Addresses 167
Linking Within a Page Using Anchors 170
Linking Between Your Own Web Content 174
Linking to Non-HTML Files 177
Linking to External Web Content 178
Linking to an Email Address 179
Opening a Link in a New Browser Window 180
Giving Titles to Links 181
Using CSS to Style Hyperlinks 182
Using Links Effectively 186
Summary 187
Q&A 188
Workshop 189
Exercises 190
Lesson 8: Working with Colors, Images, and Multimedia 191
Best Practices for Choosing Colors 192
Understanding Web Colors 194
Using Hexadecimal Values for Colors 196
Using RGB and RGBa Values for Colors 197
Using CSS to Set Background, Text, and Border Colors 199
Choosing Graphics Software 201
The Least You Need to Know About Graphics 202
Preparing Photographic Images 203
Creating Banners and Buttons 210
Optimizing Images by Reducing or Removing Colors 211
Creating Tiled Background Images 212
Placing Images on a Web Page 214
Describing Images with Text 217
Specifying Image Height and Width 218
Aligning Images 219
Turning Images into Links 223
Using Background Images226
Using Image Maps 227
Linking to Multimedia Files 233
Embedding Multimedia Files 237
Additional Tips for Using Multimedia 242
Summary 242
Q&A 245
Workshop 246
Exercises 248

PART III: ADVANCED WEB PAGE DESIGN WITH CSS
Lesson 9: Working with Margins, Padding, Alignment, and Floating 249
Using Margins 249
Padding Elements 257
Keeping Everything Aligned 261
Centering Blocks of Content 262
Understanding the float Property 263
Summary 267
Q&A 267
Workshop 267
Exercises 270
Lesson 10: Understanding the CSS Box Model and Positioning 271
The CSS Box Model 271
Changing the Box Model 275
The Whole Scoop on Positioning 276
Controlling the Way Things Stack Up 281
Managing the Flow of Text 284
Summary 285
Q&A 285
Workshop 286
Exercises 288
Lesson 11: Using CSS to Do More with Lists, Text, and Navigation 289
HTML List Refresher 290
How the CSS Box Model Affects Lists 290
Placing List Item Indicators 294
Creating Image Maps with List Items and CSS 296
How Navigation Lists Differ from Regular Lists 299
Creating Vertical Navigation with CSS 300
Creating Horizontal Navigation with CSS 310
Summary 314
Q&A 314
Workshop 315
Exercises 316
Lesson 12: Creating Layouts Using Modern CSS Techniques 317
Getting Ready to Do Page Layout 318
The Importance of Putting Mobile Devices First 319
Understanding Fixed Layouts 319
Understanding Liquid Layouts 322
Creating a Fixed/Liquid Hybrid Layout 324
Using Modern CSS Layout Techniques 335
Summary 349
Q&A 350
Workshop 350
Exercises 352
Lesson 13: Taking Control of Backgrounds and Borders 353
Reviewing Background and Border Basics 353
Using Multiple Borders and Backgrounds 355
Using Forgotten Background Properties 359
Using Gradients as Backgrounds 365
Rounding the Corners of HTML Elements 371
Using Images as Borders 373
Understanding CSS Outlines 378
Summary 379
Q&A 379
Workshop 379
Exercises 381
Lesson 14: Using CSS Transformations and Transitions 383
Understanding CSS 2D Transformations 383
Transforming Elements in Three Dimensions 392
Working with CSS Transitions 393
Using JavaScript to Trigger Transitions 397
Summary 398
Q&A 399
Workshop 399
Exercises 400
Lesson 15: Animating with CSS and the Canvas 401
Understanding CSS Animation 401
Using the CSS Canvas 410
Choosing Between CSS Animation and Canvas Animation 423
Summary 424
Q&A 424
Workshop 424
Exercises 426

PART IV: RESPONSIVE WEB DESIGN
Lesson 16: Understanding the Importance of Responsive Web Design 427
What Is Responsive Web Design? 427
What Is Progressive Enhancement? 431
Writing HTML for Responsive Web Design 435
Validating HTML, CSS, and JavaScript 438
Summary 439
Q&A 440
Workshop 440
Exercises 442
Lesson 17: Designing for Mobile Devices 443
Designing for Mobile Devices 443
Understanding Mobile First Design 451
Using Responsive Tables and Images 455
Creating Responsive Layouts Without Media Queries 464
Alternatives for Mobile Design Besides RWD 466
Summary 468
Q&A 469
Workshop 469
Exercise 470
Lesson 18: Using Media Queries and Breakpoints 471
What Is a Media Query? 471
Using Media Query Expressions 476
What Is a Breakpoint? 477
How to Define Breakpoints in Your CSS 477
Optimal Breakpoints 483
Summary 484
Q&A 484
Workshop 485
Exercises 486

PART V: GETTING STARTED WITH DYNAMIC SITES
Lesson 19: Understanding Dynamic Websites and HTML5 Applications 487
Understanding the Different Types of Scripting 487
Including JavaScript in HTML 488
Displaying Random Content 491
Understanding the Document Object Model 495
Changing Images Based on User Interaction 498
Thinking Ahead to Developing HTML5 Applications 501
Summary 501
Q&A 502
Workshop 502
Exercises 506
Lesson 20: Getting Started with JavaScript Programming 507
Basic Concepts 507
JavaScript Syntax Rules 514
Using Comments 515
Best Practices for JavaScript 516
Understanding JSON 517
Summary 518
Q&A 518
Workshop 519
Exercises 522
Lesson 21: Working with the Document Object Model (DOM) 523
Understanding the Document Object Model 523
Using window Objects 524
Working with the document Object 525
Accessing Browser History 528
Working with the location Object 530
More About the DOM Structure 531
Working with DOM Nodes 534
Creating Positionable Elements (Layers) 536
Hiding and Showing Objects 541
Modifying Text in a Page 543
Adding Text to a Page 545
Summary 547
Q&A 547
Workshop 548
Exercises 550
Lesson 22: Using JavaScript Variables, Strings, and Arrays 551
Using Variables 552
Understanding Expressions and Operators 555
Data Types in JavaScript 556
Converting Between Data Types 557
Using String Objects 558
Working with Substrings 562
Using Numeric Arrays 564
Using String Arrays 565
Sorting a Numeric Array 567
Using Functions 570
Introducing Objects 575
Using Objects to Simplify Scripting 577
Extending Built-in Objects 582
Using the Math Object 583
Working with Math Methods 585
Working with Dates 587
Summary 590
Q&A 590
Workshop 591
Exercises 594
Lesson 23: Controlling Flow with Conditions and Loops 595
The if Statement 595
Using Shorthand Conditional Expressions 599
Testing Multiple Conditions with if and else 600
Using Multiple Conditions with switch 602
Using for Loops 604
Using while Loops 606
Using do...while Loops 607
Working with Loops 607
Looping Through Object Properties 609
Summary 612
Q&A 612
Workshop 613
Exercises 615
Lesson 24: Responding to Events and Using Windows 617
Understanding Event Handlers 618
Using Mouse Events 623
Using Keyboard Events 627
Using the load and unload Events 630
Using click to Change the Appearance of a

631
Controlling Windows with Objects 638
Moving and Resizing Windows 643
Using Timeouts 645
Displaying Dialog Boxes 648
Summary 650
Q&A 650
Workshop 651
Exercises 654
Lesson 25: JavaScript Best Practices 655
Scripting Best Practices 655
Reading Browser Information 666
Cross-Browser Scripting 669
Supporting Non-JavaScript-Enabled Browsers 671
Creating an Unobtrusive Script 674
Summary 677
Q&A 677
Workshop 677
Exercises 680
Lesson 26: Using Third-Party JavaScript Libraries and Frameworks 681
Using Third-Party JavaScript Libraries 681
Adding JavaScript Effects by Using a Third-Party Library 686
Using JavaScript Frameworks 689
Summary 691
Q&A 691
Workshop 692
Exercises 694

PART VI: ADVANCED WEBSITE FUNCTIONALITY AND MANAGEMENT
Lesson 27: Working with Web-Based Forms 695
How HTML Forms Work 695
Creating a Form 696
Accepting Text Input 702
Naming Each Piece of Form Data 703
Labeling Each Piece of Form Data 703
Grouping Form Elements 705
Exploring Form Input Controls 706
Using HTML5 Form Validation 716
Submitting Form Data 718
Accessing Form Elements with JavaScript 720
Summary 723
Q&A 725
Workshop 725
Exercises 728
Lesson 28: Organizing and Managing a Website 729
When One Page Is Enough 730
Organizing a Simple Site 732
Organizing a Larger Site 735
Optimizing Your Site for Search Engines 738
Writing Maintainable Code 740
Thinking About Version Control 743
Using HTML and CSS Frameworks 745
Summary 746
Q&A 746
Workshop 747
Exercises 750
Index 751