Become a Front End Web Developer - JavaScript for Beginners

Trace how JavaScript emerged in 1994 to enable dynamic content in Netscape Navigator and evolved into ECMAScript with ES5 and ES6 across browsers.

Display the hello world message in the browser console as our first JavaScript program, with step-by-step guidance on implementing this output for the next video.

Create a single folder named JavaScript to organize all example files for easy code reference. Store it in a convenient desktop or laptop location, then proceed.

Open the javascript folder in Visual Studio Code by selecting the open folder option and choosing the javascript folder, then let VS Code reload to display it.

Create the html file to display the HelloWallet message in the console. Add the new file to the JavaScript folder and prepare to write code in the next video.

Demonstrate typing and formatting a basic html and javascript snippet in visual studio, using opening and closing tags, indentation, and a lowercase console log for accuracy.

Launch HTML using Live Server after saving files, open with Live Server in VS Code, and observe automatic page reload; use developer tools to inspect console messages.

Learn to dock Visual Studio Code beside the Chrome browser, set VS Code to restore mode, and save with Ctrl+S to see live reloads.

Place the script tag inside the body or head, and note it may run outside the body as well; for consistency, prefer placing it in the body or head.

Discover how JavaScript is case sensitive, so objects like console and its log function must be in lowercase; case mismatches trigger errors and can change program behavior.

Discover how JavaScript code executes step by step, using console logs to visualize line-by-line flow, the role of semicolons, and how errors halt execution in the browser.

Explore literals and arithmetic operators through an example that converts Celsius to Fahrenheit. The upcoming videos in this series demonstrate these concepts using a Celsius to Fahrenheit conversion.

Convert temperature from celsius to fahrenheit using the formula celsius * 9/5 + 32, implemented in JavaScript to display celsius and fahrenheit values, and explore literals and arithmetic operators.

Create a new file named conversion.html in the folder by using the explorer, clicking new file, naming the file, and pressing enter.

Explore literals in JavaScript, distinguishing string literals from numeric literals, by using quotes for text and plain numbers, and observe console output and syntax errors.

Learn why numbers and strings behave differently in arithmetic addition and string concatenation, demonstrated by five plus five producing 10 versus '5' + '5' producing 55.

Define a Celsius label as a string literal, concatenate the number five, and display Celsius: 5 in the HTML output; save the conversion file and verify the result.

Learn to calculate Fahrenheit in a JavaScript for beginners lesson by applying the formula (5 × 9 ÷ 5) + 32, logging results and debugging a wrong output.

Explore JavaScript operator precedence by evaluating expressions with plus, asterisk, and slash, showing left-to-right evaluation, type conversion, and string concatenation, and prepare for bracketed expressions.

Fix Fahrenheit calculation issue in a JavaScript example by using brackets to enforce correct operator precedence before string concatenation, yielding the expected 41.

Understand string literals with single quotes and numeric literals, and how string–number concatenation yields a string. Learn arithmetic operators, precedence and parentheses, plus hyphen, exponentiation, modulus, and increment.

Write a JavaScript program to compute the area of a rectangle and print the result to the console, practicing independent exercises organized in topic folders for progressive learning.

Learn to calculate the percentage of boys and girls in a classroom using arithmetic operators and formulas, with an example of 10 boys and 15 girls (25 total).

Learn to use the modulus operator in JavaScript to compute leftover apples when packing into fours, and print the result to the console.

Learn the limitations of hard-coded Celsius to Fahrenheit conversions and how using variables prevents multiple line edits, enabling scalable, accurate temperature calculations.

Define a Celsius variable with the var keyword, assign a value, and print it; update the Celsius value to see immediate results and its Fahrenheit conversion.

Define a new Fahrenheit variable in JavaScript from the existing Fahrenheit computation expression after Celsius, and display the result using that variable, illustrating the practice of defining expressions as variables.

Discover how to name JavaScript variables with case-sensitive rules, use meaningful multiword identifiers with proper casing, and improve readability by following consistent naming conventions.

Explore how to declare variables in JavaScript, assign values later, and define multiple variables in a single line with one keyword, keeping unassigned variables as undefined until set.

Solve the first exercise by using variables to calculate the area of a rectangle, creating length and area variables, and updating the HTML to use them while preserving console output.

Learn to compute the percentage of boys and girls in a class using variables for boys, girls, and class strength, producing the same console output as the earlier solution.

Learn how to implement a reusable JavaScript function to convert Celsius to Fahrenheit, preventing duplicate code across multiple files and fixing errors efficiently.

Define a JavaScript function to wrap script lines, using the function keyword, a name, and paired brackets and braces. Learn proper indentation and the rule for closing braces.

Learn how to define a function with the function keyword, name it, and declare parameters, then call the function using its name and brackets to invoke it and view output.

Define a function with a Celsius parameter to calculate Fahrenheit, pass the Celsius value in the function call, and manage parameter naming and scope for correct output.

Learn to call a Celsius to Fahrenheit conversion function from another web page, troubleshoot not defined errors, and resolve them using external JavaScript.

Learn how to implement external JavaScript to share the Celsius to Fahrenheit conversion function across HTML pages, improving maintainability by linking a separate script file instead of duplicating code.

Learn how to define a function in a script file by creating a days folder, adding a js folder, and creating a new file in the js folder.

Move the fahrenheit conversion function into a separate script file, cut and paste code between HTML and script, and save all related files to complete the integration.

Link an external JavaScript file to html with the script tag and run a Fahrenheit calculation across multiple html files.

Explore how external JavaScript files work by naming a file with the .js extension, defining variables, and using console.log to verify access to variables across scripts.

Learn how to return a value from a function and fix undefined results by adding a return statement to the farenheit function, then see the value in the conversion HTML.

Explore how the browser loads a script and executes a function step by step, computes a Fahrenheit value, returns it to the caller, and displays the result in the console.

Functions encapsulate tasks and promote code reuse using camelCase. Name them with verbs in lowercase first word and capitalized subsequent words, as in calculateTotal or createGraph, and use console.log.

Practice creating a JavaScript function that computes the area of a rectangle from length and width, returns the area, and enables a separate console log of the result.

Learn how decision making and conditional statements guide JavaScript programs, forming a foundation for front-end web development for beginners.

Explore how a JavaScript program uses conditional statements to act on a raining boolean, displaying true and suggesting watch TV, or false with no suggestion when it does not rain.

Implement the basic if statement in a new html file, wire up a script, and display true in the console output to demonstrate the concept.

Explore how the if statement evaluates a condition and executes the code block inside curly braces when true, while false prevents execution, using boolean literals true and false.

Implement an if statement to check rain using a boolean variable and see the watch tv string literal display when training is true, then disappear when training is false.

Explore how the logical not operator reverses boolean conditions in JavaScript by changing a rain-based prompt from watch TV to go for a walk, using two conditional patterns.

Explore how the exclamation symbol acts as the logical not operator, flipping booleans from true to false and from false to true, and affecting conditional blocks.

Implement the else block in JavaScript by extending an if statement and using the /* */ comment syntax to toggle a variable between go for walk and watch TV.

Learn how the else block works in conditional statements. When the if condition is true, the if block runs; when false, the else block runs, showing the execution flow.

Explore how the JavaScript equal (==) operator, a key comparison operator, compares left and right values, returns a boolean, and differs from the assignment operator.

Learn how the equal operator compares values across types and why strict equality (===) checks both value and data type in JavaScript, demonstrated with numbers and string literals.

Explore JavaScript comparison operators, including not equal, strictly equal, less than, less than or equal to, greater than, and greater than or equal to, with boolean expressions and console outputs.

Explore how JavaScript logical operators and, or, not work through real-world examples with Angela and John to solve conditional problems, using true and false outcomes.

Learn how to locate and input the pipe character across different keyboard layouts, including German keyboards. If needed, search online and copy-paste the symbol into your editor.

Create a JavaScript program that classifies a passenger as infant or not based on age under two, printing 'infant' when under two and 'not infant' otherwise.

Create a simple HTML file and define age variables in a script to check if age is less than two, logging infant or not infant accordingly.

Implement an adult passenger age check alongside existing infant logic using a JavaScript if statement, and test with ages 11 and 15 in the html console.

This lecture explains airline policy for passenger classification: infants (0–2), children (2–11), and adults (>11); it shows how to update logic to display the correct class by age.

Establish a child passenger age check using a range 2–11 with age >= 2 and age <= 11, implemented in an if statement, to classify passengers as children or adults.

Learn to implement an airlines policy using if... else if statements, reproducing the same results across multiple age scenarios, including child and adult, by rearranging code and testing outputs.

Compare sequential if statements with if else if blocks, showing how evaluating the first true condition stops further checks, boosting performance; use the failsafe blocker when grouping many conditions.

Explore how to convert an if statement into a ternary operator in JavaScript, using a boolean expression to choose between watch TV and go for a walk.

Understand how the ternary operator works by comparing it to an if statement, with true and false parts yielding watch TV or go for a walk.

Learn to use the switch case statement in JavaScript to map hour of day to activities like breakfast, dinner, or work or relax or sleep, with break and default.

Explore a recap of conditional statements in JavaScript, covering if blocks, if-else chains, else-if ladders, and switches, plus ternary operators and core comparison and logical operators.

Practice classifying a number as positive, negative, or zero with an if statement in JavaScript and log to the console. Organize the code in the exercises/zero folder.

Apply if else statements to determine positive, negative, or zero values in JavaScript, building on the previous conditional exercise and completing exercise two.

Learn JavaScript conditional statements to determine if a number is odd or even using the modulo operator. Implement the solution in a new exercise file and proceed to next video.

Explore the fourth exercise on conditional statements, computing cash back based on the transaction amount using the ternary operator.

Explore how looping constructs in JavaScript simplify repeating tasks, from generating bills for millions of customers to processing lists, sorting items, and reading characters, using while, do-while, and for loops.

Demonstrate displaying the numbers from one to five using while, do-while, and for constructs in JavaScript, preparing for the next videos.

Learn to display numbers from one to five in JavaScript using a while loop. Define a number variable as 1, then loop while number <= 5, console.log(number) and increment number.

Understand how a while loop runs in JavaScript, evaluating the boolean expression number <= 5, incrementing the number, and printing 1 through 5 to the console.

Display numbers from one to five using the do while loop in JavaScript, noting that the condition is checked at the end and the loop runs at least once.

Learn to display numbers from one to five using a for loop, including initialization, condition, and increment, with the correct three-section syntax and code steps in Visual Studio.

Learn to compute January telecast dates for a program starting January 1, telecast only during January, every three days, using JavaScript to display the schedule.

Implement a TV schedule display solution using a for loop, filling the for loop's init, condition, and update sections; create schedule.html and test output to display the program dates.

Explore a JavaScript solution for displaying a TV program schedule in an HTML file. It explains a for loop, a 31-day check, and adding three days to align the schedule.

Learn to use increment and decrement operators in loops, applying number++ and -- to update a number from 1 to 5 in while and for loops.

Explain assignment operators in JavaScript and show how += adds three to a date variable, equating to date = date + 3, while outlining subtraction, multiplication, division, and exponentiation.

Write a JavaScript program that prints ten odd numbers from one using a while loop, and follow the provided solution link to complete the LOPSA exercise.

Learn to print 10 odd numbers starting from one in JavaScript using a for loop, with console log showing the result, by creating a new HTML file in folder 05.

Implement a JavaScript function that prints a hyphen line with length based on the input parameter, in a new HTML file under the 05-lupa folder named print-line.html.

Explore why arrays matter in JavaScript by storing 30 student heights in one variable and accessing values with index, avoiding numerous separate variables.

Define a heights array in JavaScript using square brackets, populate it with four student heights in centimeters, and display the array with console.log in an HTML file named average.

Learn to read values from an array using zero-based indices, access items by index numbers, and interpret console log outputs, including undefined for missing items.

Learn how to modify an existing array item by index assignment and how to add a new item using push, illustrated with a heights array in JavaScript for beginners.

Compute the average height from an array by summing its elements, dividing by five, storing the result in a variable, and displaying the average.

Use a for loop to read array items, sum them to compute the average, and print results with a dynamic index in JavaScript for beginners.

Learn to calculate an average height using a for loop on an array by accumulating values into a total with the += operator, then dividing by the count.

Learn to use the array length property to determine the number of items, replacing hard-coded sizes in the average height calculation and making JavaScript code dynamic.

Master iterating over array items with the for...of loop in JavaScript, printing each fruit name and understanding its syntax and benefits over index-based loops.

Define an array with the days of the week and print them to the console using a for loop as the first exercise in the JavaScript for Beginners course.

Print the days of the week with serial numbers from a given array, display the console output, and guide creating a new file named daza-ifn numbers to implement the solution.

Implement the third exercise by printing days from an array in a line separated by the pipe character. Create a new file named print hyphen base to implement the solution.

Learn to write a JavaScript program that finds the median from a sorted set of eleven numbers, identifying the middle value.

Learn to compute the median of an odd-length array by taking the middle index: subtract one from the length and divide by two to get an integer index.

Learn to compute the median for odd and even item counts in JavaScript by implementing a median function that handles arrays and, for even counts, averages the two middle values.

Explore how to model data with JavaScript objects by capturing passenger details for an imaginary family's flight booking and displaying them in the console.

Examine the limitations of using fixed variables and arrays to store passenger details, showing how arrays reduce duplication but rely on indices, and introduce objects as a future solution.

Define a passenger as a JavaScript object using curly braces with first name, last name, gender, and date of birth, then log the object and read properties with dot notation.

Add new passenger properties, including full gender words, age, and vegetarian status, to the passenger object; the video outlines how these fields integrate and previews the next step.

Add age as a number and gender as a nested object to the passenger, using comma separators after date of birth, with consolidated logs showing the age.

Define two gender variables, male and female, to represent four passengers for Smith's family, refactoring to avoid duplicating a gender object and keep the correct gender property.

Convert the passenger object into an array, rename the variable to passengers, enclose it in brackets to hold multiple passenger details, and access properties via the index.

Define all passenger objects into an array by duplicating the first object and updating the second through fourth items to represent each family member; save and verify the four-item array.

Explore JavaScript objects by learning how to define properties with colons, separate them with commas, and use strings, numbers, booleans, objects, arrays, or variables as values.

Create objects for an imaginary e-commerce app, classifying products into books, electronics, apparels, and household items, with vendor data from Store Enterprise and Cloud Retail Ltd.

Create and organize four category objects for an e-commerce app, store them in an array, and print all category details line by line from a JavaScript file.

Define vendor objects for an e-commerce exercise, create two vendor objects with names and contact numbers, place them in an array, and print all vendor details from the array.

Define eight ecommerce product objects, link category and vendor references, and print each product's details line by line in JavaScript.