List of Links
You can't fit everything there is to know about web design into one book, even if it is over 800 pages long. Every lesson in Learning Web Design includes pointers to the author’s favorite resources where you can continue your learning. Here you will find books and articles by experts in various web technologies, cool tools, W3C specifications, educational sites, and more.
Part I. GETTING STARTED
1. Getting Started in Web Design
- Wordpress
- Squarespace
- Wix
- SiteBuilder
- Weebly
- Style Tiles demo
- Dan Mall: Element collage
- Website Style Guide Resources
- World Wide Web Consortium
- What the W3C does
- VMFusion
- Parallels Desktop
- Oracle VirtualBox
- Sublime Text Editor
- Atom editor
- Brackets editor
- CodeKit
- Adobe Dreamweaver
- Coda editor
- Microsoft Visual Studio
- Sketch (UI design tool)
- Affinity Designer
- Adobe XD
- Figma
- UX Pin
- Adobe Creative Cloud
- GIMP
- Corel PaintShop Pro (Windows)
- Corel Draw (Windows)
- Pixelmator (Mac)
- SumoPaint
- Pixlr
- Chrome browser
- Firefox browser
- Microsoft Edge browser
- Search for "Internet Explorer"
- Safari browser (Mac)
- Opera
- Filezilla (FTP)
- Cyberduck (FTP)
- WinSCP (FTP)
- Transmit (FTP)
- Cygwin (Linux emulator)
2. How the Web Works
- O'Reilly Media
- Mobile browsers on Wikipedia
- W3C History Archives
- URIs on Wikipedia
- HTTP Status Codes on Wikipedia
3. Some Big Concepts You Need to Know
- "Speed Matters" article
- Brad Frost's site
- "There Is No Mobile Web" by Stephen Hay
- WebPage Test
- Google PageSpeed Insight
- Yahoo!'s YSlow tool
- W3C Standards
- Filament Group performance page
Part II. HTML FOR STRUCTURE
4. Creating a Simple Page
5. Marking Up Text
- HTML5 specification at W3C
Google study(This page is no longer online.)- Modernizr
- The <time> element specification
- Two-letter language codes (ISO standard)
- I18N at W3C site
- WAI-ARIA Working Draft
- ARIA in HTML
- ARIA on MDN Web Docs
- HTML5 Accessibility
- HTML5 Named Character Entities
- Web Standards Project friendlier list of named character entities
- Microformats
- Microdata (WHATWG)
- RDFa and RFDa Lite
- JSON-LD
- Schema.org Getting Started page
6. Adding Links
7. Adding Images
- “A Complete Guide to SVG Fallbacks” by Amelia Bellamy-Royds
- Responsive Images Community Group
- Picturefill (responsive image polyfill)
- MIME types
- “Responsive Images: Use Cases and Documented Code Snippets to Get You Started”
- Responsive Images 101 by Jason Grigsby
- CanIUse.com (browser support charts)
- Cloudinary (image automation service)
- “Image Resizing Services” by Jason Grigsby
- Unsplash (royalty-free photos)
8. Table Markup
- Complex table sample
- Suggestions for providing table descriptions
- “Creating Accessible Tables” (WebAIM)
9. Forms
“Push My Button” by Aaron Gustafson
(This article is no longer online.)- “When to Use the Button Element” by Chris Coyier
- ARIA States and Properties
- “How to Build Custom Form Widgets” on MDN Web Docs
- jQuery UI
- Articles on forms by Luke Wroblewski
10. Embedded Media
- “From object to iframe: Other Embedding Technologies” on MDN Web Docs
- HTML5 APIs
- HLS (HTTP Streaming Video)
- Handbrake
- Firefogg
- FFmpeg
- Freemake
- Audio Converter
- 123 Apps
- Media.io
- MediaHuman Audio Converter
- Max
- Audacity
- IANA Two-letter language codes
- “Creating a Cross-Browser Video Player” by Eric Shepherd, Chris Mills, and Ian Devlin
- Video player options on Video SWS
- “Video for Everybody” by Kroc Camen
- “Adding Captions and Subtitles to HTML5 Video” on MDN Web Docs
- Subtitle tutorial on Miracle Tutorials
- WebVTT specification at W3C
- Canvas examples on EnvatoTuts+
- Hello Canvas example
- FlashCanvas JavaScript Library
(Original site taken down. The new URL ishttps://code.google.com/archive/p/flashcanvas/) - Canvas examples on David Walsh’s blog
- W3C HTML5 Canvas 2D Context specification
- HTML5 Canvas for Developers video tutorial by David Geary
Part III. CSS FOR PRESENTATION
11. Introducing Cascading Style Sheets
- CSS Zen Garden
- W3C CSS Values and Units Module
- Chrome DevTools
- Firefox Developer Tools
- Microsoft Edge tools
- Safari Developer Tools
URL in print book is incorrect. The correct URL isdeveloper.apple.com/safari/tools/. - Opera Dragonfly tools
- Internet Explorer 9+ tools
- CSS-Tricks
- W3C CSS main page
- Current CSS specifications at W3C
- MDN Web Docs
- A List Apart
12. Formatting Text
- Fontspring
- Font Squirrel
- Font Squirrel @font-face Generator
- Cross-browser font declaration by Ethan Dunham
- Cross-browser font declaration by Paul Irish
- Google Web Fonts
- Adobe Typekit
- Adobe Typekit Blog
The URL listed in the book no longer works. Use simplyblog.typekit.com - Fonts.com
- Cloud Typography by Hoefler & Co.
- Typoteque
- Fonts Live
- Fontstand
- CSS Font Stack
- “8 Definitive Font Stacks” by Michael Tuck
- W3C Font specification
- font-variant-ligatures values
- font-features-settings article by Robin Rendle
- “Caring about OpenType Features” by Tim Brown
- CSS Selectors Module Level 4
- “CSS Specifity: Things You Should Know” by Vitaly Friedman
- Specificity on MDN Web Docs
- CSS Text Module Level 3
- CSS Text Decoration Module Level 3
- CSS Text Module Level 4
- List markers in CSS3
13. Colors and Backgrounds
- CSS4 Color Names (on this site)
- A Most Excellent HSL Color Picker by Brandon Mathis
- HSL Color Picker
- HSLa Explorer by Chris Coyier
- “Accessibility Basics: Testing Your Page for Color Blindness” by Chris Coyier
- “4 novel ways to deal with sticky :hover effects on mobile devices”
- “An Ultimate Guide to CSS Pseudo-Classes and Pseudo-Elements” by Ricardo Rea
- Selectivizr polyfill
- CSS3 and 4 selector information by Nelly Brekardin
- “Learning to Use the :before and :after Pseudo-Elements in CSS” by Louis Lazaris
- “CSS Gradients” by Chris Coyier
- “Using CSS Gradients” at MDN Web Docs
- “CSS3 Gradients,” part of the CSS Mine e-book by Martin Michalek
- “Autoprefixer: A Postprocessor Dealing with Vendor Prefixes in the Best Possible Way”
- Ultimate CSS Gradient Generator by Colorzilla
- CSS Gradient Generator by Virtuosoft
- CSS Patterns Gallery
14. Thinking Inside the Box
- “Inheriting box-sizing Probably Slightly Better Best-Practice” by Chris Coyier
- W3C CSS Background and Borders Module Level 3
- Border Images on CSS-Tricks
- “No Margin for Error” by Andy Budd
- “Uncollapsing Margins” by Eric Meyer
- “Five Ways to Hide Elements in CSS” by Baljeet Rathi
15. Floating and Positioning
- “The very latest clearfix reloaded” by Thierry Koblentz
- “The End of the Clearfix Hack?” by Rachel Andrew 398
- CSS Shapes Module Level 1
- “Getting Started with CSS Shapes” by Razvan Caliman
- CSS Shapes at the Experimental Layout Lab of Jen Simmons
- “A Redesign with CSS Shapes” by Eric Meyer
- CanIUse.com
- Firefox CSS Shapes Editor
16. CSS Layout with Flexbox and Grid
- W3C CSS Multicolumn Layout Module
- “Multicolumn Layout” by Jennifer Robbins
- A Complete Guide to Flexbox by Chris Coyier
- Flexbox Froggy
- What the Flexbox?
- Flexbox Playground
- Flexy Boxes
- W3C CSS Flexible Box Layout Module Level
- CanIUse.com
- Autoprefixer
- Flexbugs
- W3C CSS Grid Layout Module Level 1
- Rachel Andrew’s “Grid by Example” site
- W3C CSS Box Alignment Module
- Jen Simmons’ ”Experimental Layout Lab” site
- Articles by Jen Simmons
- Resources for learning Grid
- Grid Garden by Thomas Park
- “Page Layout with Floats and Positioning” by Jennifer Robbins
17. Responsive Web Design
- Pew Research Center, “Smartphone Use in 2015”
- “Responsive Web Design” by Ethan Marcotte
- “Creating Intrinsic Ratios for Video” by Thierry Koblentz
- FitVid.js
- Media Queries Level 4 draft 493
- Respond.js polyfill
- Screen Sizes site
- MQTest.io
- “Multi-Device Layout Patterns” by Luke Wroblewski
- “Responsive Patterns” by Brad Frost
- Get Started with Variable Fonts” by Richard Rutter
- Axis-praxis.org (variable fonts)
- CanIUse.com
- “Responsive Font Size and Fluid Typography with vh and vw” by Michael Riethmuller
- “Responsive Navigation Patterns” by Brad Frost
- “Adventures in Responsive Navigation” page by Eric Arbé
- “Accessible, Simple, Responsive Tables” by Davide Rizzo
- “CSS-only Responsive Tables” by David Bushell
- “Picking a Responsive Tables Solution” by Jason Grigsby
- Responsive Tables by ZURB Studios
- Tablesaw by Filament Group
- Public device lab lists
- ”Building a Device Lab“ by Destiny Montague and Lara Hogan (Five Simple Steps Publishing)
- Android Emulator
- Browsersync
- Ghostlab
- “Mobile Emulators & Simulators: The Ultimate Guide” by Maximiliano Firtman
- BrowserStack
- CrossBrowserTesting.com
- Responsive Web Design Is...
- Responsive Resources
- Media Queries responsive gallery by Eivind Uggedal
18. Transitions, Transforms, and Animation
- CSS Transitions Module
- Cubic-Bezier.com
- “Using Multi-Step Animations and Transitions,” by Geoff Graham
- CSS Timing Module
- CSS Transforms Module
- ShouldIPrefix.com
- “Adventures in the Third Dimension: CSS 3D Transforms” by Peter Gasston
- “Intro to CSS 3D Transforms” by David DeSandro
- CSS Animations Level 1
- “Animation & UX Resources” by Val Head
- “CSS: Animation” course by Val Head on Lynda.com
- “CSS Animation for Beginners” by Rachel Cope
- “The Guide to CSS Animation: Principles and Examples” by Tom Waterhouse
- Animate.css by Daniel Eden
- CSS Animation Cheat Sheet by Justin Aguilar
- AngryTools CSS Animation Kit
- Firefox Animation Inspector
- Chrome Animation Inspector
- UI Animation examples on Codrops blog
19. More CSS Techniques
- CSS Reset style sheet by Eric Meyer
- Eric’s article about the CSS Reset
- “Layout Secret #1: The CSS Table Property” by Massimo Cassandro
- Normalize.css by Nicolas Gallagher and Jonathan Neal
- Nicolas Gallager’s article about Normalize.css
- “The Image Replacement Museum,” assembled by Marie Mosley
- CSSsprites (generator)
- CSSsprites responsive sprite generator
- CSS Conditional Rules Module Level 3
- Modernizr
20. Modern Web Development Tools
- Cygwin (Windows terminal application)
- cmder (Windows terminal application)
- Windows Subsystem
- Ubuntu in Windows Store
- How to change the terminal prompt character
- An A–Z Index of the Bash Command Line for Linux
- Michael Hartl’s tutorial “Learn Enough Command Line to Be Dangerous
- Envato Tuts+, “The Command Line for Web Design”
- “Deconfusing Pre- and Post-Processing” by Stefan Baumgartner
- “It’s Time for Everyone to Learn About PostCSS” by David Clark
- Command Line for Non-Techies” course by Remy Sharp
- CodeKit
- Compass 576
- Bourbon
- The Sass site
- “Getting Started with Sass,” by David Demaree
- “An Introduction to LESS, and LESS Vs. Sass,” by Jeremy Hixon
- LESS site
- Stylus site
- Autoprefixer
- PostCSS
- PostCSS plug-ins
- Stylelint
- CSSNext
- PreCSS
- Fixie
- Drew Minns’ article “PostCSS: A Comprehensive Introduction”
- The Envato Tuts+ tutorial “PostCSS Deep Dive”
- Rework framework
- Pleeease postprocessor
- Grunt
- Gulp
- Handlebars
- YAML
- Git main page
- GitHub
- Beanstalk
- GitLab
- Bitbucket
- The Git Cheatsheet
- A Visual Git Reference
- “Understanding the GitHub Flow”
- Pro Git by Scott Chacon and Ben Straub (Apress)
- “Git Cheat Sheet” from GitHub
- The Git Reference Manual
- GitHub Desktop
- Git Tower 2
- GitHub YouTube channel
Part IV. JAVASCRIPT FOR BEHAVIOR
21. Introduction to JavaScript
- Idiomatic JavaScript
- IIFE method by Ben Alman
- Window API reference at MDN Web Docs
- addEventListener page on MDN
- JavaScript resources on MDN
22. Using JavaScript
- “What is a polyfill” by Remy Sharp
- The Wikipedia entry for HTML Shiv
- Remy Sharp’s post on HTML shiv
- Selectivizr
- Picturefill polyfill
- jQuery (JS library)
- MooTools (JS library)
- Dojo (JS library)
- Prototype (JS library)
Part V. WEB IMAGES
23. Web Image Basics
- Getty Images
- iStockPhoto
- Flickr Creative Commons
- Unsplash
- Wikimedia Commons
- Creative Commons licenses
- Clipart.com
- #1 Free Clip Art
- The Noun Project
- Icon Finder
- JPEG.org
- WebP on Wikipedia
- ICC color profile in Safari article, by Chris Coyier
- WebP Photoshop plug-in by Toby Thain
- WebP Photoshop plug-in by Brendan Bolles
- WebP official site
- “Pixel Density, Demystified” by Peter Nowell
- “Designer’s guide to DPI,” by Sebastien Gabriel
- “The Shapes of CSS” by Chris Coyier
- “Beginners Guide to Pure CSS Images” by Michael Mangialardi
- CSS drawings by Hugo Giraudel
- Glide (image service)
- Cloudinary (image service)
- Akamai (image service)
- Kraken.io (image service)
- “Image Resizing Services” by Jason Grigsby
- ICOConverter.com
- ConvertICO.com
- Icon Slate by Kodlian
- Favicon.io
- Faviconomatic
- “The 2017 Guide to FavIcons for Nearly Everyone and Everyone and Every Browser”
- “How to Make a Favicon” by Nick Pettit
- Favicon entry on Wikipedia
24. Image Asset Production
- Adobe Creative Cloud
- GIMP site
- Responsive Breakpoints Generator by Cloudinary
- “Responsive Image Breakpoints Generator, A New Open Source Tool,” by Nadav Soferman
- “Responsive Images 101, Part 9: Image Breakpoints,” by Jason Grigsby
- Dan Rodney on designing at @2x
- “Automating Art Direction with the Responsive Image Breakpoints Generator” by Eric Portis
- Cloudinary (image service)
- Akamai (image service)
- Image resizing vendors, a list by Jason Grigsby
- “Image Resizing Services” by Jason Grigsby
- Kraken.io (image service)
- ImageAlpha by Kornel Lesińsky
- CSS Masking spec
- TinyPNG
- PunyPNG Pro
- pngquant compression library
- Optimizilla
- Kraken.io web interface
- PNGGauntlet
- JPEGmini
- Trimage
- imagemin for grunt and gulp
25. SVG
- Open Clip Art library
- Freepik
- IcoMoon
- SVG 1.1 specification
- Comparison of Layout Engines (SVG) page on Wikipedia
- SVG Tiny 1.2
- SVG 2 Specification
- List of SVG elements and attributes
- Snap JavaScript library demos
- SVG animation by Chris Gannon
- Codepen.io
- Data-generated SVG examples
- D3.js datavis JavaScript library
- Snap.svg (animation JS library)
- SVG.js (animation JS library)
- Velocity (animation JS library)
- Bonsai (animation JS library)
- SVG Walkway
- LazyLinePainter
- Vivus (path animator)
- Inkscape
- XQuartz
- Boxy
- SVG Edit
- SVG Edit in the browser
- Atom Editor SVG Preview
- Brackets SVG Preview
- Adobe Illustrator SVG page
- Peter Nowell’s “SVG Workflows in Sketch” video course
- SVGO (optimizer)
- SVGOMG (optimizer with GUI)
- Brotli description on MaxCDN
- Brotli github page
- “Understanding SVG Coordinate Systems and Transformations (Part 1)—The viewport, viewBox, and preserveAspectRatio” by Sara Souiedan
- “How to Scale SVG” by Amelia Bellamy-Royds for CSS-Tricks
- “Making SVGs Responsive with CSS” by Sara Soueidan
- Sara Souiedan’s blog
- Adaptive Icons by Joe Harrison
- “Rethinking Responsive SVG” by Ilya Pukhalski