Tutorial chapter 1 dialogue placement with rough comic mockups

sass/_project-sass/_project-Tutorial.scss

@@ -3,6 +3,9 @@
 // ----------------------------------------------------------------
 
 .tutorial {
+  p {
+    font-size: 1em;
+  }
   .interact {
     textarea.editor {
       height: 350px!important;
@@ -34,6 +37,7 @@
     }
     .comic {
       position: relative;
+      background-repeat: no-repeat;
     }
     .dialogue {
       width: 180px;

views/tutorial/html/1.erb

@@ -1,16 +1,20 @@
 <div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png);">
-  <div class="dialogue">
+  <div class="dialogue" style="left: 270px; top:374px;">
     Oh, a new student!
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 570px; top:374px;">
     Ahem, please come in!
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 50px; top:630px;">
     I'm Penelope, and I'll be your teacher.
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 330px; top:630px;">
     What's your name?
   </div>
+  <div style="position: absolute; left: 460px; top:840px;">
+    <input type="text" placeholder="First Name" style="position: relative">
+    <a class="btn btn-active">Submit</a>
+  </div>
 </div>
 
 <script>

views/tutorial/html/10.erb

@@ -1,8 +1,8 @@
-<div class="comic" style="height: 500px">
+<div class="comic" style="height: 900px; background-image: url(/img/tutorial/ch1pg10.png);">
   <div class="dialogue">
     And that's it for Chapter One! Here's a new badge for your first ever version of victoria.neocities.org!
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="top: 0;left:450px">
     But you're not done yet! There's much in store for you: Adding colors, fonts, backgrounds, and more, all in chapter 2!
   </div>
 </div>

views/tutorial/html/2.erb

@@ -1,15 +1,15 @@
-<div class="comic" style="height: 500px">
-  <div class="dialogue">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png);">
+  <div class="dialogue" style="left: 50px; top: 50px;">
     All you need to build your first site is a computer language called HTML.
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 370px; top: 0px;">
     And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
   </div>
-  <div class="dialogue">
-    You'll see the results of your site here.
+  <div class="dialogue" style="left: 390px; top: 230px;">
+    You'll see the results here.
+    Make sure to check the green boxes below for important bonus info!
   </div>
   <div class="dialogue">
-    Make sure to check the green boxes below for important bonus info!
   </div>
 </div>
 

views/tutorial/html/3.erb

@@ -1,14 +1,14 @@
-<div class="comic" style="height: 500px">
-  <div class="dialogue">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg3.png);">
+  <div class="dialogue" style="left: 50px; top: 20px;">
     Great! 
     Check out your site at <a href="">victoria.neocities.org</a>. 
     You did it!
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 300px; top: 10px;">
     But... hm... it needs a little something more. Let's make your name a header by putting header tags around it. 
   </div>
-  <div class="dialogue">
-    Change the text to this: <h1>Victoria's Website</h1>
+  <div class="dialogue" style="left: 330px; top: 130px;">
+    Change the text to this: [h1]Victoria's Website[/h1]
     and click save.
   </div>
 </div>

views/tutorial/html/4.erb

@@ -1,10 +1,10 @@
-<div class="comic" style="height: 500px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);">
   <div class="dialogue">
     Now let's add a line of text below—perhaps "Welcome to my website" or your favorite quote.
   </div>
-  <div class="dialogue">
-    To make a paragraph, surround your text with the <p> tag. So it should look something like 
-    <p>Hello!</p>
+  <div class="dialogue" style="left: 300px; top: 0px">
+    To make a paragraph, surround your text with the [p] tag. So it should look something like 
+    [p]Hello![/p]
   </div>
 </div>
 

views/tutorial/html/5.erb

@@ -1,13 +1,13 @@
-<div class="comic" style="height: 500px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png);">
   <div class="dialogue">
     You're writing HTML! You're doing it! Everything you need to know is just another tag!
   </div>
-  <div class="dialogue">
-    For example, links look like this:
+  <div class="dialogue" style="top: 0; width: 350px">
+    <p>For example, links look like this:</p>
 
-    <a href="http://neocities.org">Check out Neocities!</a>
+    <p>[a href="http://neocities.org"]Check out Neocities![/a]</p>
     
-    Add a link to your favorite site to the end of the paragraph, right before the </p> closing tag!
+    <p>Add a link to your favorite site to the end of the paragraph, right before the [/p] closing tag!</p>
   </div>
 </div>
 

views/tutorial/html/6.erb

@@ -1,14 +1,14 @@
-<div class="comic" style="height: 500px">
-  <div class="dialogue">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg6.png); background-size: 650px">
+  <div class="dialogue" style="top: 120px; left: 40px">
     Great job! You can see what you've done so far at <a href="">victoria.neocities.org</a>. Now let's try an image.
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="top: 20px; left: 360px">
     Your Neocities web directory already includes a portrait of me called cat.png.
   </div>
-  <div class="dialogue">
-    Add it to your page like so:
+  <div class="dialogue" style="top: 140px; left: 390px">
+    Add it to your page like so: [img src="cat.png"]
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="top: 230px; left: 400px">
     That's it! No closing tag needed for images.
   </div>
 </div>

views/tutorial/html/7.erb

@@ -1,7 +1,6 @@
-<div class="comic" style="height: 500px">
-  <div class="dialogue">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png);">
+  <div class="dialogue" style="left: 0">
     Now maybe your website needs a list. Here's how an unordered list looks:
-
     <ul>
       <li>websites</li>
       <li>yarn</li>
@@ -11,7 +10,7 @@
   <div class="dialogue">
     First, add a list to your page, but replace my favorite activities with your own! 
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 340px; top: 140px;">
     Second, put an h2 header above the list with some kind of title like "Interests."
   </div>
 </div>

views/tutorial/html/8.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 500px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png);">
   <div class="dialogue">
     Now add a link to one of your list items. If nested properly, it should look something like this:
 

views/tutorial/html/9.erb

@@ -1,11 +1,11 @@
-<div class="comic" style="height: 500px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg9.png);">
   <div class="dialogue">
     Good work! Everything you've written has been saved to index.html, which is the homepage people see when they visit your site.
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 280px;top: 140px">
     You can find and edit  index.html by visiting your Neocities dashboard.
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 280px;top: 570px">
     A cheat sheet of all the tags you've learned can be found in the tutorial section.
   </div>
 </div>