Web Documentation

https://developer.mozilla.org/en-US/
https://developer.mozilla.org/en-US/docs/Learn (Learn web development from MDN docs)
https://developer.mozilla.org/en-US/docs/Web

Basic HTML and CSS
https://www.w3schools.com/html/default.asp https://www.w3schools.com/css/default.asp

JavaScript (Also known as Vanilla JS)

https://www.w3schools.com/js/default.asp

JS HTML Document Object Model (DOM) https://www.w3schools.com/js/js_htmldom.asp

JS Browser DOM https://www.w3schools.com/js/js_window.asp

Bootstrap 4

W3-Schools Guide - https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.4/getting-started/introduction/

Bootstrap components - https://getbootstrap.com/docs/4.4/components/alerts/

Editor exclusively for bootstrap

https://www.itwonders-web.com/tools/bootstrap4-editor

Bootstrap Studio -https://getintopc.com/softwares/website-design/bootstrap-studio-pro-free-download/

How to install bootstrap studio https://unique-tutorials.info/how-to-install-bootstrap-studio-pro-without-errors-4/

Modern Web and Implementation

https://whatwebcando.today/

What is a full stack developer? https://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/
Wait, Wait… What is a Full-stack Web Developer After All? https://edward-designer.com/web/full-stack-web-developer/
The Myth of the Full-stack Developer https://www.andyshora.com/full-stack-developers.html
Multitier Architecture https://en.wikipedia.org/wiki/Multitier_architecture
What is the 3-Tier Architecture? http://www.tonymarston.net/php-mysql/3-tier-architecture.html

Package documentation https://docs.npmjs.com/creating-a-package-json-file

Node lite-server https://github.com/johnpapa/lite-server

Node API Documentation https://nodejs.org/api/

Top Front end frameworks https://www.keycdn.com/blog/frontend-frameworks

Comparing top 5 frontend web frameworks https://www.sitepoint.com/most-popular-frontend-frameworks-compared/

Bootstrap 4 Grid https://getbootstrap.com/docs/4.1/layout/grid/

                                                 Viewport 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The viewportmeta tag:–

• Ensures that the screen width is set to the device width and the content is rendered with this width in mind.
• Designing the websites to be responsive to the size of the viewport

Latest Bootstrap version uses CSS-flexbox layout.

Difference between container and container-fluid classes https://medium.com/@vikrantrana1993/difference-between-container-and-container-fluid-in-bootstrap-3330832abf87

CSS3 Flexbox - W3 https://www.w3.org/TR/css-flexbox/

Visual guide to flexbox properties https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Bootstrap 4 - regular v/s flex-grid https://tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid

Navigation & Breadcrumbs

https://neilpatel.com/blog/common-website-navigation-mistakes/

https://www.hongkiat.com/blog/navigation-design-ideas-inspiration/

https://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/

https://www.woorank.com/en/blog/breadcrumb-navigation-a-guide-to-types-benefits-and-best-practices

https://www.webfx.com/blog/web-design/information-architecture-101-techniques-and-best-practices/

https://www.steptwo.com.au/papers/kmc_whatisinfoarch/

https://www.webmonkey.com/

UI - Info Arch

http://www.jjg.net/ia/visvocab/

http://www.jjg.net/elements/

http://www.amazon.com/The-Elements-User-Experience-User-Centered/dp/0321683684/ref=pd_cp_14_1?ie=UTF8&refRID=0RXJWKFHY0TNF5QM2764

Buttons

https://css-tricks.com/use-button-element/

https://davidwalsh.name/html5-buttons

UI Design and Prototyping

https://wireframe.cc/

https://moqups.com/

http://www.axure.com/

https://proto.io/

http://framerjs.com/

http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

http://www.webdesign-inspiration.com/

https://onextrapixel.com/free-bootstrap-wireframing-set-for-powerpoint/

UI Templates

http://expo.getbootstrap.com/

Ionic Framework - https://ionicframework.com/

Less and Sass Resources

Less Getting Started - http://lesscss.org/

https://scotch.io/tutorials/getting-started-with-less

Less NPM Package - https://www.npmjs.com/package/less

Sass Basics - http://sass-lang.com/guide

https://scotch.io/tutorials/getting-started-with-sass

Node-SASS NPM Package - https://www.npmjs.com/package/node-sass

Why npm Scripts? - https://css-tricks.com/why-npm-scripts/

How to Use npm as a Build Tool - https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

The Command Line for Web Design - https://webdesign.tutsplus.com/series/the-command-line-for-web-design--cms-777

NPM Modules

• onchange
• parallelshell
• rimraf
• copyfiles
• imagemin-cli
• usemin-cli
• cssmin
• uglifyjs
• htmlmin

Grunt Resources

• Grunt - http://gruntjs.com/
• Writing an Awesome Build Script with Grunt - http://www.sitepoint.com/writing-awesome-build-script-grunt/
• Clean Grunt - http://anders.janmyr.com/2014/01/clean-grunt.html
• File Globbing - http://gruntjs.com/configuring-tasks#globbing-patterns
• The Command Line for Web Design: Automation With Grunt - https://webdesign.tutsplus.com/tutorials/the-command-line-for-web-design-automation-with-grunt--cms-23454

Grunt Plugins

• grunt-contrib-jshint
• jshint-stylish
• grunt-contrib-copy
• grunt-contrib-clean
• grunt-usemin
• grunt-contrib-concat
• grunt-contrib-cssmin
• grunt-contrib-htmlmin
• grunt-contrib-uglify
• grunt-filerev

Gulp Resources

• Gulp - http://gulpjs.com/
• An Introduction to Gulp.js - http://www.sitepoint.com/introduction-gulp-js/
• Getting started with gulp - https://markgoodyear.com/2014/01/getting-started-with-gulp/
• Building with Gulp - http://www.smashingmagazine.com/2014/06/building-with-gulp/
• The Command Line for Web Design: Automation with Gulp - https://webdesign.tutsplus.com/tutorials/the-command-line-for-web-design-automation-with-gulp--cms-23642

Gulp Plugins

• gulp
• gulp-sass
• browser-sync
• del
• gulp-imagemin
• gulp-uglify
• gulp-usemin
• gulp-rev
• gulp-clean-css
• gulp-flatmap
• gulp-htmlmin

Tasks

• Minification - https://en.wikipedia.org/wiki/Minification_(programming)
• UglifyJS - http://lisperator.net/uglifyjs/
• JSHint - http://jshint.com/

General Resources

• Node, Grunt, Bower and Yeoman - A Modern web dev's Toolkit - http://juristr.com/blog/2014/08/node-grunt-yeoman-bower/
• The Advantages of Using Task Runners - https://www.dbswebsite.com/blog/2015/02/24/the-advantages-of-using-task-runners/
• Gulp vs Grunt. Why one? Why the Other? - https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4
• Why we should stop using Grunt & Gulp - http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/
• Why I Left Gulp and Grunt for npm Scripts - https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8