Most of what you'll need for JavaScript can be found at these sites:

  *https://developer.mozilla.or/en-US/doc/Web
  and
  *https://www.w3schools.com.

  Also, search for The Net Ninja on YouTube and browse his playlist for JavaScript.

Notes on JavaScript (What I Should Know and What to Avoid):

-Know proper scope.
-Understand the relationship between: objects <-> functions <-> closures.
-Arrow Functions (=>):
    -wesbos.com/arrow-functions
    -developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    -javascriptkit.com/javatutors/javascriptarrowfunctions.shtml - Excellent resource and example. Use as cheat sheet.
    -javascriptkit.com/javatutors/javascriptarrowfunctions2.shtml - Excellent resource and example. Use as cheat sheet
-Arrow functions are anonymous functions, cannot be used as a constructor function (i.e., 'new'), and lexical binding of 'this' inside arrow function (The value of this inside an arrow function always points to the same this object of the scope the function is defined in, and never changes). The arrow function declaration syntax redefines 'this' binding to a 'lexical this.'
-Places where anonymous functions normally reign, as call back functions inside event handlers, prebuilt JavaScript methods and inside your own functions. 
-The "this" object is lexically bound inside Arrow Functions, and it cannot be modified.
-Know how to use Timers and Regular Expressions.
-Prototypal inheritance (also: prototypes, OLOO). The .prototype is a type of inheritance in JS.
-Understand the programming paradim.
-Understand classical (rarely used) and prototypical inheritance. Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition. Three types of prototypical inheritance: delegation, concatenative, functional.
-In JavaScript objects retain a pointer to the prototype.
-Document Object Model. This model allows JavaScript to access the text content and elements of the website document as objects.
-If return value is not specified, then undefined is returned. If the function is invoked with new and the return value is not an object, then this (the new object) is returned.
-Prototype is a property of constructor functions, not instances. array with each value that the function returns.
-Promises: A promise is an object that may produce a single value sometime in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection (https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261).
-Closures: A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. To use a closure, simply define a function inside another function and expose it. To expose a function, return it or pass it to another function. The inner function will have access to the variables in the outer function scope, even after the outer function has returned (https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36).
-map : This method takes a function as an argument and invokes the function on each item in an array, then creates a new
-Null is for an object, undefined is for a property, method or variable.
-A function declared with: function myFunction (arg1, arg2){} can be used by any code in the file no matter its location (before or after the function declaration). A function declared with the variable assignment syntax (var myobj = function() { … ) can only be used by code that executes after the assignment statement that declares the function.
-Never use 'for each' to iterate thru an array: only use for each when needing to iterated thru object properties and methods.
    -for each (var myVar in myObject) iterates a specified variable over all values of object’s properties.
    -for (var myVar in myObject) iterates a specified variable over all the properties of an object, in arbitrary order.
    -The for...in loop does not iterate over built-in properties. For each distinct property the code is executed
    -for (var 1=0; i < myArray.length; i++) iterates thru all the elements of an array.
-Never use eval.
-Avoid class hierarchies.
-Avoid brittle base class problem.
-Avoid tight coupling.
-Avoid creating functions in loops. It will lead to bad behavior.
-Avoid rigid taxonomy (forced is-a relationships that are eventually wrong for new use cases).-Avoid the gorilla banana problem (“what you wanted was a banana, what you got was a gorilla holding the banana, and the entire jungle”).
-Avoid using functions within loops. For example:
     for (var i = 0; i < 3; i++) {
       arr.push(
         function() {
           console.log(i);
         }
       )
     }
-Variable names that are introduced as parameter names are local to the function (e.g., function tim(x, y) { …, so x and y are local scope).
-Never use a javascript method or property name as the value for an ID. And, when you’re coding the javascript, avoid giving variables names that are ID values in the (X)HTML.
-Beware of hard line breaks in JavaScript. Line breaks are interpreted as line-ending semicolons. Even in a string, if you include a hard line break in between quotes you’ll get a parse error (unterminated string):
    let bad = '<ul id="myId">
     <li>some text</li>
     <li>more text</li>
     </ul>'; // unterminated string error

    let good = '<ul id="myId">' +
     '<li>some text</li>' +
     '<li>more text</li>' +
     '</ul>'; //correct
-Understand and know how to address shared state, different things competing for the same resources.
-Have an idea of monolithic vs microservice architectures
-Understand and be aware of side-effects.
-Scope :
    -pierrespring.com/2010/05/11/function-scope-and-lexical-scoping
    -en.wikipedia.org/wiki/Scope_(computer_science) (see lexical vs dynamic section).
-Lexical scope - within the language it was defined (function afunc { x = 5 } so, 'x' is defined within the afunc function.
-JavaScript is Lexical scope. For example,
    x=1
    function g () { console.log(x) ; x=2; } //setting x=2 changes the global x
    function f () { let x=3; g() }
    f(); //outputs 1. If dynamic scope then would output 3
    console.log('at end: ' + x) //outputs 2. If dynamic scope then would output 1
-Closures:
    -Closures allow variable scope to be extended past the common scope restrictions of functions. From:
    -www.webpagefx.com/blog/web-design/6-advanced-javascript-techniques-you-should-know (#1)
    -www.jibbering.com/faq/faq_notes/closures.html
-Implicit and explicit return: wesbos.com/arrow-functions
-Know type coercions and when to use == and when to use === .
-Classes :
    googlechrome.github.io/samples/classes-es6/index.html
-Getter and Setter:
    developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
-Promises (.then, .catch):
    -designingforscale.com/javascript-promises-demystified
    -developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
    -developers.google.com/web/fundamentals/primers/promises
    -github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md
-Hoisting : designingforscale.com/understanding-hoisting-in-javascript
-JS async/await: tutorialzine.com/2017/07/javascript-async-await-explained
-Apply(), Call(), Bind() (function calling):
    -stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply/1986909#1986909
    -developer.telerik.com/topics/web-development/what-is-this-in-javascript - READ (27 Feb 18)
    -developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
    The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method.
    Use apply if you don't know the number of arguments you will be passing, or if they are already in an array or array-like object (like the arguments object to
    forward your own arguments. Use call otherwise, since there's no need to wrap the arguments in an array. Here's a good mnemonic. Apply uses Arrays and Always takes one or two
    Arguments. When you use Call you have to Count the number of arguments. In a nutshell: call() accepts an argument list, while apply()accepts a single array of arguments.
      function func(message) { ... }
      func.call(receiver, "test");
      func.apply(receiver, ["test"]);

My JavaScript Notes, Best Practices, Do and Don't (from articles, sites, etc…)

-Find one proper style and stick with it throughout:
      google.github.io/styleguide/javascriptguide.xml
      github.com/rwaldron/idiomatic.js
-Objects in JavaScript are just associative arrays (hashes).
-For vi ensure to have this in your .vimrc file to ensure not using tabs but spaces: set expandtab
-Javascript interpreter first scans the function for a list of variables, and then goes back to interpret the function code lines one by one.
-An object is simply an unordered collection of key-value pairs.
-Code should always have Readability, Changeability, Extensibility and Maintainability.
-Naming convention - Classes should be nouns or contain nouns in their names like Product, ShoppingCart, Customer and so on. Methods, on the other hand, should start with a verb such as get_product_name() and save_order(). Those verbs should be one per concept. For instance, the following verbs: save, insert, and create tend to serve the same purpose for saving data. Picking one of them, and distributing it to the rest of the classes should be the case.
-Functions in JS are first-class. Meaning they can be assigned and passed just like any other variable can.
-A function's code is executed (called) by the invocation operator () (e.g., myFunct(); )
-One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.
-To make sure that your code is fast and doesn’t slow down the browser to a halt try to keep DOM access to a bare minimum. Instead of constantly creating and applying elements, have a tool function that turns a string into DOM elements and call this function at the end of your generation process to disturb the browser rendering once rather than continually.
-Don't use comparisons: <=, >, <, and >= with a variable which may be null/undefined, unless you are really sure what you’re doing. If a variable can have such values, then check for them separately.
-If you are using a simple if statement (e.g., is number < 100 or not) then use ternary operator: let value = x < 100 ? 1 : -1;
-Callbacks are simply functions passed as arguments to other functions to be run when the other functions are finished.
-Don't trust ANY data. make sure that all the data that goes into your systems is clean and exactly what you need. This is most important on the back end when writing out parameters retrieved from the URL. In JavaScript, it is very important to test the type of parameters sent to your functions (using the typeof keyword). This includes reading information from the DOM and use it without comparison. Assume all data input/received is bad and needs to be verified before going anywhere else.
-When working with numbers (e.g., find max/min number in an array) use Math.max/Math.min (or other Math.operator).
-When working with Arrays always use the Array.method before trying to do the logic yourself (e.g., sort, pop, find, join, split, etc...)
-JavaScript objects are containers for named values called properties or methods (objname = {key: value, key: value}; where key:value is the object properties ).
-Callback functions are useful for short asynchronous operations. When working with large sets, this is not considered best practice. Because of this challenge, Promises were introduced to simplify deferred activities.
-code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399
-Think of prototyping mentally as "attaching" a method to an object after it's been defined, in which all object instances then instantly share.
-A promise is used to handle the asynchronous result of an operation. With Promises, we can defer execution of a code block until an async request is completed. This way, other operations can keep running without interruption.
-JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.
-Any hyphenated CSS property (e.g., font-family) will be written in camelCase in JavaScript (e.g., fontFamily).
-The 'document' is an object, 'body' is a property of that object that we have accessed with dot notation.
-The #text nodes are inserted in the DOM where whitespace occurs in the markup between tags (i.e. after the closing tag of an element and before the opening tag of the next).
-In a function, If no return statement is used (or an empty return with no value), JavaScript returns 'undefined'.
-Constructors create the blueprints for objects, not the object itself. They need to be instantiated first using 'new': myCat = new cat('catname');
-When looping through items in an object, you might find that you'll also retrieve method functions as well. In order to work around this, always wrap your code in an if statement which filters the information
      for(key in object) {
         if(object.hasOwnProperty(key) {
           ...then do something...
         }
     }
-For a long list of variables being defined, use this method:
       let var1 = 'somestr',
       var2 = {},
       var3 = 5;
-DOM represents the document in the computer's memory.
-Use === Instead of ==
-Don't use the 'with' statement.
-Array vs. Object: When the property names are small sequential integers, you should use an array. Otherwise, use an object.
-Minimize the use of globals (use const when needed).
    *Instead of:
       let name = 'Junior';
       let lastName = 'Way';
       function doSomething() {...}
       console.log(name);
    *Do This (use an object):
       let DudeNameSpace = {
         name : 'Junior',
         lastName : 'Way',
         doSomething : function() {...}
       }
       console.log(DudeNameSpace.name);
-Always enclose block code with { … }
-Put your <script> at the end of the body (right before </body> ).
-Declare your variables outside of loops.
-Using native methods (like join(), search(), etc…), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative. 
-Doing, x = n || 1; means assign the value 'n' to x if 'n' is defined, otherwise, assign it 1.
-Ensure to put your <style> in the header <head> and your <script> in the footer.
-Make a habit of any line that would start with '(' to have a semicolon in front of it:  stuff… ;(function() {… This is a case where a new line won't replace a semi-colon.
-Because functions are first-class objects in JavaScript, they can have their own methods
-Always have security measures around data entered by a user and data in your database (when accessing).
-Use var if you need function scoping and let if you need block scoping.
-Be aware of XSS (cross-site scripting). Ensure your code prevents this where appropriate (also, CSRF, SQL injection attacks, XSS, session fixation, MITM attacks)
-For functions : Primitives Pass by Value while Objects (including passing functions) Pass by Reference.
-Use "use strict" at top of your JS script.
-Note the use of semicolons, for example (lookup others):
      let foo = function() { return true; }; // semicolon here.
      function foo() { return true; } // no semicolon here.
-Functions : (Declarations get hoisted. The rest do not get hoisted)
      -Function Declaration: function foo() { … }
      -Function Expression: const foo = function () { … };
      -Function Expression with arrow: const foo = () => { … };

Below is a list of docs I have Read/Completed/Watched for JavaScript (ALL FREE):

*blog.jeremymartin.name/2008/03/understanding-loose-typing-in.html - READ (14 Feb 18)
*learnxinyminutes.com/docs/javascript - READ (19 Feb 18) (Good review of JS basics)
*nicholasjohnson.com/javascript/javascript-for-programmers/exercises/functions - READ (20 Feb 18) (Good overview of functions and Objects)
*objectpartners.com/2016/09/29/getting-started-with-vuejs - READ (27 Feb 18)
*robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures - READ (28 Feb 18)
*scotch.io/courses/10-need-to-know-javascript-concepts/callbacks-promises-and-async - READ (1 Mar 18)
*www.evotech.net/blog/2008/07/javascript-object-literals-a-definition - READ (1 Mar 18) (Explains use of dot notation).
*www.javascriptkit.com/javatutors/oopjs.shtml - READ (1 Mar 18).
*www.javascriptkit.com/javatutors/oopjs2.shtml - READ (1 Mar 18)
*www.dyn-web.com/tutorials/object-literal - READ (1 Mar 18)
*javascriptkit.com/javatutors/javascriptarrowfunctions.shtml - READ (1 Mar 18) (very good examples and comparison of functions to =>) (Review for arrow functions)
*javascriptkit.com/javatutors/javascriptarrowfunctions2.shtml - READ (2 Mar 18) (same for the first part)
*www.dyn-web.com/tutorials/js_errors.php - READ (1 Mar 18)
*stackoverflow.com/questions/572897/how-does-javascript-prototype-work#4778408 - READ (1 Mar 18)
*pierrespring.com/2010/05/11/function-scope-and-lexical-scoping - READ (2 Mar 18) (very good explanation of scope (lexical))
*www.webpagefx.com/blog/web-design/6-advanced-javascript-techniques-you-should-know - READ (3 Mar 18) (Good techniques)
*code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399 - READ (4 Mar 18)
*davidwalsh.name/promises - READ (5 Mar 18)
*ilikekillnerds.com/2015/03/things-every-javascript-developer-should-know - READ (8 Mar 18) (scroll down to Know what 'this' is, and to end)
*www.quirksmode.org/js/this.html (Covers 'this') - READ (8 Mar 18)
*developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement - READ (9 Mar 18) (note the boxes with 'EventTarget, Element, Node, HTMLElement')
*www.digitalocean.com/community/tutorials/introduction-to-the-dom - READ (10 Mar 18)
*www.digitalocean.com/community/tutorials/understanding-the-dom-tree-and-nodes - READ (10 Mar 18)
*www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom - READ (10 Mar 18)
*xahlee.info/js/dom_common_dom_methods.html - READ (13 Mar 18)
*xahlee.info/js/js_get_node_info.html - READ (13 Mar 18)
*xahlee.info/js/js_navigate_nodes.html - READ (13 Mar 18)
*xahlee.info/js/js_textContent_innerHTML_innerText_nodeValue.html - READ (13 Mar 18)
*www.smashingmagazine.com/2010/04/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career – READ (17 Mar 18)
*www.w3.org/wiki/JavaScript_best_practices - READ (17 Mar 18)
*medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976 - READ (19 Mar 18)
*medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0 - READ (20 Mar 18)
*scotch.io/bar-talk/vuejs-vs-jquery-use-cases-and-comparison-with-examples (Good little examples) - READ (21 Mar 18)
*javascript.info/document - READ (25 Mar 18) (Best DOM intro. Read Again and Again)
*developer.telerik.com/topics/web-development/what-is-this-in-javascript - READ (26 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions - READ (26 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind - READ (27 Mar 18)
*stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind - READ (27 Mar 18)
*stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply - READ (27 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply - READ (28 Mar 18)
*developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call - READ (28 Mar 18)
*How javascript works - WATCHED (6 Apr 18)
*JS Object Orianted Programming (1hr) (Excellent. Watch Again!) - WATCHED (7 Apr 18)
*Object Oriented JavaScript (1hr) - WATCHED (8 Apr 18)
*Net Ninja - Asynchronous JavaScript #1 - What is Asynchronous JavaScript? - WATCHED (5 May 18) (watch again) (5 Videos, ~1 hr)
*Net Ninja - JavaScript ES6 Tutorials - WATCHED (6 May 18) (11 Videos, ~1hr)
*medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c - READ (4 June 18).
*javascript.info/async-await - READ (4 June 18). Read Again.
*medium.freecodecamp.org/7-javascript-methods-that-will-boost-your-skills-in-less-than-8-minutes-4cc4c3dca03f - READ (6 June 18)
*stackoverflow.com/questions/3781373/javascript-what-are-extend-and-prototype-used-for - READ (6 June 18). A little confusing.
*dev.to/siwalik/async-programming-basics-every-js-developer-should-know-in-2018-a9c - READ (19 June 18). Good overview of async/await.
*nikgrozev.com/2017/10/01/async-await - READ (19 June 18). Good overview of Promises/async/await. Read Again.
*codeburst.io/javascript-es-2017-learn-async-await-by-example-48acc58bad65 - READ (20 June 18). Good Overview of Promise and async/await. Review Again.
*blog.bittersweetryan.com/2013/04/a-quick-look-at-etarget-and.html - READ (9 Aug 18). Focus on event bubbling and 'target' & 'currentTarget'.
*blog.usejournal.com/10-things-you-will-eventually-learn-about-javascript-projects-efd7646b958a - READ (15 Aug 18). Common Sense stuff.
*blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688 - READ (10 Oct 18). Focuses on OOP principles.
*blog.bitsrc.io/a-beginners-guide-to-closures-in-javascript-97d372284dda - READ (10 Oct 18). Good overview of closures. Read Again.
*blog.bitsrc.io/how-to-check-the-understanding-of-css-layout-2325621491ad - READ (10 Oct 18). Use flexbox or CSS grid.
*blog.bitsrc.io/the-devtools-that-changed-my-life-2f6b3dd6d6c3 - READ (10 Oct 18).
*blog.bitsrc.io/master-javascript-call-by-sharing-parameter-passing-7049d65163ed - READ (10 Oct 18). Deep details on stack, heap, code space and internals of running JavaScript. Read Again.
*blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0 - READ (10 Oct 18). Deep understand of how JavaScript is created and run internally. Read Again (with the above article).
*blog.bitsrc.io/11-javascript-utility-libraries-you-should-know-in-2018-3646fb31ade - READ (10 Oct 18).
*codeburst.io/javascript-essentials-objects-56373a1a6bfb - READ (2 Nov 18). Very good overview & examples of 'this', Objects, Classes, Prototypes. Read Again.
*dmitripavlutin.com/6-ways-to-declare-javascript-functions - READ (15 Dec 18). Read Again. Average overview of JS functions.

Most of what you'll need for CSS can be found at these sites:

  *https://developer.mozilla.or/en-US/doc/Web
  and
  *https://www.w3schools.com.

  Also, search for The Net Ninja on YouTube and browse his playlist for CSS.

My notes on CSS:

-Margin Collapsing: The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal). If block on top has margin of 10 and a block below it has a margin of 5 then the margin between the two is 10. Note that the margins of floating and absolutely positioned   elements never collapse.
-Don't apply width and height to inline elements.
-CSS can control the layout of multiple web pages all at once.
-Vertical centering is only relevant if the parent has a set height. If the parent doesn’t have a set height, what are you centering within? Even if the answer is “the entire page”, then you need to set the height of (probably) both html, body
-Any hyphenated CSS property (e.g., font-family) will be written in camelCase in JavaScript (e.g., fontFamily)
-For testing - to see every single "box" that makes up a page? Try putting this in the stylesheet temporarily (from: https://css-tricks.com/the-css-box-model):     * {        border: 1px solid red !important;     }
-Note, the usage and differences between px, em, and % (use margin-top for example):     •margin-top: 10px; /* An absolute length */     •margin-top: 1em; /* relative to the text size */     •margin-top: 5%; /* relative to the nearest block container's width */
-CSS describes how HTML elements are to be used to handle the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.
-Browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a[title="home"] the first thing thing interpreted is a[title="home"]. This first part is also referred to as the "key selector" in that ultimately, it is the element being selected.
-CSS can be added to HTML elements in 3 ways:     • Inline - by using the style="..." attribute in HTML elements     • Internal - by using a <style> element in the section     • External - by using an external CSS file

Below is a list of docs I have Read/Completed/Watched for CSS (ALL FREE):

*www.tutorialspoint.com/css/index.htm - READ (18 Jan 18)
*stackoverflow.com/questions/8084555/why-selecting-by-id-is-not-recommended-in-css/8084764#8084764 - READ (29 Jan 18)
*badhtml.com - READ (8 Feb 2018)
*css-tricks.com/the-lengths-of-css (px, em, rem) - READ (14 Feb 18)
*developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model -Read (7 Mar 18)
*css-tricks.com/snippets/css/complete-guide-grid - READ (24 Jan 18)
*css-tricks.com/pseudo-element-roundup - READ (7 Feb 18)
*webaim.org/blog/user-agent-string-history - READ (24 Jan 18)
*jessey.net/simon/articles/003.html - READ (7 Mar 18)
*developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model -Read (7 Mar 18)
*developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing - READ (10 Mar 18)
*www.w3.org/TR/CSS21/box.html - READ (25 Mar 18)
*CSS Grid Layout Crash Course - WATCHED (4 Apr 18)
*Build a Responsive Grid CSS Website Layout From Scratch (start at 18min where CSS is being written) - WATCHED (4 Apr 18)
*How to create a Website with CSS Grid & Sass | Part One: The Markup - WATCHED (4 Apr 18)
*How to create a Portfolio Website with CSS Grid & Sass Part 2: Variables and basic styles - WATCHED (4 Apr 18)
*www.thenetninja.co.uk/courses/css-positioning-tutorials - WATCHED (15 Apr 18) (Watch Again)
*Viewport Units Tutorial: The Magical CSS Unit of Measurement - WATCHED (21 Apr 18)
*CSS Tutorial For Beginners 42 - Width & Height - WATCHED (29 Apr 18) (Watch All Videos Again):
*CSS Units (CSS Lengths: rems, ems, pixels, percents, and more) - WATCHED (30 Apr 18). Skip to parts for %, em/rem, and px.
*css-tricks.com/the-css-box-model - READ (1 May 18)
*www.corelangs.com/css/box/positioning.html - READ (1 May 18)
*developer.mozilla.org/en-US/docs/Web/CSS/position - READ (1 May 18). Good examples of position explanation.
*stackoverflow.com/questions/7123138/how-to-make-this-header-content-footer-layout-using-css - READ (1 May 18). Good examples of sticky header-main-footer.
*internetingishard.com/html-and-css/advanced-positioning - READ (2 May 18). Very good explanation of position property.
*Full Height and Width "Web App" Style Layout Tutorial - WATCHED (2 May 18). Good example of position usage.
*CSS 3:Concept of max-width, min-width and max-height,min-height - WATCHED (2 May 18). Good visual of these properties.
*Responsive Web Design Tutorial #1 - What is Responsive Web Design? (12 Videos, ~1 1/2 hr). - WATCHED (8 May 18). Good outline of using CSS for layout.
*css-tricks.com/couple-takes-sticky-footer - READ (8 June 18). See examples of sticky_footer* under /c/Web_Dev/Layout. Good example of sticky footer.
*github.com/philipwalton/solved-by-flexbox - READ (8 June 18)
*css-tricks.com/css-ruleset-terminology - READ (11 June 18). Review again and again for memorization.
*www.impressivewebs.com/css-terms-definitions - READ (11 June 18). Review again and again for memorization.
*nimbupani.com/css-vocabulary.html - READ (12 June 18). Review Again.
*developer.mozilla.org/en-US/docs/Web/CSS/Syntax - READ (12 June 18). Review Again.
*css-tricks.com/centering-in-the-unknown - READ (12 June 18). (see helpfiles/CSS/css_centering.txt)
*css-tricks.com/arranging-elements-top-bottom-instead-left-right-float - READ (12 June 18). Use Flex and/or CSS Grid instead of floats.
*css-tricks.com/international-box-sizing-awareness-day - READ (12 June 18). (box-sizing: border-box)
*css-tricks.com/box-sizing - READ (13 June 18)
*css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center - READ (14 June 18)
*css-tricks.com/centering-percentage-widthheight-elements - READ (14 June 18)
*css-tricks.com/fighting-the-space-between-inline-block-elements - READ (14 June 18)
*www.w3schools.com/css/css3_box-sizing.asp - READ (14 June 18)
*css-tricks.com/centering-css-complete-guide - READ (14 June 18). Play with examples.
*medium.com/@wendersyang/what-the-flex-is-the-difference-between-justify-content-align-items-and-align-content-5fd3694f5259 - READ (15 June 18) (Good article on justify and align).
*css-tricks.com/intro-to-vue-1-rendering-directives-events (quick review) - READ (again) (20 June 18)
*css-tricks.com/nerds-guide-color-web - READ (21 June 18). Good overview of colors and using colors on a web page. Review Again.
*css-tricks.com/moment-css-started-making-sense - READ (2 July 18). Good to review.
*css-tricks.com/dont-overthink-flexbox-grids - READ (2 July 18).
*css-tricks.com/things-ive-learned-css-grid-layout - READ (2 July 18). Good to review of CSS Grid.
*CSS Flexbox Tutorial Net Ninja - WATCHED (3 July 18). Watch Video Series. Review videos 7-9 again and again (watch how css is done as well as FB).
*zellwk.com/blog/9-important-css-properties-you-must-know - READ (9 July 18). Review Again.
*tutorialzine.com/2016/08/20-protips-for-writing-modern-css - READ (17 Oct 18).
*www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts - READ (29 Oct 18).

Most of what you'll need for HTML can be found at these sites:

  *https://developer.mozilla.or/en-US/doc/Web
  and
  *https://www.w3schools.com.

A  lso, search for The Net Ninja on YouTube and browse his playlist for HTML.

Notes on HTML:

-By default background-color/background-image extend to the edge of the border. This behavior can be changed using the background-clip.
-If the content box becomes larger than the output window, it will overflow out of the window, and scroll bars will appear to allow you to scroll the window to view the rest of the box. You can control overflow with the overflow property.
-Box heights don't observe percentage lengths; box height always adopts the height of the box content, unless a specific absolute height is set (e.g. pixels or ems.). This is more convenient than the height of every box on your page defaulting to 100% of the viewport height (http://ahmed.amayem.com/html-replaced-elements-non-replaced-elements-examples). The width and height are not inherited properties and so the value of those properties should never be applied to the contents.
-It is important to notice that height and width indicate the, “content area of a box”, i.e. not the actual content. Therefore the width and height property still apply to the element itself and not the contents directly.
-Any content (#text) outside of the will automatically be pulled into and rendered at the end (but within) the .
-Borders ignore percentage width settings.
-For elements with a number of events use event delegation to optimize event handling. We use a single handler for similar actions on many elements: https://javascript.info/event-delegation
-DOM : HTML DOM is a standard for how to get, change, add, or delete HTML elements.
-The parent of almost any node is an element node, as text and comments cannot be parents to other nodes. However, the parent of html is a document node, so parentElement returns null. Generally, parentNode is more commonly used when traversing the DOM.
-The children of a node are the nodes that are one level below it. Any nodes beyond one level of nesting are usually referred to as descendants.
-The document object is the root of every node in the DOM. This object is actually a property of the window object, which is the global, top-level object representing a tab in the browser. The window object has access to such information as the toolbar, height and width of the window, prompts, and alerts. The document consists of what is inside of the inner window.
-The parent of almost any node is an element node, as text and comments cannot be parents to other nodes. However, the parent of html is a document node, so parentElement returns null. Generally, parentNode is more commonly used when traversing the DOM.
-Below is a chart consisting of the root elements that every document will contain. Even if a blank HTML file is loaded into a browser, these three nodes will be added and parsed into the DOM. Load an empty .html file in a browser and use Chrome Dev Tools to inspect.
    Property     Node         Node Type
    document #document DOCUMENT_NODE
    document.documentElement html ELEMENT_NODE
    document.head head ELEMENT_NODE
    document.body body ELEMENT_NODE
-Elements have the following geometry properties (From: https://javascript.info/size-and-scroll). All properties are read-only except scrollLeft/scrollTop. They make the browser scroll the element if changed.
    ○ offsetParent – is the nearest positioned ancestor or td, th, table, body.
    ○ offsetLeft/offsetTop – coordinates relative to the left-upper edge of offsetParent.
    ○ offsetWidth/offsetHeight – “outer” width/height of an element including borders.
    ○ clientLeft/clientTop – the distance from the left-upper outer corner to its left-upper inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so clientLeft includes its width too.
    ○ clientWidth/clientHeight – the width/height of the content including paddings, but without the scrollbar.
    ○ scrollWidth/scrollHeight – the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar.
    ○ scrollLeft/scrollTop – width/height of the scrolled out part of the element, starting from its left-upper corner.

Below is a list of docs I have Read/Completed/Watched for HTML (ALL FREE):

*www.tutorialspoint.com/html5/index.htm - READ (10 Jan 18)
*www.tutorialspoint.com/html/index.htm - READ (5 Jan 18)
*www.w3schools.com/html/default.asp - READ (9 Jan 18)
*www.digitalocean.com/community/tutorials/introduction-to-the-dom - READ (10 Mar 18)
*www.digitalocean.com/community/tutorials/understanding-the-dom-tree-and-nodes - READ (10 Mar 18)
*www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom - READ (10 Mar 18)
*ahmed.amayem.com/html-replaced-elements-non-replaced-elements-examples - READ (12 Mar 18) (Replaced and non-replaced elements).
*javascript.info/document - READ (25 Mar 18) (Best DOM intro. Re-Read)
*Emmet For Faster HTML & CSS Workflow - WATCHED (5 Apr 18)

Notes on Vuejs:

-Using $refs (refs) is just like doing a myref = document.querySelector(#id) where the #id is the name associated with the element that has the #id assigned. For example, given <button ref="myButton" @click="clickedButton">Click Me!</button>, the #id would by myButton, and accessed by doing $refs.myButton (just like you would access $myref if used querySelector), and now has access to all the elements in the DOM for <button…></button>.
-When passing props use kebob case when passing <compname pass-props-here="value" /> and use camel case in the component, props: { passPropsHere }
-Access data (the local component model data) from within methods using this.<dataName> and in the template using {{ }}
-Always use kebob-case for event ($event) names.
-Think of the <template> as your index.html (or component.html), <script> as your script.js (or component.js), and the <style> as style.css (or component.css).
-You can't use string interpretation, {{ }}, with any HTML attributes (e.g., the links for an href. This won't work <a href="{{ myUrl }}" ). Instead use the vue directive v-bind. So, <a v-bind:href="myUrl">URL</a> . So, v-bind usage (where v-bind is a directive): <directive>:<html_attribute>="
-When using vuex always use a mutation to update the state.
-When we instantiate our application with new Vue({ … }), Vue examines our JavaScript code and HTML markup, then creates all the necessary data and event bindings for our application to run.
-The template (<template>) is what is printed to the view when a component is rendered by doing new Vue({…
-Purpose of Vue.js is to provide the simplest possible API for creating real-time, two-way data binding between the view (HTML) and the model (a JavaScript object). 
-A component file consists three parts; template, class and styles sections. The template area is the visual part of a component. Behavior, events and data storage for the template are handled by the class. The style section serves to further improve the appearance of the template.
-Every Vue app, needs to have a top level component that serves as the framework for the entire application. 
-Components are characterized with template and logic with data flowing from the logic to the template and events emitted from the template to the logic.
-The components folder should contain only components that have a tendency to be reused, while the pages folder contains components that are used with routes (ensure you update ./src/router/index.js accordingly).
-Don't mount the root instance to <html> or <body> (vm.#mount() ). Use a specific HTML tag or CSS ID or class in the body.
-Components are composable which means a component can house another component in it. For a component to house another, you need to define the child component in the parent's component components: object.
-Use 'props' to pass data to components and component events to interact with the surrounding environment.
-What makes a large app is composing lots and lots of components together. But one component needs to be identified as the entry component. This is what Vue looks for to bootstrap your app. The entry component must have an el property which points the DOM using a query selector. The pointer tells Vue where the entry component should be mounted:
    new Vue ({
     el: '<CSS_id_class_or_HTML_tag>',
     …
-If the el is not provided, components can be manually mounted using the $mount() instance method:
    new Vue({}).$mount('#app')
-Views are represented by HTML templates but with extra utility features like interpolation ({{ }}) and directives (v-on:click) to help display the models' data.
-Using double curly braces as a placeholder for data properties in a Vue template is known as an interpolation: {{ … }}
-Directives (v-* ) are custom HTML attributes (<div v-text="..."></div>) that allow you to bind data to both view and attributes. It also helps with binding DOM events.
-Two-Way Binding means that any data-related changes affecting the model are immediately propagated to the matching view(s), and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When app data changes, so does the UI, and conversely.
    1. When properties in the model get updated, so does the UI.
    2. When UI elements get updated, the changes get propagated back to the model.
-Computed: properties are asynchronous and must return a value.
-Vuejs listens for the return value of a function.
-You should avoid using v-if with v-for on the same element. the element that contains the v-for should be wrapped with another element that uses v-if. If this isn't practical, you can use the v-if within the <template> element. NOTE: Check docs on this as this may be incorrect.
   <ul>
    <template v-if="items.length">
     <li v-for="item in items">{{ item.text }}</li>
    </template>
   </ul>
-Use the data() method/function in components and data object in the Vue instance.
-Methods are call whenever the DOM is re-rendered (from top to bottom of the page between <div="#app">…</div>. Use computed: properties instead.
-Never change data from within a computed property - these should only create and return a new value from existing data, never mutate it.

Below is a list of docs I have Read/Completed/Watched for Vue.js (ALL FREE):

*www.sitepoint.com/getting-started-with-vue-js - READ (16 Feb 18)
*scotch.io/courses/build-an-online-shop-with-vue/introduction -Excellent intro. Review. - READ (29 FEB 18)
*alligator.io/vuejs/component-lifecycle - READ (27 Feb 18)
*www.sitepoint.com/getting-started-with-vue-js - READ some - Very poor instruction (18 Feb 18).
*Vue.js Tutorial & Getting Started (part 1) (Skip to 30:00 then skip to 59:00 minutes exercises in the video. Rest of video just gives same details) - WATCHED (25 Feb 18)
*Vue.js Tutorial & Getting Started (part 2) (Skip to 51:45 watch exercise, and see helpfiles/vuejs_directives.txt) - WATCHED (26 Feb 18)
*Vue.js Tutorial & Getting Started (part 3) (Skip to 15:15 for getter/setter & watchers. To 28:32 for filters. Skip to 55.15 for CSS) - WATCHED (1 March 18)
*Intro to Vuex (14min) - WATCHED (6 Apr 18) (one needs to understand vuex basics first) (Watch Again)
*Vuejs working with bootstrap and jquery. (10min) - WATCHED (6 Apr 18) (When ready, re-watch to add BS and JQ to vue.js) (Watch Again)
*Vuejs and axios (9min) - WATCHED (6 Apr 18) (watch when going to use axios with vue) (Watch Again)
*Build a site using vuejs (1hr) - WATCHED (6 Apr 18) (uses php) (can watch again if need to see bootstrap and vue.js)
*Vuejs and Nuxt.js (1hr)
*Vuetify Material Framework in 60 minutes | From Scratch to Pro in Vuetify Vuejs - WATCHED (8 Apr 18)
*Vue.js with axios: Fetching External Data Using AJAX - WATCHED (18 Apr 18)
*STATE & STORE | VueJS 2 & Vuex | Learning the Basics - WATCHED (18 Apr 18)
*Getting Started With Vue CLI and Bootstrap + jQuery - WATCHED (3 May 18). (explains setup).
*GET data from express.js backend using Vue.js - WATCHED (3 May 18). Watch to see where the coding is done in the files (and axios). (watched from 6 minutes. Total ~14 mins). Not a very good video.
*Vue.js with axios: Fetching External Data Using AJAX - WATCHED (11 May 18). Very basic example (~9 mins).
*Basic setup for Vue.js and Vue-Router for SPA -Read (Good overview of vue-router) (21 May 18).
*Vue.js Scoped Slots - READ (Scoped Slots) (23 May 18).
*Vue.js and Computed Properties - READ (see demo) (24 May 18)
*Passing data between routes in Vue.js - READ (23 May 18)
*Vue-Router - READ (23 May 18)
*Vue.js Component Lifecycle - READ (23 May 18) (Good review. Read again).
*Vue.js props/events & provide/inject - READ (1 June 18) - An ok quick overview of provide/inject, rest not to informative.
*Vue.js and using props - READ (1 May 18). Just an ok overview. Hard to follow instructions.
*Parent to Child props - READ (1 June 18). A little confusing but ok direction.
*Events in Vue.js - READ (1 June 18) - Good example but 'addValue' for v-model should be 'count'
*Global Event Bus - READ (1 June 18) - Read again after doing an example. A little difficult to follow.
*Component Slots - READ (1 June 18) - See for named slot example.
*Two-Way binding with v-model - READ (1 June 18) - Good overview of v-model with examples. Read again.
*Directive v-for - READ (2 June 18) - Good overview of v-for. Read again.
*Dynamic List Rendering in Vue.js - READ (4 June 18).
*Vue.js and Mixins - READ (4 June 18)
*How To Use Vue Mixins For Beginners - WATCHED (4 June 18). Good explanation of Mixins. Watch Again.
*Vue.js Watchers What You Need To Know! - WATCHED (4 June 18). Good overview of watch: . Watch Again.
*Computed Properties in Vue - Vue.js 2.0 Fundamentals (Part 8) - WATCHED (4 June 18). Good overview of Computed Properties.
*Event Handling in Vue - Vue.js 2.0 Fundamentals (Part 7) - WATCHED (4 June 18)
*Extending Vue.js Componenet with Mixins - READ (5 June 18). Good basic overview of mixins.
*Introduction to Vue.js Rendering, Events, and Directives - READ (6 June 18)
*Introduction to Vue.js Props and Slots - READ (6 June 18). Good explanation of props.
*Vue.js Guide on Props - READ (7 June 18). Read Again (over and over until fully understand).
*Vue.js Guide on Components - READ (7 June 18).
*Global Event Bus- READ (7 June 18). Shows only parts of event bus code and no file names (re-read after understanding more)
*Using Mixins - READ (7 June 18).
*Vue.js Reactivity - READ (11 June 18)
*Vue.js and Virtual DOM - READ (11 June 18)
*What is Vuex - READ (18 June 18).
*Methods, Computed, & Watchers - READ (18 June 18).
*Autocomplete Using Vue.js - READ (19 June 18)
*Vue.js Components - READ (21 June 18)
*Dynamic Components and keep-alive - READ (27 June 18)
*Dynamic Components - READ (27 June 18). Good overview of dynamic components.
*Vue.js Transitions - READ (28 June 18). Re-read for any transitions and animations in vue.js.
*Overview of Real-time database built with Vue.js, Vuex, Vuetify JS, & Firestore -Reviewed (2 July 18). Code from github not working
*Vue.js Tricks - READ (4 July 18)
*Vue NYC - VueJS Render Functions / Functional Components - Dan Aprahamian - WATCHED (4 July 18)
*A Better Way To Create Templates In Vue.js? Render Functions Explained - WATCHED (4 July 18)
*How to Structure a Vue.js Project - READ (5 July 18). See vuejs style guide.
*Internals of Vue.js - READ (5 July 18).
*How to build a Vue component like a pro - READ (5 July 18). Follow vuejs style guide
*Single File Components - READ (5 July 18).
*Is my SPA SEO friendly? - READ (9 July 18). States to use SSR or pre-render with SPA.
*Integrate Vue.js with Webpack, Babel, and Eslint - READ (26 July 18). Good explanation of package.json and vue components.
*Vue.js State Management (Vuex) - READ (26 July 18). Good explanation of props and events to pass data, event bus, and vuex.
*Vue.js Pattern - READ (8 Aug 18) - Overview of using and dynamic components.
*Dynamic and Async Components Made Easy with Vue.js - READ(13 Aug 18). Using and component: () => import('@/components/compname'
*Vue.js Handbook - READ (13 Sept 18).
*Vuex - READ AGAIN (26 Sept 18).
*Vue.js (and Vuex) bug squasher cheatsheet - READ (28 Sept 18).
*Vue.js Lighthouse Performance Score - READ (28 Sept 18).
*SEO and SPA - READ (17 Oct 18).
*How to build components that play nice - READ (29 Oct 18). Use $emit to pass back to parent.
*How To Not Screw Up UX In A Single-Page Application - READ (30 Oct 18).
*Vue.js Form Validation with Vuelidate - READ (30 Oct 18).
*Vue.js Plugins - READ (31 Oct 18). Some good caching, persistent state, and i18 Vue plugins.
*Refactor SPA for real-world - READ (5 Nov 18). Good style guide for Vue.js. Read Again.
*Data flow in Vue and Vuex - READ (9 Nov 18).
*Vue.js Refs - READ (29 Nov 18).
*Accessible Routing with Vue.js - READ (8 Dec 18). Uses $refs with $route. Confusing and not sure why to do this way.
*Build A Vue.js App Using Local Storage Part 2 - WATCHED (10 Dec 18). Review for LocalStorage.
*Computed Properties - READ (16 Dec 18). Read Again.
*Build a Site with Vuepress and TailWind.css - READ (28 Dec 18).
*Productivity in Vue.js - READ (28 Dec 18). (VS Code Plugins).

Notes on Vuejs:

Below is a list of docs I have Read/Completed/Watched for Vue.js (ALL FREE):

*Vuetify Material Framework in 60 minutes | From Scratch to Pro in Vuetify Vuejs - WATCHED (8 Apr 18 & again on 18 Apr 18)) -Good overview. Goes through the vuetify site as he builds a site from ground up. Review again. Note use of components.
*Three Vue.js Vuetify Tips (Grid System, Buttons, Alerts) - WATCHED (18 Apr 18) (~10mins)
*Vuetify Material Framework in 60 minutes | From Scratch to Pro in Vuetify Vuejs - WATCHED (5 May 18). Watch again.
*Intro and Overview of Vuetify.js (Build a CRUD client with Vue.js) - WATCHED (5 May 18) (very good overview. Watch again).
*Overview of Real-time database built with Vue.js, Vuex, Vuetify JS, & Firestore -REVIEWED (2 July 18). Code from github not working
*How to create a custom VuePress theme with Vuetify - READ (28 Dec 18). (Review again if using Vuetify with VuePress).

Notes on Vue Router

Notes on Vuex

-Can be confusing at first, put a must/requirement for pretty much most Vue.js sites. So, buckle up and get busy learning it if you plan on building any serious Vue.js site. After some digging into Vuex it will all start to make sense (I'm still learning and studying it), and you'll understand why a Vue.js site needs/requires it.
-Components access the store data via getters, and change the store by dispatching actions, where these actions commit mutations which changes and syncs the store data.
-The State is the single source of data/truth for your web app, and is an object that holds all your global objects/arrays/variables for your app, to be accessed (getters), and changed (mutations) through actions and used/accessed by multiple components.
-State:
      -The single source of truth/data.
      -State represents the actual data itself. This is simply a JavaScript object that contains a tree of data (https://zendev.com/2018/05/21/vuex-perfect-interface-frontend-backend.html)
-Mutations:
      -Mutations are the mechanism by which we change our state tree. All changes of state must flow through mutations, which allows VueX to manage the state in a predictable manner.
      -Mutations are synchronous, and directly modify the state object.
      -This synchronous, direct change of the state object meshes perfectly with Vue's concept of reactivity. VueX state objects are reactive, so the changes ripple outwards to all dependencies.
      -You call a mutation via the commit function: store.commit('SomeMutation', data);
-Actions:
      -Actions are asynchronous, and indirectly modify the store, via committing mutations. 
      -Asynchronicity allows actions to handle things like API calls, user interaction, and entire flows of action.
      -Use 'dispatch' to run actions: store.dispatch('actionName', data).then(() => { … }
-Getters:
      -vuex.vuejs.org/guide/getters.html
      -Getters can return functions.
      -Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed. If their dependencies don't change, getters return their last returned value: stackoverflow.com/questions/50070900/json-object-copy-in-vuex-getter/50072654?noredirect=1#comment87179550_50072654

Below is a list of docs I have Read/Completed/Watched for Vuex (ALL FREE):

*Vuex Tutorial #1 - What is Vuex? (Net Ninja - 8 videos ~1hr total) - WATCHED (1 July 18 & 11 Aug 18). Very good overview. Watch Again if needed. Use as main Vuex videos.
*STATE & STORE | VueJS 2 & Vuex | Learning the Basics (5 videos ~50mins) - WATCHED (30 June 2018). Watch Again if needed.
      -See diagram video 4 at 7:50 for explanation of store, getters, mutations, actions.
      -Components access the store data via getters, and change the store by dispatching actions, where these actions commit mutations which changes and syncs the store data.
*markus.oberlehner.net/blog/should-i-store-this-data-in-vuex - READ (8 July 18). Read Again. Note flowchart to determine if to use Vuex.

Notes on SSR. Not quite using SSR. Actually, using the Vue.js node plugin, prerender-spa-plugin. Another great Vue.js plug-in. Highly recommend it for SPA sites.

Notes on Material Design

My Notes on Node.js

Below is a list of docs I have Read/Completed/Watched for Node.js (ALL FREE):

*Build a Server Side Nuxt.js App With Vuetify, Axios and Vuex - WATCHED (7 Apr 18)
    *Part 1
    *Part 2
    *Part 3
    *Part 4
*scotch.io/courses/routing-node-applications/routing-basics - WATCHED (1 Mar 18) (see/helpfiles/Nodejs/Example1_Routing)
*Node.js Tutorial for Beginners: Learn Node in 1 Hour - WATCHED (1 Apr 18) (first 10mins are diagrams explaining Node)(coding from 10mins)
*Express.js Tutorial: Building RESTful APIs with Node and Express - WATCHED (2 Apr 18)
*MEAN App From Scratch - MongoDB, Express, Angular 2 & NodeJS - WATCHED (15 Apr 18)
*How To Set Up a Node.js Application for Production on Ubuntu 14.04 - WATCHED (18 Apr 18)
*Node JS Tutorial for Beginners - WATCHED (27 Apr 18) (37 Video Series by Net Ninja - Excellent!)
*zellwk.com/blog/crud-express-mongodb - READ (18 May 18) (Not working for POST and DELETE. Re-render doesn't occur after PUT (cloned version). Somewhat difficult to follow. Had to copy most of the code).

My Notes on Express

-Express is always comprised of routes that will handle requests and responses to and from the browser.
-Mongoose: A model is generated from the schema and defines a document the application will operating on. More precisely, a model is a class that defines a document with the properties and behaviors as declared in our schema. All database operations performed on a document using Mongoose must reference a model.
-Can test your backend using:
    -GET: curl -i -H "Accept: application/json" localhost:8080/dbname
    -POST: curl -i -X POST -H "Content-Type: application/json" -d '{ "name":"Tim","email":"tim@testing.com","select":"Selection 2","checkbox":"true"}' localhost:8080/dbname

Below is a list of docs I have Read/Completed/Watched for Express (ALL FREE):

*Node.js Tutorial for Beginners: Learn Node in 1 Hour - WATCHED (1 Apr 18) (first 10mins are diagrams explaining Node)(coding from 10mins)
*Express.js Tutorial: Building RESTful APIs with Node and Express - WATCHED (2 Apr 18)
*ExpressJS Crash Course (1hr 15min) (Follow along with docs at https://expressjs.com)- WATCHED (7 Apr 18)
*MEAN App From Scratch - MongoDB, Express, Angular 2 & NodeJS - WATCHED (15 Apr 18)
*REST API Tutorial #1 - What is a REST API? - WATCHED (25 Apr 18) (16 Videos) (Net Ninja - Excellent on building backend REST API with express.js, but uses React for frontend).
*Getting Started With Axios (Accessing REST Web Services / HTTP APIs in JavaScript - WATCHED (19 May 18)
*expressjs.com/en/guide/routing.html#route-parameters - READ (19 June 18). Review Again.

My Notes on MongoDB

Below is a list of docs I have Read/Completed/Watched for MongoDB (ALL FREE):

*MongoDB Database - WATCHED (21 Dec 17)
*www.youtube.com/watch?v=liQzIsFnCr0 - WATCHED (21 Dec 17). Intro to MongoDB.
*www.youtube.com/watch?v=fbWxfFY8ltQ (sharding and indexing) - WATCHED (Good video)(21 Dec 17)
*RESTful API From Scratch Using Node, Express and MongoDB - WATCHED (2 Apr 18)
*MEAN App From Scratch - MongoDB, Express, Angular 2 & NodeJS - WATCHED (16 Apr 18)
*MongoDB Tutorial for Beginners - WATCHED (26 Apr 18) (16 Video Series by Net Ninja)
*zellwk.com/blog/crud-express-mongodb (follow along with each tech doc web site). - READ (18 May 18)
      -Code doesn't work for POST and DELETE.
      -Re-render doesn't occur after PUT (cloned version). Somewhat difficult to follow. Had to copy most of the code.
*MongDB, Vue.js, and Extress.js Video Series - WATCHED (20 May 18)
      #1 - Overview course POST & GET with Vue.js, Mongo and express.js
      #2 - Create a project in Vue.js
      #3 - Create simple API in MongoDB, Node and Express (28mins)
      #4 - Bootstrap form in Vue.js (~9 mins)
      #5 - POST & GET data into Mongo DB backend using Vue.js (26 mins)
      #6 - GET data from MongoDB in Vue.js with axios (16 mins)

My Notes on Docker

Below is a list of docs I have Read/Completed/Watched for Docker (ALL FREE):

*www.tutorialspoint.com/docker/index.htm - READ (6/7 Nov 17)
*docker-curriculum.com - COMPLETED (13 Nov 17).
*docs.docker.com/get-started - COMPLETED (django instance not working) (13 Nov 17).
*blog.codeship.com/why-docker (quick read) - READ (13 Nov 17)
*www.datawire.io/not-engineer-running-3-5gb-docker-images - READ (20 Nov 17)
*boxboat.com/2016/06/18/docker-data-containers-and-named-volumes - READ (29 Nov 17)
*docs.docker.com/engine/admin/volumes/#choose-the-right-type-of-mount - READ (28 Nov 17)
*Andrew T. Baker - Demystifying Docker - PyCon 2015 - WATCHED (12 Nov 17)
*itnext.io/getting-started-with-docker-1-b4dc83e64389 - READ (8 Dec 18). Good overview of container and Docker.
*Linux Containers/LXC:
    *sysadmincasts.com/episodes/14-introduction-to-linux-control-groups-cgroups - WATCHED (26 Oc 17)
    *sysadmincasts.com/episodes/24-introduction-to-containers-on-linux-using-lxc - WATCHED (26Oct17,)
    *sysadmincasts.com/episodes/31-introduction-to-docker - WATCHED (26Oct17, )

My Notes on VSCode

Below is a list of docs I have Read/Completed/Watched for VSCode (ALL FREE):

*Advanced Code Editing in VS Code - WATCHED (18 Apr 18)
*Best of Visual Studio Code: Tips and Tricks - WATCHED (18 Apr 18) (Video is no longer available)

My Notes on Git & GitHub

Below is a list of docs I have Read/Completed/Watched for Git & GitHub (ALL FREE):

*Net Ninja Git & GitHub Tutorial - WATCHED (12 Videos) (30 Apr 18)
*tutorialzine.com/2017/11/10-useful-git-tips - READ (27 Feb 18)
*Pro Git book - READ (1 Mar 18)

My Notes on GIMP

Working with Colors (under exposed/over exposed photos):

       - Colors -> Levels -> Auto : To add more color to photo. See for more details: docs.gimp.org/2.8/en/gimp-tool-levels.html
       - Colors -> Curves (to correct color casts). The Curves tool is the most sophisticated tool for changing the color, brightness, contrast or transparency of the active layer or a selection. While the Levels tool allows you to work on Shadows and Highlights, the Curves tool allows you to work on any tonal range.
       - Colors -> Hue-Saturation (to adjust the saturation and/or lighten/darken the image (HSL (Hue-Saturation-Lightness) of all colors or a specific color in the image)) (Fix washed-out looking photos) (Look at raising Saturation first for light images, and lowering for dark images)
       - docs.gimp.org/en/plug-in-colors-channel-mixer.html
       - Sometimes it is hard to tell whether you have adjusted colors adequately. A good, objective technique is to find a point in the image that you know should be either white or a shade of gray. Activate the Color Picker tool (the eyedropper symbol in the Toolbox), and click on the aforesaid point: this brings up the Color Picker dialog. If the colors are correctly adjusted, then the red, green, and blue components of the reported color should all be equal; if not, then you should see what sort of adjustment you need to make.

Black & White:

       - docs.gimp.org/en/gimp-tool-desaturate.html
       - emptyeasel.com/2008/10/24/how-to-digitally-color-a-black-white-photograph-in-gimp
       - emptyeasel.com/2008/04/29/how-to-add-color-to-black-and-white-photos-in-photoshop
       - docs.gimp.org/en/plug-in-decompose-registered.html
       - www.lifewire.com/convert-photo-to-black-and-white-1701689 - Using Channel Mixer (Goes beyond using desaturate for more control, if needed).
       - patdavid.net/2012/11/getting-around-in-gimp-black-and-white.html

Dark/Lighten Photos:

       - docs.gimp.org/2.8/en/gimp-imaging-photos.html
       - www.darktable.org/install (not Gimp but alternative for dark & grainy photos (Fix Dark and Grainy Night Photos with GIMP 2.10.2 + Darktable)
       - Colors -> Levels -> Auto & Colors -> Levels (set levels as you need) (to change darkness and lightness) (use this instead of Colors -> Brightness-Contrast…).
       - Colors -> Hue-Saturation (to adjust the saturation and/or lighten/darken the image (HSL (Hue-Saturation-Lightness) of all colors or a specific color in the image)) (Fix washed-out looking photos) (Look at raising Saturation first for light images, and lowering for dark images)
       - Colors -> Curves (to correct color casts) (use above first) (use this instead of Brightness-Contrast..)
       - The most powerful approach to adjusting brightness and contrast across an image is to create a new layer above the one you are working on, and then in the Layers dialog set the Mode for the upper layer to “Multiply” (to darken) or Divide (to lighten). The new layer then serves as a “gain control” layer for the layer below it, with white yielding maximum gain and black yielding a gain of zero. Thus, by painting on the new layer, you can selectively adjust the gain for each area of the image, giving you very fine control. You should try to paint only with smooth gradients, because sudden changes in gain will give rise to spurious edges in the result. Paint only using shades of gray, not colors, unless you want to produce color shifts in the image.
       - Here is a trick that is often useful for bringing out the maximum amount of detail across all areas of an image:
           1. Duplicate the layer (producing a new layer above it).
           2. Desaturate the new layer.
           3. Apply a Gaussian blur to the result, with a large radius (100 or more).
           4. Set Mode in the Layers dialog to Divide.
           5. Control the amount of correction by adjusting opacity in the Layers dialog, or by using Brightness/Contrast, Levels, or Curves tools on the new layer.
           6. When you are happy with the result, you can use Merge Down to combine the control layer and the original layer into a single layer.

Grainy (noisy) Photos:

       - www.paintshopprotutorials.co.uk/html/remove_grain_gimp.html
       - Filters -> Enhance -> Sharpen (Do at full size to see changes. Best to sharpen as last step in photo/image prep (e.g., after resize)).
       - Filters -> Blur -> Selective Gaussian Blur (With Blur Radios around 1 or 2)
       - Filters -> Enhance -> Despeckle
       - Colors -> Levels -> Auto (to add more color to photo)
       - G'MIC:
           - www.mora-foto.it/en/tutorials-gimp/noise-reduction-with-gmic.html
           - docs.gimp.org/en/plug-in-unsharp-mask.html
           - iainisbald.wordpress.com/2013/02/09/iains-noise-reduction-for-gmic-and-gimp ('Repair -> Ian's noise reduction').
           - Anisotropic Smoothing: Amplitude set to 60 - 80 & Sharpness set to .70 - .90
           - PhotoComiX smoothing: Amplitude set to 20 - 80 & Sharpness set to 15 - 30
           - Thin Brush Smoothing: Sharpness set to .5 - .9
           - Shouldn't need to change Gamma setting.
           - Then use Filters -> Enhance -> Sharpen.

Burry Photos:

       - Filters -> Enhance -> Unsharp Mask
       - Filters -> Enhance -> Sharpen (best to use unsharp mask first)
       - Tools -> Paint Tools -> Blur/Sharpen (if you need to blur or sharpen specific areas in the image) (use sparingly as sharpening increases the apparent sharpness of edges in the image, but also amplifies noise.)

Red Eye:

      -First, use the Free Select Tool to select around both eyes (hold down Shft key to select more than one area) (If you don't select around the eyes any red color in the image will be effected by red eye removal).
      -Second, Tools -> Enhance -> Red Eye Removal…

Scale/Resize Image (both in px and in file size (kb/mb):

       - Image -> Scale Image (change size of image in px)
       - File -> Export (click export for file as .jpg then using the 'Quality' slider set it to a lower number (best not under 60-80)) (check 'show preview …') (change the file size of the image (kb/mb/gb)
       - docs.gimp.org/2.8/en/gimp-image-scale.html
       - www.gimp.org/tutorials/GIMP_Quickies
       - docs.gimp.org/2.8/en/gimp-images-out.html

Crop Image:

       - Tools -> Transform Tools -> Crop (or use cropping tool on tool bar). Select what you want and hit enter ('esc' to revert change)
       - Image > Autocrop Image - This will remove the transparent part and crop the image. That is, removes the transparent part and have canvas precisely fit the image. Doing that allow me to evaluate how the image will fit in the display of the app otherwise if extra spaces is present on the image, it will be harder to center properly the image during the app development.
       - www.gimp.org/tutorials/GIMP_Quickies (scroll down to 'Crop an Image').
       - docs.gimp.org/2.8/en/gimp-tool-crop.html
       - docs.gimp.org/en/gimp-tutorial-quickie-separate.html
       - www.howtogeek.com/76383/3-easy-tips-to-fix-ugly-edges-when-removing-backgrounds

Layer Masks:

       - Layer masks are purely grayscale affairs, so you can only work in shades of gray.
       - www.gimp.org/tutorials/Layer_Masks
       - patdavid.net/2011/10/getting-around-in-gimp-layer-masks.html
       - patdavid.net/2011/10/getting-around-in-gimp-luminosity-masks.html (Blend 2 or more images) (My testing /c/Web_Dev/GIMP/layer_mask_and_luminosity_testing.xcf)

Remove objects from image leaving the original image intact (but with the selected object removed):

       - www.daviesmediadesign.com/how-to-remove-anything-from-a-photo-in-gimp
      -GMIC:
           - OMG Sharapova photo remove objects or people GIMP2 G'MIC
           - patdavid.net/2014/02/getting-around-in-gimp-gmic-inpainting.html
      -Resynthesizer:
           - patdavid.net/2012/08/getting-around-in-gimp-heal-selection.html
                   i. Use the select tool to select the area to remove.
                   ii. Filters -> Enhance -> Heal Selection…

Remove object from image and place onto another background:

       - docs.gimp.org/en/gimp-tutorial-quickie-separate.html
       - Steps:
           1. Create a new layer (transparent) and fill with the background that you want (color, pattern, image, etc…)
           2. Using a select tool, select your object to remove from the image.
           3. Select -> Invert (ctrl+i)
           4. Ctrl+x (cut)
           5. Touch up areas as needed using any of the Paint tools.
           6. Select -> None (if marching ants around object).
           7. Makes sure all layers are now showing (eye next to the layer is selected)

Resize an image while keeping an object in the photo the same size:

       - www.gimpshop.com/tutorials/enlargin-images-with-liquid-rescale

Rotate/Flip Image:

       - Image -> Transform (for full image rotates (not layer))
       - www.gimp.org/tutorials/GIMP_Quickies (scroll down 'Rotate and/or Flip an Image').

Blend 2 Images:

       - www.gimp.org/tutorials/Blending_Exposures
       - Google search and see Youtube videos. Search for 'gimp blend image with background'.

Other:

       - emptyeasel.com/2008/08/29/how-to-create-a-photomontage-in-gimp (Combine photos to make one photo like a collage).
       - emptyeasel.com/2008/10/03/gimp-brushes-tutorial-how-to-modify-and-create-brushes-in-gimp (modify existing or create your own brush)
       - emptyeasel.com/2008/10/17/how-to-create-sepia-tone-photographs-from-color-photos-in-gimp (turn color photo into a gold/yellow b&w type photo) (Also, can do: 'Filters -> Décor -> Old Photo…')
       - emptyeasel.com/2008/08/08/how-to-unskew-and-color-correct-images-of-your-artwork-in-gimp (If an object in a picture is slanted, you can crop, and skew (Tools -> Transform Tools -> Perspective), and correct color (Colors -> Levels (to change darkness and lightness) & Colors -> Hue-Saturation (to adjust the saturation or brightness of the image. HSL (Hue-Saturation-Lightness) of all colors or a specific color in the image)).
       - emptyeasel.com/2008/08/15/how-to-create-digital-paintings-in-gimp (Can scan in or take photo of a drawing and bring into Gimp to use for an image).

Below is a list of docs I have Read/Completed/Watched for GIMP (ALL FREE):

- How To Prepare Your Image For The Web Using Gimp - WATCHED (18 Apr 18) (Shows how to resize image for Web).
- www.rileybrandt.com/2014/03/09/photoshop-to-gimp - READ (8 Aug 18). Some good options to set for GIMP.
- guides.lib.umich.edu/c.php?g=282942&p=1888162 - READ (13 Aug 18). Note difference between scaling (px) (Image -> Scale Image) and resizing (dpi) (Image -> Print Size).
- digital-photography-school.com/content-aware-resizing-in-gimp - READ (13 Aug 18). Using Liquid Rescale.
- How to edit your product photos with Gimp - WATCHED (13 Aug 18). Good overview of cropping, image scale, Colors -> (Levels, Thresholds, & Brightness and Contrast), burn tool).
- docs.gimp.org/en/gimp-images-out.html#file-jpeg-save - READ (14 Aug 18). Explains the Gimp settings when exporting to .gif, .jpg, .png, and .tiff.
- www.pageonepower.com/linkarati/creating-web-graphics-with-gimp - READ (14 Aug 18). Takes you through basic example of creating an image using background, text, image (with layers).
- www.lifewire.com/partial-color-effect-with-the-gimp-1701637 - READ (14 Aug 18). Turn a color photo into B&W, apply a layer mask, then change a section of the photo to have color.
- themeskills.com/gimp-optimize-images-wordpress - READ (15 Aug 18). Basic 'Image -> Scale Image', Crop (what you don't want), and Export As.
- www.lifewire.com/gimp-rotate-tool-1701661 - READ (15 Aug 18). Full overview of rotating.
- Reduce Noise - GIMP tutorial - WATCHED (17 Aug 18). Uses Wavlet Denoise plug-in.
- Gimp: Using a Layer Mask - WATCHED (20 Aug 18). Good overview of Layer Mask.
- www.earthboundlight.com/phototips/unsharp-mask.html - READ (21 Aug 18). Explains settings for Unsharp Mask.
- Gimp Tutorial:Denoise Photos, Lains Denoise Plugin, G'Mic - WATCHED (21 Aug 18). G'MIC -> Repair -> Iain's fast denoise. Then, Filters -> Enhance -> Sharpen.
- kimsereyblog.blogspot.com/2016/12/gimp-alpha-channel-what-is-it.html - READ (22 Aug 18). Goes over how to add text and then have it placed on background that outlines the text.
- docs.gimp.org/2.8/en/gimp-tool-crop.html - READ (23 Aug 18).
- digital-photography-school.com/make-your-photos-sparkle-with-gimp - READ (Uses Colors -> Levels, Colors -> Hue-Saturation, Colors -> Balance, and a background layer to lighten)
- www.askdesign.biz/blog/2015/07/how-to-prepare-images-for-the-web - READ (23 Aug 18). Shows dimensions but not much more.
- docs.gimp.org/2.8/en/gimp-tools-selection.html#gimp-tool-select - READ (25 Aug 18). Read all the links to selection tools. Review as needed.
- docs.gimp.org/2.8/en/gimp-tools-paint.html - READ (27 Aug 18). Re-read as needed for using tools.
- docs.gimp.org/2.8/en/gimp-imaging-photos.html - READ (27 Aug 18). Review for image correction methods.
- patdavid.net/2011/10/getting-around-in-gimp-luminosity-masks.html -COMPLETED (31 Oct 18). Blending images and colors.
- patdavid.net/2011/10/getting-around-in-gimp-layer-masks.html -COMPLETED (30 Oct 18).

Notes on Eslint

My Notes on Chrome DevTools

Below is a list of docs I have Read/Completed/Watched for Chrome DevTools (ALL FREE):

*www.html5rocks.com/en/tutorials/developertools/part1 - READ (2 Mar 18) (Old version. Not relevant).
*tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks - READ (8 Mar 18)
*developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom - READ (12 Mar 18)
*developers.google.com/web/tools/chrome-devtools/console/get-started - READ (13 Mar 18) (none of the buttons work for the demo).
*developers.google.com/web/tools/chrome-devtools/console/command-line-reference - READ (13 Mar 18)
*developers.google.com/web/tools/chrome-devtools/javascript/breakpoints - READ (19 Mar 18)
*developers.google.com/web/tools/chrome-devtools/javascript - READ (15 Mar 18)
*developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom - READ (21 Mar 18)
*www.keycdn.com/blog/chrome-devtools - READ (10 Apr 18)
*www.hongkiat.com/blog/chrome-web-developers-tips - READ (11 Apr 18)

My Notes on Mocha

Below is a list of docs I have Read/Completed/Watched for Mocha (ALL FREE):

*Intro To JavaScript Unit Testing With Mocha JS & Chai - WATCHED (20 Apr 18)

My Notes on WebPack

Below is a list of docs I have Read/Completed/Watched for WebPack (ALL FREE):

*Webpack Crash Course - WATCHED (5 Apr 18)
*www.thenetninja.co.uk/courses/webpack-tutorials-for-beginner - WATCHED (15 Apr 18) (A little confusing)
*www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack - READ (16 Oct 18).
*www.netlify.com/blog/2017/11/30/starting-with-webpack-from-scratch - READ (16 Oct 18).
*alligator.io/vuejs/demistifying-vue-webpack - READ (10 Dec 18). Good basic overview.

List of Colors. As web developers, especially front-end developers and graphic designers, knowing how to use colors is vital.

My Notes on SASS

Below is a list of docs I have Read/Completed/Watched for SASS (ALL FREE):

*Sass Workflow & Dev Server From Scratch Using Gulp (First 16min is gulp. From 16min in is start of intro to SaSS) - WATCHED (5 Apr 18)
*How to learn Sass From Beginner to Advanced (Video just explains all parts that can be found on sass web site for documentation) - (6 Apr 18)
*SASS Tutorial (Excellent! Net Ninja SaSS Video Series. 12 Videos) (~1 1/2hr) - WATCHED (17 Apr 18)

My Notes on Gulp

Below is a list of docs I have Read/Completed/Watched for Gulp (ALL FREE):

*Gulp JS Crash Course - WATCHED (5 Apr 18) Note, imageMin for resizing images (use this, Gimp (my preference), or other tool for your images).
*Learning Gulp (11 video series: 1 1/2hr) - WATCHED (17 Apr 18)
*css-tricks.com/gulp-for-beginners - READ (17 Apr 18)