SHORT SUMMARY:

Creating a Website with JavaScript

Learn how to build complex websites using JavaScript from a beginner to a
professional level. Build projects like a rock paper, scissors game, a to-do list, and a
calculator. No previous coding or technical experience required.

Getting Started with JavaScript

Learn how to give instructions to a computer with JavaScript by installing Google
Chrome and using the console.

Basics of JavaScript
Giving instructions to a computer using code, running code, modifying webpages,
and understanding the language.

Syntax Rules of JavaScript

Rules that must be followed when using JavaScript, like grammar rules in English.
Otherwise, computer won't understand the code.

Calculating Cost with JavaScript

Using JavaScript to add, subtract, multiply and divide numbers to calculate cost of
products, shipping and taxes.

Order of Operations in JavaScript

Calculations are done in a specified order, with brackets having the highest priority.

Order of Operations

Calculating 10% tax and cost of products using order of operations. Multiplying
before adding to get accurate results.

Using Brackets to Calculate Numbers in JavaScript

Explains how to use brackets to control the order of operations when calculating
numbers in JavaScript. Also explains why computers have trouble accurately storing
some floats.

Calculating Money with JavaScript

Avoiding inaccuracies when calculating money in JavaScript by doing calculations in

cents and converting back to dollars. Rounding numbers with math.round(). Practical
example of calculating tax and rounding result.

Rounding Numbers in JavaScript

To round a number in JavaScript, first calculate the result in cents, then round the
number to the nearest cent, and finally convert back to dollars by dividing by 100.
Working with Numbers and Math
Learned order of operations, how to round numbers, and how to search for code.

Type Coercion and String Creation

Combining strings and numbers to create text using type coercion and math.

Order of Operations with Strings and Numbers

JavaScript adds from left to right. To solve the problem of adding a string and a
number, use brackets to control which part of a calculation gets done first. Multiply
and divide are done next, and add and subtract are done last.

Creating Strings in JavaScript

Using strings and numbers to create text in JavaScript, such as creating a popup
alert with the first line of text. Three ways to create a string: single quotes, double
quotes, and using single quotes with double quotes if a single quote is inside the
string.

Using Escape Characters

Escape characters are special characters that start with a backslash and are used in
strings. They create a character that is just text and does not start or end strings.
Examples include the new line character and slash single and double.

Interpolation and Multi-Line Strings

Template strings have two special features: interpolation and multi-line strings.
Interpolation lets us insert values directly into a string, while multi-line strings allow us
to create strings on multiple lines.

Using Strings in JavaScript

Learn how to use strings, numbers, and HTML/CSS/JavaScript together to create a
website. Install a code editor and review HTML/CSS basics.

HTML Basics
Instructions to a computer to create a button and paragraph of text. Syntax rules for
HTML elements, such as starting with a less than symbol and element name.

HTML Syntax Rules

Review of HTML syntax rules: opening/closing tags, nesting, multiple spaces, and
new lines.

CSS Basics
Reviews the basics of HTML and CSS syntax, including how to write CSS code
inside HTML files, how to change the appearance of elements, and syntax rules.
CSS Syntax and HTML Attributes
Review of CSS syntax and introduction to HTML attributes to style elements
differently. Explains syntax rules for attributes and class attribute to label elements.

HTML Structure

Review of HTML structure and how to use it in code.

Organizing HTML Code

Creating HTML element with head and body sections. Benefits of structure include
adding title element and automating refresh with VS Code extension.

VS Code Setup

Update tab size and indent settings to use two spaces per indent. Shortcuts to add
and remove indents.

VS Code Setup

Adjust indents and enable line wrapping in VS Code for better code readability.

Using HTML, CSS, and JavaScript Together

Combines HTML, CSS, and JavaScript to create interactive websites. Can run
JavaScript code in script element or on click attribute. Comments provide more info
for readers and can be used to comment out code.

JavaScript Comments and Console Log

Using slash star and star slash for multi-line comments, double slash for single line
comments, and console.log to display results back in the console.

Learning Variables
Review basics of HTML and CSS, set up code editor, learn how to use script element
and on click attribute, create comments, use console.dot.log, learn about variables
and create first variable.

Creating Variables in JavaScript

Using let to create variables and save values inside them, which can be used in
calculations.

Creating Variables in JavaScript

Learn how to create variables in JavaScript, including syntax rules and the use of
semicolons.

Reassigning Variables
Changing the value saved inside a variable by typing the variable name and a new
value. Syntax does not include the word "let". Can be done multiple times.

Creating a Cart Quantity Feature

Creating a new HTML file and copying code from another file to build a simpler
version of the cart quantity feature, increasing the quantity by one, two, or three when
the respective buttons are clicked.

Creating Buttons
Creating buttons in HTML and making webpage interactive with JavaScript, including
creating a variable to save cart quantity and using on click attribute to display
message in console.

Making the Cart Quantity Feature

Creating a variable to save the quantity and updating it when buttons are clicked.
Displaying the updated quantity in the console.

Creating a Shopping Cart Feature

Adding on click attributes to increase cart quantity, display updated quantity in
console, and reset cart quantity to zero.

Naming Conventions
Camel Case, Pascal Case, Kebab Case, and Snake Case are all naming
conventions used in programming. JavaScript uses Camel Case for variable names
and Pascal Case for certain features.

Creating Variables in JavaScript

Learn 3 ways to create variables in JavaScript: let, const, and var. Const creates a
variable that can't be changed later, while let and var can be changed. Best practice
is to use const by default.

Variables in JavaScript
Learn about variables, reassigning, naming conventions, and 3 ways to create
variables (let, const, var).

Bullying Values
Boolean values are true or false and represent whether something is true or false.
Comparison operators can be used to create boolean values. Double equals and
triple equals are two ways to check if two values are equal.

Comparison Operators
Comparing values in JavaScript using double and triple equals, and understanding
the order of operations.

Using If and Else Statements

Learn how to write code to compare two values and decide which code to run.
Syntax rules for if statements and optional else statement discussed.

Combining If Statements and Variables

Using Ls if branches, we can add multiple conditions to an if statement and combine
it with variables from the previous lesson.

Creating a Rock Paper Scissors Game

Creating a new HTML file, copying code from another file, changing the title, and
preparing the file for JavaScript interactivity.

Converting Algorithm to Code

Using an if statement, convert algorithm steps into code to randomly select a move
for the computer and give it an equal chance of picking rock, paper or scissors.

Logical Operators
Combines two boolean values to check if both are true. Used in project to check if
random number is between zero and one third.

Logical Operators

Using if/else statements to check for conditions and logical operators to evaluate
true/false values.

Scope and Variables

Variables created inside curly brackets (scope) are limited in their use and can cause
naming conflicts. Creating variables outside of scope can help avoid these conflicts.

Scope and Variables

Variables created inside curly brackets only exist in that scope. Using var can cause
conflicts, so use let and const instead. Comparing moves to get result and save to
variable.

Creating a Rock Paper Scissors Game

Generating a random number, converting it to a computer move, comparing user
move to computer move and displaying result in a popup.

Truthy and Falsey Values

In JavaScript, false, 0, empty string, NaN, and undefined are falsey values. Any other
value is truthy. If statements can use truthy and falsey values.

Truthy and Falsey Values

Using truthy and falsey values as shortcuts in code, such as with if statements and
logical operators. Falsey values include false, zero, empty string, nan, undefined, and
null.

Turnery Operator
A shortcut for an IF statement that saves the result of the first value (truthy/falsey) in
a variable.
Guard Operator
An AND operator that stops early if the left side is falsey, blocking the code on the
right.

Shortcutting IF Statements

Learned about boolean values and how they can be used as shortcuts for IF
statements like the OR operator and the Default operator.

Using Functions
Learn how to use functions to reuse code, create a new file and open it in the
console, create a function with a name and code, and use the function name with
brackets to run the code.

Creating a Function

Writing code to reuse by creating a function, giving it a name, and putting code in the
body.

Functions Create Scope

Functions create a scope that limits where a variable exists. Global variables can be
accessed anywhere and are used to solve the problem of code not running outside of
the function.

Functions and Return Statements

Functions help make code cleaner and easier to update. A return statement lets us
get a value out of a function. It can be a value, calculation, variable, or undefined.
The return statement ends the function immediately.

Returning Values from a Function

Using return statements to get a value out of a function, and saving the return value
in a new variable to prevent conflicting with variables outside the function's scope.

Creating a Function with Parameters

Creating a function to calculate the tax for an order, using parameters to put values
into the function.

Parameters in Functions
A parameter lets us put a value into a function and use it just like a variable. We can
pass a value into the function, which is also called an argument. We have used
functions and parameters this whole time.

Parameters in Functions
A function can have multiple parameters, which can be given default values.
Parameters are only available within the function's scope and can be used to
substitute values in the code.

Creating a Function with a Parameter

Create a function to reuse code with a parameter for the different moves.

Using Functions with Parameters

Reusing code in buttons to make code cleaner by using a function with a parameter.
Inside a function, other functions can be called.

Objects in JavaScript
Objects group multiple values together. We can access specific values in the object
using properties. We can also use objects to create a score in our rock paper
scissors project.

Objects in JavaScript
Access, change, add, and remove values from an object using dot notation. Syntax
rules for objects include open and closed curly brackets, property-value pairs
separated by a colon, and multiple values separated by a comma.

Adding Score to Rock Paper Scissors Game

Creating a copy of the rock paper scissors game from the previous lesson and using
objects to keep track of the score when playing the game. Resetting the score back
to zero when the reset score button is clicked.

Updating Score
Create a variable outside of a function to save score. Update score with an if
statement if result is a win. Increase wins property in score object by one.

Adding Score to Popup

Converting algorithm to code to update score and display it in popup using template
strings and multi-line strings.

Object Accessing Methods

Using dot and bracket notation to access values inside objects. Console.log product
two.name and console.log product two["name"] will both access the string "shirt".

Bracket Notation and Nested Objects

Allows us to use properties that don't work with dot notation, add values to objects,
use variables, calculations, and other objects as values.

Using Objects and Methods

Accessing values, functions, and methods in objects using dot or bracket notation.
Examples of built-in objects such as console and math.

Jason Builtin Object

The Jason Builtin object helps convert a JavaScript object to Jason and vice versa. It
also helps understand Jason, which stands for JavaScript object notation and is more
universal than a JavaScript object.

Using Local Storage

Learn how to use local storage to save values more permanently than variables,
which are deleted when the page is refreshed.

Local Storage
Retrieve and store values in local storage using the get item and set item methods.
Convert objects to strings using JSON.stringify and strings to objects using
JSON.parse.

Saving and Resetting Score in Local Storage

Storing score in local storage using JSON strings, and resetting score by removing
from local storage. If no score exists, default value is set.

Creating Score Feature in Rock Paper Scissors Project

Using let and null to create a score feature and reset score feature in the rock paper
scissors project, as well as using shortcuts such as not score and default operator.

Null and Undefined

Null and undefined are similar values in JavaScript, but null is used when something
is intentionally empty.

Auto Boxing
Strings and other values can have properties and methods, which is enabled by auto
boxing, a feature that automatically wraps the value in an object.

Copy by Reference
When creating objects, the actual value is created in memory and the variable just
gets a reference that points to that location. This makes the language more efficient
by not copying the entire object.

Object References and Destructuring Shortcuts

Comparing two objects compares the references, not the values inside. Destructuring
is a shortcut to take a property out of an object and save it in a variable.

Destructuring Shortcut
Taking properties out of an object using comma and variable.
Shorthand Property
Substituting variable into code for same property and variable name.
Shorthand Method
Writing function without function name for same code.

Shorthand Method Syntax

Learned about objects, built-in objects, null auto boxing, references, destructuring
shorthand properties, and shorthand methods. Exercises to practice working with
objects. Learned about document object model (DOM) to improve rock paper
scissors project.

Document Object Model

The document object is linked to the webpage. It contains properties and methods
that can be accessed using dot notation, which can be used to change the webpage.

JavaScript and HTML

Combines JavaScript and HTML to give JavaScript control of webpage. Properties
and methods can be used on HTML elements converted to JavaScript objects. Inner
HTML property controls all HTML inside body element.

Document Query Selector

A method of the document object that lets us get any element from the page and put
it inside our JavaScript using a string.

Selecting Elements
Using document.querySelector, we can get any HTML element from the page and
control its inner HTML. We can also select elements with a class attribute by typing a
dot in front of the class name.

DOM Combines JavaScript and HTML

Using the DOM, we can get HTML elements from the page, put it inside our
JavaScript and then save it in a variable. CSS is used to style elements with a
specific class. We can use the DOM to create projects that modify the webpage.

Creating the YouTube Subscribe Button

Creating HTML elements and JavaScript to make a YouTube subscribe button

interactive.

Subscribe Button Project

Using DOM, create a button that changes text from "Subscribe" to "Subscribed" and
back.

Separating HTML and JavaScript

Making code cleaner by moving JavaScript code to a function and calling it in the on
click attribute.

HTML Block Elements

Elements like paragraph take up an entire line by themselves, determining if an

element appears beside or below something.

Updating the Score

Using JavaScript to update the score on the page when a move is made and the
reset score button is clicked. Reusing code with a function to make the code more
efficient.

Displaying Results on Webpage

Using the DOM to display the result and moves on the webpage instead of a popup.

Creating HTML Elements

Creating HTML elements for a shipping calculator, including an input and button, and
adding a placeholder to the input.

Checking Input Value

Checking text inside input element and saving it in a variable. If cost is under $40,
add $10 of shipping and display total cost on page.

Type Coercion & On Key Down Attribute

JavaScript's type coercion and the on key down attribute are used to get the correct
value from the text box and do math properly. The number function is used to
manually convert the string into a number. Pressing enter will also calculate the total
and display it on the page.

Handling Key Down Events

Using event listeners to check for events and run JavaScript when those events
happen. Checking if key pressed is enter, and if so, running same code as calculate
button. Cleaning up code by moving it into a function.

Type Coercion and Window Object

Learned about type coercion and window object in JavaScript. Number function can
convert strings to numbers, and window object represents the browser.

Window Object

JavaScript built-in object that represents the browser and allows access to the
document object model.

Styling Elements with CSS

We reviewed CSS in lesson four and used the style element to write CSS code. We
used the class attribute to style a specific element and started with a dot and the
class name in the CSS. We then added properties between the curly brackets to
style the element.

CSS Property Value Pairs

Review of CSS syntax for styling elements, including properties and values,
separated by a colon and ended with a semicolon. Pixel units used for screen sizes,
images, and video sizes.
CSS Styling
Trial and error used to style elements with CSS properties such as padding, font-
weight, border-radius, and cursor.

Adding a Class to an Element

When we click a button, add a class called "is subscribed" to the element. CSS styles
can then be applied to this class.

Styling Text
Creating a feature to style the text on the page by changing the body element.

Styling Text and Elements with CSS

Using font-family, margin, padding, and font-size properties to style text and
elements.

Styling the Amazon Shipping Calculator

CSS used to style Amazon Shipping Calculator, including background color, text
color, font size, and padding. Cursor property used to create pointer icon when
mouse is over button.

Styling the Rock Paper Scissors Project

Making the background color of the page dark gray, text color white, and font aerial.

Styling HTML Elements

Using CSS to style HTML elements, such as a title, buttons, and images.

Organizing Files

Creating a folder to organize images and using file paths to tell the computer where
to look for them.

Styling Buttons with CSS

Adding class, background-color, border, width, height, border-radius and margin to
buttons to match the final design.

Styling Buttons and Results

Adding margin, font size, font weight, and class to buttons and results to match final
design.

Styling the Reset Score Button

Adding a class to the button, setting background color to white, removing border,
increasing font size, adding padding, and adding cursor pointer.

Organizing Code
Separating JavaScript, HTML, and CSS into their own files to make code cleaner and
easier to read.
Separating Code into Files
Learned how to use script and link elements to separate HTML, CSS, and JS into
their own files for easier readability.

Creating an Array
Learn to create an array in JavaScript and save it in a variable. Console log the
variable to display the list of values.

Arrays in JavaScript
Lists of values that can be accessed and changed using square brackets. Can
contain any type of value and can be stored in variables or other arrays.

Understanding Arrays
Learn how to check if something is an array, use the .length property and .push
and .splice methods.

Creating a To-Do List

Creating a file and loading a JavaScript file into it. Adding an attribute to the script
element to load the JavaScript file. Opening the HTML file in the browser and
opening the console.

Creating HTML Elements and Writing JavaScript

Creating HTML elements and writing JavaScript to create an array to store to-dos
and log the array.

Creating a To-Do List Project

Learn how to use JavaScript to create a to-do list project that adds items to an array
and displays them in the console. Also learn how to use loops to display the items on
the page.

Counting from One to Five

A variable is created and set to one. A loop is created that increases the variable by
one each time and displays it in the console. The loop stops when the variable is
greater than five.

While Loop Summary:

A while loop is a type of loop that will run code over and over again until a condition
is false. It has three parts: loop variable, loop condition, and increment step. It
creates a scope for variables created inside the loop.

Looping Basics
Comparing two types of looping and when to use each. Explaining a non-standard
loop and looping through an array.

Looping Through an Array

Using a loop to go through each value of an array and do something with each value.
Accumulator Pattern
A technique to loop through an array and calculate the total of all the numbers in the
array by creating a variable to store the result and updating it as you loop through the
array.

Accumulator Pattern with Arrays

Using a for loop and the accumulator pattern to create a new array with each number
doubled.

Looping Through an Array and Generating HTML

Looping through an array of strings to generate HTML code, combining the code
together, and then putting it on the webpage using the DOM.

Rendering HTML in JavaScript

Using the diviv element, JavaScript code is used to render HTML on the page. The
diviv element is a block element that takes up an entire line and does not add extra
space above or below. A function is created to render the HTML on the page every
time a to-do is added.

Generating HTML with JavaScript

Creating the second version of the to-do list project by looping through an array and
generating the HTML using JavaScript. Adding a delete button to each to-do item
and reformatting the HTML to make it easier to read.

Generating HTML with JavaScript

Using the on click attribute, JavaScript can be run to remove a value from an array
using the splice method. The index of the value to be removed is determined by the
loop, and then the list is re-rendered on the page.

Objects and Destructuring

Using an object to group name and due date together, and destructuring to take
properties out of the object and put them in a variable.

Summary: Creating a To-Do List with JavaScript and CSS

Creating a date input element, getting the due date out of the element, adding an
object with name and due date properties, removing console logs, and adding CSS
to the project.

Styling a To-Do List

Creating a grid using CSS grid to style a to-do list to match a final design. Adding
class to HTML element and setting display and grid-template-columns properties in
CSS.

Laying Out Elements in a Grid

Separated elements into three elements to go into each column using diviv elements.
Used grid feature to style multiple classes for input and add button. Adjusted spacing
between columns and rows with column-gap and row-gap properties.

Styling the To-Do List

Adds classes to inputs and buttons, sets font size, padding, background color, text
color, border, and cursor.

Styling the Delete Button

Changing text color, removing border, making text bigger, adding pointer icon, and
adding padding.

Arrays as References
Arrays are references, so if one is modified, the other is too. To avoid this, use the
slice method to make a copy of the values.

Destructuring
A shortcut to get values out of an array and save them in a variable.

Loops
Break lets us exit a loop early, while continue lets us skip one iteration.

Using Loops with Functions

Creating a copy of an array where each number is doubled using loops and
functions.

Creating a Function with a Loop

Using a function, we can reuse a loop for any value and break out of the loop using a
return statement.

Advanced Functions
Reviewing how to use functions inside the script element and learning an advanced
feature of functions, that they are values and can be saved in variables.

Functions as Values
Functions are values that can be saved in variables and objects. They can be called
using brackets, and their syntax is a shortcut for anonymous functions. Hoisting
doesn't work when functions are saved in variables.

Passing Values and Functions

Functions are values that can be passed into other functions. Examples of passing
values and functions into functions are given.

Asynchronous Code

Computer won't wait for one line to finish before going to the next line. Set timeout
sets up a timer and after a certain amount of time it will call a function. Advantage is
that it doesn't block code while timer runs in background.

Asynchronous Code

Using setTimeout and setInterval functions to run a function after a certain period of
time.

Creating Autoplay Button

Adding onclick attribute to button and creating a function to run code every second.

Creating an Autoplay Function

Creating a variable to track player move and a variable to track whether the game is
playing. An if statement is used to start the game and setInterval is used to run the
game every second. The ID from setInterval is saved and used to stop the game.

Looping Through Arrays

Using the four each method to loop through an array and display each value in the
console.

Using forEach Method

Loop through array of to-do list and use a forEach method with two parameters. First
parameter contains each value in the array, second parameter contains each index
of the value. Make a copy of the files and change the CSS and JavaScript file loaded.

Using For Each Method

Replaces for loop with for each method, which is easier to read. Return statement
used to skip over certain values. No easy way to break out of loop with for each.
Exercises given to practice. Moving on to arrow functions.

Arrow Functions vs Regular Functions

Comparing syntax and shortcuts of arrow functions and regular functions.

Using Arrow Functions

Shortcut for writing functions, recommended for passing into other functions.
Examples given of rock paper scissors game and to-do list project.

Shorthand Method Syntax

Using the shorthand method syntax instead of arrow functions when saving a
function in an object is easier to read and recommended.

Adding Event Listeners

Using addEventListener to add multiple listeners to an event and remove a listener
from an event. Best practice is to use addEventListener instead of onclick attribute.

Fixing OnClick Attribute

Need to replace on click attribute with add event listener and create a function to call
play game.

Adding Event Listener with Key Down

Using the event object, checks which key was pressed and runs code accordingly.

Adding Event Listeners

Switching add and delete buttons to use addEventListener for rock paper scissors
and to-do list projects.

Adding Event Listeners to Multiple Buttons

Using document.querySelectorAll to get a list of elements with the same class, then
looping through them with forEach to add event listeners.

Using Filter Method

Using the filter method, we can create a new array with all negative numbers
removed from an array of numbers. The inner function returns a boolean value to
determine which values are included in the new array.

Filter and Map Array Methods

Removes negative numbers from array and creates a new array with each number
doubled.

Closures
A closure is a feature of functions where a value is packaged together with the
function, allowing the function to always have access to that value.

Understanding Closures in JavaScript

Learned functions are values, setTimeout and setInterval, forEach, filter and map,
and closures. Exercises and projects to practice. Advanced techniques for bigger
projects.