Website tutorial improved for students

Author: ivchicano

vscode4teaching-server/src/main/resources/static/img/student_finish_exercise.gif

@@ -18,22 +18,30 @@
     <h1 class="title">VSCode 4 Teaching</h1>
     <h3>Extension for Visual Studio Code</h3>
     <hr>
-    <div>
-        <a id="download" href="vscode:extension/VSCode4Teaching.vscode4teaching">
-            <img src="../img/vscode.svg" alt="">
-            <span>Download extension</span>
-        </a>
-    </div>
     <div class="text-body">
         <p>
             Bring the programming exercises of a course directly to the student's editor, so that the teacher of
             that
             course can check the progress of the students and help them.
         </p>
-        <h3>Students signup:</h3>
+        <h2>Tutorial</h2>
+        <h3>Install V4T!:</h3>
+        <div>
+            <a id="download" href="vscode:extension/VSCode4Teaching.vscode4teaching">
+                <img src="../img/vscode.svg" alt="">
+                <span>Download extension</span>
+            </a>
+        </div>
+        <h3>The first time you will have to sign up. After that you can log in:</h3>
         <img class="demo-gif" src="../img/signup.gif" alt="Students signup demo">
-        <h3>Students joins to course:</h3>
+        <h3>Join a course (the teacher will give you the code!):</h3>
         <img class="demo-gif" src="../img/student_gets_course.gif" alt="Students code usage demo">
+        <h3>Now you can do the exercise! When you save a file, its contents will be able to be seen by the teachers:</h3>
+        <img class="demo-gif" src="../img/student_solving_exercise.gif" alt="Students edit exercise demo">
+        <h3>When you finish the exercise, push the Finish button:</h3>
+        <img class="demo-gif" src="../img/student_finish_exercise.gif" alt="Students finish exercise demo">
+        <h3>New exercise! Refresh the list of exercises in the course:</h3>
+        <img class="demo-gif" src="../img/student_refresh_course.gif" alt="Students new exercise demo">
     </div>
 </section>