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.
Part I. GETTING STARTED
1. Teams and Tools (Working in Web Design)
- Getting Started in Web Design
- Roles and Responsibilities
- Tools of the Trade
- What You’ve Learned
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
3. Some Big Concepts You Need to Know
- A Multitude of Devices
- Sticking with the Standards
- Progressive Enhancement
- Responsive Web Design
- Accessibility
- The Need for Speed (Site Performance)
Part II. HTML FOR STRUCTURE
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 Elements
- Step 4: Add an Image
- Step 5: Change the Look with a Style Sheet
- When Good Pages Go Bad
- Validating Your Documents
- HTML Resources
5. Marking Up Text
- Paragraphs
- Headings
- Thematic Breaks (Horizontal Rule)
- Lists
- More Content Elements
- Organizing Page Content
- The Text-Level Element Roundup
- Generic Elements (div and span)
- Improving Accessibility with ARIA
- Character Escapes
- Putting It All Together
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
7. Adding Images
- First, a Word on Image Formats
- The img Element
- Adding SVG Images
- The picture Element for Alternative Image Formats
- A Quick Introduction to Responsive Images
- Whew! We’re Finished
8. Table Markup
- How to Use Tables
- Minimal Table Structure
- Table Headers
- Spanning Cells
- Table Accessibility
- Row and Column Groups
- Wrapping Up Tables
9. Forms
- How Forms Work
- The form Element
- Variables and Content
- The Great Form Control Roundup
- Form Accessibility Features
- Form Layout and Design
10. Embedded Media
- Window-In-A-Window (iframe)
- Multipurpose Embedder (object)
- Video and Audio
- Canvas
Part III. CSS FOR PRESENTATION
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
12. Formatting Text
- Basic Font Properties
- Descendant, ID, and Class Selectors
- Specificity 101
- Text Line Adjustments
- Underlines and Other “Decorations”
- Changing Capitalization
- Spaced Out
- Text Shadow
- Changing List Bullets and Numbers
13. Colors and Backgrounds
- Color Spaces
- Specifying Color Values
- Foreground Color
- Background Color
- Playing with Opacity
- Background Images
- Like a Rainbow (Gradients)
- Wrapping It Up
14. Selectors (Plus External Style Sheets)
- Selectors You’ve Learned So Far
- Attribute Selectors
- Pseudo-Class Selectors
- Pseudo-Element Selectors
- External Style Sheets
- Wrapping It Up
15. Thinking Inside the Box (The CSS Box Model)
- The Element Box
- Specifying Box Dimensions
- Padding
- Borders
- Margins
- Assigning Display Types
- Box Drop Shadows
16. Floating and Positioning
- Normal Flow
- Floating
- Fancy Text Wrap with CSS Shapes
- Positioning Basics
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Stacking Order
17. Getting In Line with Flexbox
- Setting Up a Flex Container
- Controlling the "Flow" Within the Container
- Controlling the Alignment of Flex Items
- Flexbox Alignment Techniques
- Determining How Items "Flex" in the Container
- Changing the Order of Flex Items
- Flexbox for Page Layout
- More Flexbox Resources
18. Grid Layout
- Grid Layout Overview
- Implicit Grids and Default Grid Behavior
- Explicit Grids
- Placing Items on a Grid
- The grid Shortcut Property
- Grid Alignment and Spacing
- Responsive Grids
- Additonal Resources
19. Responsive Web Design
- Why RWD?
- The Responsive Recipe
- Setting the Viewport
- Fluid Layouts
- Flexible Images
- Query Magic
- Designing Responsively
- A Few Words About Testing
- More RWD Resources
20. Transitions, Transforms, and Animation
- Ease-y Does It (CSS Transitions)
- CSS Transforms
- Keyframe Animation
- Wrapping Up
21. More CSS Techniques
- Styling Tips for Forms
- A Clean Slate (Reset and Normalize)
- Supporting Older Browsers (CSS Feature Detection)
- CSS Custom Properties
- A Quick Introduction to CSS Nesting
- An Even Quicker Introduction to CSS Layers
- CSS Frameworks
- Wrapping Up Style Sheets
Part IV. JAVASCRIPT FOR BEHAVIOR [ALL NEW!]
22. Getting Started with JavaScript: Statements and Variables
- Meet a Script
- Statements
- Numbers and Math
- Strings
- Variables
- Embedded Versus External JavaScript
- The JavaScript Console
- Wrapping Up
23. Functions, Conditionals, and Loops
- Functions
- Functions Can Receive and Return Information
- Conditional Statements
- Arrays
- Loops Make Repetitive Tasks Easier
- Wrapping Up
24. Working with the DOM and Events
- UI as a Progressive Enhancement
- Generating New Markup
- User Interactivity
- Refactoring for Accessibility
- Wrapping Up
25. Next-Level JavaScript
- JavaScript Libraries
- Web Components
- JavaScript Frameworks
- JavaScript Beyond the Browser
- Progressive Web Apps
- Wrapping Up
Part V. WEB IMAGES
26. Web Image Basics
- Image Sources
- Meet the Image Formats
- Resolution and Reference Pixels
- Working with Transparency
- That's a Wrap on Image Basics!
27. Image Production Techniques
- Image Production Strategy
- Optimizing Images
- Responsive Image Sets
- Tools, Tips, and Techniques
- Automate It!
- Wrapping Up Image Production
25. SVG
- Drawing with XML
- Features of SVG as XML
- SVG Design Tools
- SVG Production Tips
- Scaling SVGs
- Further SVG Exploration
- Test Yourself
- And...We’re Done!