frontend-resources.md

Front-End Resources

Join Women Who Code NYC for a Front-end Study Group meetup!

If you're just starting off, learn HTML and CSS first - you'll need to be comfortable with both when you get to JavaScript. All resources are free unless otherwise specified.

HTML & CSS

• For Beginners

  • HTML & CSS (Codecademy) - a great intro to HTML and CSS fundamentals, has exercises that work right in your browser.
  • Dash (General Assembly) - similar to Codecademy, but project-based and takes you through HTML, CSS, and JavaScript - all in your browser.
  • Video: Intro to HTML/CSS: Making Webpages (Khan Academy) - in-browser exercises. No sign-up required.
  • Book: Learn to Code HTML & CSS (Shay Howe) - online book that covers concepts in-depth while building a project/website. Covers the box model, positioning content, lists, media, forms, and more.

• Intermediate and Advanced Topics

  • Learn CSS Layout (Learn Layout) - all about layouts using CSS, has tons of helpful visual examples.
  • Visual Guide to CSS3 Flexbox (scotch.io) - current (as of Aug. 2015) flexbox properties. Also has a flexbox builder.
  • Video: Responsive Web Design Fundamentals (Udacity) - most exercises will be completed locally on your own computer. Create your own responsive web page that works well on any device.
  • Video: Responsive Images (Udacity) - local exercises. Learn how to work with images on the modern web, so that your images look great and load quickly on any device.

• Preprocessors - help you write more powerful and organized CSS

  • How to Choose the Right CSS Preprocessor (Team Treehouse)
  • Sass
    • The Sass Way - blog and site with useful Sass tricks and tutorials.
  • Less
  • Stylus

• HTML & CSS Frameworks - great for creating functional prototypes or building pages quickly.

  • Bootstrap vs. Foundation (Team Treehouse) - a quick article about the 2 most popular frameworks and which you should use.
  • Bootstrap
  • Foundation

JavaScript

• Vanilla JavaScript

  • JavaScript Road Trip (Code School) - breaks down JavaScript and starts at the beginning for non-programmers (vars, data types, etc.). *Requires subscription after part 1, but it's a great intro if you've never done any programming before.
  • JavaScript Basics (Team Treehouse) - Treehouse has tons of JavaScript courses from basics, to OOP, to jQuery, AJAX, Ember, etc. *Requires subscription or sign up for free with a Queens Library (QL card requires NYS address, not just Queens addresses)
  • Dash (General Assembly) - see HTML/CSS section.
  • Book: Eloquent JavaScript (Marijn Haverbeke) - online book, step-by-step introductions to basic JavaScript. One of the most frequently recommended books for JavaScript.
  • Project: JavaScript and CSS3 Calculator (CodePlayer) - watch this to see how to make a calculator from start to finish.
  • Project: Integer to Roman Numberals

• JavaScript Frameworks

  • Learning JavaScript Design Patterns - for advanced framework projects

  • jQuery

    • jQuery (Codecademy) - breaks down jQuery basics into understandable parts, works in-browser
    • Video: Try jQuery (Code School) - some overlap with Codecademy but covers more topics like searching and traversing the DOM.

  • Angular

    • Project: PhoneCat Tutorial App (AngularJS) - official Angular tutorial, walks you through the construction of an Angular JS web app.
    • Learn Angular JS (Codecademy) - works in your browser, builds web apps using Angular JS 1.x.
    • Angular JS-Learning (jmcunningham) - a bunch of links to blog posts, articles, videos, etc for learning Angular.
    • Create a TV Show Tracker using AngularJS, Node.js and MongoDB - This tutorial will show you how to build a REST API with Express, authentication and signup process with Passport, create and retrieve data from MongoDB using Mongoose

  • Backbone

    • Project: Build a Contacts Manager (Dan Wellman) - "In this tutorial, we're going to look at building a fully functional contacts manager using Backbone.js, Underscore.js, and jQuery. We'll take a look at the basic components that make Backbone tick as well as some of the convenience methods exposed by Underscore."

  • Ember

    • Project: Guide to Building Your First Ember.js App (Balint Erdi) - "we’ll build a simple Ember application to catalog your music collection." Free screencast series from Balint Erdi.
    • Warming Up With Ember.js (Code School) - breaks down Ember and builds an application from scratch using Ember and Twitter Bootstrap. *Requires subscription after level 1.
    • Ember Weekly - for the latest Ember news, articles, and tutorials.

  • React

    • Video: React Fundamentals (Egghead.io)
    • React Flux (Egghead.io) - learn practical, real-world React development.

  • Meteor (front-end and back-end platform)

    • Meteor NY - New York-based meetup

  • Famo.us

    • Famo.us is free, open source, Javascript Framework that helps create smooth, complex UIs for any screen.