Learn Vue.js for free

Nine interactive tutorials to teach you how to build apps with Vue. This course covers the basics and walks you through two fun and inspiring projects.

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <script>
    
    // console.log("Hello, Vue! ๐ŸŽ‰")
    
    // this is a single-line comment
    
    /*
      this is a multiline comment
    */
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    /* resets */
    * { color: inherit; }
    input { font: inherit; border: unset; background: unset; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	--white      : #ffffff;
    	--orange     : #ff691f;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	/* colors */
    	--white      : #ffffff;

Learn the hottest new JavaScript framework in less than an hour!

Vue is a newer and refreshing framework for building web apps with at least an order of magnitude more ease than writing vanilla HTML, CSS and JavaScript. Vue frees our data from the DOM, and provides an idiomatic guide to programming JavaScript, making development much faster and more fun.

The library is great for composing both static websites and dynamic web apps, and so learning it is central to building modern products and services.

This course covers the minimum JavaScript needed to get started with Vue, the basics of Vue, and two more advanced examples that build on the ideas discussed and focus on fixing some aspect of the existing codebase. Through nine interactive screencasts, it aims to both help and inspire you.

You can reach out to the course creator via Twitter: @username_ZAYDEK.

ZAYDEK ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘จโ€๐ŸŽจ, course creator

Zaydek is a self-taught designer and programmer. He's created three popular Scrimba courses, all of which inspires the students to be creative with the tools they learn. Zaydek is especially interested in distributed self-education.

Thank ZAYDEK for the course

What people say about this course

How about some company while you learn?

We've created a community chat so that you can ask questions, help others, and connect with like-minded people.

Join community chat