Using Vue 2 to Create Beautiful SEO-Ready Websites

1h 48m 11s
English
Paid

Course description

In this course, I'm going to show you how to create a beautiful, SEO-Friendly website while using Vue. You will be able to create modern websites with seamless page transitions that are also SEO ready with prerendered pages. This offers huge benefits!

We will start by creating a full mockup & prototype of our website using Adobe XD. Then, we will develop it fully while using Vue.js & Sass. At the end, we will create seamless page transition animations and make it SEO-Friendly.

Read more about the course

Vue.js is among the top 3 JavaScript frontend frameworks, and it's growing in popularity for its simplicity and ease of use.

Vue is perhaps the most simple frontend framework for a frontend designer/developer to understand. For this reason, it's a great choice for handling modern website development.

After watching this course, you will understand:

  • Creating Web Mockups & Prototypes in Adobe XD
  • Starting Projects with the Vue.js CLI
  • Writing HTML & Sass to Match Mockups
  • Working with the Vue Router
  • Creating Page Transition Animations
  • Making a Vue Project SEO-Friendly with a Prerender Plugin
  • ..and much more.

Course Requirements:

  • Adobe XD is recommended but not required.
  • Understanding of HTML & CSS
  • Basic understanding of JavaScript
  • Code Editor (Visual Studio Code is free)

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Header Design 10:01
2 Designing the Home Page 09:49
3 Designing the Portfolio UI 06:11
4 Finishing the Portfolio Page Designs 08:13
5 Creating the Prototype 05:09
6 Starting the Project 06:05
7 Header Development 06:49
8 Home Page HTML 11:07
9 Home Page CSS Styling 10:47
10 Portfolio Page 09:44
11 Finishing the Portfolio Pages 07:34
12 About Page Development 04:17
13 Page Transition Animations 05:29
14 Making the Project SEO-Friendly 06:56

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Adobe XD Crash Course

Adobe XD Crash Course

Sources: leveluptutorials
In this series, we are going to dive into the user interface design tool, Adobe XD. In this series, we are going to dive into the user interface design tool, Adobe XD.
3 hours 11 minutes 58 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Sources: udemy
Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required! Who is the course for? Anyone who is looking to b
6 hours 37 minutes 49 seconds
Learn Adobe Experience Design CC 2018 by Example

Learn Adobe Experience Design CC 2018 by Example

Sources: coursetro
Adobe Experience Design, also known as Adobe XD, has recently graduated from beta to Adobe XD CC 2018! This powerful UI design and prototyping tool is sure to be a staple in UI ...
1 hour 32 minutes 48 seconds
Master Laravel with GraphQL, Vue.js and Tailwind

Master Laravel with GraphQL, Vue.js and Tailwind

Sources: udemy
Learn modern and most up to date development tools in your web developer toolchain. I'll let you see how modern PHP is these days. First off, the power of the L
17 hours 48 minutes 5 seconds
A “Wordle” on Test Driven Development in Vue.js

A “Wordle” on Test Driven Development in Vue.js

Sources: vueschool.io
In this hands-on course, you will learn to write applications using Test-Driven Development (TDD) by building a clone of the Wordle game from scratch. This cour
2 hours 48 minutes 45 seconds