#29 How to use JS Arrays | JavaScript Full Tutorial

 In this lesson we'll start learning about the object data types, beginning with arrays. Arrays are basically an ordered list of values. These values can be of any data type, so our array can be made up of numbers, strings, booleans, and even other arrays. In this lesson we learn all about how to write and use them.

0:00 - Intro/Quick review 1:02 - What is an array? 1:22 - Creating our first array 2:05 - Accessing an array 3:05 - Adding a value 3:37 - Deleting a value 5:15 - Replacing a value 6:15 - Creating a multi-dimensional array 7:25 - Lesson summary 8:07 - Tasks 10:14 - Coming up next/Outro

Read more »

Posted in: Javascript Tutorial

#28 For...of loop | JavaScript Full Tutorial

 In this lesson we finish up our understanding of loops by learning all about the for..of loop. First of all we'll understand how to write it and how it works, and then we'll look at the difference between the for...of loop and the for...in loop.

0:00 - Intro 0:38 - What is the for..of loop? 0:54 - Looping through an array 2:14 - Looping through a string 3:11 - The break keyword 4:07 - For..of vs. For..in 4:33 - Lesson summary 5:00 - Tasks 6:23 - Coming up next/Outro

Read more »

Posted in: Javascript Tutorial

#27 For...in loop | JavaScript Full Tutorial

 

The for...in loop is used to iterate over enumerable properties of an object. In this lesson we learn all about how to write and use the for..in loop, we'll also understand what is meant by enumerable.

Read more »

Posted in: Javascript Tutorial

#26 While/do while loop | JavaScript Full Tutorial

 

In this lesson let's learn all about the while/do while loops. The while loops works in a similar way to the for loop in that it loops over a block of code. the difference is the initialiser variable is written before and outside of the while loop syntax, and the final expression is included inside the while loop curly braces after the code to be run. Only the condition is included inside the parentheses of a while loop. We'll also learn about the do while loop, the do while loop will run the code at least once before coming on to evaluating the condition.

Read more »

Posted in: Javascript Tutorial

#25 How to use the JS For Loop | JavaScript Full Tutorial

 

In this lesson let's learn all JS Loops by starting with the for loop. The for loop is the most common type of loop in JavaScript. Let's learn how to use a for loop to loop through a list of values and do something with them, for e.g. using the values with some custom text. By the end of this lesson you will be comfortable and able to start using for loops in your projects.

Read more »

Posted in: Javascript Tutorial

#24 The Ternary (Conditional) Operator | JavaScript Full Tutorial

 The word ternary means composed of three parts, and thats because the Ternary Operator consists of three operands. In this lesson we're going to learn how to write the Ternary Operator and how it works.

Read more »

Posted in: Javascript Tutorial

#23 How to use the Switch Statement | JavaScript Full Tutorial

 

In this lesson let's learn all about the Switch statement, the Switch statement takes a single value, and then looks through a list of choices (called cases), until a case that matches the value is found. Each case has it's own corresponding code that will be executed if there is a match.

Read more »

Posted in: Javascript Tutorial

#22 If else Statements | JavaScript Full Tutorial

 In this lesson we're going to be learning all about the most commonly used Conditional Statement, the if statement. The if statement takes a condition and evaluates whether it is a truthy or falsy value, if it's true then it will run a block of code. We also learn about the variants, if else and else if statements.

Read more »

Posted in: Javascript Tutorial

#21 What is JS Control flow? | JavaScript Full Tutorial

 

In this lesson let's learn all about JS Control Flow. By default our JavaScript code is executed from top to bottom, line by line however we can change this with control flow. Control flow allows our program to make decisions about what code is executed and when. This is where JavaScript really starts to come alive, Javascript contains certain conditional statements and loops that enable us to control the flow of our code, making our projects and applications more powerful, dynamic and interactive.

Read more »

Posted in: Javascript Tutorial

#20 What is the Nullish Coalescing Operator? | JavaScript Full Tutorial

In this lesson let's learn all about the built in Math object, the Math object contains math properties and methods that are used to do some really cool things such as generate random numbers an find the min and max values from a list.

 

Read more »

Posted in: Javascript Tutorial

#19 JS Logical Operators | JavaScript Full Tutorial

 

In programming, many languages have a concept of "truthy" and "falsy" values. These are evaluated with Logical Operators. The purpose of Logical Operators is to determine logic between values and then perform some sort of action based upon whether the result evaluates to true or false. In this lesson we're going to learn all about the first three logical operators: ! NOT || OR && AND In the next lesson we'll look at the Nullish Coalescing (??) operator in detail.

Read more »

Posted in: Javascript Tutorial

#18 JS Comparison Operators | JavaScript Full Tutorial

 

In programming we will often come across a situation where we need to compare values, and as the name implies we can do this with comparison operators. JavaScript has several ways to do this, and in this lesson we're going to be covering them all. There are three main types of comparison operators: 1. Relational 2. Abstract (or loose) equality 3. Strict equality

Read more »

Posted in: Javascript Tutorial

#17 How to use the JS Math object | JavaScript Full Tutorial

 

In this lesson let's learn all about the built in Math object, the Math object contains math properties and methods that are used to do some really cool things such as generate random numbers an find the min and max values from a list.

Read more »

Posted in: Javascript Tutorial

#16 How to use the JS Date object | JavaScript Full Tutorial

 

In this lesson let's learn all about the Date object. Let's say you wanted to create a site with a calendar, or perhaps a train schedule. You would need some way to identify the current date and time of the user that is on the site. The Date object is a built-in JavaScript object that provides several methods for managing, manipulating, and formatting dates and times. In this lesson we'll be covering everything you need to know.

Read more »

Posted in: Javascript Tutorial

#15 String methods | JavaScript Full Tutorial

 

In this lesson we're going to learn all about JavaScript string methods, we'll look at the most commonly used methods such as: - .toUpperCase() - .toLowerCase() - .indexOf() - .lastIndexOf() - ..and more!

Read more »

Posted in: Javascript Tutorial

#14 Template Literals | JavaScript Full Tutorial

 

Template literals were introduced in a version of JavaScript called ES6, and basically they introduce an easier and more readable way of injecting values into strings. In this lesson we look at them in detail, as well as multiline strings and embedding expressions.

Read more »

Posted in: Javascript Tutorial

#13 How to Concatenate Strings in JavaScript | JavaScript Full Tutorial

 In this lesson we're going to learn all about string concatenation. The word concatenation is just a fancy way of saying join together, so when we say string concatenation we're referring to the process of joining strings together. But when and why would we want to do this? Let's find out, in this lesson.

Read more »

Posted in: Javascript Tutorial

#12 JavaScript Strings | JavaScript Full Tutorial

 

Read more »

Posted in: Javascript Tutorial

#11 JavaScript Number Methods | JavaScript Full Tutorial

 In this lesson, we’re going to learn all about JavaScript Number methods. A common usage in JS is the need to format numbers, for example instead of displaying 3.0084 we want to display 3.1, or perhaps instead of displaying 2500000 we want to display 2,500,500. We'll learn how to do that and more in this lesson.

Read more »

Posted in: Javascript Tutorial

#10 JavaScript Numbers | JavaScript Full Tutorial

 

In this lesson we're going to look at our first Primitive data type of number. We'll learn how to write really big or really small numbers using exponents and scientific notation, as well as understanding the object counterparts that primitive data types have.

Read more »

Posted in: Javascript Tutorial

#9 JavaScript Assignment Operators | JavaScript Full Tutorial

 

In this lesson, we’re going to learn all about JavaScript Assignment Operators. Assignment Operators assign values to JavaScript variables, we'll also take a look at Compound Assignment Operators. 0:00 - Intro 0:21 - What is the Assignment Operator? 1:28 - Addition assignment operator (+=) 2:38 - Subtraction assignment operator (-=) 3:27 - Multiply assignment operator (*=) 4:00 - Division assignment operator (/=) 4:38 - Modulus assignment operator (%=) 5:14 - Lesson Summary 5:34 - Lesson Tasks 7:30 - Coming up next (Like and Subscribe 👍)

Read more »

Posted in: Javascript Tutorial

#8 JavaScript Arithmetic Operators | JavaScript Full Tutorial

 

In this lesson, we’re going to learn all about JavaScript Arithmetic Operators. We use them to perform arithmetic operations on values. Most of these we'll be familiar with, some like the Modulus and Exponentiation operators need a bit more explain, we'll cover them all in this lesson. JavaScript has the following arithmetic operators: 1. Addition + 2. Subtraction - 3. Division / 4. Multiplication * 5. Modulus % 6. Exponentiation ** 7. Increment ++ 8. Decrement -- 0:00 - Intro 0:43 - What are the JS Arithmetic Operators? 1:08 - Common Arithmetic Operators 1:45 - Modulus 2:11 - Exponentiation 2:46 - Increment and Decrement 5:52 - Operator Precedence 7:34 - Lesson Summary 8:12 - Lesson Tasks

Read more »

Posted in: Javascript Tutorial

#7 JavaScript Data Types | JavaScript Full Tutorial

 

In this lesson, we’re going to learn all about the different Data Types we have available to us, we'll look at how to use the data types and the key differences between them. JavaScript has the following data types: 1. Number 2. String 3. Boolean 4. BigInt 5. Symbol 6. Undefined 7. Null 8. Object (array, function, object)

Read more »

Posted in: Javascript Tutorial

#6 JavaScript Variables (let and const) | JavaScript Full Tutorial

 

In this lesson we’re going to learn all about JavaScript variables, we'll look at how to declare and initialise them as well as some key things to keep in mind when working with JavaScript variables.

Read more »

Posted in: Javascript Tutorial

#5 How to Output JavaScript | JavaScript Full Tutorial

 

In this lesson we’re going to learn all about how to display or output JavaScript (including alert, prompt, confirm and console log) make sure you watch to the very end because I’ll be showing you the best way to output JavaScript (especially when it comes to learning).

Read more »

Posted in: Javascript Tutorial

#4 JavaScript Syntax and Comments (JSDoc) | JavaScript Full Tutorial

 

In this lesson we’re going to learn all about JavaScript syntax and comments, including a brief introduction to JSDoc.

Read more »

Posted in: Javascript Tutorial

#3 JavaScript Loading Strategies (async and defer) | JavaScript Full Tutorial

 

In this lesson we’re going to learn all about JavaScript loading strategies, with specific attention paid to the async and defer attributes.

Read more »

Posted in: Javascript Tutorial

#2 Adding JavaScript to your Project | JavaScript Full Tutorial

 

JavaScript can be added either internally or externally, in this lesson, we look at how to add JavaScript to our project and how to avoid some common pitfalls along the way.

Read more »

Posted in: Javascript Tutorial

#1 What is JavaScript? | JavaScript Full Tutorial

 

In this first lesson we take a look at answering the question what is JavaScript? This is the first lesson in our full JavaScript Tutorial series.

Read more »

Posted in: Javascript Tutorial

#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial

 

In this Complete Guide to CSS Grid we go through the entire CSS Grid layout system step by step, first we’ll go through all the grid container properties and then all the grid item properties with examples throughout, and make sure to watch right to the end because we’ll be building a dashboard layout using CSS Grid. Remember to Comment, Like, Share and Subscribe! Here’s a video of the dashboard design from scratch - https://youtu.be/f7ECiT4aAFg 👍 Dribbble shot - https://dribbble.com/shots/12915127-W... Chapters: 0:00 - Intro 0:40 - What is CSS Grid? 1:00 - CSS Grid vs CSS Flexbox 1:30 - Grid main concepts 2:23 - All CSS Grid Properties 2:40 - Grid Container Properties 3:20 - grid-template-columns and grid-template-rows 11:48 - grid-auto-columns and grid-auto-rows 12:17 - grid-auto-flow 15:00 - grid-columns gap and grid-row-gap 15:16 - grid-gap 15:44 - align-items, justify-items and place-items 17:23 - align-content, justify-content and place-content 19:05 - grid-template-areas 22:20 - grid-template 23:27 - grid 26:00 - Grid Item Properties 26:20 - grid-column-start and grid-column-end 28:02 - grid-row-start and grid-row-end 28:40 - grid-column and grid-row 29:13 - align-self, justify-self and place-self 30:31 - grid-area 32:46 - Building a dashboard layout with CSS Grid 42:40 - Like and Subscribe

Read more »

Posted in: CSS Tutorial

#36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial

 

In this CSS Flexbox Tutorial - The Complete Guide, we'll go through the entire CSS Flexbox layout module step by step with examples throughout. First we'll take a look at what CSS Flexbox actually is, as well as some key components to flexbox such as understanding the main and cross axis. Next, we take a deep dive into every single CSS Flexbox property, starting with the container properties and then moving on to the item properties. Finally, we'll put what we've learnt into practice by building two small projects: (1) A game card and (2) A nav bar menu. Chapters: 0:00 - Intro 0:29 - What is CSS Flexbox? 1:20 - What can it do? 2:12 - All CSS Flexbox Properties 2:38 - The Main/Cross Axis 4:21 - Flexbox Container Properties 5:00 - flex-direction 5:42 - flex-wrap 6:50 - flex-flow 7:20 - justify-content 9:11 - align-items 10:55 - align-content 12:12 - Flexbox Item Properties 12:33 - order 14:03 - flex-grow 16:05 - flex-shrink 17:38 - flex-basis 20:00 - flex 20:50 - align-self 21:27 - Building a Game Card with Flexbox 23:57 - Building a Nav Menu with Flexbox 26:14 - Like and Subscribe

Read more »

Posted in: CSS Tutorial

#35 CSS Variables Tutorial [ CSS Var ] - CSS Full Tutorial

 

In this lesson we’re going to learn all about CSS Variables or CSS Var for short, CSS Variables are used to declare a style once and then re-use that style throughout our entire website. So, we'll look at how to write and declare CSS Variables, some cool things you can do with variables and of course we'll do all that using examples throughout. Timestamps: 0:00 - Introduction to CSS Variables 0:27 - A visual example 2:55 - How to declare CSS Variables 7:48 - Case sensitive variables 8:31 - Using CSS Variables within other variables 9:30 - How to write inline variables 10:10 - How to make quick changes with CSS Variables 10:30 - How to make our code more readable with CSS Variables 11:18 - Using CSS Variables with Fallback values 12:30 - How to use scoped CSS Variables 14:20 - Like and Subscribe

Read more »

Posted in: CSS Tutorial