Complete Javascript & jQuery Course with Bonus Vue JS Intro

Learn how to use variables to store user input, create greetings, and manage data with the var keyword, while mastering naming rules, events, and basic JavaScript data concepts.

Explore strings as a data type in JavaScript alongside numbers and booleans. Learn to define variables, use typeof, and perform string operations as concatenation, length, indexing, and replace with quotes.

Master JavaScript numbers: integers, decimals with a dot, and exponential notation, and use the Math object for power, rounding, random values, and fixed precision.

Learn how to use incremental operators for numbers and strings, perform type conversions with parseInt and parseFloat, and review booleans, null, and undefined for solid JavaScript fundamentals.

Learn how booleans represent true and false from comparisons, and apply them in conditionals to control logic, such as offering finance options for orders above a thousand dollars.

Learn how null and undefined signal missing values in JavaScript, with unassigned variables and missing data examples, and why undefined is preferred for representing the lack of value.

Practice JavaScript by creating a first JavaScript file, linking it to HTML, and solving exercises on variables, age, averages, validation, and URL transformations.

Solution walkthrough for list one exercises: set up a JavaScript file, link it to the page, print messages to the console, compute age, format numbers, validate phone numbers, and exponentiate.

Master JavaScript identifiers, learn which variable names are valid or invalid, including reserved words, and explore console outputs, string concatenation, type checks, and document updates using getElementById.

Discover how functions organize code, avoid repetition, and reduce complexity. Learn to use arguments and return values, invoke functions to sum numbers and compute averages.

Explore arrays as ordered sequences of values, learn to create, access by index, measure length, and modify them with push, pop, shift, unshift, slice, and multi-dimensional arrays.

Master how objects store data as unordered key-value properties, access values with property names or dot notation, and add or alter properties within multidimensional arrays and objects.

Explore objects and their methods in JavaScript, using this to access properties, dot notation to invoke methods, and examples like a student's full name, console, the math object, and arrays.

Develop javascript fundamentals with second exercise set: build Celsius to Fahrenheit conversion, extract top students from an array, access object properties, compute five-star review percentages, and manipulate a shopping list.

Create a Celsius-to-Fahrenheit function in JavaScript, wire it to HTML inputs to display results, and reuse it across conversions; display the last three best students and compute five-star review percentage.

Move the last item of a shopping list to the front using the length to access last element, then add items with push and unshift, and explore a pop-and-unshift approach.

Master JavaScript events in the browser, including click, change, mouseover, mouseout, and keydown, and learn to handle events with element listeners and event objects.

Explore JavaScript-driven CSS manipulation by changing element styles with the style property in response to clicks and hovers. Cache elements, use dot notation, and apply changes to menus and sliders.

Learn to use get elements by class name and get elements by tag name, return arrays you can index to change innerHTML of elements, and prepare for loops.

Learn how to use for loops and for-in loops in JavaScript to iterate arrays and objects, control flow with conditions and increments, and manipulate DOM elements.

Master while loops and do while loops in JavaScript, and compare them to for loops. Learn to initialize a count variable, increment it, and test conditions in Visual Studio Code.

Learn how JavaScript conditionals use if, else if, and else to classify ages as under age, adult, or senior, and to test multiple conditions with and/or operators in practical examples.

Explore how JavaScript treats values as false in conditionals without booleans, using empty strings, zero, and undefined, and apply if statements or the ternary operator to name and total.

Explore nested conditionals and loops in JavaScript, using member and age logic to determine prices, and using nested loops to traverse multidimensional arrays and render results.

Highlighting variable scope in JavaScript, the lesson details local and global scope and how functions create local scope. Introduces ES6 let and const for block scope and constant values.

Practice converting celsius to fahrenheit using user input, print world cup years 2022–2050, evaluate student grades and absences, and render sales data with refunds in a table.

Demonstrate solving javascript exercises by reusing a Celsius to Fahrenheit function, wiring a click handler to read and validate input, and printing World Cup years 2022–2050 with a while loop.

Press the calculate button, gather grades and absences, validate all fields with or, compute average and presence using a total class constant, and determine approval or failure with nested conditionals.

Master iterating a sales array with a for loop, ignore items where a refund has been requested, and render a dynamic html table while calculating total sales in JavaScript.

Explore the browser object model and the window object, including innerWidth, cursor position, and mousemove events, plus how global variables attach to window and use of alert.

Explore date and time in JavaScript by creating date objects, retrieving year, month, and time values, and calculating date intervals like days between order and delivery.

Calculate date intervals in JavaScript by subtracting order and delivery dates (using getTime or direct date subtraction), convert to days with milliseconds per day, and display lead time.

Learn to delay code with setTimeout and repeat actions with setInterval, control timers with clearInterval and clearTimeout, and build a real-time clock using the date object.

Create a live clock in JavaScript using the date object and setInterval to update hours, minutes, and seconds every second, with leading zeros for clean formatting.

Master break and continue in JavaScript loops; use break to interrupt a loop and continue to skip an iteration, with the modulus operator identifying even numbers up to 20.

Master form handling in JavaScript by working with select boxes and radio buttons. Retrieve the selected option or radio value using selectedIndex, value, and innerHTML.

Learn to handle check boxes in JavaScript by retrieving multiple selected options, iterating over them, and rendering the results as a dynamic list to send to a database.

Wire the on change event on a select box to update a display element with the chosen value, then extend to checkboxes by looping through elements and listing checked values.

Solve the fourth set of JavaScript and jQuery exercises by building dynamic UI updates for shipping options, product details, and a stopwatch, using ISO date formatting and two-decimal currency values.

Track changes on a select element, access shipment data with bracket notation, format dates to ISO, and update order date, delivery date, and fee after computing lead time.

Learn to handle radio button changes, identify the selected option, and update a product display by dynamically setting the name, price with currency, and image source.

Solve a stopwatch in vanilla JavaScript with start/stop and reset controls, using getTime and setInterval to track elapsed time and update the display in milliseconds.

Master the stopwatch by stopping, resetting, and restarting the timer with a clock interval and elapsed time logic to preserve time between pauses and reset the elapsed time to zero.

Learn to format stopwatch time by converting milliseconds into hours, minutes, seconds, and milliseconds, using floor calculations and leading zeros for polished output.

Build a real project by implementing a mobile menu, an accordion for mission and values, a looping services slider, and a dynamic year display using a date object.

Implement a mobile menu by wiring a hamburger icon to slide a 320-pixel header menu from the right, showing it by setting right to zero. Attach click events in JavaScript, using document.getElementById to toggle the sliding menu and close it with a dedicated close button by resetting right to -320.

Create an interactive about us section with mission, vision, and values, using clickable tabs to swap content and highlight the active tab with background and bold font.

Cycle through services with next and previous arrows in the array-backed services section. Update title and text at the current index and wrap at the start or end.

Explore building a simple contact form using the Post Mail service to handle backend emailing without front-end code, including access token setup, form fields, and optional redirects.

Make the copyright year dynamic with JavaScript using getFullYear to set the footer year automatically. The lecture also covers a hamburger menu and an accordion.

jQuery, a JavaScript library, lets you write less code to manipulate the DOM and handle events, then install via a CDN and start using plugins.

Master jQuery syntax by starting with the dollar sign, selecting elements by class, tag, or id, wiring a click event with .click(), and hiding elements with .hide().

Master jQuery DOM manipulation by selecting elements and using html, text, and attr methods to read and update content and attributes, then hide, show, empty, or remove elements.

Leverage jQuery to manage form values with the val method for inputs and selects, and handle radio buttons with change events, using text methods for exact text.

Explore handling multi-select checkboxes with jQuery forms: detect changes, select by name, iterate with each, access values and text from surrounding spans, and extract text using text and html methods.

Explore jQuery CSS class manipulation by adding, removing, and toggling classes to change a paragraph's appearance, using add class, remove class, and toggle class methods.

Explore jQuery events, including click and the ready event, learn the on method and object-based event binding, and ensure the DOM loads before scripts.

Use jQuery events on the full name field to show or hide the submit button as the user types, considering change and key up for real-time feedback.

Explore jQuery effects, including hide, show, toggle, slide up and down, and fade, with customizable speed in milliseconds and callback functions to manage asynchronous actions.

Learn to use jQuery's animate method to change multiple properties with optional speed and a callback. Enlarge a square on click; colors can't be animated.

Create a t-shirt quote tool using JavaScript and jQuery that updates photo and price as color and quality change, applying a 12% increase for high quality and discounts for quantities.

Learn to initialize and update search parameters from filters on page load and during changes by creating reusable functions that read quantity, color, style, and quality, then refresh order details.

Update order details by syncing filter selections to the order summary with jQuery, using element IDs, dynamic selectors, and text extraction for quality, color, quantity, and style.

Calculate the price by retrieving unit price from color and style, apply a 12% high-quality increase, compute the total from quantity, and apply tiered discounts for large orders.

Update the product image by setting the image element's src to the file from the images folder. Dynamically use the product's photo property and concatenate the path as filters update.

Implement change event handlers for the quantity and style filters to update order details and price, switch product images accordingly, and improve user experience by avoiding on-keyup updates.

Create a scalable click handler for the color and quality filters that uses dynamic selectors and parent IDs to update the products object and the order details and price.

Format prices with two decimals and thousand separators using toFixed and toLocaleString in USD currency. Show the yellow loader during price updates and illustrate simple discount and quantity logic.

Learn how callback functions handle asynchronous tasks by passing a function as an argument and executing it after a setTimeout delay, with examples like get user and greet user.

Learn how to prevent application crashes by using try and catch for error handling in JavaScript, optionally using finally and throw to manage errors and debug with console logs.

Explore how to simulate namespaces in JavaScript by using objects to group related properties and methods, preventing global conflicts, as shown with a best seller slider example.

Explore JSON, a lightweight data format for exchanging data with APIs. Learn how JSON.stringify converts objects to strings and JSON.parse converts strings back to objects.

Learn how local storage stores string key-value data in the window object to remember a user's name and preferences across visits, while session storage holds data for the current session.

Store a name in local storage from a form, then hide the name field and show a personalized welcome with a greeting, clearing storage with the not me button.

Discover how Ajax performs asynchronous http requests to fetch data from external sources without reloading the page, and learn to render json data on the client.

Learn to create an XMLHttpRequest for ajax calls, track ready state and status codes, and handle JSON responses from an open trivia API using GET.

Learn to handle API responses with Ajax by parsing JSON from the API, extracting the question and answers, and shuffling options for a dynamic quiz.

Master ajax with jquery by sending requests using $.ajax with url, type, and dataType json, handling success and error callbacks; compare with vanilla js and learn done and fail methods.

Populate a countries select with Ajax, persist the chosen country in localStorage, and display the previous year's public holidays; add a function to compute course average ratings with error handling.

Learn to fetch a world countries list via ajax, populate a select with country names and alpha-3 codes, and persist the chosen country with localStorage for future visits.

Process a courses JSON to add an average rating per course, handling no reviews and not enough reviews yet with a try-catch, and return the updated JSON.

Explore adding a country selector that shows the previous year’s public holidays using the holiday API, with a dynamic country code and previous year computation, tested via console before integration.

Learn to build a dynamic holiday list with JavaScript and jQuery by calling a holiday api on country change, filtering public holidays, updating the user interface and local storage.

Set up the workspace for a Vue.js project by following Vetri docs, using Visual Studio Code, and starting with a CDN-based initial self-service machine demo to learn reactivity.

Create and mount a Vue app, define a data function returning an object, and use declarative rendering to display item data from a variable, preparing for backend data integration.

Load and inspect product data in a vue app using a simulated json, create a products data property, and use vue devtools and live server to quickly test changes.

Learn to render a dynamic product list with Vue.js directives, using v-for loops and template syntax with double curly braces to display price, name, photo, and quantity from data.

Learn to use the v-on directive to handle click events, toggle a product's active state, and apply the selected class through dynamic class bindings in Vue.js.

Learn to spot a Chrome devtools bug where updating the active data property doesn’t refresh the view until the page changes.

Implement plus and minus quantity controls with Vue event modifiers, stop propagation, and attribute binding to disable the minus button and render the quantity area when the product is active.

Render active order items in the order details section using Vue's v-for and v-if directives, showing quantity, name, and item total. Format totals with toFixed(2) and prepare the grand total.

Learn to use methods to calculate the total by iterating through the products, checking each active item with this, and summing its price through data properties and methods.