Get $1 credit for every $25 spent!

Front End Javascript with Vue.js Bundle

Ending In:
Add to Cart - $36
Add to Cart ($36)
$353
89% off
wishlist
Courses
4
Lessons
292

What's Included

Vue.js Academy: Learn Vue Step by Step
$150 Value
Learn By Example: ReactJS
$79 Value
Angular: From Beginning to Advanced
$75 Value
JavaScript: Gentle Introduction for Beginners
$49 Value

Product Details

1 of 4

Access
Lifetime
Content
8.5 hours
Lessons
102

Vue.js Academy: Learn Vue Step by Step

Learn Vue.js in a Practical, Project Based Approach

By Chris Dixon | in Online Courses

Take your HTML, CSS, and JavaScript skills to the next level by learning one of the hottest JavaScript frameworks available today, Vue.js! Vue.js is a fun and easy to use JavaScript framework for building user interfaces. The core of the framework is lightweight and fast, and can be used in projects of any size. In this course, you'll build two fun, challenging projects to learn Vue.js and apply everything instantly.

  • Access 102 lectures & 8.5 hours of content 24/7
  • Build a guest list app to explore two way data binding, event handling, list & conditional rendering, & much more
  • Discover templates & the Virtual DOM
  • Create a greeting card app to get introduced to concepts like components, the Vue CLI for scaffolding projects, & much more
  • Install Node & NPM
Chris Dixon is a web developer and online teacher. He is passionate about his work, as well as teaching others about it, and has started various online and offline businesses. He was personally motivated to become his own boss and have more freedom and flexibility in his life. He built his first website back in 1999, back when the Internet was first beginning to popularize in usage.

Details & Requirements

  • Length of time users can access this course: lifetime
  • Access options: web streaming, mobile streaming
  • Certification of completion not included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: all levels

Compatibility

  • Internet required

Course Outline

  • Introduction & Getting Started
    • Welcome (2:47)
    • Visual studio installation (1:51)
    • What is vue.js and why should i learn it? (2:04)
  • Vue Basics: Guest List App
    • Section intro (0:30)
    • Download project starter (2:32)
    • Installing Vue.js (3:05)
    • The Vue Instance & the data object (7:28)
    • Templates and the virtual DOM (3:31)
    • Two way data binding with v-model (3:08)
    • Event handling and methods (5:46)
    • List rendering (2:54)
    • Conditional rendering in Vue (5:19)
    • Binding attributes to elements (4:11)
    • Binding styles (4:48)
    • Vue shorthand syntax (2:42)
    • Outputting text and HTML (6:25)
    • V-if vs v-show (3:10)
    • Using javascript expressions (4:23)
    • Section outro (0:32)
  • A deeper look at Vue: Guest list app
    • Section intro (0:39)
    • Adding a progress bar (7:46)
    • Computed properties (8:58)
    • Watchers (3:50)
    • Key events and modifiers (3:21)
    • Filters (6:08)
    • More on looping: keys & index numbers (5:27)
    • Using multiple Vue instances (6:25)
    • Looping with objects (6:56)
    • Adding our navigation links & keys (6:16)
    • Accessing vue instances externally (4:32)
    • Vue instance properties and methods (4:50)
    • Referencing elements with ref (4:45)
    • Using string templates (7:06)
    • The Vue lifecycle (5:40)
    • Vue lifecycle hooks in action (6:51)
    • Section outro (0:39)
  • Build Tools & Workflow: Creative Cards App
    • Section intro (0:37)
    • Installing Node and NPM (4:08)
    • Scaffolding projects with the vue cli (8:06)
    • Exploring our project layout & build tools (9:26)
    • Using the data object with single file templates (7:49)
    • Section outro (0:19)
  • Introduction to Components: Creative Cards App
    • What are components? (5:07)
    • Registering global components (10:57)
    • Registering local components (5:26)
    • Creating single file components (8:37)
    • Adding the card front component (9:07)
    • Emit data to parent components (9:21)
    • Dynamic components (2:49)
    • Creating the additional card components (5:53)
    • Creating the text input component (9:40)
    • Receiving data from the text input (4:38)
    • Creating the text output component (3:38)
    • Passing data with props (5:37)
    • Keeping components alive (2:26)
    • Scoping CSS styles (7:40)
    • Prop validation (5:01)
    • Passing prop data to a style object (3:19)
    • Introduction to slots (9:38)
    • Slot scope and fallback content (4:57)
    • Named slots (3:30)
  • Components Continued & Firebase Storage: Creative Cards App
    • Setting up Firebase (6:55)
    • Creating the image upload component (6:40)
    • Uploading images to Firebase (9:44)
    • Image preview thumbnail (4:11)
    • Upload progress bar and $emit file data (8:54)
    • Image output component (9:09)
    • Downloading images from Firebase (6:15)
    • Set image button (7:20)
    • Text options menu-font sizes (8:00)
    • Text options menu- text alignment (5:03)
    • Text options menu- font style and weight (9:57)
    • Remove image button (4:21)
    • Passing data with callbacks (6:40)
    • Making images draggable (5:48)
    • Finishing the CardInsideLeft component (4:50)
    • Finishing the CardInsideRight component (2:48)
    • Finishing the CardBack component (3:39)
    • Introduction to the event bus (7:26)
    • Sending events to the event bus (6:51)
  • Thank You
    • Thank you (1:33)

View Full Curriculum

Access
Lifetime
Content
7.5 hours
Lessons
73

Learn By Example: ReactJS

Create More Reactive, Powerful Interfaces with This Library

By Loonycorn | in Online Courses

ReactJS re-imagines the web user interface by breaking complex UI down into granular, reusable components, allowing you to build compact, robust, and reactive user interfaces more easily. In this example-driven course, you'll use included source code to analyze specific React use-cases, mastering how to use many component parts to complete complex interfacing problems.

  • Access 73 lectures & 7.5 hours of content 24/7
  • Install & set up a basic development web server w/ React, JSX for HTML specification, & the Babel compiler
  • Understand React nodes, fragments, & components
  • Carry out performance optimizations using the virtual DOM
  • Discover the React component lifecycle
  • Update & unmount phases
  • Explore ES6 classes to specify React components
Loonycorn is comprised of two individuals—Janani Ravi and Vitthal Srinivasan—who have honed their respective tech expertise at Google and Flipkart. The duo graduated from Stanford University and believes it has distilled the instruction of complicated tech concepts into funny, practical, engaging courses, and is excited to be sharing its content with eager students.

Details & Requirements

  • Length of time users can access this course: lifetime
  • Access options: web streaming, mobile streaming
  • Certification of completion not included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: all levels

Compatibility

  • Internet required

Course Outline

  • You, This course and us
    • You, This course and us (2:31)
  • Introduction
    • What Is React? (9:18)
    • What Makes React Cool? (8:47)
  • Install and Set up
    • Npm And Http Server Install (4:49)
    • Running Examples On The Http Server (2:41)
    • Accessing ReactJS Files (1:51)
    • Using SublimeText For Coding In React (2:16)
  • React Basics
    • Example 1: HelloWorld (5:11)
    • The Virtual DOM (5:20)
    • Example 2: Nested Elements (5:25)
    • Terms In React (4:59)
    • Example3 Factory Functions (3:48)
  • JSX and the Babel Compiler
    • What Is JSX (8:30)
    • The Babel REPL Environment (4:32)
    • Babel For Development And Production Environments (4:58)
    • Example 4: Elements With JSX (3:14)
  • React Components
    • Introduction To Components (2:24)
    • Example 4: Stateless React Component (7:15)
    • Example 5: The Render Function (5:30)
  • State and Props: Immutable Props
    • Introduction To State And Props (4:26)
    • Example 7: Props (3:48)
    • Example 8: Passing Props To Nested Components (5:02)
    • Example 9: Transferring Props To Child Components (5:27)
    • Example 10: The Spread Operator (4:48)
    • Example 11: DynamicTypesUsingProps (8:53)
    • Example 12: Validation With Prop Types (10:50)
    • Example 13: Accessing A Component's Children Using Props (4:45)
    • Example 14: Lambda Expressions As Children (4:45)
    • Example 15: Components And Child Expressions (7:52)
  • State and Props: The Component as a State Machine
    • Components As State Machines (4:47)
    • Example 16: State (3:13)
    • Example 17: Update State (9:53)
    • Wxample 18: Accessing Previous State (5:22)
    • Properties Of State (6:10)
  • Synthetic Events in React
    • Capture And Bubble Phases (7:48)
    • Example 19: Events (6:18)
    • The Synthetic Event (12:34)
    • Example 20: Working With Synthetic Events (3:52)
  • Bringing It All Together in A Single Application
    • Example 21: The Comment App Visual Representation (9:09)
    • Example 22: The Comment App With Props (5:04)
    • Example 23: Adding A New Comment (9:30)
    • Example 23: Deleting Comments (5:43)
  • The React Component Lifecycle
    • Component Lifecycle Methods: The Mounting Phase (5:59)
    • Example 24: The Mounting Phase Lifecycle Methods (8:35)
    • Example 25: The Unmounting Phase Lifecycle Methods (11:11)
    • Component Lifecycle Methods: The Updating Phase (3:24)
    • Example 26:The Updating Phase, componentWillReceiveProps() (9:15)
    • Example 27: The Updating Phase, shouldComponentUpdate() (12:13)
    • Example 28: The Updating Phase lifecycle method (7:06)
  • Mixins
    • Mixins (4:12)
    • Example 29: Mixins (5:09)
    • Example 30: Nested And Multiple Mixins (6:30)
  • ES Syntactic Sugar
    • ES6 Classes For React (3:23)
    • Example 31: ES6 Classes And The React.Create Class()Function (11:09)
  • Forms
    • Introduction To Forms (2:18)
    • Example 32: Controlled Components (7:04)
    • Example 32: Controlled Components Continued (6:34)
    • Example 33: Componentize Forms (7:01)
    • Example 33: Componentize Forms Continued (4:26)
    • Example 34: Form Validation (10:49)
  • Miscellaneous
    • Example 35: Accessing Native DOM Elements (7:07)
    • Example 36: Accessing DOM Elements In A React Component (5:28)
    • Example 36: The React Context (7:43)
    • DOM Reconciliation (9:25)
  • React In Production
    • React In Production Setting Up Webpack (8:27)
    • React In Production The Babel Loader (6:07)
    • React In Production Watching For App Changes (3:04)
  • Animations
    • Animation Add Ons In React (2:01)
    • Example 38: The React Transition Group (9:06)
    • Example 38: The React Transition Group Continued (5:54)
    • Example 39: The React CSS Transition Group (6:23)
  • Routing
    • Example 40: React Router: Basic Routing (5:48)
    • Example 40: React Router: Routing With Links (6:10)
  • One Last Thing…
    • The Webpack Dev Server (2:23)

View Full Curriculum

Access
Lifetime
Content
4 hours
Lessons
73

Angular: From Beginning to Advanced

The Number One Resource for Beginner Angular Developers

By Paul Halliday | in Online Courses

Angular has seen a number of iterations and improvements over the years, and this course condenses all of the many design patterns of Angular applications into one simple course. Through this course, you'll look at everything from the Angular CLI to the inner workings of Angular. You'll even create projects involving Firebase and other exciting technologies.

  • Access 73 lectures & 4 hours of content 24/7
  • Set up your first Angular project w/ the Angular CLI
  • Learn about feature modules & core modules
  • Understand the building blocks of Angular
  • Make conditional changes to the DOM
  • Use @ViewChild & @ContentChild to access child component data
  • Make use of built-in Angular pipes & create your own
  • Style your applications w/ Google's Material Design
Paul Halliday is always striving to create the courses he wanted when learning how to code. He distills the topics down into easily understandable chunks whilst guiding you through project based courses. He is also a Progress Telerik Developer Expert, holds a first class BSc (Hons) Computer Science degree @ UoS, and is a Google accredited Mobile Site professional.

Details & Requirements

  • Length of time users can access this course: lifetime
  • Access options: web streaming, mobile streaming
  • Certification of completion not included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: all levels

Compatibility

  • Internet required

Course Outline

  • Angular CLI
    • Introduction to the Angular CLI (1:30)
    • Installing the Angular CLI (1:00)
    • Generating a Project with the Angular CLI (2:09)
    • Using the --dry-run flag (0:36)
    • Directory Structure (1:19)
    • Running a project with ng serve (1:19)
    • Angular CLI.json (1:29)
    • Using the Angular CLI to Generate Project Files (4:34)
    • Using the Angular Documentation (0:42)
    • Running Tests (1:40)
    • Recap (0:18)
    • Challenge (0:33)
  • Bootstrap
    • Main.ts and Application Bootstrap (3:43)
    • NgModule (5:42)
  • Core Components
    • Components 101 (5:49)
    • Feature Modules (14:08)
    • Adding Components to a Feature Module (4:58)
    • Event Binding (5:15)
    • Template Reference and Event Binding (7:52)
    • Component Input (4:57)
    • Output Events (8:18)
    • Forms Module and NgModel (3:49)
  • Challenge 1 - Addition Application
    • Create an Addition Application (0:46)
    • Solution: How to Create the Addition Application (1:55)
  • Challenge 2 - Testing the Addition Application
    • Testing the Application (5:59)
    • Solution: How to Test the Application (2:16)
  • Structural Directives
    • NgIf (1:37)
    • NgFor (4:49)
    • NgIfElse (2:01)
    • NgTemplate Discussion (5:01)
    • NgSwitch (4:30)
  • Attribute Directives
    • Styling with NgStyle (2:44)
    • Dynamic Styles (3:26)
    • NgClass (3:17)
  • Advanced Components
    • Lifecycle Hooks (3:58)
    • ViewChild (6:16)
    • ViewChildren (5:58)
    • Content Projection (4:25)
    • ContentChild (3:56)
    • ContentChildren (2:48)
  • Dependency Injection
    • Creating a Service (2:55)
    • Adding to Module Providers (1:56)
    • Using the NamesService (1:07)
    • Injecting Dependencies into Services (2:13)
  • Built In Pipes
    • Date Pipe (5:00)
    • CurrencyPipe (1:39)
    • JsonPipe (1:40)
    • LowercasePipe (0:34)
    • UppercasePipe (0:28)
    • AsyncPipe - Promises (3:53)
    • Async Pipe - Observables (3:27)
    • Custom Pipes (3:55)
  • Design Patterns
    • CoreModule
    • SharedModule
    • Reducing Import Length
  • Project 1 - GitHub Application
    • Project Introduction (0:54)
    • Creating a New Angular Project (1:55)
    • Initialising SharedModule and Material Design (3:46)
    • GitHub Search Form (4:41)
    • FormControl and Error Validation (3:28)
    • Adding Application Routes (3:51)
    • Core Module and Page Not Found Route (4:33)
    • FeatureModule and Components (1:26)
    • Defining Child Routes and Lazy Loading (4:00)
    • Using routerLink to Navigate Between Routes (3:07)
    • Using HttpClient (3:16)
    • CoreModule forRoot (1:33)
    • Importing CoreModule (2:20)
    • Getting ActivatedRoute Parameters (2:25)
    • Displaying User Information as Observable (2:54)
    • User Interface - Card Detail (5:47)
    • Navigating Back (1:05)
    • Creating and Registering a HttpInterceptor (4:34)
    • Custom Request Headers with HttpInterceptor (2:17)
    • Capturing Http Errors and Displaying Snackbar (5:45)
    • Building for Production (0:56)
    • Deploying to Firebase Hosting (2:56)
    • Recap (1:47)
  • Angular Material
    • Angular Material (6:59)
    • MdToolbar (2:29)

View Full Curriculum

Access
Lifetime
Content
5 hours
Lessons
44

JavaScript: Gentle Introduction for Beginners

Supercharge Your Web Development Skills by Learning JavaScript

By Chris Dixon | in Online Courses

JavaScript is one of the most in-demand programming languages today because it is built into and runs in all major internet browsers. It's the most common language used in web development. If you have any aspirations towards being a web developer, you need to learn JavaScript, and this is the perfect course to send you on your way.

  • Access 44 lectures & 5 hours of content 24/7
  • Add features & interactivity to websites
  • Build large full stack applications using JavaScript
  • Create entire games using a single programming language
  • Use mini projects to gauge your learning
Chris Dixon is a web developer and online teacher. He is passionate about his work, as well as teaching others about it, and has started various online and offline businesses. He was personally motivated to become his own boss and have more freedom and flexibility in his life. He built his first website back in 1999, back when the Internet was first beginning to popularize in usage.

Details & Requirements

  • Length of time users can access this course: lifetime
  • Access options: web streaming, mobile streaming
  • Certification of completion not included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: beginner

Compatibility

  • Internet required

Course Outline

  • Introduction & Getting Started
    • Welcome & what we will be building (1:43)
    • Download Javascript reference sheet
  • Understanding Javascript
    • What is Javascript & what do we use it for? (4:33)
    • Where to include Javascript
    • Displaying Javascript on webpages & comments (8:26)
  • Javascript Basics
    • Javascript variables & assignment (8:21)
    • Numbers & arithmetic
    • Javascript strings
    • Mini Challenge: Display a users score
    • String methods (8:19)
    • Mini challenge: Correctly format users name (6:17)
    • Javascript arrays (4:42)
    • Array methods (3:57)
    • Javascript functions (5:35)
    • Function parameters (3:23)
    • Javascript scope
    • Javascript objects (10:41)
  • Math & Dates
    • Javascript math (8:03)
    • Mini challenge: Generate a random whole number between 1 and 100 (6:29)
    • Dates & date methods (10:19)
  • Control Flow & Loops
    • If statements & comparison (8:05)
    • Else & else if statements (6:59)
    • Mini challenge: Age checker (5:27)
    • Logical operators (5:44)
    • Switch statements
    • Mini challenge: Higher or lower game (13:24)
    • While loop (7:45)
    • Do while loop (3:10)
    • For loop (5:09)
    • Mini challenge: Phone book (5:14)
  • Javascript and the DOM
    • What is the DOM (2:52)
    • Accessing elements (9:36)
    • Manipulating elements
    • Mini challenge: Temperature converter - Part 1 (7:30)
    • Mini challenge: Temperature converter - Part 2 (6:07)
    • Javascript events
    • Mini challenge: Name animator (6:50)
  • Final project: Business card designer
    • Creating the user interface: part 1 (11:49)
    • Creating the user interface: part 2 (12:15)
    • Adding the CSS and Javascript functions (8:33)
    • Finishing off the project (9:17)
  • Thank You
    • Thank you

View Full Curriculum

Terms

  • Instant digital redemption