A curated list of resources and tutorials for front-end engineers
##Table of Contents
##HTML
##CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.
###Preprocessors
##Javascript JavaScript (JS) is a dynamic computer programming language.[5] It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
###Tutorials
- Code Academy
- Professional Javascript for Web Developers (includes design patterns and best practices)
- Object oriented javascript (quick overview)
- Module design pattern
###Libraries
####jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
####YUI The Yahoo! User Interface Library is an open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting.
####D3.js D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers.
Tutorials
###Frameworks
####Angular AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.
Tutorials
- Angular-cat (great overview)
- Remastering Angular animations
- Angular in 60-ish minutes (video)
- Using Animate.css with Angular
Reading Material
- From jQuery to Angular mindset
- Why Angular over jQuery
- Recordings of Angular meetups (video)
- Angular design patterns and best practices
- Angular best practices: I've been doing it all wrong
Architecture
- Boilerplate (modified grunt tasks and server)
- Boilerplate (original and unmodified)
- Angular-app (good as reference material)
Dependencies
- Moment (angular version): Parse, validate, manipulate, and display dates in javascript
- AngularUI Router (built into boilerplate): The de-facto solution to flexible routing with nested views
Testing
####React React is a JavaScript library for building user interfaces. It's declarative, efficient, and extremely flexible. What's more, it works with the libraries and frameworks that you already know.
Tutorials
- Overview from Facebook
- Intro to the React Framework (great overview)
- Flux ToDo MVC
- React Components
- React States
- React Properties
Reading Material
Architecture
####Polymer Library that uses the latest web technologies to create custom HTML elements.
Tutorials
Reading Materials
##Node Node.js is a runtime environment and a library for running applications written in JavaScript outside the browser (for example, on the server). Node.js applications are designed to maximize throughput and efficiency, using non-blocking I/O and asynchronous events. Node.js applications run single-threaded, although Node.js uses multiple threads for file and network events. Node.js is commonly used for real time applications due to its asynchronous nature, allowing applications to display information faster for users without the need for refreshing.
###Tutorials
- Node for Beginners
- Node School
- Overview of Node with Mongo and Express
- Building a Restful API with Node and Express
- Creating a Single Page Todo App with Node and Angular
- Building a complete MVC site with node/express
- Blog rolling with mongoDB, express and Node
Reading Material
###Frameworks
###Architecture
###Templating
###Testing
##Ruby A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
###Tutorials
###Frameworks
####Rails
Tutorials
##PHP PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.
###Tutorials
###Frameworks
##Databases
####MySQL MySQL is the most popular database system used with PHP.
####MongoDB MongoDB (from "humongous") is an open-source document database, and the leading NoSQL database.
####CouchDB CouchDB is a database that completely embraces the web. Store your data with JSON documents. Access your documents and query your indexes with your web browser, via HTTP. Index, combine, and transform your documents with JavaScript. Tutorials
##UI/UX Design
###Inspiration
- Pttrns (A curated library of iPhone and iPad user interface patterns)
- Dribbble (Show and tell for designers)
- Behance (Showcase and discover creative work)
###Reading Material
- Designing Design (book)
- Thoughts on Design (book)
- Apple's Human Interface Guidelines
- Google's Material Design Guidelines
- My Dream Design Curriculum
- The Z-Axis: Designing for the Future
- UX crash course - 31 fundementals
###Resources
- Subtle Patterns (Free textures for your next web project)
- Google Fonts
- Unsplash (Free stock images)
- Unsplash with search and filtering
- Jaymantri (Free stock images)
##Workflow
-
Yeoman Generator Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.
-
JS Hint JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module.
-
Grunt Automation, performing repetitive tasks like minification, compilation, unit testing and linting.
-
Bower A package manager for the web
##Extra Resources
###Reading Material