Embedded Files
Fifth Edition
by Jennifer Niederst Robbins
The best-selling Learning Web Design is your first stop for learning how to make web pages. You’ll begin from square one, learning how the web and web pages work, then steadily build from there. Along the way, there are hands-on exercises and short quizzes to make sure you understand key concepts. By the end of the book, you’ll have the skills to create a simple multi-column site that works on all screen sizes.
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 IN THIS EDITION:
NEW IN THIS EDITION:
CSS Flexbox and Grid Layout for sophisticated and flexible page layout
Responsive Web Design to make web pages work great on all screen sizes
An introduction to the command line, Git, and other modern web developer tools
A new chapter on SVG and how to use it in responsive layouts
O’Reilly Media (2018)
Paperback, 808 pages
ISBN: 978-1-491-96020-2
Published: May 2018
Learning Web Design by Jennifer Robbins resources - NEW !!
Learning Web Design by Jennifer Robbins resources - NEW !!
The class text is now available in PDF format at this location.
REMINDER: When doing the Exercises in each Chapter, you must read the section of the Chapter just before each Exercise, as it contains the necessary instruction needed to complete the exercise.
REMINDER: When doing the Exercises in each Chapter, you must read the section of the Chapter just before each Exercise, as it contains the necessary instruction needed to complete the exercise.
TABLE OF CONTENTS
TABLE OF CONTENTS
Learning Web Design is a complete introductory-level course in web design and production. It is divided into six parts: basic background information about the web and web design, HTML, CSS, JavaScript, web image production, and appendices.
For a nice introduction to the book, read the “Foreword” by Jen Simmons
PART I. GETTING STARTED
PART I. GETTING STARTED
1. Getting Started in Web Design
1. Getting Started in Web Design
Where Do I Start?
It Takes a Village (Website Creation Roles)
Gearing Up for Web Design
What You’ve Learned
Test Yourself
2. How the Web Works
2. How the Web Works
The Internet Versus the Web
Serving Up Your Information
A Word About Browsers
Web Page Addresses (URLs)
The Anatomy of a Web Page
Putting It All Together
Test Yourself
3. Some Big Concepts You Need to Know
3. Some Big Concepts You Need to Know
A Multitude of Devices
Sticking with the Standards
Progressive Enhancement
Responsive Web Design
One Web for All (Accessibility)
The Need for Speed (Site Performance)
Test Yourself
PART II. HTML FOR STRUCTURE
PART II. HTML FOR STRUCTURE
4. Creating a Simple Page
4. Creating a Simple Page
A Web Page, Step-By-Step
Launch a Text Editor
Step 1: Start with Content
Step 2: Give the HTML Document Structure
Step 3: Identify Text Elements
Step 4: Add an Image
Step 5: Change the Look with a Style Sheet
When Good Pages Go Bad
Validating Your Documents
Test Yourself
Element Review: HTML Document Setup
5. Marking Up Text
5. Marking Up Text
Paragraphs
Headings
Thematic Breaks (Horizontal Rule)
Lists
More Content Elements
Organizing Page Content
The Inline Element Roundup
Generic Elements (div and span)
Improving Accessibility with ARIA
Character Escapes
Putting It All Together
Test Yourself
Element Review: Text Elements
6. Adding Links
6. Adding Links
The href Attribute
Linking to Pages on the Web
Linking Within Your Own Site
Targeting a New Browser Window
Mail Links
Telephone Links
Test Yourself
Element Review: Links
7. Adding Images
7. Adding Images
First, a Word on Image Formats
The img Element
Adding SVG Images
Responsive Image Markup
Whew! We’re Finished
Test Yourself
Element Review: Images
8. Table Markup
8. Table Markup
How to Use Tables
Minimal Table Structure
Table Headers
Spanning Cells
Table Accessibility
Row and Column Groups
Wrapping Up Tables
Test Yourself
Element Review: Tables
9. Forms
9. Forms
How Forms Work
The form Element
Variables and Content
The Great Form Control Roundup
Form Accessibility Features
Form Layout and Design
Test Yourself
Element Review: Forms
10. Embedded Media
10. Embedded Media
Window-In-A-Window (iframe)
Multipurpose Embedder (object)
Video and Audio
Canvas
Test Yourself
Element Review: Embedded Media
PART III. CSS FOR PRESENTATION
PART III. CSS FOR PRESENTATION
11. Introducing Cascading Style Sheets
11. Introducing Cascading Style Sheets
The Benefits of CSS
How Style Sheets Work
The Big Concepts
CSS Units of Measurement
Developer Tools Right in Your Browser
Moving Forward with CSS
Test Yourself
12. Formatting Text
12. Formatting Text
Basic Font Properties
Advanced Typography with CSS3
Changing Text Color
A Few More Selector Types
Text Line Adjustments
Underlines and Other “Decorations”
Changing Capitalization
Spaced Out
Text Shadow
Changing List Bullets and Numbers
Test Yourself
CSS Review: Font and Text Properties
13. Colors and Backgrounds
13. Colors and Backgrounds
Specifying Color Values
Foreground Color
Background Color
Clipping the Background
Playing with Opacity
Pseudo-Class Selectors
Pseudo-Element Selectors
Attribute Selectors
Background Images
The Shorthand background Property
Like a Rainbow (Gradients)
Finally, External Style Sheets
Wrapping It Up
Test Yourself
CSS Review: Color and Background Properties
14. Thinking Inside the Box
14. Thinking Inside the Box
The Element Box
Specifying Box Dimensions
Padding
Borders
Margins
Assigning Display Types
Box Drop Shadows
Test Yourself
CSS Review: Box Properties
15. Floating and Positioning
15. Floating and Positioning
Normal Flow
Floating
Fancy Text Wrap with CSS Shapes
Positioning Basics
Relative Positioning
Absolute Positioning
Fixed Positioning
Test Yourself
CSS Review: Floating and Positioning Properties
16. CSS Layout with Flexbox and Grid
16. CSS Layout with Flexbox and Grid
Flexible Boxes with CSS Flexbox
CSS Grid Layout
Test Yourself
CSS Review: Layout Properties
17. Responsive Web Design
17. Responsive Web Design
Why RWD?
The Responsive Recipe
Choosing Breakpoints
Designing Responsively
A Few Words About Testing
More RWD Resources
Test Yourself
18. Transitions, Transforms, and Animation
18. Transitions, Transforms, and Animation
Ease-y Does It (CSS Transitions)
CSS Transforms
Keyframe Animation
Wrapping Up
Test Yourself
CSS Review: Transitions, Transforms, and Animation
19. More CSS Techniques
19. More CSS Techniques
Styling Forms
Styling Tables
A Clean Slate (Reset and Normalize.css)
Image Replacement Techniques
CSS Sprites
CSS Feature Detection
Wrapping Up Style Sheets
Test Yourself
CSS Review: Table Properties
20. Modern Web Development Tools
20. Modern Web Development Tools
Getting Cozy with the Command Line
CSS Power Tools (Processors)
Build Tools (Grunt and Gulp)
Version Control with Git and GitHub
Conclusion
Test Yourself
PART IV. JAVASCRIPT FOR BEHAVIOR
PART IV. JAVASCRIPT FOR BEHAVIOR
21. Introduction to JavaScript
21. Introduction to JavaScript
What Is JavaScript?
Adding JavaScript to a Page
The Anatomy of a Script
The Browser Object
Events
Putting It All Together
Learning More About JavaScript
Test Yourself
22. Using JavaScript
22. Using JavaScript
Meet the DOM
Polyfills
JavaScript Libraries
Big Finish
Test Yourself
PART V. WEB IMAGES
PART V. WEB IMAGES
23. Web Image Basics
23. Web Image Basics
Image Sources
Meet the Formats
Image Size and Resolution
Image Asset Strategy
Favicons
Summing Up Images
Test Yourself
24. Image Asset Production
24. Image Asset Production
Saving Images in Web Formats
Working with Transparency
Responsive Image Production Tips
Image Optimization
Test Yourself
25. SVG
25. SVG
Drawing with XML
Features of SVG as XML
SVG Tools
SVG Production Tips
Responsive SVGs
Further SVG Exploration
Test Yourself
And...We’re Done!
PART VI. APPENDICES
PART VI. APPENDICES
A. Answers
B. HTML5 Global Attributes
C. CSS Selectors, Levels 3 and 4
D. From HTML+ to HTML5
Report abuse