Scribd
Upload
323 views9 pages

HTML, CSS and JavaScript Resources

This document provides resources for HTML, CSS, JavaScript, and web development including documentation, tutorials, tools, libraries, and specifications. It lists browser developer tools, online code editors, linters, validators, performance testing tools, and newsletters. Updates from browser vendors like Chrome, Firefox, Safari, and Opera are also included.

Uploaded by

saf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
323 views9 pages

HTML, CSS and JavaScript Resources

This document provides resources for HTML, CSS, JavaScript, and web development including documentation, tutorials, tools, libraries, and specifications. It lists browser developer tools, online code editors, linters, validators, performance testing tools, and newsletters. Updates from browser vendors like Chrome, Firefox, Safari, and Opera are also included.

Uploaded by

saf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 9

HTML, CSS and JavaScript resources

This document is available from bit.ly/webdevres.

For information about Progressive Web Apps, see bit.ly/pwa-resources.

Browser tools
Chrome Dev Tools
Built into Chrome. Edit HTML, CSS and JavaScript live, or run code in the console.
Firefox Developer Tools
Firefox developer tools: choose Web Developer from the Tools menu.
Microsoft Edge Developer Tools (F12) Tools
Developer tools for Internet Explorer.
Opera Dragonfly
Opera tools.

Documentation, tutorials and help


Codebar
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
20 things I learned about the Web
Gentle introduction to web technologies – in a good-looking online ‘book’.
Khan Academy
Great place to start with computer science.
Code Academy
Simple and clearly structured interactive lessons in HTML, CSS and JavaScript.
Code Wars
Interactive learning for JavaScript and other languages.
Web Design in 4 Minutes
(Very) short introduction to techniques for getting started on the web.
JavaScript in 14 Minutes
Interactive introduction to JavaScript.
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.
web.dev
Guidance, analysis and a blog. (Supersedes Web Fundamentals.)
Web Fundamentals
Best practice for multi-device web development. (Supersedes HTML5 Rocks — and much of this
is superseded by web.dev.)
html5rocks.com and updates.html5rocks.com
(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.
w3schools.com
I like this site, but bear in mind the warnings at w3fools.com.
MDN
Mozilla Developer Network: demos, tutorials and reference documentation localized into dozens
of languages and maintained by hundreds of volunteer contributors and Mozilla staff.
devdocs.io
Downloadable documentation for core web technologies.
diveintohtml5.info
One-of-a-kind, well-written how-to and history for everything HTML5.
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
webplatform.org
Cross-industry effort to build web documentation. No longer maintained, but still has some
useful information.
girldevelopit.com/materials
Introductory web concept workshop materials.
Front-end cheatsheets
Compilation of cheatsheets.

News and newsletters


Frontend Focus
Weekly roundup of what's new for HTML, CSS and JavaScript.
JavaScript Weekly
JavaScript news, articles and videos.

HTML
High performance HTML
HTML is the core language of the web, but often neglected. (Shameless self promotion — I
wrote this.)
HEAD: A free guide to <head> elements
Includes discussion of internationalisation and lots of links to other resources.
W3C list of elements
Comprehensive, up-to-date list of elements, attributes and events, with examples.

CSS
The 30 CSS Selectors You Must Memorize
Examples, demos and compatibility.
Default browser stylesheets
Default styles for HTML elements.

JavaScript
javascript.info
JavaScript tutorial — straightforward but detailed.
Basic JavaScript
Well-written introductory article.
plainjs.com
Vanilla JS alternatives to jQuery and other library functions.
ES2015+ cheatsheet
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
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.
WebKit Feature Status
What's supported by Safari and what's in development.
Kangax
ECMAScript compatibility tables.
whatwebcando.today
Stuff that your browser can do, with links to demos and information about browser support.
mobilehtml5.org
Capability information for mobile browsers.
html5please.com
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.

Website performance data


HTTP Archive
'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.'
Web Almanac: library and framework usage
Annual HTTP Archive roundup — note that this is only for homepages.
Chrome User Experience Report (CrUX)
'User experience metrics for how real-world Chrome users experience popular destinations on
the web.'
Alexa Internet
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...
Wikipedia browser usage share
Comparison of statistics from various sources.
Statcounter
Charts of browser share organised by territory, platform, browser version and other metrics.
App Annie
Analytics and stats for native apps.
Sensor Tower
App data.
Building for billions
Data and resources for emerging markets.
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.
jsFiddle
Online code playground for HTML, CSS and JavaScript.
CodePen
Front-end playground and showcase.
Mozilla Thimble
Edit and publish web pages online – from the creators of Firefox.
Codecademy
A good place for absolute beginners.
Google code playground
Examples of Google and JavaScript APIs.
Hosting
Creating and Hosting a Personal Site on GitHub
Introduction to Git, GitHub, GitHub Pages and Jekyll.

Validators, code checkers, tools...


W3C HTML validator
HTML validation tool.
HTMLHint
HTML analysis tool.
W3C CSS validator
CSS validation tool.
CSSLint
CSS linting, editor plugins available.
CSS Beautify
Open source tool for formatting CSS, from Sencha Labs.
ESLint
JavaScript linting utility with plugins for editors such as Sublime and build tools such as Gulp
and Grunt.
JSHint
JavaScript linting tool (much like JSLint, but more configurable, with editor and Grunt plugins
available).
JSONLint
JSON validator.
JS Beautifier
Open source tool for formatting JavaScript and HTML.

Testing
Lighthouse
Open source automated testing tool, available from the Chrome DevTools Audit panel, as a
Chrome extension, or as a command line tool.
Webpage Test
Cross browser page load testing, from servers on a variety of networks and locations globally.
Page Speed Tools
Google tool to ‘help developers optimize their web pages by applying web performance best
practices’. Now with UX and mobile testing.
sonarwhal.com
Open source, customisable site testing tool, available online or from the command line.
headspin.io
Test and monitor globally on a variety of cell networks.
Charles Proxy
Web debugging proxy: can be used to adjust bandwidth and latency.
Augmented Traffic Control (ATC)
Set of open source applications maintained by Facebook that can be used to shape traffic and
emulate impaired network conditions.
jsPerf
Create, share and compare test cases.
Network Link Conditioner
Network emulation tool for OS X and iOS.
Web Developer Checklist
Checklist of requirements for high-quality web apps and sites.
Front-End-Checklist
Prioritised list of tasks and testing tools.

Libraries, package managers, frameworks…


Gulp
Front-end build tool.
Grunt
JavaScript task runner.

But be aware of Why we should stop using Grunt & Gulp.


Webpack
Module bundler.
Rollup
Module bundler.
Yeoman
‘Modern workflows for modern webapps.’
Bower
Package manager.
Modernizr
Feature detection library.
The Ultimate Guide to JavaScript Frameworks
Comprehensive list with pros and cons.
jQuery
Cross-platform JavaScript library with UI and widget plugins. But be aware of
youmightnotneedjquery.com.
Closure
JavaScript optimisation, linting and more.
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.
Sencha and Ext JS
Cross browser HTML5 web app frameworks.
Sproutcore
Web app framework.

Other stuff
lorempixel
Free placeholder images.

Specs and standards


W3C
HTML, CSS and all that.
WHATWG
‘The HTML Living Standard’.
ECMAScript
JavaScript is a dialect of this.

Updates from browser vendors


Chrome
● @ChromiumDev
● developers.google.com/web/updates
● developers.googleblog.com/search/label/web
● blog.chromium.org
● chromereleases.googleblog.com
● medium.com/dev-channel
● youtube.com/user/ChromeDevelopers
● chromestatus.com/features
● groups.google.com/a/chromium.org/forum/#!forum/blink-dev

Firefox

Safari
Opera
UC

Developer surveys
State of JS
Annual survey of developer attitudes.
State of CSS
Annual survey from the State of JS team.
Stack Overflow Developer Survey
Survey of Stack Overflow contributors.
MDN Web DNA Report
Huge annual report.

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 actual book! Nearly 20 years old, but still one of the best and most readable guides to
interface design.
JavaScript: The Good Parts
by Douglas Crockford
Anything by Crockford is good – especially his video lectures on JavaScript (slides here).

You might also like