Learning Web Design, 4e
List of Links
PART I | Getting Started
Chapter 1 | Where Do I Start?
- Blogger
- Wordpress
- Tumblr
- Squarespace
- Style Tiles and How They Work by Samantha Warren
- Styletil.es
- World Wide Web Consortium
- About the W3C
- jQuery site
- CNET’s Download.com
- VMFusion (runs Windows on Macs)
- Parallels Desktop for Mac
- Oracle VirtualBox
- Nvu (open source web page editor)
- Adobe software
- Microsoft Expression Web
- TextMate by MacroMates
- Sublime Text
- TextPad for Windows
- Coda by Panic Software
- BBEdit by Bare Bones Software
- Corel Paint Shop Pro
- GIMP
- Microsoft Internet Explorer
- Google Chrome
- Firefox browser
- Opera browser
- Safari browser
- CNET's Download.com for Windows FTP clients
- Transmit (FTP for Mac)
- Cyberduck (FTP for Mac)
- Cygwin (Linux emulator for Windows)
- PuTTY (telnet/SSH terminal emulator)
Chapter 2 | How the Web Works
Chapter 3 | Some Big Concepts You Need to Know
- Personal site of mobile web expert, Brad Frost
- There Is No Mobile Web, by Stephen Hay
- The Coming Zombie Apocalypse, by Scott Jensen
- The Future Friendly site
- Responsive Web Design, (original article in May, 2010) by Ethan Marcotte
- MediaQueri.es, Responsive Web Design Gallery
- Why Separate Mobile and Desktop Pages?, by Luke Wroblewski
- Responsiveness Is a Characteristic, by Stephanie Rieger
- Web Accessibility Initiative (WAI)
- Web Content Accessibility Guidelines (WCAG)
- Section 508 Accessibility Guidelines
- WAI-ARIA roles
- WebAIM: Web Accessibility in Mind
- Effect of Website Speed on Users, Statistics Reveal Slow Loading Times Cost Sites Serious Money
- WebPagetest
- YSlow (site performance analysis tool)
- Mobitest by Blaze
- Sloppy (for simulating download times)
- Slowy
- Make the Web Faster (Google)
PART II | HTML Markup for Structure
Chapter 4 | Creating a Simple Page (HTML Overview)
Chapter 5 | Marking up Text
- The HTML5 Specification at the W3C
- The living HTML5 spec maintained by WHATWG
- Google study of common class names (2005)
- How to get HTML5 working in IE and Firefox 2, by Remy Sharp
- Modernizr
- Document Outlines, by Mike Robinson
- HTML5 Sectioning Elements, Headings, and Document Outlines, by Roger Johansson
- Microformat and Metadata information at WebSitesMadeRight.com
- Complete list of character references at the Web Standards Project
Chapter 6 | Adding Links
- URI page on Wikipedia
- How to open a browser window at a specific size by Peter-Paul Koch
- Enkkoder form at Hivelogic (for encrypting email addresses)
Chapter 7 | Adding Images
- CSS Zen Garden (examples of pure CSS design)
- Creating Accessible Images at WebAIM
- Chapter 6, The Image Problem, by Joe Clark
- Techniques for WCAG 2.0 (Web Accessibility Guidelines)
Chapter 8 | Basic Table Markup
- Responsive Data Tables, by Chris Coyier
- Responsive Design Approach for Complex Multicolumn Data Tables, by Maggie Costellow Wachs at Filament Group
- HTML5 recommendations for table descriptions
- Creating Accessible Tables at WebAIM
Chapter 9 | Forms
- Push My Button, by Aaron Gustafson
- Public-key Cryptography on Wikipedia
- Luke Wroblewski's posts about web forms
Chapter 10 | Understanding the Standards
- When Can I Use... (Browser support charts for HTML5 and CSS3 features)
- HTML5 Please (Browser support charts for HTML5
- Comparison of Layout Engines (HTML5) on Wikipedia
- A history of the World Wide Web and HTML according to David Raggett (From Raggett on HTML4
- Web Standards Project (WaSP)
- WHATWG (Web Hypertext Application Technology Working Group
- W3C HTML 4 and HTML5 Validator
- HTML5 Validator
- The differences between HTML 4.01 and HTML5 (W3C)
- HTML5 Global Attributes (W3C)
- WAI-ARIA state and property keywords (W3C)
- WAI-ARIA roles (W3C)
- Two-letter language codes
- HTML Landscape Overview (summary of HTML5 APIs by Erik Wilde)
- W3C list of all maintained specification documents (many are APIs)
- Miro Video Converter
- Handbrake (video conversion tool)
- Firefogg (video converter extension to Firefox)
- WP3/WMA/Ogg Converter (audio converter for Windows)
- Max (open source audio converter for Mac)
- Audacity (recording tool with basic audio conversion features)
- Video for Everybody by Kroc Camen
- JW Player (Flash video player)
- FlashCanvas JavaScript library (for addding canvas support)
- Canvas demos
- “Hello Canvas!” canvas example from Figure 10-5.
- Canvas 2D Context specification (functions and attributes) (W3C)
- Canvas tutorial video (available for purchase at O'Reilly.com)
PART III | CSS for Presentation
Chapter 11 | Cascading Style Sheets Orientation
- W3C's CSS “Current Work” page
- CSS Zen Garden
- A List Apart articles on CSS
- CSS Tricks by Chris Coyier
- Web Developer extension for Chrome and Firefox
Chapter 12 | Formatting Text (Plus More Selectors)
- Fontspring (fonts for web use)
- The New Bullet-proof font-face Syntax (at Fontspring)
- Paul Irish's @font-face implementation
- FontSquirrel (open source fonts)(
- @font-face Generator from FontSquirrel
- Google Web Fonts
- Typekit from Adobe
- Fonts.com
- WebINK
- Typotheque
- Fonts Live
- Fontdeck
- Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows
- Font Matrix
- Code Style's Web Font Survey and Font Stack Builder
- 8 Definitive Font Stacks by Michael Tuck
- Better CSS Font Stacks by Nathan Ford
- Font Sizing with rem by Jonathan Snook
- CSS3 Color Names
- How Specificity is Calculated (W3C)
- CSS Specificity: Things You Should Know by Vitaly Friedman
- CSS: Specificity Wars by Andy Clarke
- Full CSS Text Shadows—Even in IE by Zoltan "Du Lac" Hawryluk
- CSS3 Text Shadow—Can It Be Done in IE Without JavaScript? by Zoltan "Du Lac" Hawryluk
- CSS3
font-size-adjustproperty - CSS3 list extensions
Chapter 13 | Colors and Backgrounds (Plus Even More Selectors and External Style Sheets)
- RGBA—IE Fallback by Eric Ferraiuolo
- IE Conditional Comments on Microsoft Developer Network site
- Selectivizr
- Learning to Use the Before and After Pseudo-elements in CSS in Smashing Magazine
- The CSS3 Generated and Replaced Content Module (W3c)
- Background property support charts (Standardista)
- Silverback app page (with parallax effect)
- Starry Night: Incredible 3D Background Effect with Parallax by Chris Coyier
- How to Recreate Silverback’s Parallax Effect by Paul Annett
- CSS3 Radial Gradients by John Alsopp
- Prefix or Posthack by Eric Meyer on A List Apart
- List of all browser-prefixed properties maintained by Peter Beverloo
- Speed Up with CSS3 Gradients by Chris Coyier
- The Ultimate CSS Gradient Generator by Colorzilla
Chapter 14 | Thinking Inside the Box (Padding, Borders, and Margins)
- Setting all elements to border-box box-sizing model (an article by Paul Irish)
- Box-sizing polyfill by Christian Shaefer
- The Revenge of the IE Box Model by Jeff Kaufmann
- Overthrow (polyfill to fix overflow on mobile devices)
- Curvy Corners (polyfill to fix border-radius)
- No Margin for Error by Andy Budd
- Uncollapsing Margins by Eric Meyer
- How to Simulate CSS3 box-shadow in IE 6-8 without JavaScript by Zoltan “Du Lac” Hawryluk
Chapter 15 | Floating and Positioning
- Position Is Everything, IE support information
- css-discuss Wiki
- Fixed Positioning in Mobile Browsers by Brad Frost
Chapter 16 | Page Layout with CSS
- Bluprint (grid system)
- BlueTrip (grid system)
- YUI12 from Yahoo! (fluid grid system)
- 1140 CSS Grid
- Skeleton (grid system)
- Bootstrap from Twitter
- Fluid Grids by Ethan Marcotte
- IE Patch for min-width and max-width by Cameron Moll
- Elastic Lawn design by Patrick Griffiths at CSS Zen Garden
- Elastic Designs by Patrick Griffiths
- CSS3 Multi-column Layout Module (W3C)
- Learn You a Flexbox for Great Good! by Stephen Hay
- Grid Layout System (W3C)
- Grid Layout System at Microsoft Developer Network
- CSS Regions (W3C)
- CSS Exclusions (W3C)
- Regions and Exclusions documented at Adobe.com
- The Search for One True Layout by Alex Robinson
- In Search of the Holy Grail Matthew Levine
Chapter 17 | Transitions, Transforms, and Animation
- W3C CSS3 Transitions Module
- Bezier curve for transition acceleration (W3C)
- CSS Transforms Module (W3C)
- Transformation Matrix (W3C)
- Adventures in the Third Dimension: CSS 3D Transforms by Peter Gasston
- Intro to 3D Transforms by David DeSandro
- A Masterclass in CSS Animations by Estelle Weyl
- The Guide to CSS Animation: Principles and Examples (Smashing Magazine)
- Using CSS3 Transitions, Transforms and Animation by Rich Bradshaw
- Anthony Calzadilla site
- Tumult Hype (animation tool)
- Sencha Animator
- Adobe Edge
Chapter 18 | CSS Techniques
- Eric Meyer CSS Reset
- Reasoning behind the Meyer CSS Reset
- Yahoo! CSS Reset
- Image replacement technique for delivering high-resolution images, Part 1 by Aaron Gustafson
- Image replacement technique for delivering high-resolution images, Part 2 by Aaron Gustafson
- The Mystery of CSS Sprites: Techniques, Tools, and Tutorials by Sven Lennartz
- Giving the Velocity website a performance makeover by Tony Quartarolo
- SpriteMe
- CSS Sprite Generator
- CodeKit (for converting LESS files)
- The Sass site
- The LESS site
- Compass (authoring framework using Sass)
- Getting Started with Sass by David Demaree
- An Introduction to LESS, and Comparison to Sass by David Hixon
- Media Queries (Responsive Design Gallery)
- Creating Intrinsic Ratios for Video Thierry Koblenz
- FitVids.js (JavaScript solution for sizing video)
- Creating a Mobile-First Responsive Web Design by Brad Frost
- Anatomy of a Mobile-First Responsive Web Design by Brad Frost
- Resize My Browser (tool)
- The Ems have it: Proportional Media Queries FTW!" by Lyza Gardner
- Sencha.io Src (image resizing service)
- Responsive IMGs—Part 1 by Jason Grigsby
- Responsive IMGs, Part 2—In-depth Look at Techniques by Jason Grigsby
- Responsive IMGs, Part 3—The Future of the IMG Tag by Jason Grigsby
- The Real Conflict Behind <picture> and @srcset by Jason Grigsby
- Mobile Web Best Practices by Brad Frost
PART IV | JavaScript for Behaviors
Chapter 19 | Introduction to JavaScript
Chapter 20 | Using JavaScript
- HTML Shiv Wikipedia entry
- Remy Sharp's original HTML5 Shiv post
- Modernizr
- Polyfill archive at Modernizr
- Selectivizr
- Respond.js
- jQuery (JS library)
- Dojo (JS library)
- Prototype (JS library)
- Moo Tools (JS library)
- Yahoo! User Interface LIbrary
- Comparison of JavaScript Libraries (on Wikipedia)
- Google Developers' list of JavaScript libraries
PART V | Web Graphic Production
Chapter 21 | Web Graphics Basics
- Adobe Software
- Corel Paint Shop Pro
- GIMP
- Creative Commons License
- Flickr Creative Commons
- Compfight
- IStockPhoto
- Getty Images
- Veer
- Clipart.com
- #1 Free Clip Art
- The Noun Project
- Icon Finder
- The PNG Gamma Dilemma by Trevor Morris
- Pixel Identity Crisis by Scott Kellum
- Cross-browser Variable Opacity with PNG: A Real Solution by Michael Lovitt
- Open Clip Art (for free SVG artwork)
- Inkscape (SVG editor)
- W3 Schools: SVG Embedding Options
- Can I Use: SVG
- SVGWeb JavaScript Library
- An SVG Primer for Today's Browsers
- SVG Examples
Chapter 22 | Lean and Mean Web Graphics
- Smush.it
- Dynamic Drive Online Image Optimizer
- PunyPNG
- ImageOptim
- Clever PNG Optimization Techniques by Sergey Chikuyonok
