Octane Tutorial Updates (ember-learn#1126)

* Merge ember-learn/super-rentals-tutorial#74 Remove alt text for decorative image --- Commit: ember-learn/super-rentals-tutorial@6062aa2 Script: https://github.com/ember-learn/super-rentals-tutorial/blob/6062aa21fe7d3f2718d994d0d4d9f4d40158db09/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592222136 * Merge ember-learn/super-rentals-tutorial#73 Copy edit pass --- Commit: ember-learn/super-rentals-tutorial@f2fcd9d Script: https://github.com/ember-learn/super-rentals-tutorial/blob/f2fcd9d9cec3b71d5185ede26953292b24da2df5/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592251594 * Use backtick for `qunit-dom` --- Commit: ember-learn/super-rentals-tutorial@7502df1 Script: https://github.com/ember-learn/super-rentals-tutorial/blob/7502df14b5267648f8442f590b709c1d9f10e181/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592593660 * Merge ember-learn/super-rentals-tutorial#77 Add summary images --- Commit: ember-learn/super-rentals-tutorial@4c1524e Script: https://github.com/ember-learn/super-rentals-tutorial/blob/4c1524ee26279bb87a31606573eadda2fd28c2b0/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592686563 * Merge ember-learn/super-rentals-tutorial#78 Fix bug in screenshot DSL parsing --- Commit: ember-learn/super-rentals-tutorial@28ebcc3 Script: https://github.com/ember-learn/super-rentals-tutorial/blob/28ebcc38de56c77d50fcf0c3bab011dc0deb575a/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592719662 * Merge ember-learn/super-rentals-tutorial#79 Use regex correctly (－‸ლ) --- Commit: ember-learn/super-rentals-tutorial@c76a874 Script: https://github.com/ember-learn/super-rentals-tutorial/blob/c76a8744e1f2fa72e261009b7ecc3757cb45f7c5/scripts/deploy.sh Logs: https://travis-ci.org/ember-learn/super-rentals-tutorial/jobs/592774277
lenoraporter · Jul 19, 2020 · 5ceacc7 · 5ceacc7
1 parent 3e2dc72
commit 5ceacc7
Show file tree

Hide file tree

Showing 17 changed files with 262 additions and 67 deletions.
diff --git a/guides/release/tutorial/00-part-1.md b/guides/release/tutorial/00-part-1.md
@@ -2,7 +2,7 @@
 
 Welcome to the Ember Tutorial!
 
-In this tutorial, we will use Ember to build a professional looking application called Super Rentals. It's a website for browsing interesting places to stay at for your next vacation. Check out the [finished app](https://super-rentals-tutorial--ember-super-rentals.netlify.com) to get a sense of the scope of the project.
+In this tutorial, we will use Ember to build an application called Super Rentals. This will be a website for browsing interesting places to stay during your next vacation. Check out the [finished app](https://super-rentals-tutorial--ember-super-rentals.netlify.com) to get a sense of the scope of the project.
 
 <img src="/screenshots/08-working-with-data/three-properties@2x.png" alt="The finished Super Rentals app" width="1024" height="1129">
 
@@ -17,6 +17,6 @@ This tutorial is structured into two parts. The first part covers the following
 - Automated testing
 - Working with server data
 
-The second part of the tutorial builds upon these concepts and take things to the next level.
+The second part of the tutorial builds upon these concepts and takes things to the next level.
 
 Let's dive right in!
diff --git a/guides/release/tutorial/01-orientation.md b/guides/release/tutorial/01-orientation.md
@@ -1,6 +1,20 @@
 <!-- Heads up! This is a generated file, do not edit directly. You can find the source at https://github.com/ember-learn/super-rentals-tutorial/blob/master/src/chapters/01-orientation.md -->
 
-You can install the latest version of _Ember CLI_ by running the following command. If you've already done this by following the [Quick Start](../../getting-started/quick-start/) guide, feel free to skip ahead!
+In this chapter, you will install _Ember CLI_, use it to generate a new Ember project, and add some basic templates and styles to your new app. By the end of this chapter, you should have a landing page with Professor Tomster's cute little face featured on it:
+
+<img src="/screenshots/01-orientation/styled-with-tomster@2x.png" alt="The Super Rentals app by the end of the chapter" width="1024" height="250">
+
+While building your landing page, you will learn about:
+
+- Installing Ember CLI
+- Creating a new Ember app with Ember CLI
+- Starting and stopping the development server
+- Editing files and live reload
+- Working with HTML, CSS and assets in an Ember app
+
+## Installing Ember CLI
+
+You can install the latest version of Ember CLI by running the following command. If you've already done this by following the [Quick Start](../../getting-started/quick-start/) guide, feel free to skip ahead!
 
 ```shell
 $ npm install -g ember-cli
@@ -17,6 +31,8 @@ os: linux x64
 
 If a version number is shown, you're ready to go.
 
+## Creating a New Ember App with Ember CLI
+
 We can create a new project using Ember CLI's `new` command. It follows the pattern `ember new <project-name>`. In our case, the project name would be `super-rentals`:
 
 ```shell
@@ -110,7 +126,9 @@ super-rentals
 6 directories, 25 files
 ```
 
-We will get to know the purposes of these files and folders as we go. For now, just know we will spend most of the time working within the `app` folder.
+We'll learn about the purposes of these files and folders as we go. For now, just know that we'll spend most of our time working within the `app` folder.
+
+## Starting and Stopping the Development Server
 
 Ember CLI comes with a lot of different commands for a variety of development tasks, such as the `ember new` command that we saw earlier. It also comes with a _development server_, which we can launch with the `ember server` command:
 
@@ -130,15 +148,17 @@ The development server is responsible for compiling our app and serving it to th
     <div class="cta-note-body">
       <div class="cta-note-heading">Zoey says...</div>
       <div class="cta-note-message">
-        <p>The <code>localhost</code> address in URL means that you can only access the development server from your local machine. If you would like to share your work to the world, you will have to <em>deploy</em> your app to the public Internet. Don't worry, we will cover that in Part 2 of the tutorial.</p>
+        <p>The <code>localhost</code> address in the URL means that you can only access the development server from your local machine. If you would like to share your work with the world, you will have to <em>deploy</em> your app to the public Internet. We'll cover how to do that in Part 2 of the tutorial.</p>
       </div>
     </div>
-    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+    <img src="/images/mascots/zoey.png" role="presentation" alt="">
   </div>
 </div>
 
 You can exit out of the development server at any time by typing `Ctrl + C` into the terminal window where `ember server` is running. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `ember server` command. We recommend having two terminal windows open: one to run the server in background, another to type other Ember CLI commands.
 
+## Editing Files and Live Reload
+
 The development server has a feature called _live reload_, which monitors your app for file changes, automatically re-compiles everything, and refreshes any open browser pages. This comes in really handy during development, so let's give that a try!
 
 As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.hbs`. Let's try to edit that file and replace it with our own content:
@@ -161,6 +181,8 @@ When you are done experimenting, go ahead and delete the `app/templates/applicat
 
 Again, if you still have your browser tab open, your tab will automatically re-render a blank page as soon as you delete the file. This reflects the fact that we no longer have an application template in our app.
 
+## Working with HTML, CSS and Assets in an Ember App
+
 Create a `app/templates/index.hbs` file and paste the following markup.
 
 ```handlebars { data-filename="app/templates/index.hbs" }
@@ -179,9 +201,9 @@ After saving the file, your browser tab should automatically refresh, showing us
 
 <img src="/screenshots/01-orientation/unstyled@2x.png" alt="Welcome to Super Rentals! (unstyled)" width="1024" height="250">
 
-Before we do anything else, let's add some styling to our app. We spend enough time staring at the computer screen as it is, we must protect our eyesight against unstyled markup!
+Before we do anything else, let's add some styling to our app. We spend enough time staring at the computer screen as it is, so we must protect our eyesight against unstyled markup!
 
-Fortunately, our designer sent us some CSS for us to use, so we can just go ahead <a href="/downloads/style.css" download="app.css">download the stylesheet file</a> and copy it into `app/styles/app.css`. This file has all the styles we need for building the rest of the app.
+Fortunately, our designer sent us some CSS to use, so we can <a href="/downloads/style.css" download="app.css">download the stylesheet file</a> and copy it into `app/styles/app.css`. This file has all the styles we need for building the rest of the app.
 
 ```css { data-filename="app/styles/app.css" }
 @import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic);
@@ -218,7 +240,7 @@ body {
 /* ...snip... */
 ```
 
-If you are familiar with CSS, feel free to customize them to your liking! Just keep in mind that you may see some visual differences going forward, if you choose to do so.
+If you are familiar with CSS, feel free to customize these styles to your liking! Just keep in mind that you may see some visual differences going forward, should you choose to do so.
 
 When you are ready, save the CSS file; our trusty development server should pick it up and refresh our page right away. No more unstyled content!
 

diff --git a/guides/release/tutorial/02-building-pages.md b/guides/release/tutorial/02-building-pages.md
@@ -1,5 +1,23 @@
 <!-- Heads up! This is a generated file, do not edit directly. You can find the source at https://github.com/ember-learn/super-rentals-tutorial/blob/master/src/chapters/02-building-pages.md -->
 
+In this chapter, you will build the first few pages of your Ember app and set up links between them. By the end of this chapter, you should have two new pages – an about page and a contact page. These pages will be linked to from your landing page:
+
+<img src="/screenshots/02-building-pages/index-with-link@2x.png" alt="The Super Rentals app (homepage) by the end of the chapter" width="1024" height="250">
+
+<img src="/screenshots/02-building-pages/about-with-link@2x.png" alt="The Super Rentals app (about page) by the end of the chapter" width="1024" height="274">
+
+<img src="/screenshots/02-building-pages/contact-with-link@2x.png" alt="The Super Rentals app (contact page) by the end of the chapter" width="1024" height="444">
+
+While building these pages, you will learn about:
+
+- Defining routes
+- Using route templates
+- Customizing URLs
+- Linking pages with the `<LinkTo>` component
+- Passing arguments and attributes to components
+
+## Defining Routes
+
 With our [first page](../01-orientation/) down, let's add another one!
 
 This time, we would like the page to be served on the `/about` URL. In order to do this, we will need to tell Ember about our plan to add a page at that location. Otherwise, Ember will think we have visited an invalid URL!
@@ -22,6 +40,8 @@ Router.map(function() {
 
 This adds a _route_ named "about", which is served at the `/about` URL by default.
 
+## Using Route Templates
+
 With that in place, we can create a new `app/templates/about.hbs` template with the following content:
 
 ```handlebars { data-filename="app/templates/about.hbs" }
@@ -42,6 +62,8 @@ To see this in action, navigate to `http://localhost:4200/about`.
 
 With that, our second page is done!
 
+## Defining Routes with Custom Paths
+
 We're on a roll! While we're at it, let's add our third page. This time, things are a little bit different. Everyone at the company calls this the "contact" page. However, the old website we are replacing already has a similar page, which is served at the legacy URL `/getting-in-touch`.
 
 We want to keep the existing URLs for the new website, but `getting-in-touch` is a mouthful to type and say out loud all the time! Fortunately, we can have the best of the both worlds:
@@ -91,6 +113,8 @@ Once you have added the route and the template above, we should have the new pag
 
 <img src="/screenshots/02-building-pages/contact@2x.png" alt="Contact page" width="1024" height="394">
 
+## Linking Pages with the `<LinkTo>` Component
+
 We just put so much effort into making these pages, we need to make sure people can find them! The way we do that on the web is by using _hyperlinks_, or _links_ for short.
 
 Since Ember offers great support for URLs out-of-the-box, we _could_ just link our pages together using the `<a>` tag with the appropriate `href`. However, clicking on those links would require the browser to make a _full-page refresh_, which means that it would have to make a trip back to the server to fetch the page, and then load everything from scratch again.
@@ -146,7 +170,7 @@ There is quite a bit going on here, so let's break it down.
 
 We have a lot more to say about components later, but for now, you can think of them as a way to provide _custom tags_ to supplement the built-in ones that came with the browser.
 
-The `@route=...` part is how we pass _arguments_ into the component. Here, we use this to specify _which_ route we want to link to. Note that this should be the _name_ of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.
+The `@route=...` part is how we pass _arguments_ into the component. Here, we use this argument to specify _which_ route we want to link to. (Note that this should be the _name_ of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.)
 
 In addition to arguments, components can also take the usual HTML attributes as well. In our example, we added a `"button"` class for styling purposes, but we could also specify other attributes as we see fit, such as the ARIA `role` attribute. These are passed without the `@` symbol (`class=...` as opposed to `@class=...`), so that Ember will know they are just regular HTML attributes.
 
@@ -164,4 +188,4 @@ However, when clicking on one of these special links, Ember will intercept the c
 
 We will learn more about how all of this works soon. In the meantime, go ahead and click on the link in the browser. Did you notice how snappy that was?
 
-Congratulations, you have completed your training as a master page-crafter!
+Congratulations, you are well on your way to becoming a master page-crafter!