Origins from Jon Schoning, Sam Liao, Faraz Fallahi, Kevin Whinnery, Eric Elliot

Share it on Stumbleupon, Tumblr, Reddit

Digital Ocean: $10 Credit by using this link — — Digital Ocean: $10 Credit by using this link

Getting Started with JavaScript and Web Technologies

Today, we’ll be working to understand how to create a web page using the technologies of the web browser, namely HTML, CSS, and (mostly) JavaScript.

Reference Resources

Arguably the best resource for documentation on the “web platform” (HTML, CSS, and JavaScript) is found on the Mozilla Developer Network. Here are the technologies we will be using:

Hypertext Markup Language (HTML)

HTML defines the structure and contents of a web page. Use HTML tags to display content on a web page.

Overview | Beginner’s Guide | Full Reference Documentation

Cascading Style Sheets (CSS)

CSS defines the style and presentation of a web page. Use CSS to define how HTML elements look.

Overview | Beginner’s Guide | Full Reference Documentation

JavaScript

JavaScript defines the behavior of a web page. Use JavaScript to react to mouse clicks and other user interactions.

Overview | Beginner’s Guide | Full Reference Documentation

Further Reading and Resources

Books

Websites

Codecademy: Accessible tutorials for JavaScript, HTML, CSS and many programming languages

Code Combat: Learn JavaScript by playing a game

Tools and Technologies

Programming Text Editors

CodePen: Web page to play around with HTML, CSS, and JavaScript

JSFiddle: Web page to play around with HTML, CSS, and JavaScript

Sublime Text: Cross-platform text editor

Notepad++: Windows-only free text editor

TextMate 2: Mac-only text editor

Hosting

Site44: Host static web pages on Dropbox

Heroku: Hosting for full web apps (advanced, but arguably the easiest way to deploy dynamic web apps)

Advanced Tools and Debuggers

Chrome Developer Tools: Debug and inspect the contents of your web page in the Google Chrome browser.

Firefox Developer Tools:Debug and inspect the contents of your web page in the Firefox browser.

Meta-Lists

Graphics Programming

Language Agnostic

Android

Autotools

ASP.NET MVC

Assembly Language

Bash

C / C++

Clojure

CoffeeScript

ColdFusion

D / DTrace

DB2

Delphi / Pascal

Django

Emacs

Erlang

Flex

F Sharp

Forth

Git

Go

Grails

Haskell

HTML / CSS

Java

JavaScript

JavaScript (Node.js specific)

LaTeX

Linux

Lisp

Lua

Programming In Lua (for version 5)

Mathematica

Maven

Mercurial

.NET (C# / VB / Nemerle / Visual Studio)

NoSQL

Oberon

Objective-C

OCaml

Oracle Server

Oracle PL/SQL

Parrot / Perl 6

Using Perl 6 (work in progress)

Perl

PHP

PowerShell

Prolog

PostgreSQL

Python

R

Ruby

Ruby on Rails

Rust

Scala

Scheme

Sed

Smalltalk

Subversion

SQL (implementation agnostic)

Teradata

Vim

Websphere

Windows Phone

Required Reading (Online resources)

Required Viewing

Exercises

FreeCodeCamp Learn to build apps & work on not-for-profit projects. #exercises

LearnRx #exercises

Spec

ES5 Spec An annotated, hyperlinked version of the ES5 spec

ES6 Spec ECMAScript® 2015 Language Specification

Books

Dev tools & collaboration

nvm First install this…

Node Then install Node (with nvm). You’ll need this even if you’re a front-end dev.

npm Install lots of other things with npm. The package manager for JavaScript. Comes with Node.

Comes with Node. Atom Nice, hackable editor by GitHub.

Node Inspector Debug Node code with the Chrome debug tools — save-live-edit true

TraceGL Powerful runtime analysis of live JavaScript code

Tern Static analysis in JavaScript

JSDoc Pair with Tern for static analysis

Slate Generate beautiful API docs for your apps

Slack Chat for teams, with GitHub and Google hangouts integration

Gitter Like Slack, but better for OSS projects and free chat.

Airety Better developer interviews via pair programming.

PrettyDiff

Babel Repl The Babel REPL with compiled output

Nitrous.IO Online IDE in the cloud with collaboration & Docker containers

Koding Online cloud development platform with video & audio collaboration

Building

Testing / Lint / Quality checkers

ESLint The pluggable linting utility for JavaScript and JSX.

JSCS Linter with a focus on automatic fixes and built-in style guide presets.

babel-eslint Allow ES6 features to pass ESLint.

eslint-plugin-no-class Forbid the ES6 class keyword. Why?

ESLint no-inferred-methodname A custom rule for a common problem. #code

Istanbul Code coverage reporting

tape Dead simple unit testing #code

faucet Prettify unit testing output (like what comes from tape).

Supertest The best way to test HTTP endpoints.

Transpilers

Babel Transpile ES2015 (ES6), ES7 to ES5, JSX to React.

TypeScript TypeScript’s structural types are worth a look, but I don’t use it.

Emscripten Frequently used for C/C++ JavaScript ports.

ES6 tools Addy Osmani’s ES6 Tools list.

JavaScript environments

Node.js Server side JavaScript and more

News

Contests

DemoJS The JavaScript demoscene party

JS1k JavaScript demos in 1k of memory

JS13k Games JavaScript games in 13k of memory

FightCode game program virtual battle bots and climb the leaderboard

Node Knockout The legendary Node competition

List by Jon Schoning, Sam Liao, Faraz Fallahi, Kevin Whinnery, Eric Elliot

The MIT License (MIT) Copyright (c) 2015 Eric Elliott Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the “Software”), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.