This document is available from bit.ly/webdevres.
For information about Progressive Web Apps, see bit.ly/pwa-resources.
Browser tools
Built into Chrome. Edit HTML, CSS and JavaScript live, or run code in the console.
Firefox developer tools: choose Web Developer from the Tools menu.
Developer tools for Internet Explorer.
Opera tools.
Documentation, tutorials and help
Simple, low-bandwidth tutorials for HTML, CSS, JavaScript and other languages.
Udacity
Well designed interactive courses on many web topics, including:
• HTML + CSS Intro
• JavaScript Basics
• Intro to Progressive Web Apps
• Responsive Images
Gentle introduction to web technologies – in a good-looking online ‘book’.
Great place to start with computer science.
Simple and clearly structured interactive lessons in HTML, CSS and JavaScript.
Interactive learning for JavaScript and other languages.
(Very) short introduction to techniques for getting started on the web.
Interactive introduction to JavaScript.
Great place to ask (and find high quality answers to) web-related questions. If you have a question, make sure to search first in case it’s already been asked.
Guidance, analysis and a blog. (Supersedes Web Fundamentals.)
Best practice for multi-device web development. (Supersedes HTML5 Rocks — and much of this is superseded by web.dev.)
(Deprecated and mostly ported to Web Fundamentals or web.dev.) Tutorials, demos and updates of all that is (or was) new in HTML, CSS and JavaScript.
I like this site, but bear in mind the warnings at w3fools.com.
Mozilla Developer Network: demos, tutorials and reference documentation localized into dozens of languages and maintained by hundreds of volunteer contributors and Mozilla staff.
Downloadable documentation for core web technologies.
One-of-a-kind, well-written how-to and history for everything HTML5.
HTML, CSS and JavaScript articles and tutorials.
‘For all your browser quirks’. In depth articles on a range of topics.
Reference documentation by a respected book publisher.
HTML, CSS, JavaScript and other documentation from Microsoft.
In-depth articles about CSS.
Multi-device web design, tools and techniques.
A gold mine: links to resources, each categorised and rated.
Site built by Googler Paul Kinlan to search reputable web documentation
Cross-industry effort to build web documentation. No longer maintained, but still has some useful information.
Introductory web concept workshop materials.
Compilation of cheatsheets.
News and newsletters
Weekly roundup of what's new for HTML, CSS and JavaScript.
JavaScript news, articles and videos.
HTML
HTML is the core language of the web, but often neglected. (Shameless self promotion — I wrote this.)
Includes discussion of internationalisation and lots of links to other resources.
Comprehensive, up-to-date list of elements, attributes and events, with examples.
CSS
Examples, demos and compatibility.
Default styles for HTML elements.
JavaScript
JavaScript tutorial — straightforward but detailed.
Well-written introductory article.
Vanilla JS alternatives to jQuery and other library functions.
Great overview of new and recent JavaScript features, most of which are well supported, and many of which make code more expressive and understandable.
Browser capability
Mobile and desktop browser capabilities, with links to documentation.
Web platform feature support and examples.
Want to know what’s coming to Chrome? Blink is Chromium’s rendering engine.
Internet Explorer status and roadmap.
What's supported by Safari and what's in development.
ECMAScript compatibility tables.
Stuff that your browser can do, with links to demos and information about browser support.
Capability information for mobile browsers.
HTML, CSS and JavaScript features: what’s in flux, what’s flakey, and what you can do about it.
Tests your browser’s CSS3 support.
Benchmark your browser using real-world examples, not raw JavaScript performance.
Website performance data
'We periodically crawl the top sites on the web and record detailed information about fetched resources, used web platform APIs and features, and execution traces of each page. We then crunch and analyze this data to identify trends — learn more about our methodology.'
Annual HTTP Archive roundup — note that this is only for homepages.
'User experience metrics for how real-world Chrome users experience popular destinations on the web.'
The world's most popular websites, listed by country and category, based on data from a browser toolbar/extension. Owned by Amazon, not to be confused with the Amazon Alexa assistant AI.
Stats, archives...
Comparison of statistics from various sources.
Charts of browser share organised by territory, platform, browser version and other metrics.
Analytics and stats for native apps.
App data.
Data and resources for emerging markets.
Trends in web technology, interesting stats, website performance.
Archive of over 400 billion web pages.
Online code editors
Edit HTML, CSS and JavaScript live – then save and link to your work.
Online code playground for HTML, CSS and JavaScript.
Front-end playground and showcase.
Edit and publish web pages online – from the creators of Firefox.
A good place for absolute beginners.
Examples of Google and JavaScript APIs.
Hosting
Introduction to Git, GitHub, GitHub Pages and Jekyll.
Validators, code checkers, tools...
HTML validation tool.
HTML analysis tool.
CSS validation tool.
CSS linting, editor plugins available.
Open source tool for formatting CSS, from Sencha Labs.
JavaScript linting utility with plugins for editors such as Sublime and build tools such as Gulp and Grunt.
JavaScript linting tool (much like JSLint, but more configurable, with editor and Grunt plugins available).
JSON validator.
Open source tool for formatting JavaScript and HTML.
Testing
Open source automated testing tool, available from the Chrome DevTools Audit panel, as a Chrome extension, or as a command line tool.
Cross browser page load testing, from servers on a variety of networks and locations globally.
Google tool to ‘help developers optimize their web pages by applying web performance best practices’. Now with UX and mobile testing.
Open source, customisable site testing tool, available online or from the command line.
Test and monitor globally on a variety of cell networks.
Web debugging proxy: can be used to adjust bandwidth and latency.
Set of open source applications maintained by Facebook that can be used to shape traffic and emulate impaired network conditions.
Create, share and compare test cases.
Network emulation tool for OS X and iOS.
Checklist of requirements for high-quality web apps and sites.
Prioritised list of tasks and testing tools.
Libraries, package managers, frameworks…
Front-end build tool.
JavaScript task runner.
But be aware of Why we should stop using Grunt & Gulp.
Module bundler.
Module bundler.
‘Modern workflows for modern webapps.’
Package manager.
Feature detection library.
Comprehensive list with pros and cons.
Cross-platform JavaScript library with UI and widget plugins. But be aware of youmightnotneedjquery.com.
JavaScript optimisation, linting and more.
CSS variables, inheritance, mixins and more.
Cross-browser CSS library.
MVC framework.
A catalogue of JavaScript libraries to deal with a variety of missing or non-standard functionality.
Cross browser HTML5 web app frameworks.
Web app framework.
Other stuff
Free placeholder images.
Specs and standards
HTML, CSS and all that.
‘The HTML Living Standard’.
JavaScript is a dialect of this.
Updates from browser vendors
Chrome
Firefox
Safari
Opera
UC
Developer surveys
Annual survey of developer attitudes.
Annual survey from the State of JS team.
Survey of Stack Overflow contributors.
Huge annual report.
Books
by David Flanagan
An actual printed book! Classic reference, highly readable.
by Marijn Haverbeke (online or print)
Good introduction to programming, via JavaScript – with lots of good (editable) online examples.
by Steve Krug
Another actual book! Nearly 20 years old, but still one of the best and most readable guides to interface design.
by Douglas Crockford
Anything by Crockford is good – especially his video lectures on JavaScript (slides here).
