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:
So, if you're ready to learn, let's get started!
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.
In this lesson, we will get started by designing the navigation in Adobe XD, and ensuring it's consistent with the Bulma CSS framework.
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.
In this video, we will design secondary content, which will include some more text content and 3 testimonials.
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.
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.
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.
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.
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.
Now we're going to get started with the Vue.js section of this course, where we will install Vuejs with the Vue CLI.
Initially, we will take a look at how Vue is structured, and then we will create the necessary Vue components for our project.
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.
Learn how to write HTML, CSS/SASS, that is consistent with the Bulma Nav component.
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.
In this video, we will integrate a very simple, 2-column footer for our layout.
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.
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.
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.
In this lesson, learn how to use the React CLI to start a new React project.
In this lesson, we will cover the basic project structure of a React app and also React components.
In this video, we will install the bulma css package with npm, and then integrate it within React.
In this lesson, we will configure the routing for our components and get started with the header HTML and CSS.
In this video, we will establish the HTML/Sass for the footer, and ensure the navigation works on mobile.
In this video, we will establish the HTML & Sass for the home page content.
In this video, we will structure the FAQ page and use Axios to fetch data from an API.
We will use the Angular CLI (Command Line Interface) to start a new Angular project.
In this video, you will learn how Angular is structured, and also how to generate your own Angular components with the Angular CLI.
In this video, we will first set up our routing for the FAQ and Home components, and then integrate the Bulma CSS framework.
In this video, we will establish the HTML and Sass for our project's header and footer.
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!
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:
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:
He is also an expert with the following software:
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.