Modern JavaScript From The Beginning

Online Self-Paced

Learn and build projects with pure JavaScript (No frameworks or libraries)

Course Description

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…

WHATS INCLUDED?

Basics & Fundamentals: Data types, let & const variables, functions, conditionals, loops, object literals, arrays, etc
DOM Manipulation: Selectors, traversing the DOM, show/hide, creating & removing elements, event listeners
OOP: ES5 prototypes, inheritance, ES2015 classes & sub-classes, constructors
Async JS: Ajax & XHR, Fetch API, callbacks, promises, async / await
ES2015+: Arrow functions, template strings, generators, iterators, maps & sets, symbols & more
JavaScript Patterns: Module, Factory, State, Observer, Mediator, Singleton
Other: Local & session storage, regular expressions, try/catch error handling
10 Projects of all kinds

PROJECTS

Task List With Local Storage
Loan Calculator
Number Guess Game
OOP Book Listing App (ES5 Prototype & ES2015 Classes Version)
Chuck Norris Joke Generator
EasyHTTP – Custom HTTP Library (3 Versions – Callbacks / Promises / Async & Await)
Github Finder
WeatherJS App
Calorie Tracker (Module Pattern)
Microposts – Frontend CRUD for REST API (Webpack & Babel)

Requirements

Basic HTML / CSS knowledge

This course includes:

* More than 7hr of learning time required

Course content

Intro & Getting Started

Welcome To The Course
Project Files & Questions
Projects Github Repo
Visual Studio Code Setup

JavaScript Language Fundamentals

Section Intro & File Setup
Using The Console
Variables - var, let & const
Data Types in JavaScript
Type Conversion
Numbers & The Math Object
String Methods & Concatenation
Template Literals
Arrays & Array Methods
Object Literals
Dates & Times
If Statements & Comparison Operators
Switches
Function Declarations & Expressions
General Loops
A Look At The Window Object
Block Scope With let & const

DOM Manipulation & Events

What Is The DOM
Examining The Document Object
DOM Selectors For Single Elements
DOM Selectors For Multiple Elements
Traversing The DOM
Creating Elements
Removing & Replacing Elements
Event Listeners & The Event Object
Mouse Events
Keyboard & Input Events
Event Bubbling & Delegation
Local & Session Storage

DOM Projects

Task List [Part 1] - UI & Add Task Items
Task List [Part 2] - Delete & Filter Tasks
Task List [Part 3] - Persist To Local Storage
Loan Calculator [Part 1] - Build The UI
Loan Calculator [Part 2] - Calculate & Error
Loan Calculator [Part 3] - Loader & User Experience
Number Guesser [Part 1] - Build The UI
Number Guesser [Part 2] - Validation & Winning Case
Number Guesser [Part 3] - Lose Case & Game Over
Number Guesser [Part 4] - Play Again

Object Oriented JavaScript - ES5 & ES2015

Constructors & the 'this' Keyword
Built In Constructors
Prototypes Explained
Prototypal Inheritance
Using Object.create
ES6 Classes
Sub Classes

OOP Book List Project

Build The Book List UI
Add Book To List
Validation & Alert
Delete Book From List
Convert to ES6 Classes
Bonus - Add Local Storage

Asynchronous JavaScript, Ajax & Fetch API

What Is Asynchronous Programming?
Ajax & XHR Introduction
XHR Object Methods & Working With Text
Working With Ajax & JSON
Data From an External API - Chuck Norris Project
REST APIs & HTTP Requests
Callback Functions
Custom HTTP Library (Ajax With Callbacks) - Part 1
Custom HTTP Library (Ajax With Callbacks) - Part 2
ES6 Promises
The Fetch API
Error Handling With Fetch
Arrow Functions
Custom HTTP Library (Fetch With Promises) - Part 3
Async & Await
Custom HTTP Library (Fetch With Async Await) - Part 4

API Projects

Github Finder [Part 1] - Intro & UI
Github Finder [Part 2] - Fetching Profile Data
Github Finder [Part 3] - Display The Profile
Github Finder [Part 4] - Show Alert Message
Github Finder [Part 5] - Fetch & Display Repos
WeatherJS [Part 1] - Intro & UI
WeatherJS [Part 2] - Fetch Weather From API
WeatherJS [Part 3] - Display The Weather
WeatherJS [Part 4] - Save Location To Local Storage

Explore More at Udemy

Certificate of Completion

When you complete a paid Udemy course, you will receive a certificate of completion, which you can share with your friends, relatives, co-workers and potential employers. Certificates of completion help demonstrate your accomplishments, but please note Udemy is not an accredited institution, and as a result, the certificates cannot be used for formal accreditation.

Please note: free courses and courses that only include practice tests do not offer a certificate of completion.

What you'll learn

Student feedback

Sean Berry

Another great class from Brad Traversy. This is the second class of Brad's that I have taken and I have no doubts about taking another. Thanks.

Parvathyvd

Brad is a really great instructor. He explains everything so well. I loved this course. Thank you so much for taking time to make this course.

Ayush Sahu

It is very good course to learn modern javascript. If you don't know anything about js then you can definitely go with this course.

Lim You Jinq

Really worth to go through all of these, thought it is cumbersome when dealing the project with pure js. highly recommended to subscribe

Jacob Lepler

Excellent course. I appreciated the update made last (Last April '20 I think), which, wasn't there a few months earlier when I had started to go through the course. Thank you.

Who this course is for:

Transform your life through Udemy

Join millions of learners from around the world already learning on Udemy! Learn online at your own pace from highly rated instructors on any device. Learn at home, the office, waiting in line, or on the go.

Start today with a special discount and download to your phone. Lifetime access over 130,000 courses, courses in 60+ languages and expert instructors. 30-Day Money-back guarantee.