More section nesting, xkcd typo fixes

docs/xkcd_extension_tutorial.md

@@ -19,7 +19,9 @@ By working through this tutorial, you'll learn:
 
 Sound like fun? Excellent. Here we go!
 
-## Install conda using miniconda
+## Setup a development environment
+
+### Install conda using miniconda
 
 Start by opening your web browser and downloading the latest Python 3.x [Miniconda installer](https://conda.io/miniconda.html) to your home directory. When the download completes, open a terminal and create a root conda environment by running this command.
 
@@ -33,7 +35,7 @@ Now activate the conda environment you just created so that you can run the `con
 source ~/miniconda/bin/activate
 ```
 
-## Install NodeJS, JupyterLab, etc. in a conda environment
+### Install NodeJS, JupyterLab, etc. in a conda environment
 
 Next create a conda environment that includes:
 
@@ -56,7 +58,9 @@ source ~/miniconda/bin/activate jupyterlab-ext
 
 Note: You'll need to run the command above in each new terminal you open before you can work with the tools you installed in the `jupyterlab-ext` environment.
 
-## Create an extension from the cookiecutter
+## Create an extension project
+
+### Initialize the project from a cookiecutter
 
 Next use cookiecutter to create a new project for your extension.
 
@@ -86,7 +90,7 @@ You should see a list like the following.
 README.md     package.json  src           tsconfig.json
 ```
 
-## Build and link the extension for development
+### Build and link the extension for development
 
 Your new extension project has enough code in it to see it working in your JupyterLab. Run the following commands to install the initial project dependencies and link it to the JupyterLab environment.
 
@@ -137,7 +141,7 @@ af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
     + 1125 hidden modules
 ```
 
-## See the initial extension in action
+### See the initial extension in action
 
 The initial extension code logs a message to JavaScript console in your browser when JupyterLab loads. You should check that the extension is working properly before modifying it.
 
@@ -157,19 +161,21 @@ You should see a message that says `JupyterLab extension jupyterlab_xkcd is acti
 
 Note: Leave the terminal running the `jupyter lab` command open. You don't need to restart the JupyterLab server in order to test your extension code changes as you work through this tutorial.
 
-## Commit what you have to git
+### Commit what you have to git
 
 Run the following commands in your `jupyterlab_xkcd` folder to initialize it as a git repository and commit the current code.
 
 ```bash
 git init
 git add .
-git commit -m 'Seed xckd project from cookiecutter'
+git commit -m 'Seed xkcd project from cookiecutter'
 ```
 
 Note: This step is not technically necessary, but it is good practice to track changes in version control system in case you need to rollback to an earlier version or want to collaborate with others. For example, you can compare your work throughout this tutorial with the commits in a reference version of `jupyterlab_xkcd` on GitHub at https://github.com/parente/jupyterlab_xkcd.
 
-## Add a command to show the xckd panel
+## Add an xkcd widget
+
+### Show an empty panel
 
 The *command palette* is the primary view of all commands available to you in JupyterLab. For your first addition, you're going to add a *Random xkcd comic* command to the palette and get it to show an *xkcd* tab panel when invoked.
 
@@ -265,7 +271,7 @@ git add .
 git commit -m 'Show xkcd panel on command'
 ```
 
-## Show a single comic in the panel
+### Show a comic in the panel
 
 You've got an empty panel. It's time to add a comic to it. Go back to your code editor. Add the following new import near the top of the file:
 
@@ -306,7 +312,9 @@ git add .
 git commit -m 'Show a comic in the panel'
 ```
 
-## Center the comic and add attribution
+## Improve the widget behavior
+
+### Center the comic and add attribution
 
 Create a `style` subfolder in the root of your extension project directory. Then create and open a `style/index.css` file for editing. Add the following lines to it.
 
@@ -387,7 +395,7 @@ git add .
 git commit -m 'Add styling, attribution'
 ```
 
-## Show a new comic each time the command runs
+### Show a new comic on demand
 
 The `activate` function has grown quite long, and there's still more functionality to add. You should refactor the code into two separate parts:
 
@@ -493,7 +501,7 @@ git add .
 git commit -m 'Refactor, refresh comic'
 ```
 
-## Restore panel state when the browser refreshes
+### Restore panel state when the browser refreshes
 
 You may notice that every time you refresh your browser tab, the xkcd panel disappears, even if it was open before you refreshed. Other open panels, like notebooks, terminals, and text editors, all reappear and return to where you left them in the panel layout. You can make your extension behave this way too.
 
@@ -604,7 +612,7 @@ git commit -m 'Restore panel state'
 
 Congrats! You've implemented all of the behaviors laid out at the start of this tutorial. Now how about sharing it with the world?
 
-## Publish the extension to npmjs.org
+## Publish your extension to npmjs.org
 
 npm is both a JavaScript package manager and the de facto registry for JavaScript software. You can [sign up for an account on the npmjs.com site](https://www.npmjs.com/signup) or create an account from the command line by running `npm adduser` and entering values when prompted. Create an account now if you do not already have one. If you already have an account, login by running `npm login` and answering the prompts.
 
@@ -642,7 +650,7 @@ jupyter lab
 
 You should see a fresh JupyterLab browser tab appear. When it does, execute the *Random xkcd comic* command to prove that your extension works when installed from npm.
 
-## Ideas for further learning
+## Learn more
 
 You've completed the tutorial. Nicely done! If you want to keep learning, here are some suggestions about what to try next: