JavaScript Tutorial Full Course - Beginner to Pro This course teaches you how to build complex websites using JavaScript, from beginner to professional level. The final project is building a multi-page website similar to amazon.com. Smaller projects include a rock-paper-scissors game, a to-do list, and a calculator. No prior coding experience is needed. The course covers JavaScript basics, major features, and its use with HTML and CSS. Advanced topics include object-oriented programming, backend callbacks, promises, and async/await. The Amazon project provides practice and deepens understanding. Over 250 exercises are included. Solutions to exercises are in the video description. JavaScript is a technology for creating interactive websites. Websites (like YouTube and Amazon) are accessed on computers, unlike apps on phones. Three technologies create websites: HTML (content), CSS (appearance), and JavaScript (interactivity). This course focuses on JavaScript; separate HTML/CSS courses are available. To start, install a web browser (Google Chrome is recommended). Open a browser, type google.com , search for Google Chrome, and install it. JavaScript is about giving instructions to a computer. The instructions are called code , and the process of the computer following instructions is called running the code . Many programming languages exist (JavaScript, Python, Java, etc.). Examples of JavaScript code: alert('hello'); creates a popup. alert('good job'); creates another popup. 2 + 2 performs addition. 10 - 3 performs subtraction. 10 * 3 performs multiplication. 10 / 2 performs division. document.body.innerHTML = 'hello'; replaces page content. Syntax are the rules of a programming language. Incorrect syntax leads to errors. Syntax rules are learned gradually throughout the course. The text within single quotes in alert() is displayed in the popup. The Amazon project is used for practical examples. Open the project at supersimple.dev/projects/amazon . This project demonstrates e-commerce features. JavaScript math includes addition, subtraction, multiplication, division, and handling decimal numbers. The order of operations (operator precedence) is followed: multiplication and division before addition and subtraction. Parentheses control the order of operations. Floating-point numbers (floats) can have inaccuracies in JavaScript (and other languages). This is due to how computers store numbers (binary vs. decimal). For financial calculations, use cents instead of dollars to avoid inaccuracies. Math.round() rounds numbers to the nearest integer. Use Google to find code examples and learn new JavaScript features. Search for what you want to do (e.g., "JavaScript how to round a number"). You may not understand all the code in search results, but focus on familiar parts. Strings represent text. Strings are created using single quotes ( 'hello' ) or double quotes ( "hello" ). Use single quotes by default, double quotes for single quotes inside the string, or escape characters ( \' ). String concatenation combines strings. Type coercion automatically converts numbers to strings when adding them to strings. Template literals (backticks: `hello` ) allow string interpolation (inserting values) and multi-line strings. HTML and CSS are used with JavaScript to build websites. Install VS Code (Visual Studio Code) as a code editor. HTML creates website content (buttons, text, images). HTML elements are created using tags ( <button> , </button> ). HTML tags need opening and closing tags. Multiple spaces are combined into one space. Newlines are treated as spaces. CSS changes website appearance. CSS is written inside <style> tags. CSS selectors target elements (e.g., button ). CSS properties and values are separated by a colon ( : ) and end with a semicolon ( ; ). HTML attributes modify element behavior (e.g., title , class ). The class attribute allows styling specific elements with CSS. The HTML structure includes <html> , <head> , and <body> elements. The <head> contains metadata (title, styles); <body> contains visible content. VS Code extensions (like Live Server) can automate page refreshes. VS Code setup: Use two spaces per indent, enable word wrap. JavaScript can be run inside HTML files using <script> tags or onclick attributes. Comments ( // for single-line, /* */ for multi-line) are ignored by the computer. They are used for documentation and temporarily disabling code. console.log() displays output in the browser's console. Variables store values. Use let to create a variable whose value can be changed, and const to create a variable whose value cannot be changed (best practice: use const by default). var is an older way to create variables and is generally avoided. Variable names cannot start with a number, use most special characters, or contain spaces (except $ and _ ). Camel case is the standard naming convention for variables. Reassigning a variable changes its value. Don't use let when reassigning; just use the variable name and the assignment operator ( = ). Shortcuts for reassigning: += , -= , *= , /= , ++ , -- . Booleans ( true , false ) represent truthiness or falsiness. Comparison operators ( < , > , <= , >= , === , !== ) produce Boolean values. Use === (strict equality) to avoid type coercion. if statements execute code blocks conditionally. else if adds additional conditions. else executes if no conditions are true. Curly braces ( {} ) are required for multiple lines in an if block. Truthy and falsy values: Falsy values are false , 0 , '' , NaN , undefined , and null . All other values are truthy. Ternary operator ( condition ? value1 : value2 ), guard operator ( false && ... ), and default operator ( true || ... ) provide concise conditional logic. Functions reuse code. Function names follow variable naming rules (camel case recommended). Functions are called using parentheses ( () ). Functions create scopes. return statements return values from functions; they end the function's execution. Parameters pass values into functions. Functions can have multiple parameters, separated by commas. Default parameter values can be specified. Objects group multiple values (properties) together. Properties are accessed using dot notation ( . ) or bracket notation ( [] ). Objects can contain nested objects and methods (functions). JSON.stringify() converts a JavaScript object to a JSON string. JSON.parse() converts a JSON string to a JavaScript object. localStorage stores data persistently across browser sessions. localStorage.setItem('key', 'value') saves data; localStorage.getItem('key') retrieves data; localStorage.removeItem('key') removes data; localStorage.clear() clears all data. localStorage only stores strings; use JSON.stringify() and JSON.parse() for objects. The DOM (Document Object Model) represents the web page as a JavaScript object. document.querySelector() selects a single element; document.querySelectorAll() selects multiple elements. innerHTML gets/sets HTML content; innerText gets/sets text content. classList manages CSS classes. Event listeners ( addEventListener ) handle events (clicks, key presses). Arrays are lists of values. Arrays are accessed using indices (starting from 0). Arrays can contain different data types. Array.isArray() checks if a value is an array. push() adds an element to the end; splice() removes elements. Loops ( for , while ) repeat code. for loops are concise for standard iterations; while loops are more flexible for non-standard iterations. break exits a loop early; continue skips to the next iteration. The accumulator pattern sums values in an array. Arrow functions ( () => {} ) are a concise way to write functions. Shortcuts: Omit parentheses for single parameters, omit curly braces and return for single-line functions. addEventListener adds event listeners; removeEventListener removes them. filter() creates a new array containing only elements that satisfy a condition. map() creates a new array by transforming each element. Closures: A function retains access to variables from its surrounding scope, even after that scope is gone. Git tracks code changes. Install Git, initialize a repository ( git init ), configure user name and email ( git config ), commit changes ( git commit ). Data structures organize data (arrays and objects). Generate HTML using JavaScript instead of manually writing it. Data attributes ( data-* ) attach custom data to HTML elements. Object-oriented programming (OOP) organizes code into objects (data and methods). Classes are object generators. Constructors ( constructor() ) run setup code when objects are created. Private properties/methods ( # ) are only accessible within the class. Inheritance: A class can inherit properties and methods from a parent class ( extends ). Method overriding replaces a parent class's method. Polymorphism: Using the same method name in different classes to perform different actions. Testing: Manual testing involves directly testing the website; automated testing uses code to test code. Jasmine is a testing framework. Test cases test specific scenarios; test suites group related tests. Mocks replace methods with fake versions for testing purposes. Hooks ( beforeEach , afterEach , beforeAll , afterAll ) run code before/after tests. Unit tests test individual units of code; integration tests test multiple units working together. Backend: A separate computer that manages website data. HTTP (Hypertext Transfer Protocol) sends messages between computers. XMLHttpRequest makes HTTP requests using callbacks. Fetch makes HTTP requests using promises. Async/await simplifies asynchronous code. Error handling: try...catch blocks handle errors. URL parameters ( ?key=value ) pass data in URLs. MVC (Model-View-Controller) design pattern: Model (data), View (HTML generation), Controller (user interaction).