JavaScript Zero to Hero 2023

Learn JavaScript fundamentals, understand coding basics, and create web pages using HTML, CSS, and React JS, even with no prior experience.

Create a new simple HTML file with a basic HTML structure, insert a script tag, and use console.log to test JavaScript in the browser using live server.

See how to display text on the browser main screen with document.write, moving from the console to the page output, and view it live by running a live server.

Learn how to use comments in JavaScript to disable code without deleting it, using // for single line and /* */ for multi-line comments, within script tags.

Explore strings and numbers in JavaScript, distinguishing text inside quotes from numeric values, and see how strings cannot perform calculations while numbers support operations.

Discover how variables in JavaScript store data like strings and numbers using the var keyword, and learn to reduce duplication by reusing variable values in console logs and document writes.

Explore variables in JavaScript by manipulating numbers and strings, performing operations like addition, multiplication, and subtraction, and displaying results in the browser with document.write.

Explore string concatenation in JavaScript by combining strings with the plus operator, managing spaces, and understanding when numbers convert to strings. Learn about variables, reserved keywords, and practical examples.

Explore camel case and underscores for JavaScript variables, distinguish global from local scope, and note reserved keywords and case sensitivity that forbid starting with numbers.

Learn how to declare and define variables in JavaScript, and how to modify their values, with examples of browser execution order and variable scope.

Explore JavaScript arithmetic operators, including addition, subtraction, multiplication, division, modulus, exponential, and the increment and decrement operators through practical examples.

Learn how to create an external JavaScript file with a .js extension, link it to HTML using the script tag, and verify output in the browser console.

Learn how the assignment operator works in JavaScript, including direct assignment, add-and-assign (+=), subtract-and-assign, multiply-and-assign, divide-and-assign, and modulus operations, with examples that update variables and display results.

Learn the basics of conditional statements and how they drive decision making in your application, illustrated by options when a bookstore is closed.

Explore the first part of comparison operators through if statements, using equals, not equals, and the difference between =, ==, and === with numeric and string values.

Master conditional statements by crafting decision-making scenarios that guide actions based on shop status, availability of JavaScript or Python books, and latest editions.

Develop a decision making capability in a JavaScript program by modeling bookstore open/closed conditions, inventory checks, and choosing the latest JavaScript or Python book through if-else logic.

Explore nested if logic to decide which programming book to buy when a bookstore is open. Prioritize the Python book, then JavaScript, with fallbacks if neither is available.

Master conditional statements in JavaScript with if, else, and else if, including nesting. Apply decision paths from buying at a bookstore to online options when stores fail.

Define JavaScript functions as blocks of code that run only when called, using syntax like function name() { } and invoking them with console.log or alert.

Learn how to define a function and use parameters to pass values, see how A and B receive inputs, and call the function to perform addition or multiplication.

Create and call a JavaScript function that uses parameters. Pass city and Celsius values to display weather messages via concatenation.

Explore how the return statement differs from printing in a JavaScript function, and see how returning a value lets you save it in a variable for later use.

Learn how nested functions work by defining a function inside a parent function. See that the nested function runs only when the parent calls it.

Explore anonymous functions in JavaScript: declare without names, call immediately or store in a variable, and pass parameters to compute results inline in code.

Learn how to create and store anonymous functions in a constant variable, call them, and pass arguments to produce results in JavaScript.

Turn real life actions into code by defining a function, such as sending an employee to buy a book, then print and return data.

Discover why data should be prioritized over the view by storing it in a state and retrieving it for calculations; use objects and arrays to hold variables and preview scope.

Master the global versus local variable concept in JavaScript, distinguishing variables inside a function from those outside. Learn how scope behaves in nested functions.

Compare block scope and constant variables, showing how founder name cannot be updated while publisher name can, and illustrate how assignment to a constant breaks a script.

Explore block level scope and how let variables interact with global and block scopes, compare let with var, and see how let respects block boundaries while allowing global access.

Explore strings in JavaScript, learn how to create and manipulate them with built-in upper and lower case methods, and render results to the browser.

Learn how to slice a string in JavaScript with the slice method, including positive and negative indices, and see how slicing creates a view without changing the original string.

Discover JavaScript string methods like trim, length property, and replace to manipulate text, remove surrounding spaces, and measure characters.

Discover how the type of operator identifies data types such as number, string, boolean, object, and array, and learn to verify input and plan conversions between types.

Explore JavaScript number methods, including Number(), parseInt, parseFloat, and toString, and compare numeric addition with string concatenation while converting strings to numbers and back.

Learn how to modify array data by updating elements, replacing a value at a specific index (for example Jupiter at index three with sun), and adding new values.

Discover how JavaScript arrays use numeric indexes and a length property, then practice common methods like push, pop, slice, sort, splice, and for each with the solar system example.

Learn key array methods in JavaScript, including push, pop, shift, slice, and splice, to add, remove, or copy elements while managing the main array.

Learn core array methods in JavaScript, including sort, reverse, push, shift, concat, and toString, and see how ascending versus descending order shapes data with solar system examples.

Discover how the forEach loop iterates over an array by handling value, index, and the array, enabling element modifications while contrasting arrays with strings and noting it returns nothing.

Explore how the map method returns a new array and contrasts with for each, which returns nothing. See a solar system example that maps indices and elements.

Learn how to create arrays in JavaScript, store multiple values, and access elements by index, starting at zero, with a solar system example.

Learn to use the filter method on a numerical array to produce a new array of elements greater than a threshold, and print results to the console.

Discover how to declare JavaScript objects with curly braces and named properties, and how objects differ from arrays by using keys and values.

Access and modify JavaScript object properties using dot notation and bracket notation. Explore Earth properties such as status and sky, and compare dot and bracket access.

Discover how to create an array inside an object, assign it to the good stuff property, and access or iterate the array by its property name in JavaScript.

Access arrays inside an object using dot access to reach properties like good stuff and bad stuff, then iterate with forEach to manipulate the data.

Learn to create objects inside arrays by building arrays of objects with properties, nesting objects and arrays, and practicing data structures like JSON for front end and NoSQL concepts.

Learn how to locate elements in an array using findIndex and find, compare first-match results with found data, and see strings and objects in practical examples.

Demonstrates using findIndex on an array of planet objects to locate by name, clarifying unique ids versus array indices with Mercury and Venus examples, within JavaScript zero to hero course.

Master using the array find method to retrieve a full object by a property value, instead of its index, and apply this to real-world data like planet records.

Explore how the for loop controls iteration in JavaScript, using a counter from 0 to 9 to print a paragraph and demonstrate repeated output with console log and document.write.

Explains the for loop in JavaScript, detailing its three expressions—initialization, condition, and increment—and where the loop body executes. Learn to prevent endless loops by ensuring the increment changes the condition.

Explore reverse for loops in JavaScript by documenting each iteration, adjusting the loop condition with decrement and increment operators, and ensuring the counter moves from 1 toward -10 before stopping.

Explore the while loop by evaluating its condition, compare it with the for loop, and see i from 0 to 9 execute accordingly.

Explain how the do while loop initializes a counter, runs the body before checking the condition, and can use increment or decrement, with practical examples and iteration patterns.

Learn to implement a nested loop by embedding a for loop inside another. Observe the outer loop executing five times and the inner loop printing numbers 0–9 per outer cycle.

Master how to create a simple multiplication table with a for loop in JavaScript, using let for block scope, and render results from 1 to 10 in the browser.

Explore nested loop tables in JavaScript by pairing an outer loop with an inner loop to build a multiplication table using html table elements and document.write.

Learn how to access and iterate over an object's properties using the for in loop, creating an object with name, age, profession, and nationality, and logging results in the console.

Explore the for-of loop to iterate over arrays by accessing each value directly. Build an array of days, print each day, and demonstrate manipulating data inside the loop.

Learn how to use the continue and break statements in JavaScript loops to skip values and stop iterations, with practical for loop examples.

Learn how to return a value from a function instead of printing in a real-life example. See how a result variable stores values and why returning data matters.

Learn how to create arrow functions as a modern alternative to traditional functions, including single and multiple parameters, one-line returns, and practical examples in code and the browser.

Master template literals in JavaScript by replacing concatenation with backticks, embedding expressions with ${}, and building strings from variables such as first name, last name, and profession.

Explore array destructuring in JavaScript, learn how to structure and assign array elements to variables, and see how the rest and spread operators support flexible data handling.

Explore object destructuring in JavaScript by extracting first name, last name, and eye color from a person object, renaming bindings, and using template literals to display results.

Learn to destructure a nested object by extracting inner name properties and eye color, then form a full name with template literals. Practice clean variable naming to avoid conflicts.

Explore the rest operator for objects and functions, contrast it with the spread operator, and learn how to extract remaining properties and parameters in JavaScript.

Explore using the rest operator with arrays to separate weekends from weekdays and group remaining days, and preview the spread operator in practice.

Master the spread and rest operators, learn how spread opens an array into elements while rest collects arguments into an array, and apply these patterns to data in React.

Discover how React, a JavaScript library for building user interfaces, serves as a component-based, single-page application using vanilla JavaScript and functional components.

Set up the React environment by choosing between adding React to an HTML page or installing it via npm with Node.js.

Install and set up a new React app with Create React App using npx and npm, open Visual Studio Code, run the development server, and view the app at localhost:3000.

Explore the React project structure by examining package.json, node_modules, and npm scripts; learn how public/index.html, root div, and the main app component boot the app via index.js.

Learn to run a React app locally with npm start and view it at localhost:3000. Create a simple arrow-function component in app.js with JSX, export it, and import CSS.

Explore how G6 lets you write HTML inside JavaScript, using className instead of class, camelCase attributes, and embedding expressions and variables to render dynamic content.

Create and nest a new reactjs component within the app structure, using header.js and header.css, and import it into app.js.

Create a simple webpage with a few steps by building a single page in notepad, saving as index.html, and viewing it in a browser to begin your web development journey.

Compare Visual Studio Code and Sublime Text as ide options, noting color coding, file and folder panels, and extensions, plus straightforward installation on Windows, macOS, and Linux.

Learn how to set up Visual Studio Code, open a folder, and create and manage multiple files to build a web page with an index.html.