Booking options
£125.99
Course Images
Modern JavaScript From The Beginning
By Packt
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
21 hours 30 minutes
All levels
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 Content
- Modern JavaScript From The Beginning
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for Modern JavaScript From The Beginning yet.Why not be the first one to review this course?