From d5b4da94e161df1a0de555c3a9e17fcd56dc7416 Mon Sep 17 00:00:00 2001
From: Kate Jeffreys <katejeffreys@google.com>
Date: Sun, 3 Feb 2019 00:00:24 -0800
Subject: [PATCH] Feedback on try tutorial

---
 docs/_data/try.yml                            | 12 ++--
 .../projects/try/create/after/index.html      |  9 +--
 .../projects/try/create/after/manifest.json   |  4 +-
 .../projects/try/create/after/my-element.js   | 15 ----
 .../projects/try/create/before/index.html     | 10 ++-
 .../projects/try/create/before/manifest.json  |  4 +-
 .../projects/try/create/before/my-element.js  |  5 --
 .../projects/try/events/after/index.html      | 12 +---
 .../projects/try/events/after/manifest.json   |  8 +--
 .../projects/try/events/after/my-element.js   | 24 ++-----
 .../projects/try/events/before/index.html     | 12 +---
 .../projects/try/events/before/manifest.json  |  8 +--
 .../projects/try/events/before/my-element.js  | 25 ++-----
 .../projects/try/import/after/index.html      | 18 -----
 .../projects/try/import/after/index.ts        |  2 -
 .../projects/try/import/after/manifest.json   | 14 ----
 .../projects/try/import/after/my-element.js   | 10 ---
 .../projects/try/import/before/index.html     | 17 -----
 .../projects/try/import/before/index.ts       |  2 -
 .../projects/try/import/before/manifest.json  | 14 ----
 .../projects/try/import/before/my-element.js  | 10 ---
 .../projects/try/logic/after/index.html       | 12 +---
 .../projects/try/logic/after/manifest.json    |  8 +--
 .../projects/try/logic/after/my-element.js    | 20 ++----
 .../projects/try/logic/before/index.html      | 11 +--
 .../projects/try/logic/before/manifest.json   |  8 +--
 .../projects/try/logic/before/my-element.js   | 23 +++---
 .../projects/try/properties/after/index.html  | 11 +--
 .../try/properties/after/manifest.json        |  8 +--
 .../try/properties/after/my-element.js        | 24 +------
 .../projects/try/properties/before/index.html | 10 +--
 .../try/properties/before/manifest.json       |  4 +-
 .../try/properties/before/my-element.js       | 28 ++------
 .../projects/try/style/after/index.html       | 12 +---
 .../projects/try/style/after/manifest.json    |  8 +--
 .../projects/try/style/after/my-element.js    | 52 ++++++--------
 .../projects/try/style/before/index.html      | 12 +---
 .../projects/try/style/before/manifest.json   |  8 +--
 .../projects/try/style/before/my-element.js   | 31 +++-----
 docs/_try/create.md                           | 18 ++++-
 docs/_try/events.md                           | 28 +++++---
 docs/_try/import.md                           | 43 -----------
 docs/_try/index.md                            |  2 +-
 docs/_try/logic.md                            | 71 +++++++++++++++----
 docs/_try/properties.md                       | 40 ++++++-----
 docs/_try/style.md                            | 56 +++++++++------
 46 files changed, 274 insertions(+), 509 deletions(-)
 delete mode 100644 docs/_includes/projects/try/import/after/index.html
 delete mode 100644 docs/_includes/projects/try/import/after/index.ts
 delete mode 100644 docs/_includes/projects/try/import/after/manifest.json
 delete mode 100644 docs/_includes/projects/try/import/after/my-element.js
 delete mode 100644 docs/_includes/projects/try/import/before/index.html
 delete mode 100644 docs/_includes/projects/try/import/before/index.ts
 delete mode 100644 docs/_includes/projects/try/import/before/manifest.json
 delete mode 100644 docs/_includes/projects/try/import/before/my-element.js
 delete mode 100644 docs/_try/import.md

diff --git a/docs/_data/try.yml b/docs/_data/try.yml
index 2b243a8e..061c0985 100644
--- a/docs/_data/try.yml
+++ b/docs/_data/try.yml
@@ -6,19 +6,15 @@ toc:
   create: 
     title: 1. Create
     url: /try/create
-  import: 
-    title: 2. Import
-    url: /try/import
   properties: 
-    title: 3. Properties
+    title: 2. Properties
     url: /try/properties
   logic: 
-    title: 4. Logic
+    title: 3. Logic
     url: /try/logic
   events: 
-    title: 5. Events
+    title: 4. Events
     url: /try/events
   style: 
-    title: 6. Style
+    title: 5. Style
     url: /try/style
-            
\ No newline at end of file
diff --git a/docs/_includes/projects/try/create/after/index.html b/docs/_includes/projects/try/create/after/index.html
index a097c2fe..245442f1 100644
--- a/docs/_includes/projects/try/create/after/index.html
+++ b/docs/_includes/projects/try/create/after/index.html
@@ -1,12 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
+  <title>LitElement Example</title>
 </head>
   <body>
     <my-element></my-element>
diff --git a/docs/_includes/projects/try/create/after/manifest.json b/docs/_includes/projects/try/create/after/manifest.json
index 7550d863..18defb9b 100644
--- a/docs/_includes/projects/try/create/after/manifest.json
+++ b/docs/_includes/projects/try/create/after/manifest.json
@@ -4,8 +4,8 @@
     "index.html",
     "index.ts"
   ],
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
+  "title": "LitElement Example",
+  "description": "LitElement Example",
   "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
diff --git a/docs/_includes/projects/try/create/after/my-element.js b/docs/_includes/projects/try/create/after/my-element.js
index 835ccb6a..4f1e3414 100644
--- a/docs/_includes/projects/try/create/after/my-element.js
+++ b/docs/_includes/projects/try/create/after/my-element.js
@@ -1,17 +1,5 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Completed code for 1. Create
- */
-
-/**
- * DONE: Import the LitElement base class and html helper function.
- */
 import { LitElement, html } from 'lit-element';
 
-/**
- * DONE: Create a class for your element that extends the LitElement
- * base class.
- */
 class MyElement extends LitElement {
   render() {
     return html`
@@ -20,7 +8,4 @@ class MyElement extends LitElement {
   }
 }
 
-/**
- * DONE: Register the new element with the browser.
- */
 customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/create/before/index.html b/docs/_includes/projects/try/create/before/index.html
index a097c2fe..d87621b9 100644
--- a/docs/_includes/projects/try/create/before/index.html
+++ b/docs/_includes/projects/try/create/before/index.html
@@ -1,14 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
+  <title>LitElement Example</title>
 </head>
   <body>
+    <p>TODO: Implement <code>my-element</code>!</p>
     <my-element></my-element>
   </body>
 </html>
diff --git a/docs/_includes/projects/try/create/before/manifest.json b/docs/_includes/projects/try/create/before/manifest.json
index 7550d863..18defb9b 100644
--- a/docs/_includes/projects/try/create/before/manifest.json
+++ b/docs/_includes/projects/try/create/before/manifest.json
@@ -4,8 +4,8 @@
     "index.html",
     "index.ts"
   ],
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
+  "title": "LitElement Example",
+  "description": "LitElement Example",
   "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
diff --git a/docs/_includes/projects/try/create/before/my-element.js b/docs/_includes/projects/try/create/before/my-element.js
index 306cd95f..b4562a55 100644
--- a/docs/_includes/projects/try/create/before/my-element.js
+++ b/docs/_includes/projects/try/create/before/my-element.js
@@ -1,8 +1,3 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Starting code for 1. Create
- */
-
 /**
  * TODO: Import the LitElement base class and html helper function.
  */
diff --git a/docs/_includes/projects/try/events/after/index.html b/docs/_includes/projects/try/events/after/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/events/after/index.html
+++ b/docs/_includes/projects/try/events/after/index.html
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/events/after/manifest.json b/docs/_includes/projects/try/events/after/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/events/after/manifest.json
+++ b/docs/_includes/projects/try/events/after/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/events/after/my-element.js b/docs/_includes/projects/try/events/after/my-element.js
index bb7b62b2..9db7f714 100644
--- a/docs/_includes/projects/try/events/after/my-element.js
+++ b/docs/_includes/projects/try/events/after/my-element.js
@@ -1,8 +1,3 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Completed code for 5. Events
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
@@ -15,29 +10,20 @@ class MyElement extends LitElement {
   }
   constructor() {
     super();
-    this.message='Hello world! From my-element';
+    this.message = 'Hello world! From my-element';
     this.myArray = ['an','array','of','test','data'];
     this.myBool = true;
   }
-
   render() {
     return html`
       <p>${this.message}</p>
-      <ul>
-        ${this.myArray.map(item => html`<li>${item}</li>`)}
-      </ul>
-      ${this.myBool?
-        html`<p>Render some HTML if myBool is true</p>`:
+      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+      ${this.myBool ?
+        html`<p>Render some HTML if myBool is true</p>` :
         html`<p>Render some other HTML if myBool is false</p>`}
-
-      <!-- DONE: Add an event listener. -->
-      <button @click="${this.clickHandler}">Click</button>
+      <button @click=${this.clickHandler}>Click</button>
     `;
   }
-
-  /**
-   * DONE: Implement an event handler.
-   */
   clickHandler(event) {
     console.log(event.target);
     this.myBool = !this.myBool;
diff --git a/docs/_includes/projects/try/events/before/index.html b/docs/_includes/projects/try/events/before/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/events/before/index.html
+++ b/docs/_includes/projects/try/events/before/index.html
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/events/before/manifest.json b/docs/_includes/projects/try/events/before/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/events/before/manifest.json
+++ b/docs/_includes/projects/try/events/before/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/events/before/my-element.js b/docs/_includes/projects/try/events/before/my-element.js
index 35868a81..d3556344 100644
--- a/docs/_includes/projects/try/events/before/my-element.js
+++ b/docs/_includes/projects/try/events/before/my-element.js
@@ -1,8 +1,3 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Starting code for 5. Events
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
@@ -15,28 +10,20 @@ class MyElement extends LitElement {
   }
   constructor() {
     super();
-    this.message='Hello world! From my-element';
+    this.message = 'Hello world! From my-element';
     this.myArray = ['an','array','of','test','data'];
     this.myBool = true;
   }
-
   render() {
     return html`
       <p>${this.message}</p>
-      <ul>
-        ${this.myArray.map(item => html`<li>${item}</li>`)}
-      </ul>
-      ${this.myBool?
-        html`<p>Render some HTML if myBool is true</p>`:
+      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+      ${this.myBool ?
+        html`<p>Render some HTML if myBool is true</p>` :
         html`<p>Render some other HTML if myBool is false</p>`}
-
-      <!-- TODO: Add an event listener. -->
-      <button>Click</button>
+      <!-- TODO: Add a button with an event listener -->
     `;
   }
-
-  /**
-   * TODO: Implement an event handler.
-   */
+  // TODO: Add an event handler
 }
 customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/import/after/index.html b/docs/_includes/projects/try/import/after/index.html
deleted file mode 100644
index c62101cf..00000000
--- a/docs/_includes/projects/try/import/after/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-<!-- 
-  Try LitElement https://lit-element.polymer-project.org/try
-  Completed code for 2. Import 
--->
-<html>
-  <head>
-    <!-- Polyfills required for browser compatibility on StackBlitz -->
-    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
-    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    <!-- In StackBlitz, my-element.js is imported in index.ts -->
-    <!-- <script type="module" src="my-element.js"></script> -->
-  </head>
-  <body>
-    <!-- DONE: Add your new element to the page -->
-    <my-element></my-element>
-  </body>
-</html>
diff --git a/docs/_includes/projects/try/import/after/index.ts b/docs/_includes/projects/try/import/after/index.ts
deleted file mode 100644
index ceb6f80b..00000000
--- a/docs/_includes/projects/try/import/after/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Import my-element module
-import './my-element.js';
diff --git a/docs/_includes/projects/try/import/after/manifest.json b/docs/_includes/projects/try/import/after/manifest.json
deleted file mode 100644
index 7550d863..00000000
--- a/docs/_includes/projects/try/import/after/manifest.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "files": [
-    "my-element.js",
-    "index.html",
-    "index.ts"
-  ],
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
-  "template": "typescript",
-  "dependencies": {
-    "lit-element": "latest",
-    "@webcomponents/webcomponentsjs": "latest"
-  }
-}
diff --git a/docs/_includes/projects/try/import/after/my-element.js b/docs/_includes/projects/try/import/after/my-element.js
deleted file mode 100644
index 9f435e67..00000000
--- a/docs/_includes/projects/try/import/after/my-element.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-class MyElement extends LitElement {
-  render() {
-    return html`
-      <p>Hello world! From my-element</p>
-    `;
-  }
-}
-customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/import/before/index.html b/docs/_includes/projects/try/import/before/index.html
deleted file mode 100644
index da2cc4eb..00000000
--- a/docs/_includes/projects/try/import/before/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-<!-- 
-  Try LitElement https://lit-element.polymer-project.org/try
-  Starting code for 2. Import
--->
-<html>
-  <head>
-    <!-- Polyfills required for browser compatibility on StackBlitz -->
-    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
-    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    <!-- In StackBlitz, my-element.js is imported in index.ts -->
-    <!-- <script type="module" src="my-element.js"></script> -->
-  </head>
-  <body>
-    <!-- TODO: Add your new element to the page -->
-  </body>
-</html>
diff --git a/docs/_includes/projects/try/import/before/index.ts b/docs/_includes/projects/try/import/before/index.ts
deleted file mode 100644
index ceb6f80b..00000000
--- a/docs/_includes/projects/try/import/before/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Import my-element module
-import './my-element.js';
diff --git a/docs/_includes/projects/try/import/before/manifest.json b/docs/_includes/projects/try/import/before/manifest.json
deleted file mode 100644
index 7550d863..00000000
--- a/docs/_includes/projects/try/import/before/manifest.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "files": [
-    "my-element.js",
-    "index.html",
-    "index.ts"
-  ],
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
-  "template": "typescript",
-  "dependencies": {
-    "lit-element": "latest",
-    "@webcomponents/webcomponentsjs": "latest"
-  }
-}
diff --git a/docs/_includes/projects/try/import/before/my-element.js b/docs/_includes/projects/try/import/before/my-element.js
deleted file mode 100644
index 9f435e67..00000000
--- a/docs/_includes/projects/try/import/before/my-element.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-class MyElement extends LitElement {
-  render() {
-    return html`
-      <p>Hello world! From my-element</p>
-    `;
-  }
-}
-customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/logic/after/index.html b/docs/_includes/projects/try/logic/after/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/logic/after/index.html
+++ b/docs/_includes/projects/try/logic/after/index.html
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/logic/after/manifest.json b/docs/_includes/projects/try/logic/after/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/logic/after/manifest.json
+++ b/docs/_includes/projects/try/logic/after/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/logic/after/my-element.js b/docs/_includes/projects/try/logic/after/my-element.js
index 4bacb391..0cf926ff 100644
--- a/docs/_includes/projects/try/logic/after/my-element.js
+++ b/docs/_includes/projects/try/logic/after/my-element.js
@@ -1,8 +1,3 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Completed code for 4. Logic
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
@@ -15,23 +10,16 @@ class MyElement extends LitElement {
   }
   constructor() {
     super();
-    this.message='Hello world! From my-element';
+    this.message = 'Hello world! From my-element';
     this.myBool = true;
     this.myArray = ['an','array','of','test','data'];
   }
-
   render() {
     return html`
       <p>${this.message}</p>
-
-      <!-- DONE: Add a loop -->
-      <ul>
-        ${this.myArray.map(item => html`<li>${item}</li>`)}
-      </ul>
-
-      <!-- DONE: Add a conditional -->
-      ${this.myBool?
-        html`<p>Render some HTML if myBool is true</p>`:
+      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+      ${this.myBool ?
+        html`<p>Render some HTML if myBool is true</p>` :
         html`<p>Render some other HTML if myBool is false</p>`}
     `;
   }
diff --git a/docs/_includes/projects/try/logic/before/index.html b/docs/_includes/projects/try/logic/before/index.html
index cf412668..245442f1 100644
--- a/docs/_includes/projects/try/logic/before/index.html
+++ b/docs/_includes/projects/try/logic/before/index.html
@@ -1,16 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/logic/before/manifest.json b/docs/_includes/projects/try/logic/before/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/logic/before/manifest.json
+++ b/docs/_includes/projects/try/logic/before/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/logic/before/my-element.js b/docs/_includes/projects/try/logic/before/my-element.js
index 0f44d921..d54a8020 100644
--- a/docs/_includes/projects/try/logic/before/my-element.js
+++ b/docs/_includes/projects/try/logic/before/my-element.js
@@ -1,33 +1,26 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Starting code for 4. Logic
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   static get properties() {
-    return {
-      message: { type: String },
-      myBool: { type: Boolean },
-      myArray: { type: Array }
+    return { 
+      message: { type: String } 
+      // TODO: Add a boolean property
+      // TODO: Add an array property
     };
   }
   constructor() {
     super();
-    this.message='Hello world! From my-element';
-    this.myBool = true;
-    this.myArray = ['an','array','of','test','data'];
+    this.message = 'Hello world! From my-element';
+    // TODO: Initialize boolean property
+    // TODO: Initialize array property
   }
-
   render() {
     return html`
       <p>${this.message}</p>
-
       <!-- TODO: Add a loop -->
-
       <!-- TODO: Add a conditional -->
     `;
   }
 }
 customElements.define('my-element', MyElement);
+  
\ No newline at end of file
diff --git a/docs/_includes/projects/try/properties/after/index.html b/docs/_includes/projects/try/properties/after/index.html
index cf412668..245442f1 100644
--- a/docs/_includes/projects/try/properties/after/index.html
+++ b/docs/_includes/projects/try/properties/after/index.html
@@ -1,16 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/properties/after/manifest.json b/docs/_includes/projects/try/properties/after/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/properties/after/manifest.json
+++ b/docs/_includes/projects/try/properties/after/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/properties/after/my-element.js b/docs/_includes/projects/try/properties/after/my-element.js
index 1cb5dcc4..39587e22 100644
--- a/docs/_includes/projects/try/properties/after/my-element.js
+++ b/docs/_includes/projects/try/properties/after/my-element.js
@@ -1,35 +1,13 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Completed code for 3. Properties
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
-  /**
-   * DONE: Declare a property.
-   */
   static get properties() {
-    return {
-      // Property declaration
-      message: { type: String }
-    };
+    return { message: { type: String } };
   }
-
-  /**
-   * DONE: Initialize the property.
-   */
   constructor() {
-    // Always call superconstructor first
     super();
-
-    // Initialize property
     this.message='Hello world! From my-element';
   }
-
-  /**
-   * DONE: Add a property to your template with a JavaScript expression.
-   */
   render() {
     return html`
       <p>${this.message}</p>
diff --git a/docs/_includes/projects/try/properties/before/index.html b/docs/_includes/projects/try/properties/before/index.html
index 1a1c0a6e..245442f1 100644
--- a/docs/_includes/projects/try/properties/before/index.html
+++ b/docs/_includes/projects/try/properties/before/index.html
@@ -1,13 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  <script type="module" src="./my-element.js"></script>
+  <title>LitElement Example</title>
 </head>
   <body>
     <my-element></my-element>
diff --git a/docs/_includes/projects/try/properties/before/manifest.json b/docs/_includes/projects/try/properties/before/manifest.json
index 7550d863..18defb9b 100644
--- a/docs/_includes/projects/try/properties/before/manifest.json
+++ b/docs/_includes/projects/try/properties/before/manifest.json
@@ -4,8 +4,8 @@
     "index.html",
     "index.ts"
   ],
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
+  "title": "LitElement Example",
+  "description": "LitElement Example",
   "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
diff --git a/docs/_includes/projects/try/properties/before/my-element.js b/docs/_includes/projects/try/properties/before/my-element.js
index 0c060244..b01d5156 100644
--- a/docs/_includes/projects/try/properties/before/my-element.js
+++ b/docs/_includes/projects/try/properties/before/my-element.js
@@ -1,32 +1,12 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Starting code for 3. Properties
- */
-
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
-  /**
-   * TODO: Declare a property.
-   */
-  static get properties() {
-    return { };
-  }
-
-  /**
-   * TODO: Initialize the property.
-   */
-  constructor() {
-    // Always call superconstructor first
-    super();
-  }
-
-  /**
-   * TODO: Add a property to your template with a JavaScript expression.
-   */
+  // TODO: Create a `properties` getter; declare a property
+  // TODO: Add a constructor; initialize the property
   render() {
     return html`
-      <p></p>
+      <!-- TODO: Replace text content with your property -->
+      <p>Hello world! From my-element</p>
     `;
   }
 }
diff --git a/docs/_includes/projects/try/style/after/index.html b/docs/_includes/projects/try/style/after/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/style/after/index.html
+++ b/docs/_includes/projects/try/style/after/index.html
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/style/after/manifest.json b/docs/_includes/projects/try/style/after/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/style/after/manifest.json
+++ b/docs/_includes/projects/try/style/after/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/style/after/my-element.js b/docs/_includes/projects/try/style/after/my-element.js
index 2a7340b2..4ac86f42 100644
--- a/docs/_includes/projects/try/style/after/my-element.js
+++ b/docs/_includes/projects/try/style/after/my-element.js
@@ -1,9 +1,4 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Completed code for 6. Style
- */
-
-import { LitElement, html } from 'lit-element';
+import { LitElement, html, css } from 'lit-element';
 
 class MyElement extends LitElement {
   static get properties() {
@@ -13,45 +8,38 @@ class MyElement extends LitElement {
       myBool: { type: Boolean }
     };
   }
-
+  static get styles() {
+    return css`
+      p {
+        font-family: Roboto;
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .red {
+        color: red;
+      }
+      .blue {
+        color: blue;
+      }
+    `;
+  }
   constructor() {
     super();
-    this.message='Hello world! From my-element';
+    this.message = 'Hello world! From my-element';
     this.myArray = ['an','array','of','test','data'];
     this.myBool = true;
   }
-
   render() {
     return html`
-      <!-- DONE: Add a style block. -->
-      <style>
-        p {
-          font-family: Roboto;
-          font-size: 16px;
-          font-weight: 500;
-        }
-        .red {
-          color: red;
-        }
-        .blue {
-          color: blue;
-        }
-      </style>
-
-      <!-- DONE: Add a styled paragraph. -->
       <p class="${this.myBool?'red':'blue'}">styled paragraph</p>
-
       <p>${this.message}</p>
-      <ul>
-        ${this.myArray.map(item => html`<li>${item}</li>`)}
-      </ul>
-      ${this.myBool?
-        html`<p>Render some HTML if myBool is true</p>`:
+      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+      ${this.myBool ?
+        html`<p>Render some HTML if myBool is true</p>` :
         html`<p>Render some other HTML if myBool is false</p>`}
       <button @click="${this.clickHandler}">Click</button>
     `;
   }
-
   clickHandler(event) {
     console.log(event.target);
     this.myBool = !this.myBool;
diff --git a/docs/_includes/projects/try/style/before/index.html b/docs/_includes/projects/try/style/before/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/style/before/index.html
+++ b/docs/_includes/projects/try/style/before/index.html
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-  <title>lit-element code sample</title>
-  
+  <title>LitElement Example</title>
 </head>
-
   <body>
     <my-element></my-element>
   </body>
-
 </html>
diff --git a/docs/_includes/projects/try/style/before/manifest.json b/docs/_includes/projects/try/style/before/manifest.json
index cc77695b..18defb9b 100644
--- a/docs/_includes/projects/try/style/before/manifest.json
+++ b/docs/_includes/projects/try/style/before/manifest.json
@@ -1,14 +1,14 @@
 {
-  "title": "lit-element code sample",
-  "description": "lit-element code sample",
   "files": [
     "my-element.js",
     "index.html",
     "index.ts"
   ],
+  "title": "LitElement Example",
+  "description": "LitElement Example",
+  "template": "typescript",
   "dependencies": {
     "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
-  },
-  "template": "typescript"
+  }
 }
diff --git a/docs/_includes/projects/try/style/before/my-element.js b/docs/_includes/projects/try/style/before/my-element.js
index 235da6d5..8e325067 100644
--- a/docs/_includes/projects/try/style/before/my-element.js
+++ b/docs/_includes/projects/try/style/before/my-element.js
@@ -1,43 +1,32 @@
-/**
- * Try LitElement https://lit-element.polymer-project.org/try
- * Starting code for 6. Style
- */
-
+// TODO: Import the css helper function
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   static get properties() {
     return {
       message: { type: String },
-      myArray: { type: Array },
-      myBool: { type: Boolean }
+      myBool: { type: Boolean },
+      myArray: { type: Array }
     };
   }
-
+  // TODO: Add a static styles getter
   constructor() {
     super();
-    this.message='Hello world! From my-element';
+    this.message = 'Hello world! From my-element';
     this.myArray = ['an','array','of','test','data'];
     this.myBool = true;
   }
-
   render() {
     return html`
-      <!-- TODO: Add a style block. -->
-
-      <!-- TODO: Add a styled paragraph. -->
-
       <p>${this.message}</p>
-      <ul>
-        ${this.myArray.map(item => html`<li>${item}</li>`)}
-      </ul>
-      ${this.myBool?
-        html`<p>Render some HTML if myBool is true</p>`:
+      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+      ${this.myBool ?
+        html`<p>Render some HTML if myBool is true</p>` :
         html`<p>Render some other HTML if myBool is false</p>`}
-      <button @click="${this.clickHandler}">Click</button>
+      <button @click=${this.clickHandler}>Click</button>
+      <!-- TODO: Add a styled paragraph -->
     `;
   }
-
   clickHandler(event) {
     console.log(event.target);
     this.myBool = !this.myBool;
diff --git a/docs/_try/create.md b/docs/_try/create.md
index 894e8114..bae2135b 100644
--- a/docs/_try/create.md
+++ b/docs/_try/create.md
@@ -50,8 +50,20 @@ Click **Launch Code Editor** to edit the starting code. When you're ready to see
     customElements.define('my-element', MyElement);
     ```
 
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 1.
+Here's the completed code for this step:
 
-{% include project.html folder="try/create/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/create/before/my-element.js %}
+```
+
+Your code sample should be working now. LitElement components are added to a page with simple HTML tags, like this:
+
+```html
+<my-element></my-element>
+```
+
+See [Use a LitElement component](/use) for more information about local setup.
 
-[Next: 2. Import your component](import)
+[Next: 2. Properties](properties)
diff --git a/docs/_try/events.md b/docs/_try/events.md
index 7fdb30a1..92fc9cb3 100644
--- a/docs/_try/events.md
+++ b/docs/_try/events.md
@@ -4,7 +4,7 @@ slug: events
 title: Events
 ---
 
-In this step, you'll use lit-html's `@event` annotation to add an event listener to an element inside your template. 
+In this step, you'll use lit-html's `@event` annotation to add an event listener to an element inside your template. You'll also add an event handler method to your class which will fire whenever the event occurs.
 
 **Starting code**
 
@@ -15,20 +15,20 @@ _my-element.js_
 ```
 
 {% include project.html folder="try/events/before" openFile="my-element.js" %}
+  
+1.  **Add a button with an event listener to your template.**
 
-1. **Add an event listener.**
-
-    In my-element.js, in your template, replace the existing HTML `button` element with the following code:
+    In my-element.js, add the following `<button>` element to your HTML template:
 
     ```html
-    <button @click="${this.clickHandler}">Click</button>
+    <button @click=${this.clickHandler}>Click</button>
     ```
 
-    The annotation above adds a listener for the `click` event.
+    The binding syntax `@click=${this.clickHandler}` adds a listener for the `click` event, which calls the `clickHandler` method.
 
-2. **Implement an event handler.** 
+2. **Add the `clickHandler` method to your class.** 
 
-    To handle the `click` event, define the following method on your `MyElement` class:
+    Add the following method to your `MyElement` class:
 
     ```js
     clickHandler(event) {
@@ -37,8 +37,14 @@ _my-element.js_
     }
     ```
 
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 5.
+    The `clickHandler` method toggles the boolean property, `myBool`, which you defined in the previous step.
+
+Here's the completed code for this step:
+
+_my-element.js_
 
-{% include project.html folder="try/events/after" openFile="my-element.js" %}
+```js
+{% include projects/try/events/after/my-element.js %}
+```
 
-[Next: 6. Style](style)
+[Next: 5. Style](style)
diff --git a/docs/_try/import.md b/docs/_try/import.md
deleted file mode 100644
index f149d064..00000000
--- a/docs/_try/import.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: try
-slug: import
-title: Import your component
----
-
-Import your new component as a JavaScript module and use it in a web page.
-
-**Starting code**
-
-_index.html_
-
-```html
-{% include projects/try/import/before/index.html %}
-```
-
-{% include project.html folder="try/import/before" openFile="index.html" %}
-
-1. **Import your component module.** 
-
-    LitElement components are imported as JavaScript modules. **You don't need to change anything in this step if you're following the tutorial in StackBlitz**. In StackBlitz, index.ts runs automatically.
-
-    _index.ts_
-
-    ```js
-    {% include projects/try/import/after/index.ts %}
-    ```
-
-2. **Add your new component to the page.** 
-
-    In index.html, replace the existing `body` block with the following code:
-
-    ```html
-      <body>
-        <my-element></my-element>
-      </body>
-    ```
-
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 2. 
-
-{% include project.html folder="try/import/after" openFile="index.html" %}
-
-[Next: 3. Properties](properties)
diff --git a/docs/_try/index.md b/docs/_try/index.md
index cf5dbdee..def1affe 100644
--- a/docs/_try/index.md
+++ b/docs/_try/index.md
@@ -15,7 +15,7 @@ Click **Preview** at any time to see your code in action.
 {:.alert .alert-info}
 <div>
 
-**If you're doing the tutorial in your local development environment, you'll need to make some changes to the code on this page.** The code samples on this page are written for the live StackBlitz editor. To work locally, see the [Getting Started page](start). 
+**If you're doing the tutorial in your local development environment, you'll need to make some changes to the code on this page.** The code samples on this page are written for the live StackBlitz editor. To work locally, see the [Getting Started page](/start). 
 
 </div>
 
diff --git a/docs/_try/logic.md b/docs/_try/logic.md
index 6000dbb9..4fda9892 100644
--- a/docs/_try/logic.md
+++ b/docs/_try/logic.md
@@ -4,7 +4,19 @@ slug: logic
 title: Logic in templates
 ---
 
-In this step, you'll add a loop and a conditional to your LitElement template.
+In this step, you'll add a loop and a conditional to your LitElement template. 
+
+To repeat a part of your HTML template, you can use a JavaScript expression to iterate over an array property:
+
+```js
+${this.myArray.map(item => html`<li>${item}</li>`)}
+```
+
+Similarly, to conditionally render some part of your template, you can use a JavaScript expression to examine a boolean property:
+
+```js
+${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}
+```
 
 **Starting code**
 
@@ -16,28 +28,57 @@ _my-element.js_
 
 {% include project.html folder="try/logic/before" openFile="my-element.js" %}
 
-1. **Add a loop to your template.**
+1.  **Add a boolean property and an array property to your properties getter.**
 
-    We've added an array property, `myArray`, to my-element.js. To loop over `myArray`, add the following code to your template:
+    Replace the static properties getter with the following code:
 
-    ```html
-    <ul>
-      ${this.myArray.map(i => html`<li>${i}</li>`)}
-    </ul>
+    ```js
+    static get properties() {
+      return {
+        message: { type: String },
+        myBool: { type: Boolean },
+        myArray: { type: Array }
+      };
+    }
     ```
 
-2. **Add a conditional to your template.**
+2.  **Initialize the boolean and array properties.**
 
-    We've added a boolean property, `myBool`, to my-element.js. To render conditionally on `myBool`, add the following code to your template:
+    Replace the constructor with the following code:
+
+    ```js
+    constructor() {
+      super();
+      this.message = 'Hello world! From my-element';
+      this.myBool = true;
+      this.myArray = ['an','array','of','test','data'];
+    }
+    ```
 
-    ```html
-    ${this.myBool?
-      html`<p>Render some HTML if myBool is true</p>`:
+3.  **Add a loop to your template.**
+    
+    To loop over the new `myArray` property, add the following code to your template:
+
+    ```js
+    <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
+    ```
+
+3.  **Add a conditional to your template.**
+
+    To render conditionally based on the value of `myBool`, add the following code to your template:
+
+    ```js
+    ${this.myBool ?
+      html`<p>Render some HTML if myBool is true</p>` :
       html`<p>Render some other HTML if myBool is false</p>`}
     ```
 
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 4.
+Here's the completed code for this step:
 
-{% include project.html folder="try/logic/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/logic/after/my-element.js %}
+```
 
-[Next: 5. Events](events)
+[Next: 4. Events](events)
diff --git a/docs/_try/properties.md b/docs/_try/properties.md
index de5c3f38..01233fa4 100644
--- a/docs/_try/properties.md
+++ b/docs/_try/properties.md
@@ -4,7 +4,7 @@ slug: properties
 title: Use properties
 ---
 
-In this step, you'll declare a property for your component, and use the value in the component's template. LitElement components update automatically when their properties change.
+In this step, you'll declare a property for your component, initialize the property, and use the value in the component's template. 
 
 **Starting code**
 
@@ -18,34 +18,34 @@ _my-element.js_
 
 1. **Declare a property.**
 
-    In my-element.js, replace the existing `properties` getter with the following code: 
+    In my-element.js, add the following `properties` getter to the `MyElement` class: 
     
     ```js
     static get properties() {
-      return {
-        // Property declaration
-        message: { type: String }
-      };
+      return { message: { type: String } };
     }
     ```
 
+    The code snippet above adds a string property called `message` to your element class.
+
 2. **Initialize the property.**
 
-    You should initialize property values in a component's constructor. 
-    
-    In my-element.js, replace the existing constructor with the following code:
+    A good place to initialize property values is in your element constructor. 
+        
+    In my-element.js, add the following method to the `MyElement` class: 
     
     ```js
     constructor() {
-      // Always call superconstructor first
       super();
-
-      // Initialize property
-      this.message='Hello world! From my-element';
+      this.message = 'Hello world! From my-element';
     }
     ```
 
-3. **Add the property to your template with a JavaScript expression.**
+    The first line of code in the constructor (`super();`) calls the parent class constructor.
+
+3. **Add the property to your template.**
+
+    You can add properties to your LitElement templates with JavaScript expressions.
 
     In my-element.js, replace the existing `render` function with the following code:
 
@@ -57,8 +57,14 @@ _my-element.js_
     }
     ``` 
 
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 3.
+LitElement components update automatically when their properties change. 
 
-{% include project.html folder="try/properties/after" openFile="my-element.js" %}
+Here's the completed code for this step:
+
+_my-element.js_
+
+```js
+{% include projects/try/properties/after/my-element.js %}
+```
 
-[Next: 4. Logic](logic)
+[Next: 3. Logic](logic)
diff --git a/docs/_try/style.md b/docs/_try/style.md
index 0ba9d251..07cffc29 100644
--- a/docs/_try/style.md
+++ b/docs/_try/style.md
@@ -4,7 +4,7 @@ slug: style
 title: Styling
 ---
 
-Style your element with CSS by including a `style` block in its template. These styles are encapsulated; they will only apply to your component. 
+Style your component with CSS by defining a static `styles` getter in your class.
 
 **Starting code**
 
@@ -16,36 +16,50 @@ _my-element.js_
 
 {% include project.html folder="try/style/before" openFile="my-element.js" %}
 
-1.  **Define your styles.**
+1.  **Import the `css` helper function.**
 
-    To define your styles, add the following code to your template:
+    In my-element.js, replace the `import` statement with the following code:
 
-    ```html
-    <style>
-      p {
-        font-family: Roboto;
-        font-size: 16px;
-        font-weight: 500;
-      }
-      .red {
-        color: red;
-      }
-      .blue {
-        color: blue;
-      }
-    </style>
+    ```js
+    import { LitElement, html, css } from 'lit-element';
+    ```
+
+2.  **Define your styles.**
+
+    To define your styles, add a static `styles` getter to your class:
+
+    ```js
+    static get styles() {
+      return css`
+        p {
+          font-family: Roboto;
+          font-size: 16px;
+          font-weight: 500;
+        }
+        .red {
+          color: red;
+        }
+        .blue {
+          color: blue;
+        }
+      `;
+    }
     ```
 
-2. **Apply your styles.**
+3. **Apply your styles.**
 
     Use `myBool` to apply the styles conditionally. Add the following paragraph to your template:
 
     ```html
-    <p class="${this.myBool?'red':'blue'}">styled paragraph</p>
+    <p class="${this.myBool ? 'red' : 'blue' }">styled paragraph</p>
     ```
 
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 6.
+Here's the completed code for this step:
 
-{% include project.html folder="try/style/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/style/after/my-element.js %}
+```
 
 Congratulations - you've made your first element with LitElement. Next, see the [Getting&nbsp;Started](/guide/start) guide and set up LitElement locally.