raspberrypilearning · martinohanlon · Oct 29, 2018 · Aug 2, 2018 · Aug 2, 2018 · Aug 2, 2018
diff --git a/en/images/flask-app-link.png b/en/images/flask-app-link.png
diff --git a/en/images/flask-app-with-colour.png b/en/images/flask-app-with-colour.png
diff --git a/en/images/flask-template.png b/en/images/flask-template.png
diff --git a/en/images/idle-css.png b/en/images/idle-css.png
diff --git a/en/images/idle-flask.png b/en/images/idle-flask.png
diff --git a/en/images/idle-html.png b/en/images/idle-html.png
diff --git a/en/images/pi-run-web-app.png b/en/images/pi-run-web-app.png
diff --git a/en/images/showcase.png b/en/images/showcase.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -10,20 +10,19 @@ ingredient: false
 copyedit: true
 curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
 interests: ''
-technologies: raspberry-pi, python, html-css-javascript
+technologies: python, html-css-javascript
 site_areas: projects
 hardware: ''
 software: python, html-css-javascript
-version: 4
-last_tested: 2017-01-01
+version: 4.1
+last_tested: 2018-08-02
 steps: 
 - title: Introduction
-- title: What you will need
-- title: Installing Flask
-- title: Building a basic Flask web application
-- title: Adding a new route to your web app
-- title: Add HTML templates to your web app
-- title: Adding colour to the web page with CSS
-- title: Adding dynamic content to a view
-- title: Browsing on other devices
+- title: Build a Flask website
+- title: Add a new page
+- title: Using HTML
+- title: "Challenge: Add a HTML template to your 2nd page"
+  challenge: true
+- title: Add colour with CSS
+- title: Adding dynamic content
 - title: What next?
diff --git a/en/solutions/webapp/app.py b/en/solutions/webapp/app.py
@@ -0,0 +1,18 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/cakes')
+def cakes():
+    return render_template('cakes.html')
+
+@app.route('/hello/<name>')
+def hello(name):
+    return render_template('page.html', name=name)
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')
diff --git a/en/solutions/webapp/static/style.css b/en/solutions/webapp/static/style.css
@@ -0,0 +1,4 @@
+body {
+    background: red;
+    color: yellow;
+}
diff --git a/en/solutions/webapp/templates/cakes.html b/en/solutions/webapp/templates/cakes.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+<h1>Yummy cakes!</h1>
+</body>
+</html>
diff --git a/en/solutions/webapp/templates/index.html b/en/solutions/webapp/templates/index.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+<link rel="stylesheet" href='/static/style.css' />
+</head>
+<body>
+<h1>My website</h1>
+<a href="/hello/paul">Hi Paul</a>
+</body>
+</html>
diff --git a/en/solutions/webapp/templates/page.html b/en/solutions/webapp/templates/page.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+<h1>Hello {{ name }}!</h1>
+</body>
+</html>
diff --git a/en/step_1.md b/en/step_1.md
@@ -1,18 +1,46 @@
-## What you will make
-Install the lightweight web framework Flask and set up a basic web server with different pages using Python, HTML, and CSS.
+## Introduction
 
-## What you will learn
- By following this resource and setting up a Flask web server you will learn:
+### What you will make
 
- - How to install software on your Raspberry Pi
- - How to install pip and Flask to create a Python-powered web server
- - How to build a basic web app with Flask and run it as a local website on your Raspberry Pi
- - How routes are used to map URLs to web pages
- - How to use HTML to create simple web page templates
- - How to use CSS to control the appearance of HTML content
- - How to configure Flask and make your website accessible to other devices on your local network
+You'll set up a web server and create a simple website using Flask, Python, and HTML/CSS.
+
+![flask web app](images/showcase.png)
+
+The web server will be able to react to the user inputting dynamic content, turning your website into a web application capable of doing more than just showing static information.
+
+--- collapse ---
+
+---
+title: What you will need
+---
+
+### Hardware
+
++ Computer capable of running Python 3
+
+### Software
+
++ [Python 3](https://www.python.org/downloads/)
+
+--- /collapse ---
+
+--- collapse ---
+
+---
+title: What you will learn
+---
+
+- How to install Python modules using pip
+- How to build a basic web app with Python and Flask
 
 This resource covers elements from the following strands of the [Raspberry Pi Digital Making Curriculum](https://www.raspberrypi.org/curriculum/):
+- [Apply abstraction and decomposition to solve more complex problems](https://curriculum.raspberrypi.org/programming/developer/)
+
+--- /collapse ---
+
+--- no-print ---
+
+If you need to print this project, please use the [printer-friendly version](https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/print){:target="_blank"}.
 
-- [Combine programming constructs to solve a problem](https://www.raspberrypi.org/curriculum/programming/builder)
+--- /no-print ---
 
diff --git a/en/step_10.md b/en/step_10.md
diff --git a/en/step_2.md b/en/step_2.md
@@ -1,5 +1,120 @@
-## What you will need
+## Build a Flask website
 
-### Hardware
+You're going to set up a basic web application with Flask and Python.
 
-+ A Raspberry Pi computer
+If you don't already have Python 3 on your computer you will need to download and install it.
+
+--- task ---
+
+[Download Python 3](https://www.python.org/downloads/) and install it.
+
+[[[generic-python-install-python3]]]
+
+--- /task ---
+
+You will also need to install the Flask package. 
+
+--- task ---
+
+Install the `flask` Python module using `pip`. Make sure you are connected to the internet before you start.
+
+[[[generic-python-installing-with-pip]]]
+
+--- /task ---
+
+Once Flask is installed, you can create your web application.
+
+--- task ---
+
+Open a terminal or command prompt window, and make a new directory called `webapp` for your project.
+
+```bash
+mkdir webapp
+```
+
+--- /task ---
+
+--- task ---
+
+Use the change directory command `cd` to open the new directory.
+
+```bash
+cd webapp
+```
+--- /task ---
+
+--- task ---
+
+Open Python 3 IDLE.
+
+--- /task ---
+
+--- task ---
+
+Create a new file by clicking **File** and then **New file**, and save it as `app.py` inside the `webapp` folder you just created.
+
+--- /task ---
+
+--- task ---
+
+Now enter the following lines of code into the blank `app.py` window:
+
+```python
+from flask import Flask
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return 'Hello world'
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')
+```
+
+You will explore this code in more detail in the next step, but for now let's keep it simple and make sure everything works.
+
+![idle](images/idle-flask.png)
+
+--- /task ---
+
+--- task ---
+
+Save your changes by clicking **File** and then **Save**, or by pressing <kbd>Ctrl</kbd> and <kbd>S</kbd>. 
+
+--- /task ---
+
+You will need to run your web app from the terminal/command prompt window you opened earlier.
+
+--- task ---
+
+### On Raspberry Pi/Linux/macOS
+
+Enter the command `python3 app.py` into the terminal window.
+
+### On Windows
+
+Enter the command `python app.py` into the command prompt window.
+
+--- /task ---
+
+If everything has been set up correctly, you should see an output similar to this:
+
+```
+ * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
+ * Restarting with stat
+ * Debugger is active!
+ * Debugger pin code: ***-***-***
+```
+
+![pi run web app](images/pi-run-web-app.png)
+
+--- task ---
+
+Open your web browser and enter the URL `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`.
+
+**Note:** `127.0.0.1` means 'home', i.e. this computer. `:5000` means 'port 5000', which is the port the web server is running on.
+
+--- /task ---
+
+![Flask Hello world](images/flask-hello-world.png)
diff --git a/en/step_3.md b/en/step_3.md
@@ -1,14 +1,77 @@
-## Installing Flask
+## Add a new page
 
-First you're going to install the Flask package. Make sure you are connected to the internet, either by Ethernet cable or WiFi before you start.
+Now you're going to add a new page to your web app by creating a new **route**.
 
-- Start by opening a Terminal window from the taskbar or applications menu:
+In a web application, a route is a certain path into your website, determined by the URL the user types into their web browser's address bar. It's up to you which routes are enabled and what each of them does.
 
-    ![Open Terminal window](images/open-terminal.png)
+In the 'Hello world' example, we used a single route:
 
-- Now install Flask by typing:
+```python
+@app.route('/')
+def index():
+    return 'Hello world'
+```
 
-    ```bash
-    sudo apt-get install python3-flask
-    ```
+This route is made up of three parts:
 
+- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so `http://127.0.0.1:5000/`
+- `def index()`: this is the name you give to the route; this one is called `index`, because it's the index (or home page) of the website
+- `return 'Hello world'`: this is the content of the web page, which is returned when the user goes to this URL
+
+The 2nd part of the `app.py` code runs the web server and your app:
+
+```python
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')
+```
+
+**Note:** the `host='0.0.0.0'` means the web app will be accessible to any device on the network.
+
+The following instructions will show how to create a new page and route called 'cakes', but feel free to change this name and content to be whatever you want.
+
+--- task ---
+
+Create a new route by adding these lines of code below the first route:
+
+```python
+@app.route('/cakes')
+def cakes():
+    return 'Yummy cakes!'
+```
+
+--- /task ---
+
+--- collapse ---
+
+---
+title: Complete code
+---
+
+Your complete code should now look similar to this:
+
+```python
+from flask import Flask
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+    return 'Yummy cakes!'
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')
+```
+
+--- /collapse ---
+
+--- task ---
+
+Save your code and navigate to your 'cakes' page in the browser at `127.0.0.1:5000/cakes`. You should see a web page with the text "Yummy cakes!" on it:
+
+![Yummy Cakes](images/flask-cakes.png)
+
+--- /task ---