• Find and install the Live Server extension. This allows you to run a web server that automatically reloads every time you save a file in your web project: 

Click the Extensions icon on the Activity Bar > type "Live Server" in the search box > click Install

• To use Live Server: Open an HTML document in VS Code > Right click in the Editor > select "Open with Live Server". The HTML page will automatically open in your default web browser.

• Find and install the JavaScript ES6 Code Snippets extension.

Click the Extensions icon on the Activity Bar > type "JavaScript ES6 Code Snippets" in the search box > Click install 

• To use ES6 Snippets: Type in a shortcut followed by tab and the snippet will be added.

• Tab size: Search for Tab Size > value: 2 or 4

• Word wrap: Search for Word wrap > value: on or off
• Minimap: Search for minimap > check or uncheck Minimap: Enabled.
• Enable Preview: Search for enable preview > check or uncheck Editor: Enable Preview.
• Vertical Rulers: Search for rulers > click Edit in settings.json > set "editor.rulers" to "editor.rulers": [80, 100], or some other number(s) > Save the file.
• Optionally, disable popup hints/suggestions and breadcrumbs:
• Quick suggestions: Search for quick suggestions > "other" value off.
• Hover (shows hints when hovering over your code): Search for hover > uncheck Hover: Enabled.
• Parameter hints: Search for parameter hints > uncheck Parameter Hints: Enabled.
• Suggest on trigger characters: Search for Suggest on trigger characters > uncheck Editor: Suggest on trigger characters.
• Breadcrumbs: Search for breadcrumbs > uncheck Breadcrumbs: Enabled.

• Mac keyboard shortcuts generally use the Command key.
• Windows keyboard shortcuts generally use the Control key.
• By convention, keyboard commands are written like Command+C. This means to press the Command key and the lower case "c" key simultaneously.
• Mac and Windows usually, but not always, use the same key combinations for the shortcuts, so they could be expressed as commandOrControl+C.

• CLI/Terminal/Console: The terms command-line interface (CLI), terminal, and console are often used interchangeably. They refer to the software application that provides an interface for entering text commands. 
• Terminal: is also the name of Mac's terminal application. It emulates a computer terminal providing a command-line interface as well as some Graphical User Interface (GUI) features like tabs, copy/paste, etc. It automatically opens a Unix Shell application which interfaces with the computer's operating system.
• Shell: A Shell program is a command-line interpreter program that executes commands on the operating system's services.
• PowerShell: is the default command-line shell for Windows. It interfaces with File Explorer.
• Unix shell program: Command-line interpreter that interfaces with the Unix operating system. There are several Unix shell programs. The two most commonly used are:
• Z Shell (zsh): This is the default Unix Shell program used in MacOS.
• Bash: is the default command shell for most Linux distributions

• Unix: is a family of operating systems first published in 1971. It is used by MacOS/iOS, and the majority of servers.
• Unix-like operating systems: Unofficial umbrella term for operating systems that behave like a Unix system, whether or not they are certified as following the Single UNIX Specification. Includes Linux.

• ls  The list command lists the items in the current directory.
• ls -l ls has a number of options you can add to it. Applying the -l long option will return extra information about each item including the permissions, owner, size, date last modified, and name.
• ls -lh Applying the -h human readable option will show the item size as B bytes, K kilobytes, M megabytes, or G gigabytes which make them easier to read. You can add both options individually ls -l -h but it is more common to combine them after a single dash.
• ls -lha Applying the -a option will show all items including hidden files that start with a dot.
• ls -lha ~/Documents ls works on the current directory by default. If you want to show the items in a different directory you need to add the path as an argument. To show the items in the Documents directory add the absolute or relative path as an argument.

• ls -lha ~/Documents ~/Desktop A command can have multiple arguments. To show the items in both the Documents and Desktop directory list them both as arguments separated by a space.

• While Windows allows you to use either forward slash or backslash, Linux only allows forward slash. As such you may want to use only forward slash as a habit.
• If a folder has a space in it, you must put it in quotes: /"program files"/directoryname
• Including c: when referencing the root directory in Windows is optional.
• Case sensitivity: Unix is case sensitive, but case sensitivity for directory and file names depends on the underlying operating system's file system. MacOS's file system, for instance, is not case sensitive.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

• <img> Image tags.
• <hr> Horizontal line tags.
• <input> Form field input elements.
• <link> Link tags to stylesheets and the favicon image. 

<head>
  <link rel="icon" type="image/x-icon" href="images/favicon.png">
  <link href="stylesheets/styles.css" rel="stylesheet">
  <script src="script.js" defer></script> 
  <title>Page or Site title</title>
</head>

<body>
  <nav>navbar links go here</nav>
  <main>
    <h1>Page heading text goes here</h1>
    ...
  </main>
  <footer>footer content goes here</footer>
</body>

<h2>First topic</h2>
<p>Paragraph text</p>
<p>Another paragraph text</p>
<hr>

<h2>Second topic</h2>
<p>Paragraph text</p>
<p>Another paragraph text</p>
<hr>

• Unordered list:

<ul>
  <li>List item.</li>
  <li>Another list item.</li>
</ul>

• Ordered list:

<ol>
  <li>First item.</li>
  <li>Second item.</li>
</ol>

<p>
  <b>Bold text</b> 
  <i>Italic text</i><br>
  <small>Smaller text</small>
  <span>Generic inline element</span><br>
  <a href="https://www.example.com">example website</a>
</p>

• Display a diagram image. Use the intrinsic width and height.
• <img src="images/diagram.png" alt="Diagram"> 

<form>
  <div>
    <label for="field1">Short text field 1</label>
    <input id="field1" name="field1" type="text">
  </div>
 
  <div>
    <label for="field2">Number field 2</label>
    <input id="field2" name="field2" type="number">
  </div>
 
  <div>
    <label for="field3">Long text field 3</label>
    <textarea id="field3" name="field3" rows="4"></textarea>
  </div>
  <button type="submit">Save</button>
</form>

<head>
  ...
  <link href="stylesheets/styles.css" rel="stylesheet">
</head>

body { font-family: Arial; }

• Create a shrink class that sets the font size to 12 pixels:

.shrink { font-size: 12px; }

• Image will not take up more than 100% of the available width. It will shrink to fit the screen if the screen is narrower than the image width.

.img { max-width: 100%; }

• Create a shrink class that sets the font size to 12 pixels:

.shrink { font-size: 12px; }

• Given a div element with class box: 

<div class="box">box me in</div>

• In the stylesheet set the box class to have margin of 16px on top and 16px on bottom. 
• Add a 2 pixels wide solid red border around it with rounded corners.
• Add padding of 2 pixels on the top and bottom, and 4 pixels on the left and right.

.box {
  margin-top: 16px;
  margin-bottom: 16px;
  border: 2px solid red;
  border-radius: 4px;
  padding: 2px 4px;
}

• <img src="..." alt="..." class="gallery">
  <img src="..." alt="..." class="gallery">
  <img src="..." alt="..." class="gallery">

• .gallery { width: 300px; height: 200px; }

• <img src="..." alt="..." class="single-img" width="600">
• .single-img { max-width: 100%; }

• <span class="text-danger">There was an error</span> Color text red.
• <span class="text-danger-emphasis">There was an error</span> Color text dark red.
• <footer class="bg-light"> Set the footer background color to light grey.
• <button class="btn btn-secondary"> Set the button color to grey.

• <div class="m-3"> Add 16 pixels margin to all four sides.
• <div class="mt-3"> Add 16 pixels margin to the top.
• <div class="mb-3"> Add 16 pixels margin to the bottom.
• <div class="ms-3"> Add 16 pixels margin to the left (start).
• <div class="me-3"> Add 16 pixels margin to the right (end).
• <div class="my-3"> Add 16 pixels margin to the top and bottom.
• <div class="mx-3"> Add 16 pixels margin to the left and right.

• <div class="container">...</div>

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ol>

let result = 0;
result = 8 * 2;
result; // Returns 16
result = 4 + 9;
result; // Returns 13

const x = 1;
if (x > 0) {
  const y = 2;
  y; // returns 2
}
x; // returns 1
y; // throws ReferenceError: y is not defined

• To set the value of a variable in an if statement, declare it outside the if statement.

let result
const score = 80;
if (score > 60) {
  result = 'Pass';
else {
  result = 'Fail';
}
result; // returns 'Pass'

const obj1 = { name: 'Joey', age: 22 };
const obj2 = { name: 'Joey', age: 22 };
let res = (obj1 === obj2); // returns false

const objCopy = obj1;
let res = (objCopy === obj1); // returns true

• 4 + 3 is an expression that resolves to 7.
• 7 is a number literal. It is a primary expression because it is already at it's lowest level.
• true is a boolean literal and is a primary expression.
• 5 > 3 is an expression that resolves to true. 

let x = 0;
x = x + 1; // returns 1
x = x + 1; // returns 2
x = x + 1; // returns 3

let y = 0;
y += 1; // returns 1
y += 1; // returns 2
y += 1; // returns 3

• Greater than/less than comparison examples:

1 < 2; // returns true
1 <= 2; // returns true
1 > 2; // returns false
1 >= 2; // returns false

• Strict equality and inequality examples:

7 === (5 + 2); // returns true
7 === '7'; // returns false, they are not the same data type
7 !== '7'; // returns true

• Loose equality and inequality examples:

7 == '7'; // returns true, '7' is converted to 7 before doing the compare.
7 != '7'; // returns false

let name = 'Joey';
let age = 22;
name === 'Joey'; // returns true
age < 21; // returns false.

const score = 77;
let pass = false;
if (score >= 60) {
  pass = true;
}
pass; // returns true

const score = 77;
let pass;
if (score >= 60) {
  pass = true;
} else {
  pass = false;
}
pass; // returns true

function add(x, y) {
  const res = x + y;
  return res;
}
let res = add(5, 3); // returns 8

• The add function has two parameters, x and y. 
• The function body adds the two parameter values together then returns the result.
• We call the function passing in two arguments: 5 and 3. 
• We assign the function's return value of 8 to the variable res. 

let res = add(5, 3); // returns 8
function add(x, y) {
  const res = x + y;
  return res;
}

const add4 = (x) => {
  const result = x + 4;
  return result;
}
add4(10); // returns 14

const add5 = (x) => x + 5;
add5(10); // returns 15

const name = 'Joey';
const age = 22;
`My name is ${name}.
I am ${age} years old.`

const name = 'Joey';
let username = name.toLowerCase(); // returns "joey"
username = name.toUpperCase(); // returns "JOEY"
name; // returns "Joey". The original variable does not change.

let str = 'Hello ' + 'world';
str; // Returns "Hello world"

let str2 = 'Hello ';
str2.concat('world');
str2; // Returns "Hello world" 

• Below is an object literal named author. It has four properties of different data types: name (a string), age (a number), active (a boolean), and books (an array).

const author = { 
  name: 'Joey R', 
  age: 34,
  active: true,
  books: ['Learn JavaScript', 'Learn Node.js', 'Learn Express'],
};

• Below are variables for name and age. 

const name = 'Joey R';
const age = 34;

• Create an object with properties called name and age set to the variables name and age:

const author = { name: name, age: age };

const author = { name, age };

class Author {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const author1 = new Author('Joey', 32);

• The constructor function has parameters for name and age.
• In the last line we instantiate a new object by calling the Author class with the new operator, passing in arguments 'Joey' and 32 for the name and age property values. We assign the new object to variable author1.

author1.name; // Returns "Joey"

author1.age = 33;
author1.age; // Returns 33

• Create an Author class that sets name and age properties and instance methods to add a year to the age value and logs information about the author. 

class Author {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  addYear() { this.age += 1; };
  log() { return `${this.name} is ${this.age} years old.` };
}

• Instantiate an Author object and assign it to the variable author1.

• Then call author1.add() which changes the age property value to 33.
• Then call author1.log() which returns information about the author1 object.

const author1 = new Author('Joey R', 32);
author1.addYear();
let view = author1.log(); // returns Joey R is 32 years old.

• Create an array of three fruit names. Then get the elements by their index number.

const arr = ['apple', 'banana', 'orange'];
arr[0]; // returns 'apple'
arr[1]; // returns 'banana'
arr[2]; // returns 'orange'

arr[arr.length - 1]; // returns 'orange'

arr[1] = 'blackberry';
arr[1]; // returns 'blackberry'

const arr = ['a', 'b', 'c'];

• Remove an item from the front of the array and return it.

let elem = arr.shift(); // arr is now ['b', 'c']
elem; // returns 'a'

arr; // returns ['b', 'c']
arr.unshift(1); // arr is now [1, 'b', 'c']

arr; // returns [1, 'b', 'c']
let elem = arr.pop(); // arr is now [1, 'b']
elem; // returns 'c'

arr; // returns [1, 'b']
arr.push(3); // arr is now [1, 'b', 3']

• Iterate through the array and log each element to the console. 

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach((elem) => {
  console.log(elem);
});

• Document Object Model (DOM): When an HTML document is sent by a server to the web browser, the browser converts it to an object called the Document Object Model, or the DOM. 

• API: An API (Application Programming Interface) is an interface for a program to interact with a separate software component or resource. The API can provide data, functions, routines or other services to your program. 
• DOM-related Web APIs: The browser has APIs that provide an interface between JavaScript and the DOM. There are JavaScript properties and methods to access, create, move and change HTML elements on the web page. Event listeners can be added to elements that get triggered when a given event occurs.

• The defer attribute causes the browser to load the JavaScript file in parallel with parsing the HTML document, thus speeding up the process. 
• Defer then executes the script after the HTML document has been parsed, but before the DOMContentLoaded event is fired.

<body>
  <h1 id="heading" class="light-theme">Try JS</h1>
  <button id="btn">Clickme</button>
  <ul id="list"></ul>
</body>

const heading = document.getElementById('heading');
const btn = document.getElementById('btn');
const list = document.getElementById('list');

console.log(heading.textContent); // logs "Try JS"
heading.textContent = "Try JS code snippets";

heading.innerHTML = "Try JS <small>enter code snippets</small>";
heading.innerHTML; // returns "Try JS <small>enter code snippets</small>"

• Put an empty list element in the HTML document:

<ul id="list"></ul>

const list = document.getElementById('list');
...
const arr = ['Item 1', 'Item 2', 'Item 3'];
let listItems = '';
arr.forEach((item) => {
  listItems += `<li>${item}</li>`; 
});
list.innerHTML = listItems;

• The HTML document has a heading element with class "light-theme".

<h1 id="heading" class="light-theme">Try JS</h1>

• Put light-theme and dark-theme classes in the stylesheet/styles.css file.

.light-theme { background-color: whitesmoke; color: black; }
.dark-theme { background-color: black; color: white; }

const heading = document.getElementById('heading');
...
heading.classList.remove('light-theme');
heading.classList.add('dark-theme');

• In the HTML document add a button with id "btn".

<button id="btn">Clickme</button>

• In the attached JavaScript file get the element with id btn, listen for the "click" event, and log a message when the event is triggered.

const btn = document.getElementById('btn');
...
btn.addEventListener('click', () => {
  console.log('Button was clicked');
});

• Generate a model called Article with attributes and datatypes of title: string, content: text.

const express = require('express');
const router = express.Router();
const { Collection } = require('../models');
const createError = require('http-errors');
 
// Routes
router.get('/', list);
router.get('/create', createForm);
router.post('/create', create);
router.get('/:id', detail);
router.get('/:id/update', updateForm);
router.post('/:id/update', update);
router.get('/:id/delete', destroy);

// Controller Functions
// GET
async function list(req, res, next) {
  const collections = await Collection.findAll({ 
    attributes: ['id', 'mainField', 'createdAt'],
    order: [['fieldToSortBy', 'DESC']] // ASC or DESC
  })
  res.render('index', { title: 'Title', collections });
}

// detail handler function goes here.
// createForm handler function goes here.
// create handler function goes here.
// updateForm handler function goes here.
// update handler function goes here.
// destroy handler function goes here.

module.exports = router;

<%- include('header') %>

<h1>
  Collections <a href='/create'>Create new collection</a>
</h1>
<ul>
  <% collections.forEach((collection) => { %>
    <li>
      <a href="/<%= collection.id %>"><%= collection.mainField %></a>
    </li>
  <% }); %>
</ul>

<%- include('footer') %>

async function detail(req, res, next) { 
  const collection = await Collection.findByPk(req.params.id);
  if (!collection) {
    return next(createError(404));
  }
  res.render('detail', { title: 'Collection', collection });    
}

<%- include('header') %>

<h1>
  <%= collection.mainField %>
  <a href="/<%= collection.id %>/delete">Delete</a>
  <a href="/<%= collection.id %>/update">Edit</a>
</h1>
<p>
  <strong>Date:</strong>
  <%= collection.updatedAt.toLocaleString("en-US", 
   { month: 'long', day: 'numeric', year: 'numeric' }); %>
</p>

<hr class='mt-2'>

<div><%= collection.field2 %></div>
<div><%= collection.field3 %></div>

<%- include('footer') %>

function createForm(req, res, next) {
  res.render('create', { title: 'Create Collection' });
}
 
async function create(req, res, next) {
  const collection = await Collection.create(req.body, {fields: ['mainField', 'field2', 'field3'] });
  res.redirect(`/${collection.id}`);    
}

<%- include('header') %>

<h1>Create Collection</h1>
<hr>

<form method="POST" action="">
  <div>
    <label for="mainField">MainField</label>
    <input type="text" id="mainField" name="mainField">
  </div>
  <div>
    <label for="field2">Field2</label>
    <input type="text" id="field2" name="field2">
  </div>
  <div>
    <label for="field3">Field3</label>
    <input type="text" id="field3" name="field3">
  </div>
  <button type="submit">Submit</button>
</form>

<%- include('footer') %>

async function updateForm(req, res, next) { 
  const article = await Collection.findByPk(req.params.id);
  res.render('update', { title: 'Update Collection', collection });    
}
 
async function update(req, res, next) {
  const id = req.params.id; 
  await Collection.update(req.body, {where: {id: id}, fields: ['mainField', 'field2', 'field3'] });
  res.redirect(`/${id}`); 
} 

<%- include('header') %>

<h1>Update Collection</h1><hr>

<form method="POST" action="">
  <div>
    <label for="title">MainField</label><br>
    <input type="text" id="mainField" name="mainField"
           value="<%= collection.mainField %>">
  </div>

  <div>
    <label for="field2">Field2</label><br>
    <input type="text" id="field2" name="field2"
           value="<%= collection.field2 %>">
  </div>

  <div>
    <label for="field3">Field3</label><br>
    <input type="text" id="field3" name="field3"
           value="<%= collection.field3 %>">
  </div>

  <div>
    <button type="submit">Submit</button>
    <a href="/<%= collection.id %>">Cancel</a>
  </div>
</form>

<%- include('footer') %>

async function destroy(req, res, next) {
  await Collection.destroy({where: {id: req.params.id}});
  res.redirect('/');   
}