diff --git a/en/step_1.md b/en/step_1.md index 318911c..86da702 100644 --- a/en/step_1.md +++ b/en/step_1.md @@ -24,5 +24,7 @@ language: bash line_numbers: false --- 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 02bda84..bec18b7 100644 --- a/en/step_2.md +++ b/en/step_2.md @@ -1,6 +1,7 @@ ## Create the app --- task --- + Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`. --- code --- @@ -9,6 +10,7 @@ language: bash line_numbers: false --- mkdir ~/Documents/webapp + --- /code --- --- /task --- @@ -23,12 +25,17 @@ language: bash line_numbers: false --- cd ~/Documents/webapp + --- /code --- + --- /task --- --- task --- + From the **Programming** menu, open **Thonny**. + --- /task --- + --- task --- Add this Python code into the blank file. @@ -48,15 +55,20 @@ def index(): if __name__ == '__main__': app.run(debug=True, host='0.0.0.0') + --- /code --- + --- /task --- --- task --- + Save the new file with the name `app.py` inside the `webapp` folder you just created. + --- /task --- --- task --- + Go back to your terminal window and run the script you just wrote: --- code --- @@ -65,6 +77,7 @@ language: bash line_numbers: false --- python3 app.py + --- /code --- --- /task --- @@ -74,10 +87,13 @@ If everything is working correctly, the window should show you output similar to ![pi run web app](images/pi-run-web-app.png) --- task --- + From your Raspberry Pi's menu, open **Internet** > **Chromium web browser** + --- /task --- --- 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 f509487..7723ca6 100644 --- a/en/step_3.md +++ b/en/step_3.md @@ -41,6 +41,7 @@ def index(): @app.route('/cakes') def cakes(): return 'Yummy cakes!' + --- /code --- --- /task --- diff --git a/en/step_4.md b/en/step_4.md index cee6cf1..7eeb6cb 100644 --- a/en/step_4.md +++ b/en/step_4.md @@ -2,12 +2,14 @@ You can use a **template** to give your page a style. The template will use **HyperText Markup Language (HTML)**. - --- task --- + Go to your terminal and press Ctrl + C to stop your flask server. + --- /task --- --- task --- + Create a `templates` directory in your `webapp` directory: --- code --- @@ -16,6 +18,7 @@ language: bash line_numbers: false --- mkdir templates + --- /code --- --- /task --- @@ -27,6 +30,7 @@ Go back to **Thonny** and create a new file. Save this file as `index.html` insi --- /task --- --- task --- + Add this code to `index.html` and **save** your changes. --- code --- @@ -39,6 +43,7 @@ line_numbers: true

My website

+ --- /code --- ![A new file called index.html containing the code above](images/html-file.png) @@ -47,8 +52,6 @@ line_numbers: true --- task --- - - --- /task --- --- task --- @@ -61,11 +64,13 @@ language: python line_numbers: true --- from flask import Flask, render_template + --- /code --- --- /task --- --- task --- + Change the `index()` route to use your `index.html` HTML template: --- code --- @@ -78,6 +83,7 @@ line_highlights: 7 @app.route('/') def index(): return render_template('index.html') + --- /code --- --- /task --- @@ -92,6 +98,7 @@ language: bash line_numbers: false --- python3 app.py + --- /code --- --- /task --- diff --git a/en/step_5.md b/en/step_5.md index d2b5b45..07c9ab4 100644 --- a/en/step_5.md +++ b/en/step_5.md @@ -18,6 +18,7 @@ language: bash line_numbers: false --- cd ~/Documents/webapp + --- /code --- --- /task --- @@ -32,6 +33,7 @@ language: bash line_numbers: false --- mkdir static + --- /code --- --- /task --- @@ -55,6 +57,7 @@ body { background: beige; color: blue; } + --- /code --- --- /task --- @@ -78,7 +81,9 @@ line_highlights: 2-4

My website

+ --- /code --- + --- /task --- --- task --- @@ -106,4 +111,5 @@ Make sure your `webapp` project directory contains the following files and has t └── index.html └── cakes.html ``` + --- /collapse --- \ No newline at end of file diff --git a/en/step_6.md b/en/step_6.md index fd1d7c0..936afe8 100644 --- a/en/step_6.md +++ b/en/step_6.md @@ -22,6 +22,7 @@ def index(): @app.route('/hello/') def hello(name): return render_template('page.html', name=name) + --- /code --- --- /task --- @@ -40,6 +41,7 @@ line_numbers: true

Hello {{ name }}!

+ --- /code --- --- /task --- @@ -57,6 +59,7 @@ Try replacing `Paul` in the address bar with a different name! --- /task --- --- task --- + Open your `index.html` template and add a link to the hello page under the heading. --- code --- @@ -68,6 +71,7 @@ line_highlights: 7 ---

My website

Hi Paul + --- /code --- --- /task --- diff --git a/en/step_7.md b/en/step_7.md index 70f9a89..5b16d07 100644 --- a/en/step_7.md +++ b/en/step_7.md @@ -1,17 +1,25 @@ ## Challenge --- task --- + Add another route for your website. + --- /task --- --- task --- + Look up some **hex codes** for other colours you could use in your CSS. + --- /task --- --- task --- + Look up some more HTML tags to use in your templates. + --- /task --- --- task --- + Use dynamic content in another way in your website. + --- /task --- \ No newline at end of file