Practical JavaScript & TypeScript Mastery with Projects

Learn how data types and variables work in JavaScript, where values are inferred dynamically. Understand dynamic typing, how variables store various data, and how to check types with typeof.

Master JavaScript comments, including single-line // and multi-line /* … */ formats, to prevent execution in the browser. Understand how to comment out code and verify output with console.log.

Master JavaScript operators and operands, including unary and binary operations, arithmetic and string concatenation, the exponent operator, and template literals with variable interpolation for practical projects.

Learn practical string operations in JavaScript, mastering concatenation with template literals and backticks, handling quotes, escape sequences, newlines, and string length through console logs.

Learn essential string functions in JavaScript, including length, indexOf, lastIndexOf, slice (supports negative indices), and substring. Use toUpperCase, toLowerCase, trim, replace, and charAt for character access.

Explore scope in JavaScript by contrasting global, function, and block scopes, and compare var, let, and const declarations to control visibility and immutability.

Master control statements in JavaScript, including if, else, and switch case, to make decisions and guide program flow, with debugging techniques and equality nuances.

Learn how to create and access objects in JavaScript, explore primitive data types, undefined and null, and use dot and bracket notation, typeof, and ES6 object destructuring.

Explore how to create and manipulate arrays in JavaScript, including arrays of mixed types and arrays of objects, using push, splice, length, and index access.

Explore how to define and call functions in JavaScript, use parameters, return values, and default parameters, and see examples that add numbers and reuse code to avoid repetition.

Master JavaScript interactivity with prompt for input, alert for notifications, and confirm for confirmations, and learn to convert input strings to numbers using parseInt and parseFloat.

Explore loops in JavaScript: for loops have initialization, condition, and increment; iterate arrays using for, for each, and for of; loop objects with for in; compare while and do while.

Explore the spread operator in JavaScript, showing how to join arrays and add new elements to existing arrays using the three-dot syntax.

Demystifies the ternary operator as a one-line condition to return values. Shows how condition ? true : false selects between outputs such as yes or no.

Explore how the JavaScript filter function uses a predicate to return a subset of an array, filtering ages greater than 18 to identify eligible voters.

Explore the document object model, its HTML root, and how JavaScript selects elements by ID, class, or tag to dynamically modify styles and properties.

Learn to fetch and manipulate DOM elements using JavaScript, including getElementById, getElementsByClassName, and querySelector, then modify content, attributes, and styles in real time.

Learn to use events and event listeners in JavaScript, binding handlers to clicks, changes, and mouse actions, and manipulating dom elements and style changes in real time.

Learn to schedule code with setTimeout to run a function after a delay, pass parameters, and execute once, while using clearTimeout with the timeout ID to cancel it.

Discover how setInterval repeats code every few seconds and compare it to setTimeout. Learn to update the page text, color, and a running count, with clearInterval to stop the loop.

Explore date and time operations in JavaScript by creating date objects, displaying current date and time, building a clock with setInterval, and understanding UTC versus local time and zero-based months.

Explore date and time manipulation in JavaScript by adding days, hours, and milliseconds. Measure execution time, create clocks, and build a world clock to compare time zones.

Learn how JSON object notation enables data exchange between frontend and backend, use dot notation to access nested fields, and convert between objects and JSON strings for transmission and processing.

Discover how arrow functions provide a shortcut form of writing standard JavaScript functions, with examples of single-parameter vs multi-parameter syntax and practical uses like setInterval.

Explore how the window and document objects power JavaScript, from location and history to debugging, plus how to persist data with localStorage and sessionStorage using JSON.

Learn to use JavaScript's Math object to access constants like pi and e, and functions such as round, floor, max, random, sin, and cos.

create a calculator app using javascript, read two numbers, choose an operation (add, subtract, divide, multiply), validate inputs, compute the result, and display a rounded value.

Create a min-max random number app using HTML inputs and JavaScript, implement validation, wire up a generator function, ensure proper script inclusion, and verify inclusive range behavior.

Fetch data from an API using fetch and parse JSON. Display post titles and bodies from JSON Placeholder, illustrating looping and rendering results on the page.

Begin your TypeScript journey from zero to mastery, exploring what TypeScript is, why it matters, and core concepts like variables, functions, interfaces, classes, and access modifiers through hands-on coding.

Discover what TypeScript is as an open-source, free language by Microsoft; a typed superset of JavaScript that compiles to plain JavaScript, with data types and additional features.

Discover how to start using TypeScript by installing Node.js and Visual Studio Code, then install TypeScript globally with npm install -g typescript, verify the version, and begin hands-on practice.

Create a TypeScript folder and install TypeScript globally with npm install -g typescript, then verify with tsc -v in the Visual Studio Code integrated terminal, noting version 4.8.2.

Resolve tsc -v issues in Visual Studio Code by trying terminal and PowerShell fixes, adjusting execution policy, and researching solutions with Google, building practical debugging skills.

Write your first TypeScript code, compile it with the TypeScript compiler to generate JavaScript, and see how compile-time errors reveal issues before running with Node or in the browser.

Enable seamless TypeScript development by converting scripts to modules with export/import, compile in watch mode, and automatically transpile changes for browser-ready JavaScript.

Explore how let and const enforce block scope, prevent redeclaration, and distinguish mutable from immutable values, with guidance on when to use each for reliable JavaScript code.

Declare variables with explicit data types in TypeScript, using boolean, number, and string annotations for safer code. Leverage compile-time type checking to catch errors early.

Learn how template literals in TypeScript enable multiline strings and variable interpolation, with type checking and IntelliSense that speed up development and improve string operations.

Explore subtypes in TypeScript, showing how undefined and not available values can be represented, and distinguish subtypes from actual data types.

Declare arrays in TypeScript using two syntaxes, showing they are equivalent. Use tuples to store fixed sequences of mixed types, like string and number, with strict item counts.

Learn how enums in TypeScript assign friendly names to numeric values, using Month as an example, with zero-based indexing and optional custom start values to improve readability.

Explore the any type in TypeScript, showing how it lets variables hold diverse values and bypass type checks, and note that unknown is introduced as a separate data type.

Explore handling the unknown type in TypeScript, apply type casting to string, and implement a has function to safely check for an id property on objects.

Explore how TypeScript infers types from initialized values, turning variables into number or any. Learn why uninitialized declarations block inference and how assigning a string to a number triggers errors.

Learn union types in TypeScript by defining multi type variables with the pipe operator, compare with any type, and know when to use number, string, or boolean values.

Use TypeScript with functions by typing parameters as numbers and enforcing return types. Observe IntelliSense showing parameter types and return values, and prevent invalid calls through strict type checking.

Learn to declare optional parameters in TypeScript with a trailing question mark after required parameters, and add conditional logic to handle their presence without compilation errors.

Explore default parameters in TypeScript, assign default values to functions, see how missing arguments use defaults, and contrast them with optional parameters.

Explore why interfaces matter in typescript, using a shared employee data type to illustrate avoiding widespread updates and keeping object structures consistent across functions.

Learn how to use interfaces in TypeScript to model objects like employees, declare optional fields with a question mark, and solve form-related data challenges.

Explore how TypeScript introduces classes and inheritance, replacing prototype-based inheritance with class-based objects, including fields, constructors, and methods, and learn to create and use student objects.

Learn how inheritance works in TypeScript by extending a Student class with a head student, using super to set the name, and accessing parent methods in details and display.

Explore TypeScript access modifiers—public by default, private restricts to the class, and protected allows access in subclasses.