Front End Web Development with JavaScript & Next.js

In this video we are going to dive Javascript codes

Next.js is a powerful web development framework that simplifies the process of building fast, interactive applications. Based on React, a popular JavaScript library, Next.js offers additional structure and features such as server-side rendering and static generation.

In this video we are going to write our first codes

What are the most common use cases for Next.js?

Next.js is a versatile framework, capable of addressing diverse web development needs across multiple industries. One of its popular applications is in the realm of e-commerce. With its fast rendering and robust SEO capabilities, it offers an optimal solution for businesses looking to create high-performance online stores that rank well on search engines.

Let’s talk about what is Javascript In this video we are going to learn some theoretical stuff

Is Next.js better than React?

Next.js is definitely newer and faster in many cases when compared with React. JAMstack a modern web development architecture that uses JavaScript, APIs, and pre-rendered Markup, Next.js is the best choice for them.

Let’s learn how to link our Javascript file to HTML file

Is Next.js also a backend?

Next.js backend capabilities are often overshadowed by its frontend features, but it’s equally competent in handling server-side logic.

Let’s learn about values and variables in Javascript language

Is Next.js a coding language?

Next.js is an open-source full-fledged framework created by Vercel, designed to simplify building interactive web applications using React. It offers features for both server-side rendering (SSR) and static site generation (SSG), enabling you to create performant and SEO-friendly web experiences.

In this video we are going to learn about data types Numbers, booleans etc

To effectively learn Next.js, it helps to be familiar with JavaScript, React, and related web development concepts.

In this video we are going to take a look at the three different ways of declaring variables in JavaScript

Why should I learn Next.JS?

Next.js is used a lot in the world of web development because it's easy to use and helps create fast reusable web pages. Many developers find it helpful for their workflow. Next.JS and Vercel allow you to spin up a web application incredibly quickly, literally within seconds. There's a number of reasons that web developers are using Next.js.

In this video we are going to learn some more JavaScript fundamentals Let's learn about some basic operators

How long does it take to learn Next.js?

Learning next.js is definitely possible to do on your own, it can take anywhere from a couple of weeks to a few months to have the necessary tools at your disposal to truly understand the Next.js ecosystem and how to get the best out of a Next.js build.

In this video we are going to talk about the precedence of different operators

Should I learn Next.js before React?

Many developers find that learning React first is a good place to start before diving into learning next.js. React is a JavaScript library for building user interfaces, and it lets you create reusable components so that your code is easy to read and maintain. When a user interacts with a React component, React updates the component automatically, which makes your app more responsive and quicker.

In this video we are going to talk about strings and template literals Strings are a very important part of programming And so let's now learn about an easy way to build strings, using something called template literals

Is learning Next.js hard?

Next.js is relatively easy to learn compared to other frameworks. With a little practice, you should be able to get up and running with next.js in no time.

In this video let's now make coding even more fun and actually take decisions with our code to make it look a lot more real

While Vanilla JavaScript provides the foundation for web development, it becomes inadequate as web applications grow in complexity. Frameworks like React.js and Next.js are designed to handle the demands of modern web applications, offering better scalability, performance, state management, and developer experience.

In this video, we need to go back to value types So types are one of the fundamental aspects in programming And converting between types is something that we do in every programming language

What is the difference between Vanilla.js and Next.js?

The difference between Vanilla.js and Next.js lies in their purpose and complexity. Vanilla.js means there is no framework applied at all in JavaScript; the coders communicate with browser APIs directly. It allows for the manipulation of DOMs, events, or simple functionality. It works only for small projects or static content, given that more advanced functionality relies on the programmer to implement it themselves, like routing or server-side rendering.
Next.js is a powerful framework built on top of React for creating full-featured and production-ready web applications. It features built-in support for SSR, SSG, routing, and API routes that make complex application development easier. Next.js is much more suitable for modern dynamic and SEO-friendly applications. It provides performance optimizations out of the box, while Vanilla.js offers minimal structure and, when working on bigger projects, requires greater manual setup and configuration.

We talked about type conversion and coercion to numbers and to strings But we didn't learn booleans yet That's because we need to learn the concept of truthy and falsy values first And so, that's what we're gonna do now

What are the advantages of Vanilla.js?

The advantages of Vanilla.js are: its lightweight nature, simplicity, and control over code. Vanilla.js is independent and only leverages native JavaScript-no other libraries or frameworks. It has a smaller footprint that can result in improved load times and performance on smaller projects. This reduced setup also avoids dependencies, reducing the likelihood of potential conflicts and generally easing debugging.
Using Vanilla.js encourages the developer to have core knowledge of JavaScript, thus improving foundational skills. Vanilla.js gives complete control and flexibility in code, so it is ideal for projects where features might be needed but not a full framework.

We have only used comparison operators to take decisions with if else statements But let's suppose we want to check if two values are actually equal, instead of one being greater or less than the other And for that we have different equality operators

Is Next.js a coding language?

Next.js is an open-source full-fledged framework created by Vercel, designed to simplify building interactive web applications using React. It offers features for both server-side rendering (SSR) and static site generation (SSG), enabling you to create performant and SEO-friendly web experiences.

When we learn about if-else statements, comparison and equality operators and boolean values We also need to learn about logic And in particular about boolean logic So let's do that in this video

Is Next.js better than React?

Next.js is definitely newer and faster in many cases when compared with React. JAMstack a modern web development architecture that uses JavaScript, APIs, and pre-rendered Markup, Next.js is the best choice for them

Logical operators are really important in Javascript language to make decisions Now let’s talk about that

Is Next.js also a backend?

Next.js backend capabilities are often overshadowed by its frontend features, but it’s equally competent in handling server-side logic.

In this video let's learn about the switch statement, which is an alternative way of writing a complicated if/else statement, when all we want to do is to compare one value to multiple different options

What is Next.js used for?

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more.

Now that we're getting more comfortable with JavaScript, it's time to learn about a more theoretical concept And that's the difference between statements and expressions

We already saw two ways of writing conditionals The regular if/else statement and the switch statement But there is another one And that is the ternary operator

Now before continuing to learn JavaScript, in this new section, we should first activate a special mode in JavaScript, called Strict Mode

The fundamental building block of real world JavaScript applications are functions They are one of the most essential concepts in the language And so let's study functions over the next couple of videos

In JavaScript, there are different ways of writing functions And each type of function works in a slightly different way Now let’s learn about declarations and expressions

So we learned about function declarations and expressions in the last video But there is actually a third type of function that was added to JavaScript in ES And that's the arrow function

Let's now take functions even one step further and call one function from inside another function And this is something that we do all the time in JavaScript

To finish this part about functions, let's review everything important that we learned so far In order to make sure that you really understand functions before we move on to other topics

Data structures are the most important topic in Javascript Let's now talk about our first data structure And that's gonna be Arrays

JavaScript has some built in functions that we can basically apply directly on arrays And these are called methods And we can think of methods as array operations basically So let's now learn some useful array methods

After arrays, it's now time to learn about another data structure in JavaScript, which is objects

In this video, we are going to learn how to retrieve data from objects And also how to change data in objects, using both the dot and the bracket notation

In this video let's keep exploring objects And this lecture will bring us to object methods

When we talked about the if else statement, I mentioned that it's a control structure And also, there are more control structures One of the other control structures are loops And loops are our final big topic in this section

Let's now explore some more features of the for loop and also create a somewhat more useful example

In this video, we're gonna do two interesting things First, we will loop over an array backwards, and then second we will also create a loop inside another loop

So we learned all about the for loop and even created a loop inside a loop But there is another type of loop in JavaScript and that's the while loop So let's explore that one now

Welcome to the first project that we're gonna build in this course And let's get started right away

So in this section, we're going to make JavaScript interact with a webpage for the very first time And the technical term for that is doing DOM Manipulation Let's learn what the DOM actually is and how it works

Now that we have a better understanding of what DOM and DOM manipulation Let's now actually select and manipulate some more elements

I Let's now make our application actually do something when we click on the button So this is going to be the first time that our code reacts to something that happens in the DOM For that, we will use event listener

Let's now continue building our game and actually implement the game logic itself First, we will implement compare logic

In the last video, we implemented the compare logic We compare input value to hidden number And due to the comparison, we printed a status message Now, let's move on to the next step Which is to work with a score here

The DOM actually also includes CSS styles And so with DOM manipulation, we can also change styles So let's try that out now

Let's now implement the functionality of reset the application

So let's now implement the last missing functionality in our game, which is the highscores

To finish this project, let's now learn about the refactoring in order to get rid of some of our duplicate code

Now we're going to do a nice project again The name of our project is rock paper scissors

In the previous video, we talked about the details about the application we will do Now let's get to work Let's define the elements we will use

We defined the DOM elements that we will use in the previous video as variables Now let's start creating the logic of our game First of all, let's make computer and player choose

In the last video, we created the computer's move randomly and we made our own move by clicking the rock paper and scissors buttons Let's continue now

In the previous video, we created our play game and display messages functions When we clicked on the rock paper and scissors buttons, we displayed the messages on the screen according to the selections Now we can start coding the actual logic of our game Let’s compare choices and get result

In our previous video, we determined the winner of the game and showed it on the page Now we will update the score and build the game over functionality

In the previous video, we completed all the functions of our game except the reset function In this video, let's quickly create the reset function and finalize the project

As an introduction to this theory section, I want to start with a very cool and very high-level overview about the JavaScript language

We talked about the JavaScript engine in the last video But what is that engine actually? And what is a JavaScript runtime? Also, how is JavaScript code translated to a machine code? So that's just some of the topics that we talked about in the last video And so now let's find out how they work in this video

In this video, let's answer the question How is JavaScript code executed? We already know that it happens in a call stack in the engine, but let's dig a bit deeper now

In this lecture, let's answer the question How is JavaScript code executed? We already know that it happens in a call stack in the engine, but let's dig a bit deeper now

In this video we need to talk about is a very misunderstood concept in JavaScript and that is hoisting

The this keyword, is an extremely important concept to understand in JavaScript And many beginners find it especially difficult But don't worry, It's actually not that hard if you know exactly how the this keyword works

Let's now see the rules of how the this keyword is defined in action

Let's start this video by learning about array destructuring

We talked about these destructuring arrays, but we can also destructure objects So let's do that now

Let's now talk about the amazing spread operator We can use the spread operator to basically expand an array into all its elements Basically unpacking all the array elements at one

Let's now talk about the rest operator And the rest operator looks exactly like the spread operator So it has the same syntax with the three dots, but it actually does the opposite of the spread operator

Let's talk about the AND operator and the OR operator And how we can use them for something called short circuiting

In this video we will learn how to work with strings And so we're gonna be taking a look at a couple of useful string methods

Let's continue with some simple string methods And first ones are for changing the case of string

Let's begin this video by introducing a couple of simple and easy-to-understand array methods These methods: slice, splice, reverse and concat

In JavaScript, the "forEach" method is a powerful tool that allows developers to iterate over elements in an array and perform operations on each element individually This video aims to provide an in-depth understanding of the "forEach" method and its practical applications

One such essential method is the map function The map function allows developers to transform and manipulate array elements effortlessly, providing a concise and elegant solution In this video, we will explore the map function in JavaScript and various practical examples to demonstrate its utility

In this video, we are going to learn about filter method Filter function, which allows developers to easily extract elements from an array based on specific criteria With its concise syntax and powerful capabilities, the filter function simplifies array manipulation tasks, making code more readable and efficient In this video, we will explore the filter function in JavaScript in depth, purpose, and various examples to demonstrate its practical usage

Reduce method which allows developers to transform and aggregate arrays into a single value In this video, we will explore the `reduce` method and delve into its various applications By the end, you will have a solid understanding of how to leverage the `reduce` method to simplify your code and enhance your JavaScript programming skills

One such method is the "find" method, which allows developers to search through an array and locate the first element that satisfies a given condition The "find" method is particularly handy when dealing with complex data structures and is widely used in modern JavaScript applications In this video, we will explore the "find" method in detail, understand its syntax and functionality, and provide basic code examples to demonstrate its practical usage

JavaScript provides several built-in methods to perform various operations on arrays, including the popular `flat` and `flatMap` methods These methods are particularly useful when dealing with nested arrays or when you need to transform and flatten arrays in a concise and efficient manner In this video, we will explore these methods in detail, along with basic code examples to illustrate their usage

In the world of programming, sorting arrays is a fundamental task that developers encounter frequently Whether you're organizing data, implementing search algorithms, or optimizing performance, having a solid understanding of array sorting techniques is crucial

Let's start this section by understanding what asynchronous JavaScript actually is, and also learn about the most popular use cases of asynchronous JavaScript, which is basically to make so-called Ajax calls to APIs

Now that we know about AJAX and API's, let's actually make our first API call

In this video, let's create a sequence of AJAX calls, so that the second one runs only after the first one has finished

In this video, let's learn about a modern JavaScript feature called promises, so that we can escape callback hell

In this video, we will learn how to consume a promise And in this case, we will consume the promise that was returned by the fetch function

Let's now learn how to chain promises in order to also show the border countries of the initial country that we give to the function

Until now, we have always assumed that everything went well with our AJAX calls, so we never handled any errors However, an important part of web development is to actually handle the errors Because it's very common that errors happen in web applications And in this video, let's talk about how to handle errors in promises

In this video, we're gonna fix the request 0 error that we saw happening in the last video

In this lesson, we will answer the questions of what is Next.js, what are its advantages, what is its main difference with React

In this lesson we will start our first application with next.js. I will create my applications through Visual Studio Code.

In this lesson, we will explain what the files and folders we have to use in Next.js are for.

In this lesson we will create new pages. We will learn how to navigate between these pages we have created. While doing this, we will learn the Link component in Next.js.

In this lesson, we will learn how to create and use components that we don't want to route with Next.js.

In this lesson, we will learn how to create dynamic routes with you. This structure is one of the most distinctive features that distinguish Next.js from React.

In this lesson, we will introduce the application we will develop in the section. We will learn the basics of Next.js on this application.

In this lesson, we will start to create the application we explained in the last lesson. In our lesson, we will create the routes that will take place in our application.

In this lesson, we will learn how to create page layout in Next.js applications. We use the layout.js file to create this.

In this lesson, we will learn how to use module.css in our application. We will also examine other features of the Image component.

In this lesson, we will start creating our homepage. This page will feature a slide containing the content of the courses we offer.

In this lesson, we will discuss component types in Next.js. So, what do we mean by this? Components are created in two different places. One is on the client side, meaning "client-side rendering," and the other is on the server side.

In this lesson, we will build a structure that will help us understand which page we are on. To do this, we will give some style operations to Link components.

In this lesson, we will perform data extraction from an API source to create the ‘Teacher’ page.

We will try to make the component named TeacherPage, which we created in the last lesson, a component compiled on the server again. To do this, we will create the area where we use dynamic data in a separate component.

In this lesson, we will create a message that will appear on the screen until the application pages are loaded. You have done this many times with React.

In this lesson, we will learn how to create an Error page in Next.js applications.

In this lesson, we will learn how to create a not found page. There is a not found page that Next.js automatically displays when trying to navigate to pages that are not actually there. In this tutorial we will learn how to customise this page.

In this lesson, we will create the TeacherDetail component, which contains detailed information about teachers. We will use dynamic routes to create it.

In this lesson, we will create the Share page. This page will include a form area. We will learn how to use form tags with Next.js. In fact, many features are the same as in React.

In this lesson, we will add the section where we can choose an image inside the form field.

In this lesson, we will run the form using the action property of the form tag.

In this tutorial we will learn how to optimise Next.js applications using the useFormStatus hook. Actually this hook belongs to React, but it only works when Next.js is used.

In this lesson we will do some work with input tags. Then we will learn the useFormState hook.

in this lesson we will show alternative error handling.

In this lesson, we will learn how to use metadata in more detail. In Next.js, metadata is used to define metadata at the page or application level. This metadata helps browsers and search engines to better understand and optimise your page. It is also used to determine how you will appear on social media platforms and in search results.

This lesson will be the last lesson in this section. In this lesson, we will remember again what we have learnt in this section