Decide for yourself which you like the best.


The course described provides a comprehensive guide for intermediate designers and developers to create applications using three major JavaScript frameworks: React, Angular, and Vue.js. Aimed at helping learners understand and choose between these technologies, the course emphasizes hands-on experience by developing the same application with each framework. Here’s a summary of the course content and structure:

Course Overview

Objective: To enable learners to make informed decisions about which JavaScript framework suits their needs and preferences by creating the same application using React, Angular, and Vue.js.


  • Proficiency in HTML, CSS, and basic JavaScript.
  • Familiarity with Adobe XD for the mockup process (optional).

What You’ll Learn

  1. Create Applications in Different Frameworks:
    • React
    • Angular
    • Vue.js
  2. Adobe XD Prototype Mockup:
    • Design a prototype using Adobe XD to guide the development process.
  3. Core Concepts:
    • Installing and starting projects.
    • Understanding component structure.
    • Templating and styling.
    • Integrating CSS frameworks.
    • Working with APIs.

Course Structure

Section 1: Project Introduction & Resource Files

  • Overview of the course purpose and the project focus.

Section 2: Design with Adobe XD

  1. Navigation Design: Creating consistent navigation using Adobe XD and the Bulma CSS framework.
  2. Hero Section: Designing the hero section with a heading, subheading, and call-to-action button.
  3. Supporting Content: Adding secondary content, including text and testimonials.
  4. Footer Design: Designing a simple footer with text content and social icons.
  5. FAQ Page: Creating a simple FAQ page design.
  6. Mobile Design: Adapting the design for mobile viewports, including navigation and FAQ pages.

Section 3: Vue.js Implementation

  1. Setup: Installing Vue.js using the Vue CLI.
  2. Component Creation: Understanding Vue’s structure and creating components.
  3. CSS Framework Integration: Using the Bulma CSS framework and Sass.
  4. Navigation and Functionality: Developing responsive navigation and other elements.
  5. Content Integration: Implementing the hero section, supporting content, and FAQ page using Axios for API connections.

Section 4: React Implementation

  1. Setup: Starting a new React project using the React CLI.
  2. Component Creation: Covering project structure and React components.
  3. CSS Framework Integration: Integrating Bulma CSS with npm.
  4. Routing and Content: Configuring routing, creating the header, footer, home page, and FAQ page, and using Axios for API data.

Section 5: Angular Implementation

  1. Setup: Starting a new Angular project using the Angular CLI.
  2. Component Creation: Understanding Angular’s structure and generating components.
  3. Routing and CSS Framework Integration: Setting up routing and integrating Bulma CSS.
  4. Content Integration: Establishing the header, footer, home page, and FAQ page.


By the end of the course, learners will have developed a thorough understanding of React, Angular, and Vue.js through practical application. They will be equipped with the knowledge to choose the framework that best suits their development style and project requirements. The course’s blend of design and development ensures a holistic learning experience, preparing intermediate designers and developers for more advanced projects

What You’ll 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


  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)


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 this course is for

  • Intermediate Designer / Developer

Enroll For Free Now