Browser tools
Chrome Dev Tools
Built into Chrome. Edit HTML, CSS and JavaScript live, or run code in the console.
Firebug
Tools for web development available as a plugin for Firefox. Firefox also now has its own developer tools: choose Web Developer from the Tools menu.
F12 Tools
Developer tools for Internet Explorer.
Opera Dragonfly
Opera tools.
Documentation, tutorials and help
Sitepoint
Great tutorials for HTML, CSS, JavaScript, Mobile, UX …
Khan Academy
Great place to start with computer science.
Code Academy
Simple and clearly structured interactive lessons in HTML, CSS and JavaScript.
20 things I learned about the Web
Gentle introduction to web technologies – in a good-looking online ‘book’.
Basic JavaScript
Well-written introductory article.
stackoverflow.com
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.
html5rocks.com and updates.html5rocks.com
Tutorials, demos and updates of all that’s (very) new in HTML, CSS and JavaScript.
W3C list of elements
Comprehensive, up-to-date list of elements, attributes and events, with examples.
Default browser stylesheets
Default styles for HTML elements.
MDN
Mozilla Developer Network: demos, tutorials and reference documentation, with contributions from Google staff.
webplatform.org
Cross-industry effort to build web documentation.
diveintohtml5.info
One-of-a-kind, well-written how-to and history for everything HTML5.
Web Fundamentals
Best practice for multi-device web development.
html5doctor.com
HTML, CSS and JavaScript articles and tutorials.
Quirksmode
‘For all your browser quirks’. In depth articles on a range of topics.
Sitepoint
Reference documentation by a respected book publisher.
MSDN
HTML, CSS, JavaScript and other documentation from Microsoft.
CSS Tricks
In-depth articles about CSS.
Smashing Magazine
Multi-device web design, tools and techniques.
Chrome Developer Docs Team Learning Materials
A gold mine: links to resources, each categorised and rated.
html5search.com
Site built by Googler Paul Kinlan to search reputable web documentation
…and if you use w3schools.com, bear in mind the warnings on w3fools.com.
…and remember: standards and specifications are also documentation–see below for links.
Bentobox.io
Bento is a guided tour through the best free web development tutorials, including videos, interactive classes, and reading material. It is particularly good at teaching you what to learn in what order.
Browser capability
caniuse.com
Mobile and desktop browser capabilities, with links to documentation.
chromestatus.com
Web platform feature support and examples.
blink-dev
Want to know what’s coming to Chrome? Blink is Chromium’s rendering engine.
status.modern.ie
Internet Explorer status and roadmap
mobilehtml5.org
Capability information for mobile browsers.
html5please.us
HTML, CSS and JavaScript features: what’s in flux, what’s flakey, and what you can do about it.
css3test.com
Tests your browser’s CSS3 support.
Robohornet
Benchmark your browser using real-world examples, not raw JavaScript performance.
Stats, archives…
Wikipedia browser usage share
Comparison of statistics from various sources.
Statcounter
Charts of browser share organised by territory, platform, browser version and other metrics.
HTTP Archive
Trends in web technology, interesting stats, website performance.
Wayback Machine
Archive of over 400 billion web pages.
Online code editors
JS Bin
Edit HTML, CSS and JavaScript live – then save and link to your work.
Mozilla Thimble
Edit and publish web pages online – from the creators of Firefox.
Codecademy
A good place for absolute beginners.
jsFiddle
Online code playground for HTML, CSS and JavaScript.
Google code playground
Examples of Google and JavaScript APIs.
Validators, code checkers, tools…
W3C HTML validator
HTML validation tool.
W3C CSS validator
CSS validation tool.
JSHint
JavaScript linting tool (much like JSLint, but more configurable).
JSONLint
JSON validator.
JS Beautifier
Open source tool for formatting JavaScript and HTML.
CSS Beautify
Open source tool for formatting CSS, from Sencha Labs.
Testing
Page Speed
Google tool to ‘help developers optimize their web pages by applying web performance best practices’. Now with UX and mobile testing.
Web Page Test
Cross browser page load testing.
jsPerf
Create, share and compare test cases.
Libraries, package managers, development stacks…
Yeoman
‘Modern workflows for modern webapps.’
Bower
Package manager.
Grunt
JavaScript task runner.
Modernizr
Feature detection library.
jQuery
Cross-platform JavaScript library with UI and widget plugins.
Closure
‘The Closure Tools project is an effort by Google engineers to open source the tools used in many of Google’s sites and web applications for use by the wider Web development community.’
Sass
CSS variables, inheritance, mixins and more.
Less
Cross-browser CSS library.
backbone.js
MVC framework.
HTML5 cross-browser polyfills
A catalogue of JavaScript libraries to deal with a variety of missing or non-standard functionality.
yepnope.js
Conditional resource loader.
Sencha and Ext JS
Cross browser HTML5 web app frameworks.
Sproutcore
Web app framework.
Specs and standards
W3C
HTML, CSS and all that.
WHATWG
‘The HTML Living Standard’.
ECMAScript
JavaScript is a dialect of this.
Books
JavaScript: The Definitive Guide
by David Flanagan
An actual printed book! Classic reference, highly readable.
Eloquent JavaScript
by Marijn Haverbeke (online or print)
Good introduction to programming, via JavaScript – with lots of good (editable) online examples.
Don’t Make Me Think
by Steve Krug
Another book! The best ever guide to interface design.
JavaScript: The Good Parts
by Douglas Crockford
Anything by Crockford is good – especially his video lectures on JavaScript.
A Smarter Way to Learn JavaScript
by Mark Meyers
Really great introduction to the language that is paired with online exercises to help retention.
You Don’t Know JS: Scope & Closures
by Kyle Simpson
This concise yet in-depth guide takes you inside scope and closures, two core concepts you need to know to become a more efficient and effective JavaScript programmer.
The post HTML, CSS and JavaScript resources appeared first on We Build Design.