Front End Web Development With Javascript & Next Js

Front End Web Development With Javascript & Next.Js
Published 3/2025
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz

Nextjs | Create dynamic, interactive, fast front end web applications using JavaScript & Nextjs with hands-on projects

What you’ll learn

Understand the core concepts of Next.js, a powerful framework built on top of React for developing robust web applications.

Become proficient in deploying web applications and managing database connectivity for full-stack development.

Familiarize with fetching, manipulating, and displaying data dynamically, incorporating advanced features and loaders to enhance user experience.

What are the main uses of JavaScript? JavaScript is a text-based programming language used for client- and server-side development.

Gain knowledge on creating, styling, and optimizing web pages and layouts to create interactive user interfaces.

How to write Javascript Functions, what are the differences between Function Decleration and Function Expression

Learn Web App Development with Next.js

What is JavaScript?

Learn Web App Development with Next.js, App Router and Pages Router

Using Firebase Features with Next.js

Learn the latest version of Next.js

Build and deploy a complex app

Utilize Next.js for advanced server and client-side rendering

Implement dynamic routing and navigation with Next.js Router

Optimize web apps using Next.js optimization techniques

Style Next.js applications with Tailwind or CSS modules

Implement routing and navigation using the new App router

Deploy your Next.js apps

Everything you need to be productive with modern Next.js

What is Javascript Boolean Logic

How to include JS File in HTML CSS Javascript

What is conditional statements (if else, switch case, ternary operator), how to use in Javascript

What is Javascript loops (for loops, while loops, continue and break statements), how to use them

How to create Javascript Arrays, Array methods (push, pop, shift, unshift .), Array iteration

How to create Javascript objects, how to update them, object methods

What is DOM, how to manipulate DOM in Javascript

Requirements

This course is ideal for people who have a basic knowledge of HTML, CSS, JavaScript, React but you don’t need to be an expert

Basic knowledge of JavaScript is required.

We preferred Windows OS (64-bit) but this is not mandatory. You can prefer to use other Operating Systems.
Having a working computer with 8 GB RAM or higher and internet connection

Willingness and Motivation to successfully complete the training

Watching the course videos completely, to the end, and in order.

Description

Overview

Section 1: Introduction to Javascript

Lecture 1 Welcome To The Javascript World

Lecture 2 Configuration of Code Editor

Lecture 3 Project Files

Section 2: Basics of Javascript

Lecture 4 Let’s Dive In

Lecture 5 First Code

Lecture 6 Introduction to Javascript

Lecture 7 Linking a Javascript File

Lecture 9 Data Types

Lecture 10 Let, Const and Var Keywords

Lecture 11 Basic Operators

Lecture 12 Operator Precedence

Lecture 13 Strings and Template Literals

Lecture 14 If / Else Statements

Lecture 15 Type Conversion and Coercion

Lecture 16 Truthy and Falsy Values

Lecture 17 Equality Operators

Lecture 18 Booleans

Lecture 19 Logical Operators

Lecture 20 Switch Statement

Lecture 21 Statements and Expressions

Lecture 22 Ternary Operator

Lecture 23 Strict Mode

Lecture 24 Functions

Lecture 25 Declarations and Expressions

Lecture 26 Arrow Functions

Lecture 27 Functions Can Call Other Functions

Lecture 28 Recap

Lecture 29 Arrays

Lecture 30 Basic Array Operations

Lecture 31 Objects

Lecture 32 Object Notations

Lecture 33 Object Methods

Lecture 34 The For Loop

Lecture 35 Looping Arrays

Lecture 36 Looping Backwards

Lecture 37 The While Loop

Section 4: Javascript in the Browser: DOM and Events Fundamentals

Lecture 38 Project What is in the box?

Lecture 39 DOM ( Document Object Model )

Lecture 40 Selecting and Manipulating Elements

Lecture 41 Click Events

Lecture 42 Game Logic – 1

Lecture 43 Game Logic – 2

Lecture 44 CSS Styles

Lecture 45 Reset Button

Lecture 46 Highscores

Lecture 47 Refactor

Lecture 48 Project Rock Paper Scissors

Lecture 49 Selecting Elements

Lecture 50 Generate Computer Selection and Make Player Selection

Lecture 51 Display Player and Computer Choices on the Page

Lecture 52 Compare Choices and Get Result

Lecture 53 Update Score and Game Over Functionality

Lecture 54 Reset Game Functionality

Section 5: How JavaScript Works Behind the Scenes

Lecture 55 Overview of JavaScript

Lecture 56 JS Engine and Runtime

Lecture 57 How JavaScript Code Execute?

Lecture 58 Scope and Scope Chain

Lecture 60 This Keyword

Lecture 61 How The This Keyword Works in Action
Section 6: Data Structures, Modern Operators and Strings

Lecture 62 Array Destructuring

Lecture 63 Objects Destructuring

Lecture 64 Spread Operator

Lecture 65 Rest Operator

Lecture 66 Short Circuiting

Lecture 67 Let’s Work with Strings – 1

Lecture 68 Let’s Work with Strings – 2

Lecture 69 Let’s Work with Strings – 3

Section 7: Arrays Methods

Lecture 70 Simple Methods

Lecture 71 forEach Loop

Lecture 72 map() Methods

Lecture 73 filter() Method

Lecture 74 reduce() Method

Lecture 75 find() Method

Lecture 76 flat() and flatMap() Method

Lecture 77 Sorting Arrays

Section 8: Async Javascript

Lecture 78 Introduction to Async Javascript

Lecture 79 First AJAX Call

Lecture 80 Request Chain

Lecture 81 Promises and Fetch

Lecture 82 Get Data From Promise

Lecture 83 Promise Chain

Lecture 84 Error Handling of Promises

Lecture 85 Throwing Errors

Lecture 86 What is Next.js?

Lecture 87 Project Fİles

Lecture 88 Create the First Next.js Application

Lecture 89 Useful Links

Section 10: Next.js Fundamentals

Lecture 90 Server Component Logic and File Structure

Lecture 91 Creating Routes and Using the Link Component

Lecture 92 Creating and Using Components With Next

Lecture 93 Create Dynamic Routes

Lecture 94 Project Introduction

Lecture 95 Project Creation & Creating Routes

Lecture 96 Creation of the Application Layout and Header Component

Lecture 98 Creating the Home Page and Slides Component

Lecture 99 Components Types In Next

Lecture 100 Active Link Building

Lecture 101 Fetching Data

Lecture 102 Client and Server Components Optimization

Lecture 103 Adding a Loading Page

Lecture 104 Error Page

Lecture 105 Not Found Page

Lecture 106 Page Creation With Dynamic Route

Lecture 107 Share Page

Lecture 108 Create Custom Image Picker

Lecture 109 Using Server Action
Lecture 110 Application Optimization with useFormStatus Hook

Lecture 111 Input Validation & useFormState Hook

Lecture 112 Alternative Error Handling

Lecture 113 Metadata

Lecture 114 Section Summary

Section 11: Advanced Next.js

Lecture 115 Section Overview

Lecture 116 Project Presentation

Lecture 117 Project Setup

Lecture 118 Create Pages with Fake Data

Lecture 119 Handling Not Found Page

Lecture 120 Working With Parallel Routes

Lecture 121 Rendering Nested Routes & Parallel Routes

Lecture 122 Simplify Pages With MovieCard Component

Lecture 123 Catch All Routes

Lecture 124 Multiple Path With Catch All Route

Lecture 125 Error Page & Editing Main-Header Component

Lecture 126 Programmatic Routing

Lecture 127 Route Groups

Lecture 128 Managing API Requests With Route File

Lecture 129 Using Middleware in Next

Section 12: Data Fetching in Next.js

Lecture 130 Section Overview

Lecture 131 Client Side Data Fetching

Lecture 132 Data Fetching Optimization in Client Components

Lecture 133 Server-Side Data Fetching in Next

Lecture 134 Data Fetching Optimization and Loading Component

Lecture 135 Migration of My Favorite Route to TMDB API

Lecture 136 Migration of My Favorite Route to TMDB API

Lecture 137 Lets Move Dynamic Pages of the Application to TMDB API

Lecture 138 Use of the Suspense Component

Section 13: Authentication with Firebase

Lecture 139 What is Firebase

Lecture 140 Integrate Firebase Into the Application

Lecture 141 Sign Up Page

Lecture 142 Sign In Page

Lecture 143 Logout

Section 14: Pages Router

Lecture 144 Pages Router

Lecture 146 Working With Nested Routes & Dynamic Routes

Lecture 147 Using Nested Dynamic Routes

Lecture 148 Catch All Routes & Link Component

Lecture 149 Programmatic Navigation

Lecture 150 Adding a Custom Not Found Page

Section 15: Pre Rendering and Data Fetching with Pages Router

Lecture 151 Section Overview

Lecture 152 Static Rendering & Server Side Rendering

Lecture 153 getStaticProps

Lecture 154 Let’s Compile Component Server with Filesystem

Lecture 155 Incremental Static Generation (ISR)

Lecture 156 notFound & Redirect

Lecture 157 Working With Dynamic Pages

Lecture 158 Using "getStaticPaths"

Lecture 159 Fallback & notFound

Lecture 160 getServerSideProps

Lecture 161 Dynamic Pages with getServerSideProps

Lecture 162 Why We Need Client Side Data Fetching

Lecture 163 Client Side Data Fetching Using Firebase

Section 16: Travel Project

Lecture 164 Project Overview

Lecture 166 Create Tour Components

Lecture 167 Using Tour Data in Components and Style Operation

Lecture 169 Create Detail Page Components

Lecture 170 Create a General Layout Wrapper

Lecture 171 All Tour Page & Creating a Form for Tour Filtering

Lecture 172 Programmatic Page Navigation by Filtering Tours

Lecture 173 Let’s Make Data Controls on the Page with Filtered Tours

Lecture 174 Show Filtered Tours in Catch-All Page

Lecture 175 Create a Real Time Database Using Firebase

Lecture 176 Let’s Create Home Page According to Static Side Generation

Lecture 177 Let’s Recreate Tour Detail Page Component with Firebase Data

Lecture 178 Optimizing Data Fetching

Lecture 179 All Tour Page & Catch All Routes Page

Lecture 180 Section Summary

Section 17: Extra

Lecture 181 Front-End Web Development with JavaScript & Next.js

Anyone who wants to learn to Next.js.,Programmers who are interested in building Web apps with Next.js.,Anyone who has no previous Web Development coding experience but wants to become an expert,A total beginner, with a curious mind and wants to be a web developer,Anyone planning a job transformation and wants to become a web developer,Anyone who wants to learn today’s most popular front-end architectures,Students who want to take their Web development skills to the next level,A total beginner, with a curious mind and wants to be a web developer