ember-learn · MinThaMie · Sep 9, 2025 · Sep 9, 2025
diff --git a/src/markdown/tutorial/part-1/01-orientation.md b/src/markdown/tutorial/part-1/01-orientation.md
@@ -46,12 +46,12 @@ Hack: make an empty package.json to convince ember-cli we are really not in an E
 # pretend we are running NPM.
 
 #[cfg(all(ci, unix))]
-#[display(ember new super-rentals --lang en --strict)]
-ember new super-rentals --lang en --strict --pnpm \
+#[display(ember new super-rentals --lang en)]
+ember new super-rentals --lang en --pnpm \
   | awk '{ gsub("Pnpm", "npm"); gsub("pnpm", "npm"); print }'
 
 #[cfg(not(all(ci, unix)))]
-ember new super-rentals --lang en --strict --pnpm
+ember new super-rentals --lang en --pnpm
 ```
 
 ```run:command hidden=true
@@ -196,7 +196,7 @@ del package.json
 
 ```run:file:patch hidden=true cwd=super-rentals filename=.prettierignore
 @@ -1 +1,2 @@
-+**/*.gjs
++**/*.hbs
  # unconventional js
 
 ```
@@ -277,54 +277,48 @@ You can exit out of the development server at any time by typing `Ctrl + C` into
 
 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.gjs`. Let's try to edit that file and replace it with our own content:
+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:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/application.gjs
-@@ -1,12 +1,3 @@
--import pageTitle from 'ember-page-title/helpers/page-title';
--import WelcomePage from 'ember-welcome-page/components/welcome-page';
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/application.hbs
+@@ -1,7 +1 @@
+-{{page-title "SuperRentals"}}
 -
- <template>
--  {{pageTitle "SuperRentals"}}
+-{{outlet}}
 -
--  {{outlet}}
--
--  {{! The following component displays Ember's default welcome message. }}
--  <WelcomePage />
--  {{! Feel free to remove this! }}
-+  Hello World!!!
- </template>
- ```
+-{{! The following component displays Ember's default welcome message. }}
+-<WelcomePage />
+-{{! Feel free to remove this! }}
+\ No newline at end of file
++Hello World!!!
+```
 
 Soon after saving the file, your browser should automatically refresh and render our greetings to the world. Neat!
 
 ```run:screenshot width=1024 height=250 retina=true filename=hello-world.png alt="Hello World!!!"
 visit http://localhost:4200/?deterministic
 ```
 
-When you are done experimenting, go ahead and delete the `app/templates/application.gjs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
+When you are done experimenting, go ahead and delete the `app/templates/application.hbs` file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
 
 ```run:command hidden=true cwd=super-rentals
-git rm -f app/templates/application.gjs
+git rm -f app/templates/application.hbs
 ```
 
 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.gjs` file and paste the following markup.
+Create a `app/templates/index.hbs` file and paste the following markup.
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>Welcome to Super Rentals!</h2>
-    <p>We hope you find exactly what you're looking for in a place to stay.</p>
-  </div>
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Welcome to Super Rentals!</h2>
+  <p>We hope you find exactly what you're looking for in a place to stay.</p>
+</div>
 ```
 
-If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML wrapped in a `<template>` tag. If you are already familiar with HTML, you should feel right at home here.
+If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML. If you are already familiar with HTML, you should feel right at home here.
 
 Of course, unlike HTML, Ember templates can do a lot more than just displaying static content. We will see that in action soon.
 
@@ -335,7 +329,7 @@ visit http://localhost:4200/?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/index.gjs
+git add app/templates/index.hbs
 ```
 
 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!

diff --git a/src/markdown/tutorial/part-1/02-building-pages.md b/src/markdown/tutorial/part-1/02-building-pages.md
@@ -45,20 +45,18 @@ git add app/router.js
 
 ## Using Route Templates
 
-With that in place, we can create a new `app/templates/about.gjs` template with the following content:
+With that in place, we can create a new `app/templates/about.hbs` template with the following content:
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>About Super Rentals</h2>
-    <p>
-      The Super Rentals website is a delightful project created to explore Ember.
-      By building a property rental site, we can simultaneously imagine traveling
-      AND building Ember applications.
-    </p>
-  </div>
-</template>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>About Super Rentals</h2>
+  <p>
+    The Super Rentals website is a delightful project created to explore Ember.
+    By building a property rental site, we can simultaneously imagine traveling
+    AND building Ember applications.
+  </p>
+</div>
 ```
 
 To see this in action, navigate to `http://localhost:4200/about`.
@@ -68,7 +66,7 @@ visit http://localhost:4200/about?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/about.gjs
+git add app/templates/about.hbs
 ```
 
 With that, our second page is done!
@@ -92,28 +90,26 @@ Here, we added the `contact` route, but explicitly specified a path for the rout
 git add app/router.js
 ```
 
-Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file:
+Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file:
 
-```run:file:create lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-<template>
-  <div class="jumbo">
-    <div class="right tomster"></div>
-    <h2>Contact Us</h2>
+```run:file:create lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+<div class="jumbo">
+  <div class="right tomster"></div>
+  <h2>Contact Us</h2>
+  <p>
+    Super Rentals Representatives would love to help you<br>
+    choose a destination or answer any questions you may have.
+  </p>
+  <address>
+    Super Rentals HQ
     <p>
-      Super Rentals Representatives would love to help you<br>
-      choose a destination or answer any questions you may have.
+      1212 Test Address Avenue<br>
+      Testington, OR 97233
     </p>
-    <address>
-      Super Rentals HQ
-      <p>
-        1212 Test Address Avenue<br>
-        Testington, OR 97233
-      </p>
-      <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
-      <a href="mailto:[email protected]">[email protected]</a>
-    </address>
-  </div>
-</template>
+    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
+    <a href="mailto:[email protected]">[email protected]</a>
+  </address>
+</div>
 ```
 
 Ember comes with strong *[conventions][TODO: link to conventions]* and sensible defaults&mdash;if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs!
@@ -125,7 +121,7 @@ visit http://localhost:4200/getting-in-touch?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/contact.gjs
+git add app/templates/contact.hbs
 ```
 
 ## Linking Pages with the `<LinkTo>` Component
@@ -136,43 +132,30 @@ Since Ember offers great support for URLs out-of-the-box, we *could* just link o
 
 With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/index.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -5,2 +7,3 @@
-     <p>We hope you find exactly what you're looking for in a place to stay.</p>
-+    <LinkTo @route="about" class="button">About Us</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/index.hbs
+@@ -4,2 +4,3 @@
+   <p>We hope you find exactly what you're looking for in a place to stay.</p>
++  <LinkTo @route="about" class="button">About Us</LinkTo>
+ </div>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/about.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -9,2 +11,3 @@
-     </p>
-+    <LinkTo @route="contact" class="button">Contact Us</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/about.hbs
+@@ -8,2 +8,3 @@
+   </p>
++  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
+ </div>
 ```
 
-```run:file:patch lang=gjs cwd=super-rentals filename=app/templates/contact.gjs
-@@ -1 +1,3 @@
-+import { LinkTo } from '@ember/routing'; 
-+
- <template>
-@@ -17,2 +19,3 @@
-     </address>
-+    <LinkTo @route="about" class="button">About</LinkTo>
-   </div>
+```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/contact.hbs
+@@ -16,2 +16,3 @@
+   </address>
++  <LinkTo @route="about" class="button">About</LinkTo>
+ </div>
 ```
 
-
 There is quite a bit going on here, so let's break it down.
 
-`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.
+`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember&mdash;you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
 
 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][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
 
@@ -199,9 +182,9 @@ visit http://localhost:4200/getting-in-touch?deterministic
 ```
 
 ```run:command hidden=true cwd=super-rentals
-git add app/templates/index.gjs
-git add app/templates/about.gjs
-git add app/templates/contact.gjs
+git add app/templates/index.hbs
+git add app/templates/about.hbs
+git add app/templates/contact.hbs
 ```
 
 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?

diff --git a/src/markdown/tutorial/part-1/03-automated-testing.md b/src/markdown/tutorial/part-1/03-automated-testing.md
@@ -120,17 +120,13 @@ wait  #qunit-banner.qunit-pass
 
 It happens really quickly though&mdash;blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it in action. I told you the robot has really, really fast hands!
 
-As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
+As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
 
-```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.gjs
-@@ -1,3 +1 @@
--import { LinkTo } from '@ember/routing'; 
--
- <template>
-@@ -7,3 +5,2 @@ import { LinkTo } from '@ember/routing';
-     <p>We hope you find exactly what you're looking for in a place to stay.</p>
--    <LinkTo @route="about" class="button">About Us</LinkTo>
-   </div>
+```run:file:patch hidden=true cwd=super-rentals filename=app/templates/index.hbs
+@@ -4,3 +4,2 @@
+   <p>We hope you find exactly what you're looking for in a place to stay.</p>
+-  <LinkTo @route="about" class="button">About Us</LinkTo>
+ </div>
 ```
 
 ```run:screenshot width=1024 height=768 retina=true filename=fail.png alt="A failing test"
@@ -141,7 +137,7 @@ wait  #qunit-banner.qunit-fail
 Don't forget to put that line back in when you are done!
 
 ```run:command hidden=true cwd=super-rentals
-git checkout app/templates/index.gjs
+git checkout app/templates/index.hbs
 ember test --path dist
 ```