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.

What people are saying about Scrimba: