Edit tutorial for clarity

docs/source/tutorials/intro.md

@@ -4,12 +4,14 @@
 This tutorial is intended to familiarize you with some basic concepts around Django Unicorn. If you have little to no prior experience with Django or other web frameworks, this is a good place to start. However, having basic knowledge of Python and web development concepts will prove helpful.
 ```
 
-The goal of this tutorial is to develop a Meal Plan application. With Django Unicorn, you will be able to create "Meals" and add them without refreshing the page. You will also be able to search dynamically for saved Meals.
+The goal of this tutorial is to develop a Meal Plan application. With Django Unicorn, you will be able to create "Meals" and add them without refreshing the page. This will include basic form validation, as well as a way to clear your list automatically.
+
+Let's dive in!
 
 ```{toctree}
 mealplan/django-app
 mealplan/unicorn-functionality
 mealplan/unicorn-advanced
+mealplan/finished-app
 mealplan/summary
-mealplan/full-text-tutorial.md
 ```

docs/source/tutorials/mealplan/django-app.md

@@ -2,7 +2,9 @@
 
 ## Installation
 
-Note: You must have Python installed before starting.
+```{note}
+You must have Python installed before starting.
+```
 
 To start with, create a new directory in your terminal where you will build your project. Once you are in this new directory, create a virtual environment and then activate it.
 
@@ -24,6 +26,10 @@ Now install Django and Django Unicorn.
 > python -m pip install django-unicorn
 ```
 
+```{note}
+You can [use other package managers](../../installation.md) for installation as well. 
+```
+
 Now you're ready to create a new Django project. This command will populate your directory with your Django project files and directories.
 
 ```shell
@@ -129,7 +135,7 @@ Running migrations:
   Applying sessions.0001_initial... OK
 ```
 
-So let's create a model for our meals.
+Next, let's navigate to the `mealplan/models.py` file and create a model.
 
 ```python
 # mealplan/models.py
@@ -165,13 +171,15 @@ And then, to apply those changes to the database:
 python manage.py migrate mealplan
 ```
 
-Note: Any time you add or make changes to your models, you need to run these commands to make sure the changes apply to the database.
+```{note}
+Any time you add or make changes to your models, you need to run these commands to make sure the changes apply to the database.
+```
 
 ## URLs
 
 Before we create a page that we can actually _see_, we need to configure the URLs that will lead to our (eventual) content.
 
-Django automatically creates a URL leading to an "Admin" section (you can read more about that in the official Django tutorial).
+Django automatically creates a URL leading to an "Admin" section (you can [read more about that in the official Django tutorial](https://docs.djangoproject.com/en/5.1/intro/tutorial02/#introducing-the-django-admin)).
 
 ```python
 # app/urls.py
@@ -184,7 +192,7 @@ urlpatterns = [
 ]
 ```
 
-We want to go ahead and add a pattern that will lead to any URLs defined in your `mealplan` app. Also, Django Unicorn utilizes its own pattern which needs to be added also.
+We want to go ahead and add a pattern that will lead to any URLs defined in your `mealplan` app. Also, Django Unicorn utilizes its own pattern which needs to be added.
 
 ```python
 # app/urls.py
@@ -249,7 +257,7 @@ Here, we're trying to render a template called `meals.html` (it doesn't exist ye
 
 ## Templates
 
-In Django, there is a naming convention that organizes how _views_ link up to templates, and it relies on a certain directory structure. To create this first template, we need to add two directories and a file like so:
+Django organizes how _views_ link up to templates based on a certain directory structure and naming convention. To accommodate for this, we need to add two directories and a file like so:
 
 ```
 mealplan/  
@@ -266,7 +274,7 @@ mealplan/
 ┗ __init__.py
 ```
 
-Django templates allow you to insert Python into your HTML. Let's build a quick template that will show us a list of all our meals (hint: we don't have any saved yet!)
+Django templates allow you to insert Python into your HTML. Let's build a quick HTML file that will show us a list of all our meals (hint: we don't have any saved yet!)
 
 :::{code} html
 :force: true
@@ -313,7 +321,7 @@ Change the `<div>` section to look like this:
 
 ...
 
-<main>
+<div>
 	{% if not meals %}
 		<p>No meals have been prepared yet!</p>
 	{% else %}
@@ -324,7 +332,7 @@ Change the `<div>` section to look like this:
 	</ul>
 	{% endif %}
 	<button>Add a meal</button>
-</main>
+</div>
 
 ...
 

docs/source/tutorials/mealplan/finished-app.md

@@ -0,0 +1,47 @@
+# Finished App
+
+If you have followed along, your app should be ready to run!
+
+However, in case you missed something, you can reference the [final code for this tutorial](https://github.com/tataraba/django-unicorn-tutorial-app) on GitHub.
+
+```{note}
+The example on GitHub also registered the `Meal` in the `mealplan/admin.py` module, making it available in the Django Admin section. This allows you to create/delete Meals by creating and logging in to your site's admin section. You can read more about the [admin section on the Django documentation](https://docs.djangoproject.com/en/5.0/intro/tutorial02/#introducing-the-django-admin). 
+```
+
+By this point, you should be able to run your app with the Django command.
+
+```shell
+python manage.py runserver
+```
+
+You can now go to [http://127.0.0.1:8000](http://127.0.0.1:8000) on your browser to see your app in action.
+
+When you first open the app, it should look something like this:
+
+```{image} img/mealplan-home.png
+:alt: Browser displaying Meal Plan app with Add a Meal button
+:class: bg-primary
+:width: 400px
+:align: center
+```
+
+When you click to "Add a Meal," you will then see the form populate below.
+
+```{image} img/mealplan-form.png
+:alt: Browser displaying Meal Plan app with input elements for Meal
+:class: bg-primary
+:width: 400px
+:align: center
+```
+
+
+And finally, after adding a few meals, you should see a list of them populate, as well as a button to _clear_ the list and start over.
+
+```{image} img/mealplan-saved.png
+:alt: Browser displaying Meal Plan app with two listed items
+:class: bg-primary
+:width: 400px
+:align: center
+```
+
+Give it a try!