Description

Learn and Build Projects with Pure JavaScript (No Frameworks or Libraries)

This is a front to back JavaScript course for absolutely everybody. We start with the basic fundamentals and work our way to advanced programming without relying on frameworks or libraries at all. You will learn a ton of pure JavaScript, whether you are a beginner or an established JS programmer. There is something for everyone.Topics included: - Basics and Fundamentals: Data types, let and const variables, functions, conditionals, loops, object literals, arrays, and so on. DOM Manipulation: Selectors, traversing the DOM, show/hide, creating and removing elements, event listeners OOP: ES5 prototypes, inheritance, ES2015 classes and sub-classes, constructors. Async JS: Ajax and XHR, Fetch API, callbacks, promises, async / await. ES2015+: Arrow functions, template strings, generators, iterators, maps and sets, symbols and more. JavaScript Patterns: Module, Factory, State, Observer, Mediator, SingletonOther: Local and session storage, regular expressions, try/catch error handling. 10 projects of all kinds.

What You Will Learn

- Modular learning sections and 10 real-world projects with pure JavaScript
- Master the DOM (document object model) WITHOUT jQuery
- Asynchronous programming with Ajax, Fetch API, Promises, and Async / Await
- OOP including ES5 prototypes and ES2015 classes
- Learn JavaScript Patterns
- Regular expressions, error handling, localStorage and more

Audience

People that want to learn modern JavaScript from beginner to advanced without libraries and frameworks

Approach

This course from Brad covers using JavaScript with real-world examples.

Key Features

- Understanding of JS concepts * - Requires only basic knowledge about HTML / CSS knowledge

Github Repo

https://github.com/packtpublishing/modern-javascript-from-the-beginning

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Intro & Getting Started

1. Welcome To the Course

Text: Intro & Getting Started: Welcome To the Course

2. Project Files & Questions

Text: Intro & Getting Started: Project Files & Questions

3. Visual Studio Code Setup

Text: Intro & Getting Started: Visual Studio Code Setup

2. JavaScript Language Fundamentals

1. Section Intro & File Setup

Text: JavaScript Language Fundamentals: Section Intro & File Setup

2. Using the Console

Text: JavaScript Language Fundamentals: Using the Console

3. Variables - var, let & const

Text: JavaScript Language Fundamentals: Variables - var, let & const

4. Data Types in JavaScript

Text: JavaScript Language Fundamentals: Data Types in JavaScript

5. Type Conversion

Text: JavaScript Language Fundamentals: Type Conversion

6. Numbers & the Math Object

Text: JavaScript Language Fundamentals: Numbers & the Math Object

7. String Methods & Concatenation

Text: JavaScript Language Fundamentals: String Methods & Concatenation

8. Template Literals

Text: JavaScript Language Fundamentals: Template Literals

9. Arrays & Array Methods

Text: JavaScript Language Fundamentals: Arrays & Array Methods

10. Object Literals

Text: JavaScript Language Fundamentals: Object Literals

11. Dates & Times

Text: JavaScript Language Fundamentals: Dates & Times

12. If Statements & Comparison Operators

Text: JavaScript Language Fundamentals: If Statements & Comparison Operators

13. Switches

Text: JavaScript Language Fundamentals: Switches

14. Function Declarations & Expressions

Text: JavaScript Language Fundamentals: Function Declarations & Expressions

15. General Loops

Text: JavaScript Language Fundamentals: General Loops

16. A Look at the Window Object

Text: JavaScript Language Fundamentals: A Look at the Window Object

17. Block Scope With let & const

Text: JavaScript Language Fundamentals: Block Scope With let & const

3. DOM Manipulation & Events

1. What Is The DOM?

Text: DOM Manipulation & Events: What Is The DOM?

2. Examining the Document Object

Text: DOM Manipulation & Events: Examining the Document Object

3. DOM Selectors for Single Elements

Text: DOM Manipulation & Events: DOM Selectors for Single Elements

4. DOM Selectors for Multiple Elements

Text: DOM Manipulation & Events: DOM Selectors for Multiple Elements

5. Traversing the DOM

Text: DOM Manipulation & Events: Traversing the DOM

6. Creating Elements

Text: DOM Manipulation & Events: Creating Elements

7. Removing & Replacing Elements

Text: DOM Manipulation & Events: Removing & Replacing Elements

8. Event Listeners & the Event Object

Text: DOM Manipulation & Events: Event Listeners & the Event Object

9. Mouse Events

Text: DOM Manipulation & Events: Mouse Events

10. Keyboard & Input Events

Text: DOM Manipulation & Events: Keyboard & Input Events

11. Event Bubbling & Delegation

Text: DOM Manipulation & Events: Event Bubbling & Delegation

12. Local & Session Storage

Text: DOM Manipulation & Events: Local & Session Storage

4. DOM Projects

1. Task List [Part 1] - UI & Add Task Items

Text: DOM Projects: Task List [Part 1] - UI & Add Task Items

2. Task List [Part 2] - Delete & Filter Tasks

Text: DOM Projects: Task List [Part 2] - Delete & Filter Tasks

3. Task List [Part 3] - Persist To Local Storage

Text: DOM Projects: Task List [Part 3] - Persist To Local Storage

4. Loan Calculator [Part 1] - Build the UI

Text: DOM Projects: Loan Calculator [Part 1] - Build the UI

5. Loan Calculator [Part 2] - Calculate & Error

Text: DOM Projects: Loan Calculator [Part 2] - Calculate & Error

6. Loan Calculator [Part 3] - Loader & User Experience

Text: DOM Projects: Loan Calculator [Part 3] - Loader & User Experience

7. Number Guesser [Part 1] - Build the UI

Text: DOM Projects: Number Guesser [Part 1] - Build the UI

8. Number Guesser [Part 2] - Validation & Winning Case

Text: DOM Projects: Number Guesser [Part 2] - Validation & Winning Case

9. Number Guesser [Part 3] - Lose Case & Game Over

Text: DOM Projects: Number Guesser [Part 3] - Lose Case & Game Over

10. Number Guesser [Part 4] - Play Again

Ability to build a complete app, but a reference app.

5. Object Oriented JavaScript - ES5 & ES2015

1. Constructors & the 'this' Keyword

Text: Object Oriented JavaScript - ES5 & ES2015: Constructors & the 'this' Keyword

2. Built In Constructors

Text: Object Oriented JavaScript - ES5 & ES2015: Built In Constructors

3. Prototypes Explained

Text: Object Oriented JavaScript - ES5 & ES2015: Prototypes Explained

4. Prototypal Inheritance

Text: Object Oriented JavaScript - ES5 & ES2015: Prototypal Inheritance

5. Using Object.create

Text: Object Oriented JavaScript - ES5 & ES2015: Using Object.create

6. ES6 Classes

Text: Object Oriented JavaScript - ES5 & ES2015: ES6 Classes

7. Sub Classes

Text: Object Oriented JavaScript - ES5 & ES2015: Sub Classes

6. OOP Book List Project

1. Build the Book List UI

Text: OOP Book List Project: Build the Book List UI

2. Add Book to List

Text: OOP Book List Project: Add Book to List

3. Validation & Alert

Text: OOP Book List Project: Validation & Alert

4. Delete Book from List

Text: OOP Book List Project: Delete Book from List

5. Convert to ES6 Classes

Text: OOP Book List Project: Convert to ES6 Classes

6. Bonus - Add Local Storage

Text: OOP Book List Project: Bonus - Add Local Storage

7. Asynchronous JavaScript, Ajax & Fetch API

1. What Is Asynchronous Programming?

Text: Asynchronous JavaScript, Ajax & Fetch API: What Is Asynchronous Programming?

2. Ajax & XHR Introduction

Text: Asynchronous JavaScript, Ajax & Fetch API: Ajax & XHR Introduction

3. XHR Object Methods & Working with Text

Text: Asynchronous JavaScript, Ajax & Fetch API: XHR Object Methods & Working with Text

4. Working With Ajax & JSON

Text: Asynchronous JavaScript, Ajax & Fetch API: Working With Ajax & JSON

5. Data from an External API - Chuck Norris Project

Text: Asynchronous JavaScript, Ajax & Fetch API: Data from an External API - Chuck Norris Project

6. REST APIs & HTTP Requests

Text: Asynchronous JavaScript, Ajax & Fetch API: REST APIs & HTTP Requests

7. Callback Functions

Text: Asynchronous JavaScript, Ajax & Fetch API: Callback Functions

8. Custom HTTP Library (Ajax with Callbacks) - Part 1

Text: Asynchronous JavaScript, Ajax & Fetch API: Custom HTTP Library (Ajax with Callbacks) - Part 1

9. Custom HTTP Library (Ajax with Callbacks) - Part 2

Text: Asynchronous JavaScript, Ajax & Fetch API: Custom HTTP Library (Ajax with Callbacks) - Part 2

10. ES6 Promises

Text: Asynchronous JavaScript, Ajax & Fetch API: ES6 Promises

11. The Fetch API

Text: Asynchronous JavaScript, Ajax & Fetch API: The Fetch API

12. Arrow Functions

Text: Asynchronous JavaScript, Ajax & Fetch API: Arrow Functions

13. Custom HTTP Library (Fetch with Promises) - Part 3

Text: Asynchronous JavaScript, Ajax & Fetch API: Custom HTTP Library (Fetch with Promises) - Part 3

14. Async & Await

Text: Asynchronous JavaScript, Ajax & Fetch API: Async & Await

15. Custom HTTP Library (Fetch with Async Await) - Part 4

Text: Asynchronous JavaScript, Ajax & Fetch API: Custom HTTP Library (Fetch with Async Await) - Part 4

8. API Projects

1. Github Finder [Part 1] - Intro & UI

Text: API Projects: Github Finder [Part 1] - Intro & UI

2. Github Finder [Part 2] - Fetching Profile Data

Text: API Projects: Github Finder [Part 2] - Fetching Profile Data

3. Github Finder [Part 3] - Display the Profile

Text: API Projects: Github Finder [Part 3] - Display the Profile

4. Github Finder [Part 4] - Show Alert Message

Text: API Projects: Github Finder [Part 4] - Show Alert Message

5. Github Finder [Part 5] - Fetch & Display Repos

Text: API Projects: Github Finder [Part 5] - Fetch & Display Repos

6. WeatherJS [Part 1] - Intro & UI

Text: API Projects: WeatherJS [Part 1] - Intro & UI

7. WeatherJS [Part 2] - Fetch Weather from API

Text: API Projects: WeatherJS [Part 2] - Fetch Weather from API

8. WeatherJS [Part 3] - Display the Weather

Text: API Projects: WeatherJS [Part 3] - Display the Weather

9. WeatherJS [Part 4] - Save Location to Local Storage

Text: API Projects: WeatherJS [Part 4] - Save Location to Local Storage

9. Error Handling & Regular Expressions

1. Error Handling with Try...Catch

Text: Error Handling & Regular Expressions: Error Handling with Try...Catch

2. Regular Expressions [Part 1] - Evaluation Functions

Text: Error Handling & Regular Expressions: Regular Expressions [Part 1] - Evaluation Functions

3. Regular Expressions [Part 2] - Metacharacter Symbols

Text: Error Handling & Regular Expressions: Regular Expressions [Part 2] - Metacharacter Symbols

4. Regular Expressions [Part 3] - Character Sets & Quantifiers

Text: Error Handling & Regular Expressions: Regular Expressions [Part 3] - Character Sets & Quantifiers

5. Regular Expressions [Part 4] - Shorthand Character Classes

Text: Error Handling & Regular Expressions: Regular Expressions [Part 4] - Shorthand Character Classes

6. Regular Expressions - Form Validation Project

Text: Error Handling & Regular Expressions: Regular Expressions - Form Validation Project

10. Other Newer Features - ES2015+

1. Iterators & Generators

Text: Other Newer Features - ES2015+: Iterators & Generators

2. Profile Scroller - Iterator Mini Project

Text: Other Newer Features - ES2015+: Profile Scroller - Iterator Mini Project

3. Symbols

Text: Other Newer Features - ES2015+: Symbols

4. Destructuring

Text: Other Newer Features - ES2015+: Destructuring

5. ES6 Maps

Text: Other Newer Features - ES2015+: ES6 Maps

6. ES6 Sets

Text: Other Newer Features - ES2015+: ES6 Sets

11. JavaScript Patterns

1. What Are Patterns?

Text: JavaScript Patterns: What Are Patterns?

2. Module & Revealing Module Pattern

Text: JavaScript Patterns: Module & Revealing Module Pattern

3. Singleton Pattern

Text: JavaScript Patterns: Singleton Pattern

4. Factory Pattern

Text: JavaScript Patterns: Factory Pattern

5. Observer Pattern

Text: JavaScript Patterns: Observer Pattern

6. Mediator Pattern

Text: JavaScript Patterns: Mediator Pattern

7. State Pattern - Small Project

Text: JavaScript Patterns: State Pattern - Small Project

12. Tracalorie Project (Using the Module Pattern)

1. Project Introduction

Text: Tracalorie Project (Using the Module Pattern): Project Introduction

2. Creating the UI With Materialize CSS

Text: Tracalorie Project (Using the Module Pattern): Creating the UI With Materialize CSS

3. Controllers & Data Structure

Text: Tracalorie Project (Using the Module Pattern): Controllers & Data Structure

4. Get & Populate Items

Text: Tracalorie Project (Using the Module Pattern): Get & Populate Items

5. Add Item to Data Structure

Text: Tracalorie Project (Using the Module Pattern): Add Item to Data Structure

6. Add Item to the UI

Text: Tracalorie Project (Using the Module Pattern): Add Item to the UI

7. Add Total Calories

Text: Tracalorie Project (Using the Module Pattern): Add Total Calories

8. Working With the Edit State

Text: Tracalorie Project (Using the Module Pattern): Working With the Edit State

9. Updating Items & Total Calories

Text: Tracalorie Project (Using the Module Pattern): Updating Items & Total Calories

10. Delete & Clear Items

Text: Tracalorie Project (Using the Module Pattern): Delete & Clear Items

11. Add & Get From Local Storage

Text: Tracalorie Project (Using the Module Pattern): Add & Get From Local Storage

12. Delete & Clear from Local Storage

Text: Tracalorie Project (Using the Module Pattern): Delete & Clear from Local Storage

13. Microposts Project - CRUD Front End (Webpack & Babel)

1. Babel & Webpack Environment Setup

Text: Microposts Project - CRUD Front End (Webpack & Babel): Babel & Webpack Environment Setup

2. Intro to ES2015 Modules

Text: Microposts Project - CRUD Front End (Webpack & Babel): Intro to ES2015 Modules

3. Create the UI

Text: Microposts Project - CRUD Front End (Webpack & Babel): Create the UI

4. Create a fake REST API Using JSON Server

Text: Microposts Project - CRUD Front End (Webpack & Babel): Create a fake REST API Using JSON Server

5. Get & Display Posts

Text: Microposts Project - CRUD Front End (Webpack & Babel): Get & Display Posts

6. Add Posts & Show Alert

Text: Microposts Project - CRUD Front End (Webpack & Babel): Add Posts & Show Alert

7. Post Edit State & Update [1]

Text: Microposts Project - CRUD Front End (Webpack & Babel): Get & Display Posts

8. Post Edit State & Update [2]

Text: Microposts Project - CRUD Front End (Webpack & Babel): Add Posts & Show Alert

14. Wrap Up

1. Wrap Up & Where to Go From Here

Text: Wrap Up: Wrap Up & Where to Go From Here

Course Images

Modern JavaScript From The Beginning

By Packt

Booking options

Highlights