Resources for Learning Web Dev

• Press ctr-shift-M to preview this in the Atom editor

To see the MindMap in Atom

• We're using https://atom.io/packages/markdown-mindmap for visualization
• With Atom already installed, from a terminal run apm install markdown-mindmap -'cmd-q' to restart atom
• reopen atom
• Open this file within Atom.
• With this file in focus cmd-shift-P to open the command pallet and run mind to get the preview

General JavaScript

• UtahJS Meetups tags: [meetups]
  • 1st Saturdays - SLC JS Learners' Study Group
  • 1st Tuesdays - Ogden.js Meetups
  • 1st Tuesdays - Orem Meetups (Thanksgiving Point)
  • 3rd Saturdays - SLC JS Learners' & FreeCodeCamp Meetups
  • 3rd Tuesdays - SLC JS Learners Meetups
  • 3rd Tuesdays - UtahJS Meetup (SLC)
• UtahJS 2017 Conference - Mon, Sep 18th
  tags: [meetups]
• UtahJS Slack Channel invitation
• Front-End Developers Group (MOJO) tags: [meetups]
• Mozilla Developer Network(MDN): JavaScript
• FreeCodeCamp.com
• NodeSchool Workshoppers
• CodeWars Katas
• Project Euler challenges
• Elevator Saga tags: [games]
• WarriorJS tags: [games]
• Untrusted tags: [games]
• Fight Code tags:[competitions]
• CodeFights tags: [competitions]
• The AI Games tags: [competitions]
• Hello World Open tags: [competitions]
• The original CodeKatas
• JavaScript30
  30 Day Vanilla JS Coding Challenge
  tags: [projects, videos]
• Full Stack Radio
  tags: [podcasts]
• Front End Happy Hour
  A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.
  tags: [podcasts]
• Shop Talk Show
  An internet radio show about the internet starring Dave Rupert and Chris Coyier.
  tags: [podcasts]
• Toolsday
  Toolsday is a 20-ish-minute podcast about the latest in tech tools, tips, and tricks on Tuesdays at 2! (Our alliteration game is so strong). The podcast is brought to you by Chris Dhanaraj and Una Kravets.
  tags: [podcasts]
• IRL
  Host Veronica Belmont shares real stories of life online and real talk about the future of the Web.
  IRL is an original podcast from Mozilla.
  tags: [podcasts]

ES6 / EcmaScript 2015

• FunFunFunction: ES6 JavaScript Features
  tags: [videos]

Functional JS

• FunFunFunction: Functional programming in JavaScript
  tags: [videos]

HTML

• Mozilla Developer Network (MDN): HTML

CSS

• Mozilla Developer Network (MDN): CSS
• Don't use flexbox for overall page layout When, where, and how to use Flexbox vs CSS Grid

CSS Grid

• Grid Garden
  A game for learning CSS grid layout
• moz://a css grid includes demos, how to use Firefox's DevTools, & additional resources

Flexbox

• Flexbox Froggy A game where you help Froggy and friends by writing CSS code!
• Flexbox Defense
• Flexy Boxes
• Solved by Flexbox
• Flexbox Cheatsheet

Git

• Michael Schwern's Excellent Explanation of Git - with toys
• Udacity How to Use Git and Github
• generate a gitignore file for your setup
• 'git commit' Wording Guidelines

GitHub

• GitHub's own tutorial

BitBucket

• Atlassian's git tutorial

A11y

• The A11Y Project: Resources
• Front End Happy Hour: a11y Cocktail
• ShopTalk: 272 Color Accessibility with Geri Coady #podcast

RegExp

• RegexOne
• tryregex

Command Line (CLI)

Bash

• Using the command line aka terminal or CMD
• Using bash on Windows 10
• codecademy: Learn the Command Line
• Learn Enough Command Line to Be Dangerous
• learn linux the hard way

zsh (z-shell)

• Command Line Power User

Node

• Utah Node.js - Salt Lake City Meetup
• learnyounode

The Hard Way

Originally only Python

• learn python the hard way

Markdown

• Markdown tutorial
• Github markdown guide

JavaScript Frameworks

• HINT: Don't try to learn multiple frameworks at one time. Get comfortable with vanilla JS, then learn a single framework, and only then should you add a second framework or a second language.

Angular

• Angular Utah Meetup
  tags: [meetups]
• Free AngularJS Class

React

• ReactJS Utah
  tags: [meetups]
• Official React Docs
  Offical React Docs, contains some tutorials as well as the API
• ReactCasts with @cassiozen
  Biweekly, short React screencasts containing tips, tricks and tutorials.
  tags: [video, series, mid-level]
• React Express
  An all-in-one guide to modern React application development
• SurviveJS React Guide
  This is the free online version of the book
• create-react-app
  CLI tool used to set up React project, very useful, as setting up a dev environment for React can be complicated.

Vue