Learning Web DesignMENU

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)

  1. Getting Started in Web Design
  2. Roles and Responsibilities
  3. Tools of the Trade
  4. What You’ve Learned

2. How the Web Works

  1. The Internet Versus the Web
  2. Serving Up Your Information
  3. A Word About Browsers
  4. Web Page Addresses (URLs)
  5. The Anatomy of a Web Page
  6. Putting It All Together

3. Some Big Concepts You Need to Know

  1. A Multitude of Devices
  2. Sticking with the Standards
  3. Progressive Enhancement
  4. Responsive Web Design
  5. Accessibility
  6. The Need for Speed (Site Performance)

Part II. HTML FOR STRUCTURE

4. Creating a Simple Page

  1. A Web Page, Step-By-Step
  2. Launch a Text Editor
  3. Step 1: Start with Content
  4. Step 2: Give the HTML Document Structure
  5. Step 3: Identify Elements
  6. Step 4: Add an Image
  7. Step 5: Change the Look with a Style Sheet
  8. When Good Pages Go Bad
  9. Validating Your Documents
  10. HTML Resources

5. Marking Up Text

  1. Paragraphs
  2. Headings
  3. Thematic Breaks (Horizontal Rule)
  4. Lists
  5. More Content Elements
  6. Organizing Page Content
  7. The Text-Level Element Roundup
  8. Generic Elements (div and span)
  9. Improving Accessibility with ARIA
  10. Character Escapes
  11. Putting It All Together

6. Adding Links

  1. The href Attribute
  2. Linking to Pages on the Web
  3. Linking Within Your Own Site
  4. Targeting a New Browser Window
  5. Mail Links
  6. Telephone Links

7. Adding Images

  1. First, a Word on Image Formats
  2. The img Element
  3. Adding SVG Images
  4. The picture Element for Alternative Image Formats
  5. A Quick Introduction to Responsive Images
  6. Whew! We’re Finished

8. Table Markup

  1. How to Use Tables
  2. Minimal Table Structure
  3. Table Headers
  4. Spanning Cells
  5. Table Accessibility
  6. Row and Column Groups
  7. Wrapping Up Tables

9. Forms

  1. How Forms Work
  2. The form Element
  3. Variables and Content
  4. The Great Form Control Roundup
  5. Form Accessibility Features
  6. Form Layout and Design

10. Embedded Media

  1. Window-In-A-Window (iframe)
  2. Multipurpose Embedder (object)
  3. Video and Audio
  4. Canvas

Part III. CSS FOR PRESENTATION

11. Introducing Cascading Style Sheets

  1. The Benefits of CSS
  2. How Style Sheets Work
  3. The Big Concepts
  4. CSS Units of Measurement
  5. Developer Tools Right in Your Browser
  6. Moving Forward with CSS

12. Formatting Text

  1. Basic Font Properties
  2. Descendant, ID, and Class Selectors
  3. Specificity 101
  4. Text Line Adjustments
  5. Underlines and Other “Decorations”
  6. Changing Capitalization
  7. Spaced Out
  8. Text Shadow
  9. Changing List Bullets and Numbers

13. Colors and Backgrounds

  1. Color Spaces
  2. Specifying Color Values
  3. Foreground Color
  4. Background Color
  5. Playing with Opacity
  6. Background Images
  7. Like a Rainbow (Gradients)
  8. Wrapping It Up

14. Selectors (Plus External Style Sheets)

  1. Selectors You’ve Learned So Far
  2. Attribute Selectors
  3. Pseudo-Class Selectors
  4. Pseudo-Element Selectors
  5. External Style Sheets
  6. Wrapping It Up

15. Thinking Inside the Box (The CSS Box Model)

  1. The Element Box
  2. Specifying Box Dimensions
  3. Padding
  4. Borders
  5. Margins
  6. Assigning Display Types
  7. Box Drop Shadows

16. Floating and Positioning

  1. Normal Flow
  2. Floating
  3. Fancy Text Wrap with CSS Shapes
  4. Positioning Basics
  5. Relative Positioning
  6. Absolute Positioning
  7. Fixed Positioning
  8. Stacking Order

17. Getting In Line with Flexbox

  1. Setting Up a Flex Container
  2. Controlling the "Flow" Within the Container
  3. Controlling the Alignment of Flex Items
  4. Flexbox Alignment Techniques
  5. Determining How Items "Flex" in the Container
  6. Changing the Order of Flex Items
  7. Flexbox for Page Layout
  8. More Flexbox Resources

18. Grid Layout

  1. Grid Layout Overview
  2. Implicit Grids and Default Grid Behavior
  3. Explicit Grids
  4. Placing Items on a Grid
  5. The grid Shortcut Property
  6. Grid Alignment and Spacing
  7. Responsive Grids
  8. Additonal Resources

19. Responsive Web Design

  1. Why RWD?
  2. The Responsive Recipe
  3. Setting the Viewport
  4. Fluid Layouts
  5. Flexible Images
  6. Query Magic
  7. Designing Responsively
  8. A Few Words About Testing
  9. More RWD Resources

20. Transitions, Transforms, and Animation

  1. Ease-y Does It (CSS Transitions)
  2. CSS Transforms
  3. Keyframe Animation
  4. Wrapping Up

21. More CSS Techniques

  1. Styling Tips for Forms
  2. A Clean Slate (Reset and Normalize)
  3. Supporting Older Browsers (CSS Feature Detection)
  4. CSS Custom Properties
  5. A Quick Introduction to CSS Nesting
  6. An Even Quicker Introduction to CSS Layers
  7. CSS Frameworks
  8. Wrapping Up Style Sheets

Part IV. JAVASCRIPT FOR BEHAVIOR [ALL NEW!]

22. Getting Started with JavaScript: Statements and Variables

  1. Meet a Script
  2. Statements
  3. Numbers and Math
  4. Strings
  5. Variables
  6. Embedded Versus External JavaScript
  7. The JavaScript Console
  8. Wrapping Up

23. Functions, Conditionals, and Loops

  1. Functions
  2. Functions Can Receive and Return Information
  3. Conditional Statements
  4. Arrays
  5. Loops Make Repetitive Tasks Easier
  6. Wrapping Up

24. Working with the DOM and Events

  1. UI as a Progressive Enhancement
  2. Generating New Markup
  3. User Interactivity
  4. Refactoring for Accessibility
  5. Wrapping Up

25. Next-Level JavaScript

  1. JavaScript Libraries
  2. Web Components
  3. JavaScript Frameworks
  4. JavaScript Beyond the Browser
  5. Progressive Web Apps
  6. Wrapping Up

Part V. WEB IMAGES

26. Web Image Basics

  1. Image Sources
  2. Meet the Image Formats
  3. Resolution and Reference Pixels
  4. Working with Transparency
  5. That's a Wrap on Image Basics!

27. Image Production Techniques

  1. Image Production Strategy
  2. Optimizing Images
  3. Responsive Image Sets
  4. Tools, Tips, and Techniques
  5. Automate It!
  6. Wrapping Up Image Production

25. SVG

  1. Drawing with XML
  2. Features of SVG as XML
  3. SVG Design Tools
  4. SVG Production Tips
  5. Scaling SVGs
  6. Further SVG Exploration
  7. Test Yourself
  8. And...We’re Done!

Part VI. APPENDICES

A. Answers

B. HTML5 Global Attributes

C. CSS Selectors, Levels 3 and 4

D. URL Reference