JavaScript for Beginners - Learn with 6 main projects!

Master how variables store data in JavaScript, declare with var, and swap values for actions. Understand strings and numbers, why quotes matter, and how the console aids debugging.

Learn to merge variables with concatenation in JavaScript, turning numbers into strings and building sentences such as I have cats Zephyr and Henry, they are four and two years old.

Learn to print variables to the console using console.log for debugging, replacing alerts, with examples of name and profession, and discover console.warn and console.error while opening the browser console.

Learn to select and modify html elements with JavaScript by using document.getElementById, manipulating innerText and innerHTML, and updating content after the page loads.

Practice string and variable concatenation in javascript by updating the page with innerHTML, using getElementById and innerText to display a combined message like 'my favorite cat is Zephyr'.

Explore string manipulation in JavaScript, using lowercase and uppercase conversions, split, join, slice, and substring to transform sentences into word arrays.

Learn to accept user inputs with a prompt, store the value in a variable, and update the page content; prompts return strings you can manipulate, including defaults.

Discover how comparison operators drive decision making in JavaScript using if statements and prompts. Learn assignment vs comparison, string normalization, and updating the page with document.getElementById.

Learn to handle the opposite of a true condition using if else in JavaScript for beginners by comparing input, converting to lower case, and using else for not matching.

Learn to build a mini project that uses comparison operators to validate and fix user URL, using prompt, substring, and an if/else, then inject a clickable link into the page.

Explore how to handle multiple conditions in JavaScript without heavy nesting by using if-else if-else and switch statements, with practical examples of Caleb, Zephyr, and Henry.

Learn how to use JavaScript code comments to prevent execution, create single-line and multi-line notes with // and /* */ syntax, and test ideas without altering running code.

Explore basic arithmetic in JavaScript, covering multiplication, division, addition, subtraction, modulus, and exponents, plus a quick intro to order of operations and simple algebra.

Explore boolean logic by using true and false, 1 and 0, and basic if-else statements in JavaScript; learn how to declare boolean variables, compare values, and handle not operations.

Explore creating and manipulating arrays in JavaScript using literal syntax. Access items by zero-based indices, check length, and modify arrays with push, slice, and pop.

Use the type of function to reveal each variable's data type, from numbers and strings to booleans and objects. Learn how dot length differs for strings and arrays.

Master typecasting in JavaScript by converting values among string, number, boolean, and array, with practical examples like age prompts and testing for true.

Learn not equal to, greater than, greater than or equal to, less than, less than or equal to, and strict comparison operators in JavaScript, with practical examples and type considerations.

In mini project three, prompt the user for a number, cast to a number, validate it, and if over 18 update page text using an if statement and dom manipulation.

Learn the basics of functions in JavaScript: define a function with parameters, pass arguments, use console.log, apply default values, return results, and store outputs in variables for reuse.

Practice functions hands-on, learn return values, and apply dry principles while exploring loops, objects, and object-oriented programming, plus shortcuts like a dollar-sign helper and a Celsius-to-Fahrenheit converter.

Build a simple tip calculator for mini project four: create a two-parameter function (total bill and optional tip percentage with a default), compute the total, and log results.

Learn modern document object model selection with querySelector and querySelectorAll to target elements by id, class, or tag. Access and modify text and input values, and work with node lists.

Explore JavaScript events by building a button with on click, logging events, and a basic calculator to demonstrate event-driven interactivity.

Build a tip calculator in vanilla JavaScript that uses the DOM to show the total tip and total bill from bill amount and tip percent inputs via a button click.

Explore anonymous functions in JavaScript, storing unnamed functions in variables, invoking them with parentheses, and using immediately invoked function expressions to run code once and touch on scope.

Master immediately invoked function expressions (IIFEs) that run instantly by wrapping a function in parentheses and adding parentheses. Compare anonymous versus named functions and observe automatic execution.

This lecture explains the this keyword in JavaScript, showing how this refers to the current object or function and how dot notation accesses properties like name and profession.

Explore how scope controls where variables live, distinguishing global and local scope, and learn how global variables are accessible inside functions while local variables stay inside their function.

Explore hoisting in JavaScript, how var declarations move to the top of their scope, why undefined values appear, and how scope confines variables, with practical console examples.

Learn how to bind functions to dom nodes with addEventListener to handle clicks, key presses, and blur events, build a click counter, and explore scope for the count.

Learn to capture input values with a JavaScript event listener. Bind to an input field using querySelector, listen for key up, read event.target.value, and update a hello message on page.

Learn to change CSS with JavaScript by using event listeners to update the page background and text color, with input fields and query selectors.

Practice with event listeners by building three input fields that update the page on key up, altering background color, text color, and font size in real time.

Learn how objects group data in JavaScript by using properties and methods, access values with dot notation, and use this to reference the object's own data.

Explore for loops to repeat tasks and iterate arrays, transforming names into emails by lowercasing and appending @gmail.com, with break and continue examples.

Learn how while loops work in JavaScript, including how to increment inside the loop to avoid infinite execution, using prompts, number casting, and basic DOM updates.

Master for each loops in JavaScript, a cleaner alternative to traditional for loops, to iterate over arrays or DOM node lists, accessing each name and its index.

Build a javascript guessing game that uses objects and looping, repeatedly prompting for numbers, checks against a magic number (42), and breaks to reveal a win, with optional DOM updates.

Learn how let and const differ from var with block scope, reassignment rules, and clearer, faster JavaScript. See why const forbids changes and how let remains within braces.

Explore object oriented programming by grouping data and behavior into a class with properties and methods. Instantiate with new, use constructor and this to set and access values.

Explore object oriented programming in JavaScript by building an animal class with a constructor, properties, and methods, extending it with a cat class using super, and chaining methods with this.

Create a functional modal from scratch using JavaScript, with open and close buttons, event listeners, and a simple HTML structure, implemented as an object or a class.

In the homestretch, explore modern javascript features like template literals, destructuring, and arrow functions, then dynamically manage css classes and animations with the css engine, ending with a capstone project.

Explore how template literals in JavaScript replace the old string concatenation syntax by embedding variables inside back ticks with ${variable}, making strings cleaner and output clearer.

Explore object literals by creating a person object with a name and a speak method, then use property shorthand to simplify key-value pairs and method definitions.

Learn how to destructure arrays and objects in JavaScript, use rest to capture the remaining elements, map keys to new names, and apply default values in practical examples.

Learn how to use setTimeout to delay code in JavaScript by milliseconds, pass a callback, and observe how asynchronous execution lets other code run while waiting.

Learn how to use setInterval to run code repeatedly with a callback and a time in milliseconds, logging every second, and stop it with clearInterval and setTimeout.

Explore ajax requests with the fetch API to retrieve data from the Star Wars API and render it in a single-page application. Learn to chain promises and parse JSON.

Explore arrow functions as a new, not bound function style, compare with regular functions, and learn concise syntax, parameter handling, and common uses like for each and set timeout.

Learn to add and remove CSS classes on DOM elements with querySelector and classList, using multiple parameters for add and observing how the last applied class determines the styling.

Complete the final project by turning a title into individually wrapped letter elements, adding interactive mouse over effects with JavaScript and CSS to animate and style each letter.

Celebrate completing the JavaScript introduction and explore the larger JavaScript world with npm, frameworks like React and Vue.js, and libraries such as jQuery, while learning backward compatibility for older browsers.