Learning resources

Here you will find information about and links to learning resources that you will use in this course.

Developer tools

• Visual Studio Code (info, download)
  • Getting started docs
• Browsers (current versions of Chrome, Firefox, Safari, Opera, Edge)
• Browser dev tools
• HTTP inspector (e.g. Thunder Client)
• Plunker
• jsFiddle
• jsBin
• Other dev tools will be introduced as we make progress through the weekly topics

You will need one or more devices. A College or personal desktop or laptop, and (likely) a personal mobile device (e.g. a smartphone).

Required textbook

None. This is a web programming course therefore, the best source for content is on the web!

Required online resources

There are several required online resources:

• The Mozilla Developer Network MDN Web Docs web site is vast, with thousands of documents. It is a trusted and authoritative source for web developer information. Of interest:

• HTML5 Guide, including HTML Forms Guide, and the HTML5 Element List

• CSS Reference

• JavaScript Reference

  • JavaScript Reference
  • (Also suggested) You Don't Know JavaScript

• DOM Reference

In October 2017, Microsoft, Google, and the W3C committed to making MDN Web Docs the single authoritative source for web developer documentation.
Read more about this in an article by Ali Spivak.

Others:

• Bootstrap (version 3) CSS documentation
  Links to other topics (e.g. Getting started, etc.) are on that page

• Official Next.js Documentation

• Node Reference

  • Node.js Documentation
  • (Suggested) nodejitsu

• Express.js Documentation

• TypesScript Reference

Oh, and you should must know (and love!) the series of RFCs that describe HTTP, 7230 through 7235. If you want a friendlier introduction to HTTP, read its Wikipedia article.

Other resources

• W3C Standards

• Google web developers content

Front end frameworks

• React
• Next.js

Alternatives:

• Angular (which is NOT AngularJS, a legacy technology)
• Vue
• and many others...

State management

• JSON data API - jsonplaceholder

HTML and CSS

• CSS Selectors - MDN
• CSS Attribute Selectors - MDN

Visual Studio Code tips and info

Start VS Code from the command line

Make sure that you're in your project folder.
Then type this command: code .

NOTE: This assumes that your computer is configured to run this command. See the Running VS Code on Mac to configure that feature.

Useful keyboard shortcuts

Trigger IntelliSense: Control + Space

Toggle comments on/off: Command + /

Reformat document: Shift + Option + Command + F

Show/hide left-side bar: Command + B

Show/hide terminal: Control + (back-tick)

Markdown preview pane toggle on/off: Command + K, V

Useful Emmet snippets

For most elements, just begin typing the element name, without the angle bracket.

. Declare class(es), e.g. div.row

# Declare unique identifier, e.g. table#customers

> Child, e.g. div>p

* Multiplier, e.g. ul>li*5

( ) Grouping, often used with multiplier

+ Sibling, e.g. div>h3+p*3

{blahblah} Text content for an element, e.g. h3{Hello, world!}

[ Custom attribute, e.g. span[data-bind

See the Emmet cheat sheet for full coverage.