Web Development Resources

From Noisebridge
(Difference between revisions)
Jump to: navigation, search
(HTML)
(39 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
== About ==
 +
This page is a collection of web development resources used by [[JavaScript|JavaScript Class]] and [[Front-end Web Development|Front-end Web Development]].
 +
 
== HTML ==
 
== HTML ==
* [validator.w3.org W3C Validation Service]
+
* [http://validator.w3.org W3C Validation Service]
  
* [http://html5boilerplate.com/ HTML5 Boilerplate] - Popular website template
+
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/ HTML Living Standard] HTML5
 +
* [https://hsivonen.fi/doctype/ Activating Browser Modes with Doctype]
 
* [http://html5doctor.com/ HTML5 Doctor] - Articles on the latest additions to HTML5
 
* [http://html5doctor.com/ HTML5 Doctor] - Articles on the latest additions to HTML5
 +
* [http://html5boilerplate.com/ HTML5 Boilerplate] - Popular website template
 +
 +
* [http://www.whatwg.org/mailing-list WHATWG Mailing Lists] Email list for HTML5.
  
 
== CSS ==
 
== CSS ==
* [http://www.colorzilla.com/gradient-editor/ ColorZilla CSS Gradient Editor] - GUI for creating CSS3 gradients
+
* [http://www.w3.org/Style/CSS/current-work.en.html CSS Spec­i­fi­ca­tions]
 +
* [http://jigsaw.w3.org/css-validator/ W3C CSS Validator]
 +
* [http://www.cssdrive.com/imagepalette/ CSS Image to Colors Palette Generator] - Create a color palette from an image
 +
* [http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator] - GUI for creating cross-browser CSS3 gradients
 
* [http://www.csszengarden.com/ CSS Zen Garden] - Demonstrates the flexibility of CSS-based design
 
* [http://www.csszengarden.com/ CSS Zen Garden] - Demonstrates the flexibility of CSS-based design
* [http://www.brothercake.com/dustmeselectors/ Dust-Me Selectors] - Detects unused rules in your stylesheets
 
 
* [http://necolas.github.io/normalize.css/ Normalize.css] - Makes user agent stylesheets more consistent and modern
 
* [http://necolas.github.io/normalize.css/ Normalize.css] - Makes user agent stylesheets more consistent and modern
 +
* [https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ Dust Me CSS Selectors ] - Detects unused rules in your stylesheets ([http://www.brothercake.com/dustmeselectors/ homepage]).
 
* [http://sass-lang.com/ Sass] - Stylesheet preprocessor language with variables, nesting, mixins, and more
 
* [http://sass-lang.com/ Sass] - Stylesheet preprocessor language with variables, nesting, mixins, and more
 +
* [http://pumpula.net/p/apps/css-vocabulary/ CSS Vocabulary] - An interactive dictionary of CSS terminology.
 +
 +
== JavaScript ==
 +
=== Tutorial ===
 +
* [http://eloquentjavascript.net Eloquent JavaScript: A Modern Introduction to Programming]
 +
* [http://domenlightenment.com DOM Enlightenment] by Cody Lindley
 +
* [http://ejohn.org/apps/learn/ Learning Advanced JavaScript] by John Resig
 +
* [http://kangax.github.io/nfe Named function expressions demystified]
 +
* [http://jsfaq.org/notes/closures/ Javascript Closures]
 +
 +
=== Reference ===
 +
* [http://ecma-international.org/ecma-262/5.1/ ECMAScript® Language Specification]
 +
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript JavaScript | MDN] Mozilla Developer Network
 +
* [https://developer.mozilla.org/en-US/learn/javascript Learn JavaScript MDN] Mozilla Developer Network
 +
* [http://jsfaq.com/faq/ FAQ and Notes for comp.lang.javascript]
 +
* [http://www.w3.org/TR/DOM-Level-3-Core/ W3C DOM Level 3, Core]
 +
* [http://www.w3.org/TR/DOM-Level-2-Events/ W3C DOM Level 2 Events]
 +
* [http://www.w3.org/TR/DOM-Level-3-Events/ W3C DOM Level 3 Events Working Draft]
 +
 +
=== Video ===
 +
* [http://www.youtube.com/watch?v=EkluES9Rvak Demystifying Regular Expressions] by Lea Verou
 +
 +
=== Newsgroup / Forum ===
 +
* [https://groups.google.com/d/forum/jsmentors JS Mentors Google Group]
 +
* [https://groups.google.com/d/forum/comp.lang.javascript comp.lang.javascript]
  
 
== JavaScript libraries ==
 
== JavaScript libraries ==
 +
No JavaScript libraries are endorsed in JavaScript Class this group. If you want help with using a library, visit that library's discussion group instead.
 
* [http://angularjs.org/ AngularJS] - Directive-based MVC framework
 
* [http://angularjs.org/ AngularJS] - Directive-based MVC framework
 
* [http://backbonejs.org/ Backbone.js] - Barebones MVC framework
 
* [http://backbonejs.org/ Backbone.js] - Barebones MVC framework
 
* [http://emberjs.com/ Ember.js] - Handlebars-based MVC framework
 
* [http://emberjs.com/ Ember.js] - Handlebars-based MVC framework
 
* [http://jquery.com/ jQuery] - Downloads and documentation for the most popular web framework
 
* [http://jquery.com/ jQuery] - Downloads and documentation for the most popular web framework
 +
* [http://modernizr.com/ Modernizr] - JS feature-detection library
  
 
== Browser support ==
 
== Browser support ==
Line 23: Line 60:
 
* [http://css3please.com/ CSS3 Please] - Easy vendor prefixing page for popular CSS3 features
 
* [http://css3please.com/ CSS3 Please] - Easy vendor prefixing page for popular CSS3 features
 
* [http://html5please.com/ HTML5 Please] - Whether to use the latest in HTML5
 
* [http://html5please.com/ HTML5 Please] - Whether to use the latest in HTML5
* [http://modernizr.com/ Modernizr] - JS feature-detection library
 
  
 
== Web applications ==
 
== Web applications ==
 
* [https://www.djangoproject.com/ Django] - Python-based web app framework
 
* [https://www.djangoproject.com/ Django] - Python-based web app framework
* [http://gruntjs.com/ Grunt] - JavaScript-based preprocessor
+
* [http://expressjs.com/ Express] - Straightforward JavaScript web app framework
 +
* [http://gruntjs.com/ Grunt] - JavaScript-based workflow tool
 
* [http://middlemanapp.com/ Middleman] - Ruby-based front-end workflow app
 
* [http://middlemanapp.com/ Middleman] - Ruby-based front-end workflow app
 
* [http://rubyonrails.org/ Ruby on Rails] - Wildly popular Ruby-based web app framework
 
* [http://rubyonrails.org/ Ruby on Rails] - Wildly popular Ruby-based web app framework
Line 39: Line 76:
  
 
== Quiz ==
 
== Quiz ==
* [http://perfectionkills.com/javascript-quiz/ JavaScript Quiz, by Kangax]
+
* [http://perfectionkills.com/javascript-quiz/ JavaScript Quiz], by Kangax
* [http://davidshariff.com/quiz/ Front End Web Development Quiz, by David Sharriff]
+
* [http://davidshariff.com/quiz/ Front End Web Development Quiz], by David Sharriff
 +
* [http://jeffreyatw.com/static/frontend/series5/class18/assignment.html Front-end Web Development Quiz], by [[User:JeffreyATW|Jeffrey Carl Faden]]
 +
* [http://dmitrysoshnikov.com/ecmascript/the-quiz/ ECMA-262, The Quiz], by Dmitry Soshnikov (covers Ecma-262 r3).
  
 
== Documentation ==
 
== Documentation ==

Revision as of 12:21, 23 April 2014

Contents

About

This page is a collection of web development resources used by JavaScript Class and Front-end Web Development.

HTML

CSS

JavaScript

Tutorial

Reference

Video

Newsgroup / Forum

JavaScript libraries

No JavaScript libraries are endorsed in JavaScript Class this group. If you want help with using a library, visit that library's discussion group instead.

  • AngularJS - Directive-based MVC framework
  • Backbone.js - Barebones MVC framework
  • Ember.js - Handlebars-based MVC framework
  • jQuery - Downloads and documentation for the most popular web framework
  • Modernizr - JS feature-detection library

Browser support

  • Autoprefixer - Preprocesses stylesheets and adds vendor prefixes
  • Can I use... - Worldwide browser support percentages for new technologies
  • CSS3 Please - Easy vendor prefixing page for popular CSS3 features
  • HTML5 Please - Whether to use the latest in HTML5

Web applications

  • Django - Python-based web app framework
  • Express - Straightforward JavaScript web app framework
  • Grunt - JavaScript-based workflow tool
  • Middleman - Ruby-based front-end workflow app
  • Ruby on Rails - Wildly popular Ruby-based web app framework
  • Yeoman - JavaScript-based front-end workflow app

General

Quiz

Documentation

Online schools

Personal tools