Use Vuejs 2 to Create a Beautiful SEO-Ready Website

Welcome to the first lesson! We're going to use Adobe Experience Design (XD) to design a series of mockups so that we know exactly what our UI will look like.

In this lesson, we're going to design the home page. It will consist of a two column layout with a lot of white space, a watermark and limited content.

In this lesson, we will replicate our Adobe XD home page artboard and design the layout for featuring portfolio work.

In this lesson, we will replicate our previous portfolio artboard and modify them to create two more instances.

In this lesson, we will conclude working within Adobe XD by creating a prototype using the artboards that we designed.

In this video, we will use the Vue CLI (Command Line Interface) to start a new Vue project.

In this lesson, we will work within the initial App.vue file to begin coding the template that's necessary for our header and navigation.

In this lesson, we will code the actual home page HTML and begin some basic styling for our container using Sass/CSS.

In this lesson, we will focus solely on CSS in order to transform our home page template into a representation of what our Adobe XD mockup looks like.

In this lesson, we will add to our routes and build out the first portfolio page for our project.

In this lesson, we will use the first portfolio page completed from the previous lesson and create 2 duplicates.

In this lesson, we will build out our final page -- the about page. This will consist of simply writing out the necessary template HTML, along with some brief CSS.

In this lesson, we will create the necessary CSS animations to create seamless page transition animations in our Vue project.

In this final lesson, we will use a prerender plugin that will render all of the HTML on all of our pages, which will make the entire project SEO-Friendly.  I hope you enjoyed the course!