Getting Started
  • Introduction
  • The Goal of this Course
  • Understanding the Role of JavaScript
  • The World of JavaScript
  • Join our Online Learning Community
  • Using Vanilla JavaScript & Understanding Its Limitations (1/3)
  • Using Vanilla JavaScript & Understanding Its Limitations (2/3)
  • Using Vanilla JavaScript & Understanding Its Limitations (3/3)
  • Analyzing the Vanilla JavaScript Solution
  • Improving the App with jQuery
  • More JavaScript Libraries: Adding Lodash
  • The Role of JavaScript Libraries
  • Libraries vs Frameworks
  • Using Vue.js (A JavaScript Framework)
  • Understand other Parts of the JavaScript World
  • JavaScript Versions and Languages - ES6 and TypeScript
  • Course Structure
  • Where to Find the Course Source Code
  • Module Resources
Understanding JavaScript Frameworks in General
  • Module Introduction
  • JS Frameworks in Fullstack Applications
  • JS Frameworks in Single-Page-Applications
  • An Example for a Framework in a Fullstack Application
  • An Example for a Framework running a Single-Page-Application
  • Fullstack Approach - Pros and Cons
  • Single-Page-Application - Pros and Cons
  • Prerequisites for the Different JS Frameworks
  • Module Resources
Vue.js - An Introduction
  • Module Introduction
  • Creating a Basic Vue.js Application
  • In a Nutshell: How Vue.js Works
  • Handling Events and Updating the DOM
  • Rendering Content Conditionally
  • Outputting Lists
  • Binding HTML Attributes & Properties to Data
  • Styling Elements Dynamically
  • Setting CSS Classes Dynamically
  • Using Shorthands for v-bind and v-on
  • Using Multiple Vue Instances
  • Limitations of Multiple Vue Instances
  • Creating and Using Components
  • Passing Data into Components
  • Emitting Custom Events in Components
  • Template Restrictions
  • Two-Way-Binding to Input Fields
  • Time to Practice - Vue.js - Problem
  • Time to Practice - Vue.js - Solution
  • Creating Vue.js Projects with the Vue CLI
  • Why do we need Node.js and NPM?
  • Using the Vue CLI to Create Projects
  • Understanding the Project Folder
  • Understanding .vue Files
  • How the Application Gets Rendered
  • Creating Global Components with .vue Files
  • Creating Local Components
  • Scoping Styles to Components
  • Creating a Single Page Application (SPA)
  • Adding Routing to the Application
  • Linking with router-link
  • Routing and the Server-Side
  • Wrap Up
  • Module Resources & Further Resources
Understanding Workflows & Webpack
  • Module Introduction
  • The Big Picture
  • The Role of Node.js and NPM
  • Why do we need a Development Server?
  • How Webpack Works: Entry & Output
  • How Webpack Works: Modules, Rules & Plugins
  • Wrap Up
React.js - An Introduction
  • Module Introduction
  • Using React.js to Create a Basic App
  • Understanding How React.js Works and JSX
  • Outputting Dynamic Content
  • Handling Events and Updating the DOM
  • Creating a First Component
  • Passing Data into Components (Props)
  • Creating Components using ES6 Classes
  • More about ES6
  • Using State in React.js Components
  • What Happens Behind the Scenes
  • Rendering Conditional Content
  • Outputting Lists
  • Setting Styles Dynamically
  • Setting CSS Classes Dynamically
  • User Input & Two-Way-Binding
  • Using Multiple Components
  • Dumb Components
  • Passing Data from Child to Parent
  • Time to Practice - React.js - Problem
  • Time to Practice - React.js - Solution
  • Switching to a Local Setup & SPA
  • Using the "create-react-app" Package
  • Understanding the Created Project
  • Using the Local Setup
  • Adding React Router and Routes for the App