The Complete Course: 2020 JavaScript Essentials From Scratch

Use codepen.io to create interactive code snippets with real-time updates as you type, using CSS and JavaScript, and easily save, share, and collaborate on pens.

Clearly define the problem and communicate it with relevant details, then spell accurately. Google the problem first, then ask only if no answer exists.

Learn where to place your JavaScript for reliable DOM access, avoid head inline scripts, and place scripts at the bottom of the body, especially for libraries like jQuery.

Explore variables and data types in JavaScript, including strings, integers, floats, booleans, null, and undefined, and learn to use arrays and objects with browser console debugging and semicolon conventions.

Explore objects and arrays in JavaScript, learning how to define object literals with keys and values, access data with dot notation, and understand indexing from zero and undefined results.

Explore string manipulation in JavaScript, measuring length, finding substrings with index of, handling case with toLowerCase and toUpperCase, slicing, replacing, and concatenating strings.

Learn to concatenate strings in JavaScript using the plus operator, explore data types, parse strings into numbers, and convert strings to arrays with split and join for dynamic URLs.

Tackle a hands-on JavaScript project that transforms 1–3 variables into a lowercase, website-prefixed string using methods like replace, split, and join; practice the long way around for deeper understanding.

This live project demonstrates turning messy user input into a valid url by lowercasing, collapsing spaces, replacing duplicates, and joining words, guided by a security‑first mindset.

Caleb invites you to leave a review and share feedback to improve the course. He explains private messaging for ideas, aims for five-star excellence, and emphasizes the review's importance.

Learn to use JavaScript comments effectively, including // and /* */ styles, to explain variables and functions, and improve communication among developers for easier future maintenance.

Explore basic operators in JavaScript, including addition, subtraction, multiplication, division, and modulus, then apply assignment and increment and decrement to variables for practical coding.

Explore how comparison operators in JavaScript determine true or false, including loose and strict equality, inequality, and relational operators, with practical console examples.

Explore if/else statements by using comparisons and variables to decide which code runs. Learn how else and else if direct actions based on user input and true conditions.

Explore how to use prompt for user input with if/else logic to customize program behavior, validate input, and handle empty or canceled responses using alerts and basic JavaScript.

Learn to use document.querySelector to target the main element by its id, update its innerHTML, and apply string methods like toUpperCase and replace to manipulate page content.

Learn to use a class selector with document.querySelector to grab a textfield input, read and set its value, and dynamically modify on-page styling with element.style and camelCase CSS properties.

Explore how functions encapsulate reusable code, accepting parameters, returning results, and managing scope in JavaScript, with examples of running, variables, and avoiding repetition.

Explore practical function examples in JavaScript, including creating and returning values, manipulating input names, using split to extract the first name, and employing parameters and scope.

Learn how HTML events trigger dynamic behavior with JavaScript, attaching functions to events like click and mouseover, manipulating the DOM with querySelector, and toggling content and styles.

Create a basic browser calculator with two numbers and a calculate button, displaying the result beneath. Wire up a simple form layout and an event to trigger the calculation.

Explore building a simple calculator in JavaScript, from handling form submission to selecting numbers and operators, performing add, minus, divide, and multiply, while avoiding the 'evil' approach.

Build a browser calculator in JavaScript to perform add, minus, divide, and multiply, handle user input, guard against invalid operator, and style the result.

Learn how anonymous functions live inside a variable and use scoped rules to avoid cluttering global namespace. Execute them like regular functions, pass arguments, and apply them inside other functions.

Explore self invoking functions, or immediately invoked function expressions, that run on page load by wrapping code in parentheses, and contrast them with regular or anonymous functions and event-driven use.

Explore the this keyword as a special reserved word in object oriented programming, showing how dot notation accesses properties and methods and how this refers to the entire object.

Explore scope in JavaScript, covering global variables on the window object, local variables inside functions, and how closures connect them.

Build a lightweight modal from scratch using JavaScript and CSS, a box that pops up, without frameworks, by implementing open and close functions and a customizable title and content area.

Learn to build and reuse a modal in plain JavaScript by implementing a modal container, dynamic title and content, open and close controls, and simple CSS toggling.

Build a custom modal with vanilla JavaScript using closures and two functions to manage show. Close resets the title and content, and counts how many times it opens.

Overcome impostor syndrome by embracing mistakes, coding more, asking questions, and using Google for answers; grow through collaboration, practice, and opportunity.

Learn how arrays function as lists, iterate with for loops using indices, access nested arrays, and dynamically display results in the page while logging values to the console.

Explore the object data type in JavaScript, define objects with properties as key-value pairs, access with dot notation, compare to arrays, and extend with functions and booleans.

Explore how to work with JavaScript objects: keys, types, cloning, and closures; modify properties, add functions, and loop through them to understand object behavior.

Explore for loops in JavaScript, learn to iterate arrays and strings, count characters, and control flow with break and continue.

Explore the while loop and do while loop, and compare them with for loops. Learn to control counters and increments, and avoid infinite executions.

Learn how to declare and instantiate classes in JavaScript, use constructors and this to set properties, and define methods to organize code through object oriented programming.

Learn how to define a class with a constructor, create a method to get name and return internal properties, and convert height from inches to centimeters for outside use.

Learn how subclassing in JavaScript extends a parent class, overrides methods, and inherits constructors to create specialized classes such as dog and superhero.

Explore how super enables multi-level inheritance in JavaScript classes, from animal to dog to cat, by calling parent methods and overriding speak with child outputs.

Explore how the course covers es6 features and classes for front end developers, including const, let, arrow functions, and the this keyword, with practice through writing code.

The lesson explains the differences between const, let, and var in JavaScript, covering scope, hoisting, reassignment, and when to use each based on browser compatibility and code examples.

Explore arrow functions and how the this keyword is not bound to the function, compare them to regular functions, and learn about parameters, scope, and closures.

Prioritize learning ES6, then jQuery, and finally pick React, Vue, or Angular based on market demand to stay employed in front-end roles.

Learn practical ways to earn while learning frontend development, including internships, freelance web design for small businesses, and selling code across marketplaces.

Caleb invites you to leave a review and share your feedback about the course, explaining why you like it and helping others discover it.

Master the javascript essentials, from placing code in HTML to variables and data types. Explore hoisting, scope, arrays, objects, loops, classes, es6 features like const and let, and calculator project.