diff --git a/app/tutorial.rb b/app/tutorial.rb
index 4453594d..cdba092f 100644
--- a/app/tutorial.rb
+++ b/app/tutorial.rb
@@ -1,3 +1,22 @@
+def default_tutorial_html
+  <<-EOT.strip
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <meta charset="utf-8">
+    <title>My web site</title>
+
+  </head>
+  <body>
+
+    Hello World!
+
+  </body>
+</html>
+EOT
+end
+
 get '/tutorials' do
   erb :'tutorials'
 end
diff --git a/public/cat.png b/public/cat.png
index d4be8f21..7d8eeadb 100644
Binary files a/public/cat.png and b/public/cat.png differ
diff --git a/views/tutorial/html/2.erb b/views/tutorial/html/2.erb
index c54131c6..6f615be2 100644
--- a/views/tutorial/html/2.erb
+++ b/views/tutorial/html/2.erb
@@ -32,10 +32,9 @@
   var answer = storedName+ "'s Website"
   $('#studentName').text(storedName)
 
-  function checkHomework(editor) {
-    var html = editor.val()
-
-    var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
+  function checkHomework() {
+    var html = editor.getValue()
+    var match = '<html.+>.+<body>.+'+answer+'.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/3.erb b/views/tutorial/html/3.erb
index 8eb581d8..d447683a 100644
--- a/views/tutorial/html/3.erb
+++ b/views/tutorial/html/3.erb
@@ -32,10 +32,9 @@
 
   $('#answer').text(answer)
 
-  function checkHomework(editor) {
-    var html = editor.val()
-
-    var match = '<html>.+<body>.+'+answer+'.+</body>.+</html>'
+  function checkHomework() {
+    var html = editor.getValue()
+    var match = '<html.+>.+<body>.+'+answer+'.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/4.erb b/views/tutorial/html/4.erb
index 95c1e2bf..78723156 100644
--- a/views/tutorial/html/4.erb
+++ b/views/tutorial/html/4.erb
@@ -9,10 +9,9 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
-    var html = editor.val()
-
-    var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
+  function checkHomework() {
+    var html = editor.getValue()
+    var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+</p>.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/5.erb b/views/tutorial/html/5.erb
index 6bdcb022..b7e30ee5 100644
--- a/views/tutorial/html/5.erb
+++ b/views/tutorial/html/5.erb
@@ -25,11 +25,10 @@ But this isn't!
 </div>
 
 <script>
-  function checkHomework(editor) {
-    var html = editor.val()
-
+  function checkHomework() {
+    var html = editor.getValue()
     /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
-    var match = '<html>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
+    var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/6.erb b/views/tutorial/html/6.erb
index 7d816782..f646da2b 100644
--- a/views/tutorial/html/6.erb
+++ b/views/tutorial/html/6.erb
@@ -21,11 +21,11 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
-    var html = editor.val()
+  function checkHomework() {
+    var html = editor.getValue()
 
     /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
-    var match = '<html>.+<body>.+<img.+src="/cat.png">.+</body>.+</html>'
+    var match = '<html.+>.+<body>.+<img.+src="/cat.png">.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/7.erb b/views/tutorial/html/7.erb
index 89c68a8e..68052530 100644
--- a/views/tutorial/html/7.erb
+++ b/views/tutorial/html/7.erb
@@ -30,11 +30,11 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
-    var html = editor.val()
+  function checkHomework() {
+    var html = editor.getValue()
 
     /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
-    var match = '<html>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>'
+    var match = '<html.+>.+<body>.+<ul>.+<li>.+</li>.+</ul>.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/html/8.erb b/views/tutorial/html/8.erb
index 25ed2507..ce3d0f4b 100644
--- a/views/tutorial/html/8.erb
+++ b/views/tutorial/html/8.erb
@@ -20,11 +20,11 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
-    var html = editor.val()
+  function checkHomework() {
+    var html = editor.getValue()
 
     /* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
-    var match = '<html>.+<body>.+<ul>.+<li><a.+href=".+">.+</a></li>.+</ul>.+</body>.+</html>'
+    var match = '<html.+>.+<body>.+<ul>.+<li><a.+href=".+">.+</a></li>.+</ul>.+</body>.+</html>'
     var re = new XRegExp(match, 'gis')
 
     if(html.match(re) === null) {
diff --git a/views/tutorial/layout.erb b/views/tutorial/layout.erb
index 4a2fa401..0afdd089 100644
--- a/views/tutorial/layout.erb
+++ b/views/tutorial/layout.erb
@@ -22,15 +22,43 @@
       <input id="reset" class="btn btn-action" type="submit" value="Reset">
       <% end %>
       <h3>HTML</h3>
-      <textarea id="editor" class="editor">
-<html>
-  <body>
 
-    Hello World!
+      <div id="editor" class="editor"><%== encoding_fix default_tutorial_html %></div>
+
+      <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+
+      <script>
+        $(document).ready(function() {
+          editor = ace.edit("editor")
+          editor.setTheme('ace/theme/tomorrow_night')
+          editor.getSession().setMode("ace/mode/html")
+          editor.getSession().setTabSize(2)
+          editor.getSession().setUseWrapMode(true)
+          editor.setFontSize(14)
+          editor.setShowPrintMargin(false)
+          editor.setOptions({
+            maxLines: Infinity,
+            autoScrollEditorIntoView: true
+          })
+
+          // Disable autocomplete
+          editor.setBehavioursEnabled(false)
+
+          editor.on('change', function(obj) {
+            $('.error').css('display', 'none')
+            refreshIframe()
+          })
+
+          editor.commands.addCommand({
+              name: 'saveCommand',
+              bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
+              exec: function(editor) {
+                $('#submit').click()
+              }
+          })
+        })
+      </script>
 
-  </body>
-</html>
-      </textarea>
       <div class="error" style="display: none; margin-top: 0">
         <i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
       </div>
@@ -71,8 +99,7 @@
   }
 
   $('.tutorial #submit').on('click', function() {
-    var editor = $('#editor')
-    var result = checkHomework(editor)
+    var result = checkHomework()
     if(result == true) {
       window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
     }
@@ -83,18 +110,12 @@
     editor.val(editor.text())
   })
 
-  $('.tutorial textarea').on('keypress keyup', function() {
-    $('.error').css('display', 'none')
-    refreshIframe()
-  })
-
   var tutorialHtml = sessionStorage.getItem('tutorialHtml')
   if(tutorialHtml)
     $('#editor').text(tutorialHtml)
 
   function refreshIframe() {
-    var editor = $('#editor')
-    $('.tutorial iframe').contents().find('html').html(editor.val())
+    $('.tutorial iframe').contents().find('html').html(editor.getValue())
   }
 
   $(function() {
