React vs Angular vs Vue.js by Example
4.4 (320 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,641 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React vs Angular vs Vue.js by Example to your Wishlist.

Add to Wishlist

React vs Angular vs Vue.js by Example

Decide for yourself which you like the best.
4.4 (320 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,641 students enrolled
Created by Gary Simon
Last updated 6/2017
English
English
Price: Free
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a React App
  • Create an Angular App
  • Create a Vue.js App
  • Create an Adobe XD Prototype Mockup
  • Understand the core differences between React, Angular and Vue.js
View Curriculum
Requirements
  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)
Description

With all of the various javascript libraries and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

  • Installing & Getting Started with a Project
  • Component Structure
  • Templating
  • Styling
  • Integrating CSS Frameworks
  • Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

Who is the target audience?
  • Intermediate Designer / Developer
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
03:26:08
+
Project Design
9 Lectures 01:03:37

In this video, we will do a quick overview of the course purpose, as well as a quick look at the project we will be focusing on.

Project Introduction & Resource Files
01:45

In this lesson, we will get started by designing the navigation in Adobe XD, and ensuring it's consistent with the Bulma CSS framework.

Navigation Design
10:48

Let's design a hero section of our web app's home page. This will feature a heading, subheading and a call to action button.

Hero Section
09:28

In this video, we will design secondary content, which will include some more text content and 3 testimonials.

Supporting Content
10:37

Let's add a real quick footer design to our web app with Adobe XD. It will feature 2 columns; one for a simple text-based content, and the other for social icons.

Footer Design
04:15

For the purpose of showing how to create secondary pages using Angular, React and Vue, we will create a simple FAQ page design here in Adobe XD.

FAQ Page
06:45

In this video, we're going to copy the content into a new mobile artboard in Adobe XD, and make adjustments so that it fits the design of a mobile viewport.

Mobile Home Page
09:50

When a user clicks on the hamburger icon menu in our prototype, we want to show what the dropdown menu will look like. That's what we will design now using Adobe XD.

Mobile Navigation
05:17

Now, let's create a mobile-version of our FAQ page using Adobe XD. This will simply include modifying the desktop card-containers for the FAQ page and adjusting them to fit within the mobile viewport.

Mobile FAQ Page
04:52
+
Vue.js
9 Lectures 01:02:33

Now we're going to get started with the Vue.js section of this course, where we will install Vuejs with the Vue CLI.

Installing Vue.js
06:10

Initially, we will take a look at how Vue is structured, and then we will create the necessary Vue components for our project.

Vue Components
07:37

For this project, we will use the Bulma CSS framework. As such, we will need to integrate it within our Vue.js project, which will utilize the power of Sass.

Integrating a CSS Framework
06:11

Learn how to write HTML, CSS/SASS, that is consistent with the Bulma Nav component.

Vue.js Navigation
11:03

Next, we're going to use Vue directives to make the responsive navigation work once clicked. This will involve toggling classes with v-on and v-bind.

Making the Navigation Function
05:17

In this video, we will integrate a very simple, 2-column footer for our layout.

Footer Integration
03:38

The hero section is a common element on most landing pages. In this video, we will integrate one based on the Hero documentation of the Bulma CSS framework.

Hero Section
07:24

In this video, we will write the necessary HTML and CSS for our secondary/supporting content section based on the Adobe XD prototype we created.

Supporting Content
07:17

In the final lesson a part of this Vue.js section, we will create the FAQ page, which will involve using Axios to connect to a REST API.

FAQ Page
07:56
+
React
7 Lectures 51:30

In this lesson, learn how to use the React CLI to start a new React project. 

Installing React
04:13

In this lesson, we will cover the basic project structure of a React app and also React components.

React Components
11:44

In this video, we will install the bulma css package with npm, and then integrate it within React.

Integrating a CSS Framework
06:55

In this lesson, we will configure the routing for our components and get started with the header HTML and CSS.

Header & Routing
11:29

In this video, we will establish the HTML/Sass for the footer, and ensure the navigation works on mobile.

Footer & Navigation
07:19

In this video, we will establish the HTML & Sass for the home page content.

Home Page
04:24

In this video, we will structure the FAQ page and use Axios to fetch data from an API.

FAQ Page
05:26
+
Angular
5 Lectures 28:28

We will use the Angular CLI (Command Line Interface) to start a new Angular project.

Installing Angular
04:07

In this video, you will learn how Angular is structured, and also how to generate your own Angular components with the Angular CLI.

Angular Components
05:02

In this video, we will first set up our routing for the FAQ and Home components, and then integrate the Bulma CSS framework.

Routing & CSS Framework Integration
04:35

In this video, we will establish the HTML and Sass for our project's header and footer.

Header & Footer Integration
06:02

In this video, we will finalize our Angular project and the course by establishing the code for the home and FAQ components. I hope you enjoyed the course!

Home & FAQ Page
08:42
About the Instructor
Gary Simon
4.4 Average rating
2,428 Reviews
40,252 Students
11 Courses
Professional Freelance Designer & Course Instructor

Gary Simon is a professional freelance graphics and web designer with well over a decade of experience. Having served over a thousand clients, Gary understands many facets of the design industry.

He has also been a course instructor for several of the top online education websites, teaching a wide range of topics including:

  • Web Design
  • Graphic Design
  • Mobile / GUI Design
  • 3D
  • Motion Graphics

Gary began designing websites in 2000, and just a few years later started focusing on identity design. From that point on, Gary grew a large clientele that allowed him to fully develop skills that extend beyond design alone.

The following is a list of web technologies in which Gary is proficient:

  • HTML & CSS (Responsive)
  • JavaScript & jQuery
  • XML
  • PHP
  • MySQL

He is also an expert with the following software:

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe After Effects

Gary began teaching his skills to others after releasing a single logo design tutorial, which has since garnered over a million views. In 7 years, Gary has released over 200 video tutorials and 20+ video courses. On his Youtube channel alone, his videos receive a half million views monthly. He enjoys connecting with students and helping them develop their skills on an on-going and frequent basis.