Conventions of the Course

Get to know the conventions followed throughout the course.

We'll cover the following

Vue.js setup and widgets

Note: As mentioned earlier, our platform, will not require any setup or installation before starting to learn. Leave the messy part to us!

It is true that almost every framework or library needs to be installed first and after the installation is finished, a project is created either through a command-line interface (CLI) or manually. Vue.js offers installable components and project creation CLI. Currently, we do not need to worry about this, as Vue.js can be integrated to any web page through a <script> tag! Later in this lesson, an explanation on how to import Vue.js by using a <script> tag is provided.

Importing Vue.js through <script> tag brings the power and features of Vue.js to any web page on the go. Although our platform has the power to install Vue.js in the background and provide a cooked application, it also does not aid Vue.js learning directly and can become an unrelated and complicated task for a beginner.

Since this is an introductory level course, we will be following the method that imports the required Vue.js from the HTML of the web page as shown in the following code snippet.

svg viewer
Press + to interact
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<body>
  <div id='#app'></div>
</body>
</html>

Coding playground

We will use the interactive coding widgets to learn Vue.js in almost all lessons of the course. Play with the code widget available below. It has a simple Vue.js application loaded already!

Vue.js application
Did you observe line 3 in the code above? We are providing that line again below:


Press +  to interact
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
This is the script tag that is responsible for importing Vue.js into our web page.


Challenges


Coding challenges will be provided after each concept to test your skills on the go.  If confused or stuck, these challenges will also contain hidden solutions that are viewable. Some challenges contain viewable hints as well.


Consider the coding challenge below.


Sample coding challenge
Quizzes


Along with challenges, you will be prompted to solve MCQ based quizzes to test your understanding of the concepts. We hope you enjoyed playing with the coding playground above. Now, we have another quiz for you!


Quiz regarding Vue.js


Q
Through which tag Vue.js can be imported in a webpage?


A)
<p>


B)
<script>


 Achievement unlocked! 🎉 
Congratulations! You have got all the conventions of this course. Good job!