Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

by Jennifer Robbins

Overview

Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multicolumn pages that adapt for mobile devices.

Each chapter provides exercises to help you learn various techniques and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels. It is simple and clear enough for beginners, yet thorough enough to be a useful reference for experienced developers keeping their skills up to date.

• Build HTML pages with text, links, images, tables, and forms
• Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects
• Learn how JavaScript works and why the language is so important in web design
• Create and optimize web images so they’ll download as quickly as possible
• NEW! Use CSS Flexbox and Grid for sophisticated and flexible page layout
• NEW! Learn the ins and outs of Responsive Web Design to make web pages look great on all devices
• NEW! Become familiar with the command line, Git, and other tools in the modern web developer’s toolkit
• NEW! Get to know the super-powers of SVG graphics

Product Details

ISBN-13:	9781491960202
Publisher:	O'Reilly Media, Incorporated
Publication date:	05/21/2018
Edition description:	5
Pages:	808
Sales rank:	805,049
Product dimensions:	8.00(w) x 9.75(h) x (d)

About the Author

Jennifer Niederst Robbins was one of the first designers for the Web. As the designer of O'Reilly's Global Network Navigator (GNN), the first commercial web site, she has been designing for the Web since 1993. She is the author of the bestselling "Web Design in a Nutshell" (O'Reilly), and has taught web design at the Massachusetts College of Art in Boston and Johnson and Wales Universityin Providence. She has spoken at major design and Internet events including SXSW Interactive, Seybold Seminars, the GRAFILL conference (Geilo, Norway), and one of the first W3C International Expos.

Table of Contents

Preface; How This Book Is Organized; Acknowledgments; About the Author; Using Code Examples; We’d Like to Hear from You; Getting Started; Chapter 1: Where Do I Start?; 1.1 Where Do I Start?; 1.2 What Does a Web Designer Do?; 1.3 What Languages Do I Need to Learn?; 1.4 What Do I Need to Buy?; 1.5 What You’ve Learned; 1.6 Test Yourself; Chapter 2: How the Web Works; 2.1 The Internet Versus the Web; 2.2 Serving Up Your Information; 2.3 A Word About Browsers; 2.4 Web Page Addresses (URLs); 2.5 The Anatomy of a Web Page; 2.6 Putting It All Together; 2.7 Test Yourself; Chapter 3: Some Big Concepts You Need to Know; 3.1 A Dizzying Multitude of Devices; 3.2 Sticking with the Standards; 3.3 Progressive Enhancement; 3.4 Responsive Web Design; 3.5 One Web for All (Accessibility); 3.6 The Need for Speed (Site Performance); 3.7 Test Yourself; HTML Markup for Structure; Chapter 4: Creating a Simple Page: (HTML Overview); 4.1 A Web Page, Step by Step; 4.2 Before We Begin, Launch a Text Editor; 4.3 Step 1: Start with Content; 4.4 Step 2: Give the Document Structure; 4.5 Step 3: Identify Text Elements; 4.6 Step 4: Add an Image; 4.7 Step 5: Change the Look with a Style Sheet; 4.8 When Good Pages Go Bad; 4.9 Validating Your Documents; 4.10 Test Yourself; 4.11 Element Review: Document Structure; Chapter 5: Marking Up Text; 5.1 Paragraphs; 5.2 Headings; 5.3 Lists; 5.4 More Content Elements; 5.5 Organizing Page Content; 5.6 The Inline Element Roundup; 5.7 Generic Elements (div and span); 5.8 Some Special Characters; 5.9 Putting It All Together; 5.10 Test Yourself; 5.11 Element Review: Text; Chapter 6: Adding Links; 6.1 The href Attribute; 6.2 Linking to Pages on the Web; 6.3 Linking Within Your Own Site; 6.4 Targeting a New Browser Window; 6.5 Mail Links; 6.6 Telephone Links; 6.7 Test Yourself; 6.8 Element Review: Links; Chapter 7: Adding Images; 7.1 First, a Word on Image Formats; 7.2 The img Element; 7.3 A Window in a Window; 7.4 Test Yourself; 7.5 Element Review: Images; Chapter 8: Table Markup; 8.1 How Tables Are Used; 8.2 Minimal Table Structure; 8.3 Table Headers; 8.4 Spanning Cells; 8.5 Table Accessibility; 8.6 Wrapping Up Tables; 8.7 Test Yourself; 8.8 Element Review: Tables; Chapter 9: Forms; 9.1 How Forms Work; 9.2 The form Element; 9.3 Variables and Content; 9.4 The Great Form Control Roundup; 9.5 Form Accessibility Features; 9.6 Form Layout and Design; 9.7 Test Yourself; 9.8 Element Review: Forms; Chapter 10: What’s Up, HTML5?; 10.1 A Funny Thing Happened on the Way to XHTML 2; 10.2 In the Markup Department; 10.3 Meet the APIs; 10.4 Video and Audio; 10.5 Canvas; 10.6 Final Word; 10.7 Test Yourself; CSS for Presentation; Chapter 11: Cascading Style Sheets Orientation; 11.1 The Benefits of CSS; 11.2 How Style Sheets Work; 11.3 The Big Concepts; 11.4 Moving Forward with CSS; 11.5 Test Yourself; Chapter 12: Formatting Text: (Plus More selectors); 12.1 The Font Properties; 12.2 Changing Text Color; 12.3 A Few More Selector Types; 12.4 Text Line Adjustments; 12.5 Underlines and Other “Decorations”; 12.6 Changing Capitalization; 12.7 Spaced Out; 12.8 Text Shadow; 12.9 Changing List Bullets and Numbers; 12.10 Test Yourself; 12.11 CSS Review: Font and Text Properties; Chapter 13: Colors and Backgrounds: (Plus Even More Selectors and External Style Sheets); 13.1 Specifying Color Values; 13.2 Foreground Color; 13.3 Background Color; 13.4 Playing with Opacity; 13.5 Introducing...Pseudo-Class Selectors; 13.6 Pseudo-Element Selectors; 13.7 Attribute Selectors; 13.8 Background Images; 13.9 The Shorthand background Property; 13.10 Like a Rainbow (Gradients); 13.11 Finally, External Style Sheets; 13.12 Test Yourself; 13.13 CSS Review: Color and Background Properties; Chapter 14: Thinking Inside the Box: (Padding, Borders, and Margins); 14.1 The Element Box; 14.2 Specifying Box Dimensions; 14.3 Padding; 14.4 Borders; 14.5 Margins; 14.6 Assigning Display Roles; 14.7 Adding Drop Shadows to Boxes; 14.8 Test Yourself; 14.9 CSS Review: Basic Box Properties; Chapter 15: Floating and Positioning; 15.1 Normal Flow; 15.2 Floating; 15.3 Positioning Basics; 15.4 Relative Positioning; 15.5 Absolute Positioning; 15.6 Fixed Positioning; 15.7 Test Yourself; 15.8 CSS Review: Floating and Positioning Properties; Chapter 16: Page Layout with CSS; 16.1 Page Layout Strategies; 16.2 Page Layout Techniques; 16.3 Multicolumn Layouts Using Floats; 16.4 Positioned Layout; 16.5 Top-to-Bottom Column Backgrounds; 16.6 Test Yourself; Chapter 17: Transitions, Transforms, and Animation; 17.1 Ease-y Does It (CSS Transitions); 17.2 CSS Transforms; 17.3 Keyframe Animation; 17.4 Test Yourself; 17.5 CSS Review: Transitions, Transforms, and Animation; Chapter 18: CSS Techniques; 18.1 A Clean Slate (CSS Reset); 18.2 Image Replacement Techniques; 18.3 CSS Sprites; 18.4 Styling Forms; 18.5 Styling Tables; 18.6 Basic Responsive Web Design; 18.7 Wrapping Up Style Sheets; 18.8 Test Yourself; 18.9 CSS Review: Table Properties; JavaScript for Behaviors; Chapter 19: Introduction to JavaScript; 19.1 What Is JavaScript?; 19.2 Adding JavaScript to a Page; 19.3 The Anatomy of a Script; 19.4 The Browser Object; 19.5 Events; 19.6 Putting It All Together; 19.7 Test Yourself; Chapter 20: Using JavaScript; 20.1 Meet the DOM; 20.2 Polyfills; 20.3 JavaScript Libraries; 20.4 Big Finish; 20.5 Test Yourself; Creating Web Graphics; Chapter 21: Web Graphics Basics; 21.1 Image Sources; 21.2 Meet the Formats; 21.3 Image Size and Resolution; 21.4 Working with Transparency; 21.5 Introduction to SVG; 21.6 Summing Up Images; 21.7 Test Yourself; Chapter 22: Lean and Mean Web Graphics; 22.1 General Image Optimization Strategies; 22.2 Optimizing GIFs; 22.3 Optimizing JPEGs; 22.4 Optimizing PNGs; 22.5 Optimize to File Size; 22.6 Optimization in Review; 22.7 Test Yourself; Answers; Chapter 1: Where Do I Start?; Chapter 2: How the Web Works; Chapter 3: Some Big Concepts You Need to Know; Chapter 4: Creating a Simple Page (HTML Overview); Chapter 5: Marking Up Text; Chapter 6: Adding Links; Chapter 7: Adding Images; Chapter 8: Basic Table Markup; Chapter 9: Forms; Chapter 10: What’s Up, HTML5?; Chapter 11: CSS Orientation; Chapter 12: Formatting Text; Chapter 13: Colors and Backgrounds; Chapter 14: Thinking Inside the Box; Chapter 15: Floating and Positioning; Chapter 16: Page Layout with CSS; Chapter 17: Transitions, Transforms, and Animation; Chapter 18: CSS Techniques; Chapter 19: Introduction to JavaScript; Chapter 20: Using JavaScript; Chapter 21: Web Graphics Basics; Chapter 22: Lean and Mean Web Graphics; CSS3 Selectors; Colophon;