Web Development & React.js - A Practical Guide for Beginners

Explore what programming is and a brief history of computing, then see how high-level languages like JavaScript turn into machine code via compilers and interpreters in browsers.

Set up your development environment with Visual Studio Code, create a JavaScript project folder, and add an index.html for the browser to read, using either file explorer or the terminal.

Explore how to set up a basic HTML document, including doctype, HTML, head, body, and UTF-8 encoding, then introduce JavaScript with a script tag and alert hello world.

Learn how the browser parses HTML documents and loads scripts from separate files like main.js. See index.html and main.js in the network tab as you prepare for JavaScript-centric, console-based lesson.

Explore primitive types in JavaScript, including numbers and strings, and learn to display results with console.log. Store values with variables and constants, and use comments.

Learn to declare and use primitive types in JavaScript, including numbers (integers and floats), strings, and booleans, perform basic operations, concatenate strings, and reference variables by name with console logs.

Explore how to declare and reassign variables in JavaScript using const and let, avoid redeclaration errors, and perform string and numeric operations with plus and plus-equal.

Explore why semicolons are optional in JavaScript and how the interpreter processes lines without them. See how to declare variables, assign values, use console.log, and manage statements on one line.

Learn how to define and call functions in JavaScript using the function keyword, with descriptive names, parameters, and a function body; compute a rectangle’s area with a and b.

Create an assignment folder and file, then write a display name function that combines first and last names with a plus operator and alerts the result in the browser.

Create a display name function that uses first name and last name variables to form and console log a full name, with simple string concatenation and optional formatting.

Learn to define reusable functions with parameters and pass values as arguments to compute the rectangle area, using function calls to handle different inputs while exploring parameter versus argument concepts.

Learn how to return values from functions using the return keyword, pass arguments, and use debugging tools like the debugger and step over/step into to follow code execution.

Build a product application by defining a product with name, type, price, currency, and image, then display products in the console and prepare to render with JavaScript and HTML.

Begin by reviewing the first coding exercise description, implement a function that sums two numbers, and read comments while running the check solution to verify results.

Learn how to use objects to group product data, creating a product object with name, type, price, currency, and image, and access its properties via keys.

Access object properties in JavaScript by using dot and bracket notation, including dynamic access with a key variable, and view property values like name, type, price, and currency.

Create a reusable display function to show product information by passing product objects as parameters and rendering details in html with javascript.

Create a product function that accepts name, type, price, currency, and image and returns a new object, demonstrating object creation and debugging with sample products.

Learn to use default parameters to provide fallback values for product fields, preventing undefined results when inputs are missing.

Create rectangle objects with a function that returns a named rectangle with sides a and b. Then generate two rectangles, compute area and circumference, and log the results.

Define a rectangle object with a create rectangle function, compute area and circumference from sides A and B, and display results with console logs.

Build and inspect arrays in JavaScript, including numbers, strings, mixed lists, objects, and products, while exploring data types, indexing, length, and console logging for error-aware practice.

Master array indexing in JavaScript by accessing products with zero-based indices, using length, and manipulating item data through console logs.

Master conditional expressions and comparison operators with numbers and strings, learn strict versus non-strict equality, and debug in the browser to inspect data types.

Explore how if statements create branching in code by evaluating true or false conditions. Learn how else and else if guide execution when prior conditions fail.

Apply logical operators (and, or) in JavaScript to build chained conditions, replace if statements, and understand how true/false values drive console.log outcomes.

Create a JavaScript function with a number and a string, use if statements to compare lengths, compute sums with the plus operator, and check conditions including the string’s first letter.

Observe the assignment 3 solution, implementing a function that takes a number and a string, uses conditionals, length checks, first letter access, case sensitivity, and console outputs.

Explore how to use a for loop in JavaScript to iterate over products, print indices and names, and avoid undefined errors by aligning loop bounds with the array length.

Master loops in web development by exploring for, while, and for-each constructs, handling dynamic array lengths and avoiding infinite loops, with practical debugging tips.

Implement a for loop to iterate all products and call the display product info function for each item, reinforcing clean code and preparing for the next lecture.

Iterate over products and use an object method to display each item's name, price, currency, and image, highlighting how the method runs in the object's context.

Learn to attach a function as an object property, use this to reference the current object, and display product info—name, type, price, currency, and image—by iterating clearly.

Learn how constructor functions create objects with properties using the this keyword, pass parameters, and use the new keyword to instantiate multiple products and display their info.

Explore how constructor functions create product instances with the new keyword and share properties via the prototype. Understand prototype inheritance and property lookup from instance to prototype.

Explore value versus reference in variables, memory, and how objects copy by reference while primitives copy by value, with practical implications for your code.

Explore copying by reference and by value, then refactor a product from a constructor function to a class, defining a constructor and adding methods.

Explore inheritance in programming by extending a product class to create a fancy product, sharing properties and methods, and using the prototype chain to access base functionality.

Explore prototype chains, inheritance, and constructor functions in JavaScript; learn how prototypes and objects share methods and properties across classes like product and fancy product.

Explore the call stack, scope, and debugging in JavaScript by tracing execution, analyzing global and local scopes, closures, and block scope through hands-on practice.

Learn how infinite calls create a stack overflow by repeatedly calling a function, observe the call stack growth, and debug with console logs to diagnose memory exhaustion.

Explore scope, execution context, and closures, implement a persona class with four instances, store them in an array, and display info for those over 25 with a name length check.

Learn how to implement a persona class in JavaScript with name, age, and nationality properties, a constructor, and methods to display information, manage an array of people, and validate data.

Explore extending a fancy product with an insurance property by updating the constructor, invoking the super constructor, and debugging to verify insurance data across products.

Learn how to call super functions within a subclass, override display behavior for a fancy product, and reuse superclass logic to show product details like has insurance in a loop.

Learn how to pass values to a super constructor and extend a product class, using template strings to display info and call super display methods.

Create square and rectangle classes with constructors and a compute area method. Instantiate both shapes, verify their areas, and explore inheritance and code improvements.

The lecture solves assignment five by building square and rectangle classes with a compute area method, then shows an improved inheritance approach using a square as a rectangle subclass.

Explore how HTML defines web documents, how browsers request HTML from servers, and how the document object model enables dynamic interaction with the page via JavaScript.

Explore the DOM and the document object model, understanding how the browser represents HTML as a nested structure with head and body, and how JavaScript manipulates elements.

Master the document object model by building HTML structures with elements, paragraphs, and text in a parent-child tree, and draw the DOM including head and body.

Explore HTML and JavaScript interaction by converting hard-coded product data into dynamic HTML elements, and inspect how the DOM, default browser styles, and window and document objects enable this communication.