Professional JavaScript 2023 Beginner to Advanced

Professional JavaScript 2023 Beginner to Advanced

What you’ll learn

How to code JS in 2023 by building realistic projects from scratch and seeing how it all fits together
Best practices in 2023
Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy
Deeply master JS/programming basics: var/let/const, functions, objects & arrays, etc.
Critical best practices that every JS-developer should know (e.g. how to use async/await)
Learn how to communicate with an API properly by using fetch()
Learn the crucial additions to JS: arrow functions, destructuring, spread operator, etc.
Easily master React/Angular/Vue or NodeJS afterwards since you mastered concepts often used in those frameworks
Build modern web apps without frameworks and see why people use React
Implement a simple build process for JS with webpack and Babel
BONUS: By going through the course you’ll naturally improve design/HTML/CSS too

Requirements

HTML & CSS Basics
No prior programming experience needed

Description

— NEW ON UDEMY (just switched my courses to Udemy) –This is the #1 resource to master modern JavaScript (ES6+)! Take your JavaScript to an advanced, professional level by building beautiful, real-world projects from scratch (2 small beginner projects, 1 big intermediate project and 1 big advanced project). Other courses start from outdated concepts first (like ES5 and below) — we will use modern concepts right from the start (ES6+ like const/let and arrow functions — of course properly explained).Course ProjectsTop-tier, real-world projects. Expertly engineered to help you code modern websites & web apps with the latest best practices.2 Small beginner projects:Fancy Counter: Build a useful counter appWord Analytics: Build a slick word analytics app1 Big intermediate project:CorpComment: Build a sleek public feedback tool1 Big advanced project:rmtDev: Build a stylish job board for remote developer jobsWhat You’ll Learn 1) How to code JS in 2023 by building realistic projects from scratch and seeing how it all fits together2) Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy3) Deeply master JS/programming basics: var/let/const, functions, objects & arrays, etc.4) Critical best practices that every JS-developer should know (e.g. how to use async/await)5) Learn how to communicate with an API properly by using fetch()6) Learn the crucial additions to JS: arrow functions, destructuring, spread operator, etc.7) Easily master React/Angular/Vue or Node.js afterwards since you mastered concepts often used in those frameworks8) Build modern web apps without frameworks and see why people use React9) Implement a simple build process for JS with webpack and Babel10) BONUS: By going through the course you’ll naturally improve design/HTML/CSS tooSpecifically, these are the concepts you will learn in no particular orderWhat is JavaScript & What can we do with ithow to include JS in HTML-file (‘defer’)var/let/constwhen to use let instead of constdeep mastery of data types & structures (arrays, objects, etc.)deep mastery of functions (traditional vs arrow functions)template literals (“)ternary operator (? :)how to manipulate HTML (also called DOM manipulation) — querySelector(), getting user input from input field, disabling buttons, etc.how to manipulate CSSdealing with events (e.g. click and typing events)event delegation (event bubbling)deal with forms (user submits data — very common)how modern websites and web apps work generally from a JavaScript perspectiveif-else statementssetTimeout()&& operatorarray methods (e.g. .forEach(), .map(), .slice(), .join())string methods (e.g. .includes(), .trim())DRY-concept (Don’t Repeat Yourself)how to extract repetitive code into its own helper functionhow to communicate with servers properlyfetch() APIGET-requestsPOST-requestsAJAXhow to work with JSONsynchronous vs asynchronous codepromises (.then and .catch)error handling (throw new Error)2xx, 4xx and 5xx HTTP status codesasync / awaittry / catchwhat is ‘state’ and ‘rendering’overall structure / architecturefolder structuremost common loop (forEach)increment or decrement by 1 (++ and –)unary plus operator (+)modularity (IIFE’s vs separate your JS-code into multiple files)how to deal with XSScomments in JSregular expressionsURL-structure (scheme / protocol, domain, query string parameters)destructuringundefined and nulltruthy and falsy valuesoptional chaining (?.)import/export (ES Modules) vs require/module.exports (CommonJS)named export vs default exportdefault value for function parameterwhat is refactoringhelper / utility functionsimplement common features like sorting & paginationrouting (e.g. how to manipulate URL)window objectDOMContentLoadedLocalStoragebuild process (webpack, Babel, PostCSS)formatting in JS (semicolons, tabs vs spaces)for loopand more! (can’t include everything here)Avoid struggling with JavaScript for years to come. Hope to see you in the course!

Overview

Section 1: Introduction

Lecture 1 Introduction (Why JS Is So Profitable & Course Projects)

Lecture 2 Learning to Code #1 – Mindset (Imposter Syndrome & Confidence)

Lecture 3 Learning to Code #2 – Steep Learning Curve = Barrier to Entry

Lecture 4 Learning to Code #3 – StackOverflow for Beginners

Lecture 5 Setting Up Our Development Environment #1: Browser (Market Share)

Lecture 6 Setting Up Our Development Environment #2: Code Editor

Lecture 7 READ BEFORE STARTING: Project resources (e.g. image URLs)

Section 2: Beginner JavaScript

Lecture 8 HTML & CSS Fundamentals for JavaScript Developers

Lecture 9 Variables and Data Types (Intro)

Lecture 10 ‘var’ & Strings

Lecture 11 Numbers

Lecture 12 snake_case vs kebab-case vs camelCase

Lecture 13 var vs let vs const

Lecture 14 Booleans

Lecture 15 Arrays

Lecture 16 Objects

Lecture 17 Outputting Variable Values in Console

Lecture 18 Traditional Functions (Function Declarations)

Lecture 19 Function Input (Also Called ‘Parameter’ or ‘Argument’)

Lecture 20 Returning Something From Function

Lecture 21 Summary of Functions

Lecture 22 Alternative Traditional Function (Function Expressions)

Lecture 23 Arrow Functions

Lecture 24 Arrow Functions (Shorter Syntax)

Lecture 25 How to Name Functions

Lecture 26 String Concatenation

Lecture 27 Template Literals (“ — Backticks in JavaScript)

Lecture 28 if-else Statement (> and < Operators) Lecture 29 == vs === Equality Operators Lecture 30 Other Operators (>=, <=, !, !=, &&, ||)

Lecture 31 Ternary Operator (? 🙂

Lecture 32 Truthy & Falsy Values

Lecture 33 var vs let

Lecture 34 Selecting HTML-Elements With JavaScript

Lecture 35 Manipulating HTML With JavaScript (DOM Manipulation)

Lecture 36 textContent vs innerHTML

Lecture 37 innerHTML vs insertAdjacentHTML (Inserting HTML With JavaScript)

Lecture 38 Option 1 – Manipulating CSS With JavaScript (‘style’)

Lecture 39 Option 2 – Manipulating CSS With JavaScript (‘classList’)

Lecture 40 Events and Event Handler Functions

Lecture 41 Common Mistake With addEventListener

Lecture 42 Finished This Section! Well Done!

Section 3: Mini-Project: Fancy Counter

Lecture 43 Project Intro

Lecture 44 Project HTML & CSS (Don’t Skip)

Lecture 45 Fancy Counter – Coding JavaScript

Section 4: Mini-Project: Word Analytics

Lecture 46 Project Intro

Lecture 47 Project HTML & CSS (Don’t Skip)

Lecture 48 Word Analytics – Coding JavaScript

Section 5: Intermediate JavaScript

Lecture 49 Strings (Intermediate)

Lecture 50 Numbers (Intermediate)

Lecture 51 Booleans (Intermediate)

Lecture 52 Arrays (Intermediate)

Lecture 53 Objects (Intermediate)

Lecture 54 Increment (++) & Decrement (–)

Lecture 55 Console

Lecture 56 Functions (Intermediate)

Lecture 57 Hoisting

Lecture 58 Timers (setTimeout & setInterval)

Lecture 59 Loops (forEach & for)

Lecture 60 Fetch API

Lecture 61 Fetch API Example (Get Data & Display On Page)

Lecture 62 Fetch API Quick Summary

Lecture 63 Intermediate DOM #1: Manipulating the DOM

Lecture 64 Intermediate DOM #2: Event Object

Lecture 65 Intermediate DOM #3: Event Bubbling & Event Delegation

Section 6: Project 1: CorpComment

Lecture 66 Project Introduction

Lecture 67 Project Setup

Lecture 68 VS Code Extension: Live-Server

Lecture 69 Counter Component (JS Fundamentals, DOM Manipulation, Events)

Lecture 70 Submit Component (Form Data & If/Else & setTimeout() & Array Methods & “ & ? 🙂

Lecture 71 Refactoring (DRY Principle & Constants & Extract Repetitive Logic Into Function)

Lecture 72 Feedback List Component (Get Data With Fetch & AJAX & JSON & Promises & Errors)

Lecture 73 More Refactoring (Shortcut When Object Property Name = Value & [].forEach())

Lecture 74 Form/Submit Component (Post Data With Fetch & JSON & Headers & Error Handling)

Lecture 75 Feedback List Component – Expand & Upvote (Event Delegation / Bubbling & ++/–)

Lecture 76 Hashtag List Component (=== / !== & forEach() & querySelector())

Lecture 77 Final Loose Ends (Modularity / IIFE & Naming Things & XSS)

Section 7: Advanced JavaScript

Lecture 78 VS Code Shortcuts

Lecture 79 Arrays (Advanced)

Lecture 80 Objects (Advanced)

Lecture 81 Functions (Advanced)

Lecture 82 Destructuring

Lecture 83 Spread Operator (…)

Lecture 84 Primitives vs Reference Values

Lecture 85 undefined and null

Lecture 86 Short Circuiting With && and ||

Lecture 87 Fetch API With Async Await

Lecture 88 ES Modules (import / export)

Lecture 89 File Paths

Lecture 90 Other Loops (while & for of)

Lecture 91 Switch Statement

Lecture 92 Window Object

Lecture 93 Math

Lecture 94 Date

Lecture 95 OOP Programming in JavaScript

Lecture 96 Promises

Lecture 97 Event Loop (How JavaScript Works Under the Hood)

Section 8: Project 2: rmtDev

Lecture 98 Project Introduction

Lecture 99 Project Setup

Lecture 100 Search Component (Regular Expressions & Fetch API & Destructuring & [].slice())

Lecture 101 Job List Component (Undefined / Null, &&, ? ., [].map, [].join())

Lecture 102 Modularity with ES Modules (Folder Structure & Export / Import)

Lecture 103 Error Component (‘Rendering’ & Default vs Named Export & Default Fn Parameters)

Lecture 104 Refactoring (Importance Of Good Structure In Codebase)

Lecture 105 More Refactoring (Job Details Component)

Lecture 106 Improving Fetch Calls (Good Structure For fetch() Calls & 2xx, 4xx Status Codes)

Lecture 107 Async / Await (vs .then & try / catch & Promises)

Lecture 108 Refactor Fetch Calls (Helper / Utility Functions)

Lecture 109 Sorting Component Part 1 (Sorting Data & ‘State’)

Lecture 110 State (What Is ‘State’ & Local vs Global State & Mutating Objects And Arrays)

Lecture 111 Sorting Component Part 2 – [].sort()

Lecture 112 Pagination Component (++ vs — & [].slice())

Lecture 113 Router Component (History & pushState() & Window Object & DOMContentLoaded)

Lecture 114 Active Job Item – [].find()

Lecture 115 Bookmarks Component (Mouseenter vs Mouseleave Events & [].some() & [].filter())

Lecture 116 Storage Component (LocalStorage For Persisting Data & Spread Operator …)

Lecture 117 Taking Care of Details

Lecture 118 Build Process (Webpack & Babel & PostCSS & Other Optimizations)

Section 9: Supplemental

Lecture 119 Helper Function for Formatting Date – new Date()

Lecture 120 For Loop ([].forEach() And Other Array Methods Almost Completely Replaced for())

Lecture 121 Formatting in JS (Semicolons & Tabs vs Spaces)

Section 10: Closing

Lecture 122 Congratulations! (BONUS Lecture)

You want to master modern JavaScript because you recognize that it’s the most important fundamental skill for web developers,You want to master modern JavaScript because you recognize that it underlies all other popular tech (React, NodeJS, etc.)

Course Information:

Udemy | English | 20h 4m | 8.37 GB
Created by: ByteGrad by Wesley

You Can See More Courses in the Developer >> Greetings from CourseDown.com