PART I: GETTING STARTED ON THE WEB<br><p style="margin:0px;">Lesson 1: Understanding How the Web Works 1</p> <p style="margin:0px;">A Brief History of HTML and the World Wide Web 2<br>Creating Web Content 2<br>Understanding Web Content Delivery 3<br>Selecting a Web Hosting Provider 6<br>Testing with Multiple Web Browsers and Devices 8<br>Creating a Sample File 9<br>Using FTP to Transfer Files 10<br>Understanding Where to Place Files on the Web Server 14<br>Distributing Content Without a Web Server 17<br>Tips for Testing Web Content 18<br>Summary 19<br>Q&A 20<br>Workshop 20<br>Exercises 22<br>Lesson 2: Creating Web Content 2<br>Getting Prepared 24<br>Getting Started with a Simple Web Page 25<br>HTML Tags Every Web Page Must Have 28<br>Organizing a Page with Paragraphs and Line Breaks 31<br>Organizing Your Content with Headings 33<br>Understanding Semantic Elements 36<br>Using <header> in Multiple Ways 42<br>Understanding the <section> Element 44<br>Using <article> 45<br>Implementing the <nav> Element 45<br>When to Use <aside> 47<br>Using <footer> Effectively 48<br>Summary 49<br>Q&A 50<br>Workshop 51<br>Exercises 53<br>Lesson 3: Understanding Cascading Style Sheets 55<br>How CSS Works 56<br>A Basic Style Sheet 57<br>A CSS Style Primer 63<br>Using Style Classes 68<br>Using Style IDs 70<br>Internal Style Sheets and Inline Styles 71<br>Summary 74<br>Q&A 75<br>Workshop 75<br>Exercises 77<br>Lesson 4: Understanding JavaScript 79<br>Learning Web Scripting Basics 80<br>How JavaScript Fits into a Web Page 81<br>Exploring JavaScript’s Capabilities 84<br>Displaying Time with JavaScript 85<br>Testing the Script 89<br>Summary 93<br>Q&A 93<br>Workshop 94<br>Exercises 96<br>Lesson 5: Validating and Debugging Your Code 97<br>Validating Your Web Content 97<br>Debugging HTML and CSS Using Developer Tools 99<br>Debugging JavaScript Using Developer Tools 112<br>Summary 118<br>Q&A 118<br>Workshop 118<br>Exercises 120<br><br>PART II: BUILDING BLOCKS OF PRACTICAL WEB DESIGN<br>Lesson 6: Working with Fonts, Text Blocks, Lists, and Tables 121<br>Working with Special Characters 122<br>Boldface, Italic, and Special Text Formatting 126<br>Tweaking the Font 129<br>Using Web Fonts 133<br>Aligning Text on a Page 136<br>The Three Types of HTML Lists 139<br>Placing Lists Within Lists 142<br>Creating a Simple Table 147<br>Controlling Table Sizes 151<br>Alignment and Spanning Within Tables 154<br>Page Layout with Tables 157<br>Using CSS Columns 158<br>Summary 162<br>Q&A 164<br>Workshop 165<br>Exercises 166<br>Lesson 7: Using External and Internal Links 167<br>Using Web Addresses 167<br>Linking Within a Page Using Anchors 170<br>Linking Between Your Own Web Content 174<br>Linking to Non-HTML Files 177<br>Linking to External Web Content 178<br>Linking to an Email Address 179<br>Opening a Link in a New Browser Window 180<br>Giving Titles to Links 181<br>Using CSS to Style Hyperlinks 182<br>Using Links Effectively 186<br>Summary 187<br>Q&A 188<br>Workshop 189<br>Exercises 190<br>Lesson 8: Working with Colors, Images, and Multimedia 191<br>Best Practices for Choosing Colors 192<br>Understanding Web Colors 194<br>Using Hexadecimal Values for Colors 196<br>Using RGB and RGBa Values for Colors 197<br>Using CSS to Set Background, Text, and Border Colors 199<br>Choosing Graphics Software 201<br>The Least You Need to Know About Graphics 202<br>Preparing Photographic Images 203<br>Creating Banners and Buttons 210<br>Optimizing Images by Reducing or Removing Colors 211<br>Creating Tiled Background Images 212<br>Placing Images on a Web Page 214<br>Describing Images with Text 217<br>Specifying Image Height and Width 218<br>Aligning Images 219<br>Turning Images into Links 223<br>Using Background Images226<br>Using Image Maps 227<br>Linking to Multimedia Files 233<br>Embedding Multimedia Files 237<br>Additional Tips for Using Multimedia 242<br>Summary 242<br>Q&A 245<br>Workshop 246<br>Exercises 248<br><br>PART III: ADVANCED WEB PAGE DESIGN WITH CSS<br>Lesson 9: Working with Margins, Padding, Alignment, and Floating 249<br>Using Margins 249<br>Padding Elements 257<br>Keeping Everything Aligned 261<br>Centering Blocks of Content 262<br>Understanding the float Property 263<br>Summary 267<br>Q&A 267<br>Workshop 267<br>Exercises 270<br>Lesson 10: Understanding the CSS Box Model and Positioning 271<br>The CSS Box Model 271<br>Changing the Box Model 275<br>The Whole Scoop on Positioning 276<br>Controlling the Way Things Stack Up 281<br>Managing the Flow of Text 284<br>Summary 285<br>Q&A 285<br>Workshop 286<br>Exercises 288<br>Lesson 11: Using CSS to Do More with Lists, Text, and Navigation 289<br>HTML List Refresher 290<br>How the CSS Box Model Affects Lists 290<br>Placing List Item Indicators 294<br>Creating Image Maps with List Items and CSS 296<br>How Navigation Lists Differ from Regular Lists 299<br>Creating Vertical Navigation with CSS 300<br>Creating Horizontal Navigation with CSS 310<br>Summary 314<br>Q&A 314<br>Workshop 315<br>Exercises 316<br>Lesson 12: Creating Layouts Using Modern CSS Techniques 317<br>Getting Ready to Do Page Layout 318<br>The Importance of Putting Mobile Devices First 319<br>Understanding Fixed Layouts 319<br>Understanding Liquid Layouts 322<br>Creating a Fixed/Liquid Hybrid Layout 324<br>Using Modern CSS Layout Techniques 335<br>Summary 349<br>Q&A 350<br>Workshop 350<br>Exercises 352<br>Lesson 13: Taking Control of Backgrounds and Borders 353<br>Reviewing Background and Border Basics 353<br>Using Multiple Borders and Backgrounds 355<br>Using Forgotten Background Properties 359<br>Using Gradients as Backgrounds 365<br>Rounding the Corners of HTML Elements 371<br>Using Images as Borders 373<br>Understanding CSS Outlines 378<br>Summary 379<br>Q&A 379<br>Workshop 379<br>Exercises 381<br>Lesson 14: Using CSS Transformations and Transitions 383<br>Understanding CSS 2D Transformations 383<br>Transforming Elements in Three Dimensions 392<br>Working with CSS Transitions 393<br>Using JavaScript to Trigger Transitions 397<br>Summary 398<br>Q&A 399<br>Workshop 399<br>Exercises 400<br>Lesson 15: Animating with CSS and the Canvas 401<br>Understanding CSS Animation 401<br>Using the CSS Canvas 410<br>Choosing Between CSS Animation and Canvas Animation 423<br>Summary 424<br>Q&A 424<br>Workshop 424<br>Exercises 426<br><br>PART IV: RESPONSIVE WEB DESIGN<br>Lesson 16: Understanding the Importance of Responsive Web Design 427<br>What Is Responsive Web Design? 427<br>What Is Progressive Enhancement? 431<br>Writing HTML for Responsive Web Design 435<br>Validating HTML, CSS, and JavaScript 438<br>Summary 439<br>Q&A 440<br>Workshop 440<br>Exercises 442<br>Lesson 17: Designing for Mobile Devices 443<br>Designing for Mobile Devices 443<br>Understanding Mobile First Design 451<br>Using Responsive Tables and Images 455<br>Creating Responsive Layouts Without Media Queries 464<br>Alternatives for Mobile Design Besides RWD 466<br>Summary 468<br>Q&A 469<br>Workshop 469<br>Exercise 470<br>Lesson 18: Using Media Queries and Breakpoints 471<br>What Is a Media Query? 471<br>Using Media Query Expressions 476<br>What Is a Breakpoint? 477<br>How to Define Breakpoints in Your CSS 477<br>Optimal Breakpoints 483<br>Summary 484<br>Q&A 484<br>Workshop 485<br>Exercises 486<br><br>PART V: GETTING STARTED WITH DYNAMIC SITES<br>Lesson 19: Understanding Dynamic Websites and HTML5 Applications 487<br>Understanding the Different Types of Scripting 487<br>Including JavaScript in HTML 488<br>Displaying Random Content 491<br>Understanding the Document Object Model 495<br>Changing Images Based on User Interaction 498<br>Thinking Ahead to Developing HTML5 Applications 501<br>Summary 501<br>Q&A 502<br>Workshop 502<br>Exercises 506<br>Lesson 20: Getting Started with JavaScript Programming 507<br>Basic Concepts 507<br>JavaScript Syntax Rules 514<br>Using Comments 515<br>Best Practices for JavaScript 516<br>Understanding JSON 517<br>Summary 518<br>Q&A 518<br>Workshop 519<br>Exercises 522<br>Lesson 21: Working with the Document Object Model (DOM) 523<br>Understanding the Document Object Model 523<br>Using window Objects 524<br>Working with the document Object 525<br>Accessing Browser History 528<br>Working with the location Object 530<br>More About the DOM Structure 531<br>Working with DOM Nodes 534<br>Creating Positionable Elements (Layers) 536<br>Hiding and Showing Objects 541<br>Modifying Text in a Page 543<br>Adding Text to a Page 545<br>Summary 547<br>Q&A 547<br>Workshop 548<br>Exercises 550<br>Lesson 22: Using JavaScript Variables, Strings, and Arrays 551<br>Using Variables 552<br>Understanding Expressions and Operators 555<br>Data Types in JavaScript 556<br>Converting Between Data Types 557<br>Using String Objects 558<br>Working with Substrings 562<br>Using Numeric Arrays 564<br>Using String Arrays 565<br>Sorting a Numeric Array 567<br>Using Functions 570<br>Introducing Objects 575<br>Using Objects to Simplify Scripting 577<br>Extending Built-in Objects 582<br>Using the Math Object 583<br>Working with Math Methods 585<br>Working with Dates 587<br>Summary 590<br>Q&A 590<br>Workshop 591<br>Exercises 594<br>Lesson 23: Controlling Flow with Conditions and Loops 595<br>The if Statement 595<br>Using Shorthand Conditional Expressions 599<br>Testing Multiple Conditions with if and else 600<br>Using Multiple Conditions with switch 602<br>Using for Loops 604<br>Using while Loops 606<br>Using do...while Loops 607<br>Working with Loops 607<br>Looping Through Object Properties 609<br>Summary 612<br>Q&A 612<br>Workshop 613<br>Exercises 615<br>Lesson 24: Responding to Events and Using Windows 617<br>Understanding Event Handlers 618<br>Using Mouse Events 623<br>Using Keyboard Events 627<br>Using the load and unload Events 630<br>Using click to Change the Appearance of a <div> 631<br>Controlling Windows with Objects 638<br>Moving and Resizing Windows 643<br>Using Timeouts 645<br>Displaying Dialog Boxes 648<br>Summary 650<br>Q&A 650<br>Workshop 651<br>Exercises 654<br>Lesson 25: JavaScript Best Practices 655<br>Scripting Best Practices 655<br>Reading Browser Information 666<br>Cross-Browser Scripting 669<br>Supporting Non-JavaScript-Enabled Browsers 671<br>Creating an Unobtrusive Script 674<br>Summary 677<br>Q&A 677<br>Workshop 677<br>Exercises 680<br>Lesson 26: Using Third-Party JavaScript Libraries and Frameworks 681<br>Using Third-Party JavaScript Libraries 681<br>Adding JavaScript Effects by Using a Third-Party Library 686<br>Using JavaScript Frameworks 689<br>Summary 691<br>Q&A 691<br>Workshop 692<br>Exercises 694<br><br>PART VI: ADVANCED WEBSITE FUNCTIONALITY AND MANAGEMENT<br>Lesson 27: Working with Web-Based Forms 695<br>How HTML Forms Work 695<br>Creating a Form 696<br>Accepting Text Input 702<br>Naming Each Piece of Form Data 703<br>Labeling Each Piece of Form Data 703<br>Grouping Form Elements 705<br>Exploring Form Input Controls 706<br>Using HTML5 Form Validation 716<br>Submitting Form Data 718<br>Accessing Form Elements with JavaScript 720<br>Summary 723<br>Q&A 725<br>Workshop 725<br>Exercises 728<br>Lesson 28: Organizing and Managing a Website 729<br>When One Page Is Enough 730<br>Organizing a Simple Site 732<br>Organizing a Larger Site 735<br>Optimizing Your Site for Search Engines 738<br>Writing Maintainable Code 740<br>Thinking About Version Control 743<br>Using HTML and CSS Frameworks 745<br>Summary 746<br>Q&A 746<br>Workshop 747<br>Exercises 750<br>Index 751<br><br></p>