A curated list of resources and tutorials for web developers. It entails the frontend and Backend engineering development. This will serve as a guide to everyone who is interested in web be it the design or the development details.
##Table of Contents
Please pay attention to the details of each section.
##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
###Reading Material
- Professional Javascript for Web Developers (includes design patterns and best practices)
- How does Javascript prototyping work
- Prototype vs Revealing Module Pattern
- Javascript scoping and hoisting
- Structuring a complex JSON schema
- A overview of Angular, Ember and Backbone
###Libraries
-
jQuery - Javascript library that 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 - 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.
-
Three.js - JavaScript 3D Library which makes WebGL simpler.
-
Chart.js - Simple, clean and engaging charts for designers and developers
###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.
Motivation
Getting Started
- Angular-cat
- AngularJS Tutorial: A Comprehensive 10,000 Word Guide
- Angular in 60-ish minutes (video)
- Scotch - AngularJS tutorials
- Egghead - AngularJS tutorials
- Year of - Moo AngularJS tutorials
Style
Design patterns/best practice
- Angular design patterns and best practices
- Angular best practices: I've been doing it all wrong
- Promises And Design Patterns In AngularJS
- Best Practice Recommendations for Angular App Structure (Google)
Scopes
Data modeling
Controllers
- Sharing Data Between Controllers
- The state of angularjs controllers
- Rethinking AngularJS Controllers
Directives
- A Practical Guide to Angular Directives
- Directives - difference between controller and link
- Difference between the 'controller', 'link' and 'compile' functions when defining an angular.js directive
- Angular Directive Best Practices
Services/Factories
Routing
Authentication
- Authentication in Single Page Applications
- Cookies vs Tokens. Getting auth right with Angular.JS
- NgTokenAuth - simple, secure authentication for AngularJS
- Satellizer - simple to use, end-to-end, token-based authentication module for AngularJS
Deployment
- Setting up an Angular and Node environment for development and production
- How to use environment variables in your Angular application
Angular 2.0
Testing
Misc
####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)
- React comment box Tutorial
- Flux ToDo MVC
- React Components
- React States
- React Properties
Reading Material
- Getting started with React
- Getting to know Flux
- Rethinking Best Practices (video)
- Hacker Way: Rethinking Web App Development at Facebook
Architecture
####Polymer Library that uses the latest web technologies to create custom HTML elements.
Tutorials
Reading Materials
##UI/UX Design
###Inspiration
Data visualization
###Reading Material
- Designing Design (book)
- Recommended design books
- 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
- ElemantaryOS Human Interface Guidelines
- Maintain Consistency With a Website Style Guide
###Resources
- Coolors - Color generator
- Subtle Patterns (Free textures for your next web project)
- Google Fonts
- Font Awesome (Font Awesome gives you scalable vector icons that can instantly be customized)
- Free HD videos loops for awesome landing pages
- Little Big Details - Your daily dose of design inspiration.
- Font Awesome for Illustrator
- Brand Colors
- All your free stock images in one place
####Stock Images
- Unsplash (Free stock images)
- Unsplash with search and filtering
- Aggregate of stock images
- Jaymantri (Free stock images)
- The Stocks (Free stock images)
- Travel Coffeebook (Free stock images)
- Pexels
##Workflow
####Sublime Sublime Text is a sophisticated text editor for code, markup and prose.
- Best of Sublime Text 3: Features, Plugins, and Settings
- AngularJS - AngularJS code completion, snippets, go to definition, quick panel search, and more.
- Docblockr - Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++
- HTMLBeautify - A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.
- JavascriptBeautify - js-beautify for sublime
- JSX - Language Definitions for JSX files.
- LESS - LESS syntax highlighting for Sublime Text.
- NodeJS - nodejs snippets and bindings for Sublime Text 2
- Package Control - A full-featured package manager
- Predawn - Predawn is a dark interface and syntax theme for Sublime Text.
- Sublime Linter - Interactive code linting framework for Sublime Text 3
- Setting up the .subl command in terminal
####Deployment
- 5 Common Server Setups For Your Web Application
- Setting Up A Staging Environment
- How To Set Up and Test DNS Subdomains with DigitalOcean's DNS Panel
- How To Set Up HTTP Authentication With Nginx On Ubuntu 12.10
####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.
- Writing an awesome build script with Grunt
- Making your AngularJS application grunt
- How to use environment variables in your Angular application
- Get more with LESS using Grunt
####Postman Postman helps you be more efficient while working with APIs
####Bower A package manager for the web
####Passport Simple, unobtrusive authentication for Node.js
####LESS Less extends CSS with dynamic behavior such as variables, mixins, operations and functions.
####SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
##Extra Resources
###Reading Material
##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 Beginner (book)
- Node School
- Node Async Tutorial
- Overview of Node with Mongo and Express
- Building a Restful API with Node and Express
- What is Node.js Exactly? - a beginners introduction to Nodejs
- Learn to Use the New Router in Express 4
- Creating a Single Page Todo App with Node and Angular
- Building a complete MVC site with node/express
- Easy Node Authentication Setup
- Blog rolling with mongoDB, express and Node
- Building an Angular and Express app
- Running Express.js in Production Mode
- Keep a node.js server up with Forever
- Running Express in production mode
Reading Material
- Why use Node
- Node explained (video)
- Node Control Flow
- Why use closures
- Node Best Practices
- Error Handling in Node
- Awesome Node resources
- Node.js async in practice: When to use what?
- Using $scope.$watch and $scope.$apply
- Felix's Node.js Style Guide
- Real Time Web Analytics with Node.js and Socket.IO
- Node RESTful API Authentication
- Projects, Applications, and Companies Using Node (great reference material)
- Full stack javascript with MEAN and Yeoman
- MEAN.js
- RisingStack Node.js Style Guide
- Node.js Best Practices
###Frameworks
###MEAN Stack
###Architecture
###Templating
-
Pug templating- formerly/Popularly called Jade -Pug -Learn Jade
-
Ejs templating -Embedded JavaScript templates -Effective JavaScript Templating -EJS Github Repo ###Testing
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
####MySQL MySQL is the most popular database system used with PHP. MySQL has a Javascript driver.
####MongoDB MongoDB (from "humongous") is an open-source document database, and the leading NoSQL database.
- Introduction to MongoDB
- Data Modeling
- Online Courses on mongodb- M101JS: MongoDB for Node.js Developers
- Designing MongoDB Schemas with Embedded, Non-Embedded and Bucket Structures
- MongoDB Schema Design Basics (video)
- MongoDB relationships: embed or reference
- Example and use of Mongoose virtual attributes
####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
---------------- Everything below this point is optional ----------------
####Version-control A component of software configuration management, version control, also known as revision control or source control, is the management of changes to documents, computer programs, large web sites, and other collections of information.
Use the following git command line to ope the tutorial on the web.
$ git help -g
$ git help tutorial
####Github
It is useful in commmunication or collaboration.
####frontend-guidelines
- [Bendc frontend(HTML,css,js) guideline-Adapted from Airbnb JS style guide](https://github.com/bendc/frontend-guidelines)