diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..572960e
Binary files /dev/null and b/.DS_Store differ
diff --git a/en/.DS_Store b/en/.DS_Store
new file mode 100644
index 0000000..c70f6a6
Binary files /dev/null and b/en/.DS_Store differ
diff --git a/en/images/.DS_Store b/en/images/.DS_Store
new file mode 100644
index 0000000..e18cbd2
Binary files /dev/null and b/en/images/.DS_Store differ
diff --git a/en/images/Python-Webserver-with-Flask-TILE.png b/en/images/Python-Webserver-with-Flask-TILE.png
deleted file mode 100644
index 34679e7..0000000
Binary files a/en/images/Python-Webserver-with-Flask-TILE.png and /dev/null differ
diff --git a/en/images/flask-app-link.png b/en/images/flask-app-link.png
index 52b2334..c75fee1 100644
Binary files a/en/images/flask-app-link.png and b/en/images/flask-app-link.png differ
diff --git a/en/images/flask-app-with-colour.png b/en/images/flask-app-with-colour.png
index 84d625e..11aee4b 100644
Binary files a/en/images/flask-app-with-colour.png and b/en/images/flask-app-with-colour.png differ
diff --git a/en/images/flask-cakes.png b/en/images/flask-cakes.png
index 7641f1b..2232934 100644
Binary files a/en/images/flask-cakes.png and b/en/images/flask-cakes.png differ
diff --git a/en/images/flask-hello-paul.png b/en/images/flask-hello-paul.png
index 8cb68dd..e6b519e 100644
Binary files a/en/images/flask-hello-paul.png and b/en/images/flask-hello-paul.png differ
diff --git a/en/images/flask-hello-world.png b/en/images/flask-hello-world.png
index 0c1152c..fa6c410 100644
Binary files a/en/images/flask-hello-world.png and b/en/images/flask-hello-world.png differ
diff --git a/en/images/flask-on-android.png b/en/images/flask-on-android.png
deleted file mode 100644
index 8933425..0000000
Binary files a/en/images/flask-on-android.png and /dev/null differ
diff --git a/en/images/flask-template.png b/en/images/flask-template.png
index aefdb02..a62457e 100644
Binary files a/en/images/flask-template.png and b/en/images/flask-template.png differ
diff --git a/en/images/html-file.png b/en/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/en/images/html-file.png differ
diff --git a/en/images/idle-flask.png b/en/images/idle-flask.png
deleted file mode 100644
index e936352..0000000
Binary files a/en/images/idle-flask.png and /dev/null differ
diff --git a/en/images/pi-run-web-app.png b/en/images/pi-run-web-app.png
index 860d444..6973df6 100644
Binary files a/en/images/pi-run-web-app.png and b/en/images/pi-run-web-app.png differ
diff --git a/en/images/showcase.png b/en/images/showcase.png
deleted file mode 100644
index 93ae577..0000000
Binary files a/en/images/showcase.png and /dev/null differ
diff --git a/en/images/solution.png b/en/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/en/images/solution.png differ
diff --git a/en/meta.yml b/en/meta.yml
index 3b14c57..f212c59 100644
--- a/en/meta.yml
+++ b/en/meta.yml
@@ -18,16 +18,18 @@ software: python, html-css-javascript
version: 4.1
last_tested: 2018-08-02
steps:
-- title: Introduction
-- title: Build a Flask website
-- title: Add a new page
+- title: What you will make
+- title: Create the app
completion:
- engaged
-- 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: Add a new page
+- title: Create a HTML template
+- title: Use CSS styles
completion:
- internal
-- title: What next?
+- title: Dynamic content
+ completion:
+ - external
+- title: 'Challenge'
+ challenge: true
+- title: What can you do now?
\ No newline at end of file
diff --git a/en/step_1.md b/en/step_1.md
index 7a87c2d..318911c 100644
--- a/en/step_1.md
+++ b/en/step_1.md
@@ -1,46 +1,28 @@
-## Introduction
+## What you will make
-### What you will make
+Set up a web server and create a simple website using Flask, Python, and HTML/CSS.
+The web server will be able to react to the dynamic content that the user inputs.
-You'll set up a web server and create a simple website using Flask, Python, and HTML/CSS.
+
-
-The web server will be able to react to the dynamic content that the user inputs, so your website will be a web application that can more than just show static information.
+### You will need:
+- A Raspberry Pi with the latest Raspberry Pi OS
--- collapse ---
-
---
-title: What you will need
+title: Installing Flask
---
-### Hardware
-
-+ A computer capable of running Python 3
-
-### Software
-
-+ [Python 3](https://www.python.org/downloads/)
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
---- /collapse ---
-
---- collapse ---
+You can install it manually with the command:
+--- code ---
---
-title: What you will learn
+language: bash
+line_numbers: false
---
-
-- 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"}.
-
---- /no-print ---
-
+sudo apt install python3-flask
+--- /code ---
+--- /collapse ---
\ No newline at end of file
diff --git a/en/step_2.md b/en/step_2.md
index 9fb0330..02bda84 100644
--- a/en/step_2.md
+++ b/en/step_2.md
@@ -1,36 +1,15 @@
-## Build a Flask website
-
-First, set up a basic web application with Flask and Python.
-
-If you don't have Python 3 on your computer, you need to download and install it.
-
---- task ---
-
-[Download Python 3](https://www.python.org/downloads/) and install it.
-
-[[[generic-python-install-python3]]]
-
---- /task ---
-
-You 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.
+## Create the app
--- task ---
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
-Open a terminal or command prompt window, and use the `mkdir` command to create a new directory called `webapp`.
-
-```bash
-mkdir webapp
-```
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+mkdir ~/Documents/webapp
+--- /code ---
--- /task ---
@@ -38,28 +17,27 @@ mkdir webapp
Use the 'change directory' command `cd` to open the new directory.
-```bash
-cd webapp
-```
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+cd ~/Documents/webapp
+--- /code ---
--- /task ---
--- task ---
-
-Open Python 3 IDLE, and create a new file by clicking on**File** and then on **New file**.
-
+From the **Programming** menu, open **Thonny**.
--- /task ---
-
--- task ---
-Save the new file with the name `app.py` inside the `webapp` folder.
+Add this Python code into the blank file.
---- /task ---
-
---- task ---
-
-Now enter the following lines of code into the `app.py` file:
-
-```python
+--- code ---
+---
+language: python
+line_numbers: false
+---
from flask import Flask
app = Flask(__name__)
@@ -70,51 +48,40 @@ def index():
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 first, make sure the code works.
-
+--- /code ---
--- /task ---
--- task ---
-
-Save your changes by clicking on **File** and then on **Save**, or by pressing Ctrl and S at the same time.
-
+Save the new file with the name `app.py` inside the `webapp` folder you just created.
--- /task ---
-You need to run your web app from the terminal/command prompt window you opened earlier.
--- task ---
+Go back to your terminal window and run the script you just wrote:
-### 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.
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+python3 app.py
+--- /code ---
--- /task ---
-If your code is correct, the window should show you 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: ***-***-***
-```
+If everything is working correctly, the window should show you output similar to this:
--- task ---
+From your Raspberry Pi's menu, open **Internet** > **Chromium web browser**
+--- /task ---
-Now 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. your computer. `:5000` means 'port 5000', which is the port the web server is running on.
+--- task ---
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
--- /task ---
+
+
diff --git a/en/step_3.md b/en/step_3.md
index c0d95cf..f509487 100644
--- a/en/step_3.md
+++ b/en/step_3.md
@@ -1,10 +1,13 @@
## Add a new page
-Now you're going to add a new page to your web app by creating a new **route**.
+To add a new page to your web app, you create a new **route**.
-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. You create the routes and determine what each route does.
+--- collapse ---
+---
+title: What is a route?
+---
-In the code you already have in `app.py`, there is a single route:
+In the code you already have, there is a single route:
```python
@app.route('/')
@@ -14,46 +17,23 @@ def index():
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 the route, in this case `index`, because it's the index (or homepage) 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 second half 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 is accessible to any device on the network.
+- `@app.route('/')`: what you add to the web address to access this route - `/`
+- `def index()`: the name of the route - `index`
+- `return 'Hello world'`: the contents the user will see - `Hello world`
-The following instructions show how to create a new page and route called 'cakes'. If you want, you can change the name and and the content to be whatever you wish.
+--- /collapse ---
--- task ---
-To create a new page and a route to it, add these lines of code below where the first page and route are created in `app.py`:
-
-```python
-@app.route('/cakes')
-def cakes():
- return 'Yummy cakes!'
-```
-
---- /task ---
-
---- collapse ---
+Add the code for a new route to `app.py` and **save** the file.
+--- code ---
---
-title: Complete code
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
---
-
-Your complete code should now look similar to this:
-
-```python
-from flask import Flask
-
-app = Flask(__name__)
-
@app.route('/')
def index():
return 'Hello world'
@@ -61,16 +41,15 @@ def index():
@app.route('/cakes')
def cakes():
return 'Yummy cakes!'
+--- /code ---
-if __name__ == '__main__':
- app.run(debug=True, host='0.0.0.0')
-```
-
---- /collapse ---
+--- /task ---
--- task ---
-Save your code and navigate to the 'cakes' page in the browser at the address `127.0.0.1:5000/cakes`. You should see a web page with the text "Yummy cakes!" on it.
+In the **Chromium web browser**, type `localhost:5000/cakes` in the address bar.
+
+ You should see a web page with the text "Yummy cakes!" on it.
diff --git a/en/step_4.md b/en/step_4.md
index 8b0a28e..cee6cf1 100644
--- a/en/step_4.md
+++ b/en/step_4.md
@@ -1,84 +1,106 @@
-## Return HTML web pages
+## Create a HTML template
-Next, you'll modify your existing routes to return a full HTML web page rather than just simple text.
+You can use a **template** to give your page a style. The template will use **HyperText Markup Language (HTML)**.
-The HTML web page will be created from a **template** that holds the static content of the page. In a later section of this project, you'll learn how to insert data to create a dynamic version of the page.
--- task ---
+Go to your terminal and press Ctrl + C to stop your flask server.
+--- /task ---
-First, create a `templates` directory in your `webapp` directory by entering the following command into the terminal or command prompt window:
+--- task ---
+Create a `templates` directory in your `webapp` directory:
-```bash
+--- code ---
+---
+language: bash
+line_numbers: false
+---
mkdir templates
-```
+--- /code ---
--- /task ---
--- task ---
-Create a new file in IDLE by clicking **File** and **New File**, and save this file as `index.html` in your `templates` folder.
+Go back to **Thonny** and create a new file. Save this file as `index.html` inside your `templates` folder.
--- /task ---
--- task ---
+Add this code to `index.html` and **save** your changes.
-Enter the following HTML code in `index.html`:
-
-```html
+--- code ---
+---
+language: html
+line_numbers: true
+---
My website
-```
+--- /code ---
-
+
--- /task ---
--- task ---
-Save your changes by clicking **File** and **Save**, or by pressing Ctrl and s.
+
--- /task ---
--- task ---
-Return to your `app.py` file in IDLE, and modify the first line of your code to import the `render_template` function from the `flask` module as well:
+Return to your `app.py` file and change the first line of code:
-```python
+--- code ---
+---
+language: python
+line_numbers: true
+---
from flask import Flask, render_template
-```
+--- /code ---
--- /task ---
--- task ---
-
-Finally, modify your `index()` function to return the `index.html` HTML template instead of the normal text. Change the code inside the definition so that the code looks like this:
-
-```python
+Change the `index()` route to use your `index.html` HTML template:
+
+--- code ---
+---
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+---
@app.route('/')
def index():
return render_template('index.html')
-```
-
-This code makes Flask look for `index.html` in the `templates` directory that the `app.py` program is in.
+--- /code ---
--- /task ---
--- task ---
-Save the file. Make sure your `app.py` program is still running. If it's not, just run it again using the terminal/command prompt.
+Save `app.py` then go back to the terminal and run it to restart your server:
+
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+python3 app.py
+--- /code ---
--- /task ---
--- task ---
-Load the `http://127.0.0.1:5000/` page in your web browser to see your new HTML template displayed.
-
-
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
-In this case what you see is not much different, because the only new thing is a HTML header. There's plenty of scope to add other things!
+
--- /task ---
diff --git a/en/step_5.md b/en/step_5.md
index 208a533..d2b5b45 100644
--- a/en/step_5.md
+++ b/en/step_5.md
@@ -1,43 +1,109 @@
-## Challenge: add a HTML template to the second page
+## Use CSS styles
-Now you know how to change your 'index' page to use a HTML template, make your 'cakes' page use a HTML template too!
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
---- hints ---
+--- task ---
---- hint ---
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
-Repeat the steps in the previous project section to create and use a HTML template for the 'cakes' page.
+--- /task ---
---- /hint ---
+--- task ---
---- hint ---
+Make sure you are in the `webapp` directory using this command:
-Create a `cakes.html` file and save it in `templates`.
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+cd ~/Documents/webapp
+--- /code ---
-Modify the `cakes()` function in `app.py` to use `render_template`.
+--- /task ---
---- /hint ---
+--- task ---
---- hint ---
+Create a new directory called `static`.
-Your `cakes.html` template should look this:
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+mkdir static
+--- /code ---
-```html
+--- /task ---
+
+--- task ---
+
+Go back to **Thonny** and create a new file. Save this file as `style.css` inside your `static` folder.
+
+--- /task ---
+
+--- task ---
+
+Add the following CSS rules to `style.css` then **save** the file. This is your stylesheet.
+
+--- code ---
+---
+language: css
+line_numbers: true
+---
+body {
+ background: beige;
+ color: blue;
+}
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Now modify your `index.html` HTML template to include the CSS stylesheet:
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 2-4
+---
+
+
+
-
Yummy cakes!
+
My website
-```
+--- /code ---
+--- /task ---
-Modify the `cakes()` function in `app.py`:
+--- task ---
-```python
-@app.route('/cakes')
-def cakes():
- return render_template('cakes.html')
-```
+Save the changes to `index.html` then go back to **Chromium** and refresh the browser. You should see a colourful version of your web app!
+
+
+
+--- /task ---
---- /hint ---
+--- collapse ---
+---
+title: I can't see the colours
+---
---- /hints ---
+If your web app doesn't look right, your CSS file might not be in the right directory.
+
+Make sure your `webapp` project directory contains the following files and has the following structure:
+
+```
+├── app.py
+├── static
+│ └── style.css
+└── templates
+ └── index.html
+ └── cakes.html
+```
+--- /collapse ---
\ No newline at end of file
diff --git a/en/step_6.md b/en/step_6.md
index 400c1ff..fd1d7c0 100644
--- a/en/step_6.md
+++ b/en/step_6.md
@@ -1,86 +1,103 @@
-## Add colour with CSS
+## Dynamic content
-Now you'll add some Cascading Style Sheets (CSS) to add colour to your web page. Cascading Style Sheets are rules for how a browser displays HTML content.
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
---- task ---
-
-First, return to the terminal/command prompt window and navigate to the `webapp` directory. If you're in the `templates` directory, go up one level with the command `cd ..`.
-
---- /task ---
+Now you will create a new route on your website so that the page will show you a personalised greeting.
--- task ---
-Create a new directory called `static`.
+Open `app.py` and add a new route to your application:
-```bash
-mkdir static
-```
+--- code ---
+---
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+---
+@app.route('/')
+def index():
+ return render_template('index.html')
+
+@app.route('/hello/')
+def hello(name):
+ return render_template('page.html', name=name)
+--- /code ---
--- /task ---
--- task ---
-Create a new file in IDLE by clicking **File** and **New File**, and save this file as `style.css` in the `static` folder.
+Create a new HTML template in the templates folder called `page.html`, and add the following HTML code to it:
+
+--- code ---
+---
+language: html
+line_numbers: true
+---
+
+
+
Hello {{ name }}!
+
+
+--- /code ---
--- /task ---
--- task ---
-Add the following CSS rules to the file:
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
-```css
-body {
- background: red;
- color: yellow;
-}
-```
+The page you see should look like this:
-
+
-**Note:** this code contains colour names, but you could also create colours using hex codes like `#ff0000` (red).
+Try replacing `Paul` in the address bar with a different name!
--- /task ---
--- task ---
-
-Save your changes.
+Open your `index.html` template and add a link to the hello page under the heading.
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+---
+
My website
+Hi Paul
+--- /code ---
--- /task ---
--- task ---
-Now modify your `index.html` HTML template to include the CSS rules by adding a `` tag containing a `` tag with a reference to the style sheet file:
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
-```html
-
-
-
-
-
-
My website
-
-
-```
+
--- /task ---
---- task ---
+--- collapse ---
+---
+title: How does this route work?
+---
-Save the change to `index.html` and refresh your browser. You should see a colourful version of your web app!
+- `@app.route('/hello/')`: the `` part passes the text written in the URL into the `hello` function as a variable called `name`.
+- `def hello(name)`: this is the function that determines what content is shown. Here, the function takes the given name as a parameter.
+- `return render_template('page.html', name=name)`: this code looks up the template `page.html` and passes in the variable `name` from the URL so that the template can use it.
-
---- /task ---
+Flask uses `jinja`, a Python library for rendering templates. Look at this code with the braces (curly brackets):
-If your web app doesn't look right, your CSS file might not be in the right directory.
+```html
+
Hello {{ name }}!
+```
-You now have a number of files and directories for your web app. It is worth making sure your `webapp` project directory contains the following files and has the following structure:
+This code tells the template to use the variable `name` that was passed in the route function `hello`.
-```
-├── app.py
-├── static
-│ └── style.css
-└── templates
- └── index.html
- └── cakes.html
-```
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/en/step_7.md b/en/step_7.md
index 01aea40..70f9a89 100644
--- a/en/step_7.md
+++ b/en/step_7.md
@@ -1,86 +1,17 @@
-## Add dynamic content
-
-Now you know how to deliver static HTML web pages using templates. Large websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content depending on the page you visit, even though the templates are very similar.
-
-You will now add some dynamic content to your pages so they can display different information.
-
-Now you will create a new route on your website so that when you go to `http://127.0.0.1/hello/name`, the page says 'Hello name!', replacing 'name' with whatever you put there. So for example, `/hello/Dana/` displays 'Hello Dana!'.
-
---- task ---
-
-Add the following code to create a new route in your application:
-
-```python
-@app.route('/hello/')
-def hello(name):
- return render_template('page.html', name=name)
-```
-
-- `@app.route('/hello/')`: the `` part means it passes the name into the `hello` function as a variable called `name`.
-- `def hello(name)`: this is the function that determines what content is shown. Here, the function takes the given name as a parameter.
-- `return render_template('page.html', name=name)`: this code looks up the template `page.html` and passes in the variable `name` from the URL so that the template can use it.
-
---- /task ---
+## Challenge
--- task ---
-
-Create a new HTML template called `page.html`, and add the following HTML code to it:
-
-```html
-
-
-
Hello {{ name }}!
-
-
-```
-
+Add another route for your website.
--- /task ---
--- task ---
-
-Save the files and visit `http://127.0.0.1:5000/hello/paul`. The page you see should look like this:
-
-
-
-Try `http://127.0.0.1/hello/name` with different names!
-
+Look up some **hex codes** for other colours you could use in your CSS.
--- /task ---
---- collapse ---
-
----
-title: What's happening here?
----
-
-Flask uses `jinja`, a Python library for rendering templates. Look at this code with the braces (curly brackets):
-
-```html
-
Hello {{ name }}!
-```
-
-This code tells the template to render the variable `name` that was passed in the route function `hello`.
-
-Visiting `127.0.0.1:5000/hello/` without a name creates an error. Try to think of a way to prevent this error.
-
---- /collapse ---
-
--- task ---
-
-Create a link to your new, dynamic hello page from your index.
-
-Edit `index.html` to add a link to the hello page under the heading.
-
-```html
-
My website
-Hi Paul
-```
-
+Look up some more HTML tags to use in your templates.
--- /task ---
--- task ---
-
-Save the changes to `index.html`, and then refresh the index page in the browser to see the updated version.
-
-
-
---- /task ---
+Use dynamic content in another way in your website.
+--- /task ---
\ No newline at end of file
diff --git a/en/step_8.md b/en/step_8.md
index 6226b04..36665b7 100644
--- a/en/step_8.md
+++ b/en/step_8.md
@@ -1,8 +1,17 @@
-## What next?
+## What can you do now?
-- Add more CSS rules to each of your pages
-- Create links to your favourite web pages
-- Learn more about HTML, CSS, and web development with [CoderDojo](https://projects.raspberrypi.org/en/CoderDojo/21), [Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn) and [Codecademy](https://www.codecademy.com/en/tracks/web)
-- Learn more about Flask from the [Flask documentation](http://flask.pocoo.org/docs)
-- Create a physical computing project with Raspberry Pi and use Flask to create a web interface to it — you could use [Matt Richardson's guide](http://mattrichardson.com/Raspberry-Pi-Flask/index.html) or [Ben Nuttall's BETT Bot code](https://github.com/bennuttall/bett-bot) for help
+Try our [Introduction to web](https://projects.raspberrypi.org/en/pathways/web-intro) project pathway where you will learn how to structure and style webpages with images, lists, fonts, quotes, links, and animation.
+--- print-only ---
+
+
+
+--- /print-only ---
+
+--- no-print ---
+
+
+
+--- /no-print ---
+
+Or, why not try out another [HTML and CSS](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) project.
\ No newline at end of file