diff --git a/.github/workflows/download-translations.yml b/.github/workflows/download-translations.yml
index 5abe2f5..338dcdf 100644
--- a/.github/workflows/download-translations.yml
+++ b/.github/workflows/download-translations.yml
@@ -14,9 +14,14 @@ permissions: write-all
jobs:
crowdin:
- if: ${{ secrets.CROWDIN_PROJECT_ID != '' }}
runs-on: ubuntu-latest
steps:
+ - name: Skip if Crowdin ID missing
+ run: |
+ if [ -z "${{ secrets.CROWDIN_PROJECT_ID }}" ]; then
+ echo "Skipping Crowdin sync — no project ID set."
+ exit 0
+ fi
- name: Checkout
uses: actions/checkout@v4
with:
diff --git a/cs-CZ/images/banner.png b/cs-CZ/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/cs-CZ/images/banner.png differ
diff --git a/cs-CZ/images/flask-app-link.png b/cs-CZ/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/cs-CZ/images/flask-app-link.png differ
diff --git a/cs-CZ/images/flask-app-with-colour.png b/cs-CZ/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/cs-CZ/images/flask-app-with-colour.png differ
diff --git a/cs-CZ/images/flask-cakes.png b/cs-CZ/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/cs-CZ/images/flask-cakes.png differ
diff --git a/cs-CZ/images/flask-hello-paul.png b/cs-CZ/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/cs-CZ/images/flask-hello-paul.png differ
diff --git a/cs-CZ/images/flask-hello-world.png b/cs-CZ/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/cs-CZ/images/flask-hello-world.png differ
diff --git a/cs-CZ/images/flask-template.png b/cs-CZ/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/cs-CZ/images/flask-template.png differ
diff --git a/cs-CZ/images/html-file.png b/cs-CZ/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/cs-CZ/images/html-file.png differ
diff --git a/cs-CZ/images/idle-css.png b/cs-CZ/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/cs-CZ/images/idle-css.png differ
diff --git a/cs-CZ/images/idle-html.png b/cs-CZ/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/cs-CZ/images/idle-html.png differ
diff --git a/cs-CZ/images/open-terminal.png b/cs-CZ/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/cs-CZ/images/open-terminal.png differ
diff --git a/cs-CZ/images/open-text-editor.png b/cs-CZ/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/cs-CZ/images/open-text-editor.png differ
diff --git a/cs-CZ/images/pi-run-web-app.png b/cs-CZ/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/cs-CZ/images/pi-run-web-app.png differ
diff --git a/cs-CZ/images/solution.png b/cs-CZ/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/cs-CZ/images/solution.png differ
diff --git a/cs-CZ/meta.yml b/cs-CZ/meta.yml
new file mode 100644
index 0000000..345657e
--- /dev/null
+++ b/cs-CZ/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Vytvoř webový server v Pythonu pomocí Flasku
+hero_image: images/banner.png
+description: Nainstaluj si webový framework Flask v Pythonu a nastav základní webový server s různými stránkami
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: Co budeš dělat
+ - title: Vytvoř aplikaci
+ completion:
+ - engaged
+ - title: Přidej novou stránku
+ - title: Vytvoř HTML šablonu
+ - title: Použij CSS styl
+ completion:
+ - internal
+ - title: Dynamický obsah
+ completion:
+ - external
+ - title: 'Výzva'
+ challenge: true
diff --git a/cs-CZ/resources/.keep b/cs-CZ/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/cs-CZ/solutions/webapp.zip b/cs-CZ/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/cs-CZ/solutions/webapp.zip differ
diff --git a/cs-CZ/step_1.md b/cs-CZ/step_1.md
new file mode 100644
index 0000000..e57e0e3
--- /dev/null
+++ b/cs-CZ/step_1.md
@@ -0,0 +1,32 @@
+## Co budeš dělat
+
+Nastav webový server a vytvoř jednoduchý web pomocí Flasku, Pythonu a HTML/CSS.
+Webový server bude schopen reagovat na dynamický obsah, který uživatel zadá.
+
+
+
+### Co budeš potřebovat:
+
+- Raspberry Pi s nejnovějším operačním systémem Raspberry Pi OS
+
+--- collapse ---
+---
+title: Instalace Flasku
+---
+
+`Flask` by měl být předinstalován jako součást operačního systému Raspberry Pi, takže bys s ním neměl dělat nic dalšího.
+
+Můžeš jej nainstalovat ručně pomocí příkazu:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/cs-CZ/step_2.md b/cs-CZ/step_2.md
new file mode 100644
index 0000000..36034a3
--- /dev/null
+++ b/cs-CZ/step_2.md
@@ -0,0 +1,110 @@
+## Vytvoř aplikaci
+
+--- task ---
+
+Otevři terminál a pomocí příkazu `mkdir` vytvoř ve složce dokumentů nový adresář s názvem `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Pro otevření nového adresáře použij příkaz `cd` pro změnu adresáře.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+V nabídce **Programování** otevři **Thony**.
+
+--- /task ---
+
+--- task ---
+
+Přidej tento kód Pythonu do prázdného souboru.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+from flask import Flask
+
+app = Flask(**name**)
+
+@app.route('/')
+def index():
+return 'Ahoj světe'
+
+if **name** == '**main**':
+app.run(debug=True, host='0.0.0.0')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Ulož nový soubor s názvem `app.py` do složky `webapp`, kterou jsi právě vytvořil.
+
+--- /task ---
+
+--- task ---
+
+Vrať se do terminálového okna a spusť skript, který jsi právě napsal:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+Pokud vše funguje správně, okno by mělo ukázat výstup podobný tomuto:
+
+
+
+--- task ---
+
+V nabídce Raspberry Pi otevři **Internet** > **Webový prohlížeč Chromium**
+
+--- /task ---
+
+--- task ---
+
+Do adresního řádku zadej `localhost:5000` a stiskni Enter. Měl bys vidět uvítací stránku.
+
+--- /task ---
+
+
+
+
diff --git a/cs-CZ/step_3.md b/cs-CZ/step_3.md
new file mode 100644
index 0000000..a1e991a
--- /dev/null
+++ b/cs-CZ/step_3.md
@@ -0,0 +1,59 @@
+## Přidej novou stránku
+
+Chceš-li do webové aplikace přidat novou stránku, vytvoř novou **trasu**.
+
+--- collapse ---
+---
+title: Co je to trasa?
+---
+
+V kódu, který již máš, je jedna trasa:
+
+```python
+@app.route('/')
+def index():
+ return 'Ahoj světe'
+```
+
+Tato trasa se skládá ze tří částí:
+
+- `@app.route('/')`: co přidáš k webové adrese pro přístup k této trase - `/`
+- `def index()`: název trasy - `index`
+- `return 'Hello world'`: obsah, který uživatel uvidí - `Hello world`
+
+--- /collapse ---
+
+--- task ---
+
+Přidej kód pro novou trasu do souboru `app.py` a soubor **ulož**.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Ahoj světe'
+
+@app.route('/dorty')
+def dorty():
+return 'Vynikající dorty!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+V prohlížeči Chromium zadej do adresního řádku adresu `localhost:5000/cakes`.
+
+Měl bys vidět webovou stránku s textem „Mňam dorty!“.
+
+
+
+--- /task ---
diff --git a/cs-CZ/step_4.md b/cs-CZ/step_4.md
new file mode 100644
index 0000000..578999c
--- /dev/null
+++ b/cs-CZ/step_4.md
@@ -0,0 +1,123 @@
+## Vytvoř HTML šablonu
+
+Styl stránky můžeš upravit pomocí **šablony**. Šablona bude používat **HyperText Markup Language (HTML)**.
+
+--- task ---
+
+Přejdi do terminálu a stiskni Ctrl + C pro zastavení Flask serveru.
+
+--- /task ---
+
+--- task ---
+
+Vytvoř adresář `templates` ve tvém adresáři `webapp`:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Vrať se do **Thony** a vytvoř nový soubor. Ulož tento soubor jako `index.html` do složky `templates`.
+
+--- /task ---
+
+--- task ---
+
+Přidej tento kód do souboru `index.html` a **ulož** změny.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
Moje webová stránka
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Vrať se do souboru `app.py` a změň první řádek kódu:
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+-------------------------------------------------------
+
+from flask import Flask, render_template
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Změň trasu `index()` tak, aby používala tvou HTML šablonu `index.html`:
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Ulož soubor `app.py` a poté se vrať do terminálu a spusť jej pro restartování serveru:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+V prohlížeči **Chromium** přejdi na stránku `localhost:5000/` a zobrazí se ti nová HTML šablona.
+
+
+
+--- /task ---
+
diff --git a/cs-CZ/step_5.md b/cs-CZ/step_5.md
new file mode 100644
index 0000000..193f218
--- /dev/null
+++ b/cs-CZ/step_5.md
@@ -0,0 +1,123 @@
+## Použij CSS styl
+
+**Kaskádové styly (CSS)** jsou pravidla, která prohlížeči sdělují, jak má zobrazovat obsah HTML.
+
+--- task ---
+
+Otevři nové okno terminálu, abys mohl nechat webový server Flask spuštěný v tom druhém.
+
+--- /task ---
+
+--- task ---
+
+Ujisti se, že jsi v adresáři `webapp`, a to pomocí tohoto příkazu:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Vytvoř nový adresář s názvem `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Vrať se do **Thony** a vytvoř nový soubor. Ulož tento soubor jako `style.css` do složky `static`.
+
+--- /task ---
+
+--- task ---
+
+Přidej následující CSS pravidla do souboru `style.css` a poté soubor **ulož**. Toto je tvůj stylový list.
+
+##
+--- code ---
+
+language: css
+line_numbers: true
+-------------------------------------------------------
+
+body {
+background: beige;
+color: blue;
+}
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Nyní uprav HTML šablonu `index.html` tak, aby obsahovala CSS styly:
+
+##
+--- code ---
+
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 2-4
+---------------------------------------------------------
+
+
+
+
+
+
+
Moje webová stránka
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Ulož změny do souboru `index.html`, poté se vrať do **Chromia** a obnov stránku prohlížeče. Měli bys vidět barevnou verzi webové aplikace!
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: Nevidím barvy
+---
+
+Pokud tvá webová aplikace nevypadá správně, soubor CSS se pravděpodobně nenachází ve správném adresáři.
+
+Ujisti se, že adresář projektu `webapp` obsahuje následující soubory a má následující strukturu:
+
+```
+├── app.py
+├── static
+│ └── style.css
+└── templates
+ └── index.html
+ └── cakes.html
+```
+
+--- /collapse ---
\ No newline at end of file
diff --git a/cs-CZ/step_6.md b/cs-CZ/step_6.md
new file mode 100644
index 0000000..3dc719d
--- /dev/null
+++ b/cs-CZ/step_6.md
@@ -0,0 +1,111 @@
+## Dynamický obsah
+
+Webové stránky jako Facebook, YouTube a BBC News mají dynamický obsah: tyto weby zobrazují různý obsah v rámci stejné šablony.
+
+Nyní si na svém webu vytvoř novou trasu, aby se ti na stránce zobrazovalo personalizované uvítání.
+
+--- task ---
+
+Otevři soubor `app.py` a přidej do aplikace novou trasu:
+
+##
+--- 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 ---
+
+Vytvoř novou HTML šablonu ve složce templates s názvem `page.html` a přidej do ní následující HTML kód:
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
Ahoj {{ name }}!
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Ulož oba soubory a poté v prohlížeči Chromium navštiv stránku `localhost:5000/hello/Paul`.
+
+Stránka by měla vypadat přibližně takto:
+
+
+
+Zkus nahradit „Paul“ v adresním řádku jiným jménem!
+
+--- /task ---
+
+--- task ---
+
+Otevři šablonu `index.html` a pod nadpis přidej odkaz na úvodní stránku.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
Moje webová stránka
Ahoj Pavle
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Ulož změny do souboru `index.html` a poté otevři soubor `localhost:5000`, abys viděl aktualizovanou verzi.
+
+Webová stránka s modrým textem na béžovém pozadí. Text v záhlaví zní „Moje webová stránka“ a poté odkaz na „Ahoj Paule“](images/flask-app-link.png)
+
+--- /task ---
+
+--- collapse ---
+---
+title: Jak tato trasa funguje?
+---
+
+- `@app.route('/hello/')`: část `` předává text zapsaný v URL do funkce `hello` jako proměnnou s názvem `name`.
+- `def hello(name)`: toto je funkce, která určuje, jaký obsah se zobrazí. Zde funkce bere zadaný název jako parametr.
+- `return render_template('page.html', name=name)`: tento kód vyhledá šablonu `page.html` a předá proměnnou `name` z URL adresy, aby ji šablona mohla použít.
+
+Flask používá `jinja`, knihovnu Pythonu pro vykreslování šablon. Podívej se na tento kód se složenými závorkami:
+
+```html
+
Ahoj {{ name }}!
+```
+
+Tento kód říká šabloně, aby použila proměnnou `name`, která byla předána ve funkci trasy `hello`.
+
+Návštěva `localhost:5000/hello/` bez názvu (jména) vytvoří chybu.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/cs-CZ/step_7.md b/cs-CZ/step_7.md
new file mode 100644
index 0000000..70ece1d
--- /dev/null
+++ b/cs-CZ/step_7.md
@@ -0,0 +1,25 @@
+## Výzva
+
+--- task ---
+
+Přidej pro svůj web další trasu.
+
+--- /task ---
+
+--- task ---
+
+Vyhledej si **hex kódy** pro další barvy, které bys mohl použít ve svém CSS.
+
+--- /task ---
+
+--- task ---
+
+Vyhledej si další HTML tagy, které můžeš použít ve svých šablonách.
+
+--- /task ---
+
+--- task ---
+
+Použij dynamický obsah na svém webu jiným způsobem.
+
+--- /task ---
\ No newline at end of file
diff --git a/cs-CZ/step_8.md b/cs-CZ/step_8.md
new file mode 100644
index 0000000..676aa96
--- /dev/null
+++ b/cs-CZ/step_8.md
@@ -0,0 +1,28 @@
+## Co můžeš dělat dál?
+
+Vyzkoušej si náš projekt [Úvod do webu](https://projects.raspberrypi.org/cs-CZ/pathways/web-intro), kde se naučíš, jak strukturovat a stylizovat webové stránky pomocí obrázků, seznamů, fontů, citací, odkazů a animací.
+
+--- print-only ---
+
+
+
+--- /print-only ---
+
+--- no-print ---
+
+
+
+--- /no-print ---
+
+Nebo proč nezkusit jiný projekt [HTML a CSS](https://projects.raspberrypi.org/cs-CZ/projects?software%5B%5D=html-css-javascript).
+
+***
+Tento projekt byl přeložen dobrovolníky:
+
+[name]
+
+[name]
+
+[name]
+
+Díky dobrovolníkům můžeme dát lidem po celém světě šanci se učit ve svém vlastním jazyce. Můžete nám pomoci oslovit více lidí dobrovolným překládáním - více informací na [rpf.io/translate](https://rpf.io/translate).
diff --git a/de-DE/images/banner.png b/de-DE/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/de-DE/images/banner.png differ
diff --git a/de-DE/images/flask-app-link.png b/de-DE/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/de-DE/images/flask-app-link.png differ
diff --git a/de-DE/images/flask-app-with-colour.png b/de-DE/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/de-DE/images/flask-app-with-colour.png differ
diff --git a/de-DE/images/flask-cakes.png b/de-DE/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/de-DE/images/flask-cakes.png differ
diff --git a/de-DE/images/flask-hello-paul.png b/de-DE/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/de-DE/images/flask-hello-paul.png differ
diff --git a/de-DE/images/flask-hello-world.png b/de-DE/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/de-DE/images/flask-hello-world.png differ
diff --git a/de-DE/images/flask-template.png b/de-DE/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/de-DE/images/flask-template.png differ
diff --git a/de-DE/images/html-file.png b/de-DE/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/de-DE/images/html-file.png differ
diff --git a/de-DE/images/idle-css.png b/de-DE/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/de-DE/images/idle-css.png differ
diff --git a/de-DE/images/idle-html.png b/de-DE/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/de-DE/images/idle-html.png differ
diff --git a/de-DE/images/open-terminal.png b/de-DE/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/de-DE/images/open-terminal.png differ
diff --git a/de-DE/images/open-text-editor.png b/de-DE/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/de-DE/images/open-text-editor.png differ
diff --git a/de-DE/images/pi-run-web-app.png b/de-DE/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/de-DE/images/pi-run-web-app.png differ
diff --git a/de-DE/images/solution.png b/de-DE/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/de-DE/images/solution.png differ
diff --git a/de-DE/meta.yml b/de-DE/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/de-DE/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/de-DE/resources/.keep b/de-DE/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/de-DE/solutions/webapp.zip b/de-DE/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/de-DE/solutions/webapp.zip differ
diff --git a/de-DE/step_1.md b/de-DE/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/de-DE/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/de-DE/step_2.md b/de-DE/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/de-DE/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/de-DE/step_3.md b/de-DE/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/de-DE/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/de-DE/step_4.md b/de-DE/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/de-DE/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/de-DE/step_5.md b/de-DE/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/de-DE/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/de-DE/step_6.md b/de-DE/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/de-DE/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/de-DE/step_7.md b/de-DE/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/de-DE/step_7.md
@@ -0,0 +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
diff --git a/de-DE/step_8.md b/de-DE/step_8.md
new file mode 100644
index 0000000..29e12d7
--- /dev/null
+++ b/de-DE/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/de-DE/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/de-DE/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Dieses Projekt wurde von freiwilligen Helfern übersetzt:
+
+[name]
+
+[name]
+
+[name]
+
+Dank freiwilliger Helfer können wir Menschen auf der ganzen Welt die Möglichkeit geben, in ihrer eigenen Sprache zu lernen. Du kannst uns helfen, mehr Menschen zu erreichen, indem Du dich freiwillig zum Übersetzen meldest - weitere Informationen unter [rpf.io/translate](https://rpf.io/translate).
diff --git a/es-419/images/banner.png b/es-419/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/es-419/images/banner.png differ
diff --git a/es-419/images/flask-app-link.png b/es-419/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/es-419/images/flask-app-link.png differ
diff --git a/es-419/images/flask-app-with-colour.png b/es-419/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/es-419/images/flask-app-with-colour.png differ
diff --git a/es-419/images/flask-cakes.png b/es-419/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/es-419/images/flask-cakes.png differ
diff --git a/es-419/images/flask-hello-paul.png b/es-419/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/es-419/images/flask-hello-paul.png differ
diff --git a/es-419/images/flask-hello-world.png b/es-419/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/es-419/images/flask-hello-world.png differ
diff --git a/es-419/images/flask-template.png b/es-419/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/es-419/images/flask-template.png differ
diff --git a/es-419/images/html-file.png b/es-419/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/es-419/images/html-file.png differ
diff --git a/es-419/images/idle-css.png b/es-419/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/es-419/images/idle-css.png differ
diff --git a/es-419/images/idle-html.png b/es-419/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/es-419/images/idle-html.png differ
diff --git a/es-419/images/open-terminal.png b/es-419/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/es-419/images/open-terminal.png differ
diff --git a/es-419/images/open-text-editor.png b/es-419/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/es-419/images/open-text-editor.png differ
diff --git a/es-419/images/pi-run-web-app.png b/es-419/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/es-419/images/pi-run-web-app.png differ
diff --git a/es-419/images/solution.png b/es-419/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/es-419/images/solution.png differ
diff --git a/es-419/meta.yml b/es-419/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/es-419/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/es-419/resources/.keep b/es-419/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/es-419/solutions/webapp.zip b/es-419/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/es-419/solutions/webapp.zip differ
diff --git a/es-419/step_1.md b/es-419/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/es-419/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/es-419/step_2.md b/es-419/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/es-419/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/es-419/step_3.md b/es-419/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/es-419/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/es-419/step_4.md b/es-419/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/es-419/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/es-419/step_5.md b/es-419/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/es-419/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/es-419/step_6.md b/es-419/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/es-419/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/es-419/step_7.md b/es-419/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/es-419/step_7.md
@@ -0,0 +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
diff --git a/es-419/step_8.md b/es-419/step_8.md
new file mode 100644
index 0000000..d332b80
--- /dev/null
+++ b/es-419/step_8.md
@@ -0,0 +1,17 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/es-419/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/es-419/projects?software%5B%5D=html-css-javascript) project.
\ No newline at end of file
diff --git a/fr-FR/images/banner.png b/fr-FR/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/fr-FR/images/banner.png differ
diff --git a/fr-FR/images/flask-app-link.png b/fr-FR/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/fr-FR/images/flask-app-link.png differ
diff --git a/fr-FR/images/flask-app-with-colour.png b/fr-FR/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/fr-FR/images/flask-app-with-colour.png differ
diff --git a/fr-FR/images/flask-cakes.png b/fr-FR/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/fr-FR/images/flask-cakes.png differ
diff --git a/fr-FR/images/flask-hello-paul.png b/fr-FR/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/fr-FR/images/flask-hello-paul.png differ
diff --git a/fr-FR/images/flask-hello-world.png b/fr-FR/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/fr-FR/images/flask-hello-world.png differ
diff --git a/fr-FR/images/flask-template.png b/fr-FR/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/fr-FR/images/flask-template.png differ
diff --git a/fr-FR/images/html-file.png b/fr-FR/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/fr-FR/images/html-file.png differ
diff --git a/fr-FR/images/idle-css.png b/fr-FR/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/fr-FR/images/idle-css.png differ
diff --git a/fr-FR/images/idle-html.png b/fr-FR/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/fr-FR/images/idle-html.png differ
diff --git a/fr-FR/images/open-terminal.png b/fr-FR/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/fr-FR/images/open-terminal.png differ
diff --git a/fr-FR/images/open-text-editor.png b/fr-FR/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/fr-FR/images/open-text-editor.png differ
diff --git a/fr-FR/images/pi-run-web-app.png b/fr-FR/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/fr-FR/images/pi-run-web-app.png differ
diff --git a/fr-FR/images/solution.png b/fr-FR/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/fr-FR/images/solution.png differ
diff --git a/fr-FR/meta.yml b/fr-FR/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/fr-FR/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/fr-FR/resources/.keep b/fr-FR/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/fr-FR/solutions/webapp.zip b/fr-FR/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/fr-FR/solutions/webapp.zip differ
diff --git a/fr-FR/step_1.md b/fr-FR/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/fr-FR/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/fr-FR/step_2.md b/fr-FR/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/fr-FR/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/fr-FR/step_3.md b/fr-FR/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/fr-FR/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/fr-FR/step_4.md b/fr-FR/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/fr-FR/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/fr-FR/step_5.md b/fr-FR/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/fr-FR/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/fr-FR/step_6.md b/fr-FR/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/fr-FR/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/fr-FR/step_7.md b/fr-FR/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/fr-FR/step_7.md
@@ -0,0 +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
diff --git a/fr-FR/step_8.md b/fr-FR/step_8.md
new file mode 100644
index 0000000..21eb8a4
--- /dev/null
+++ b/fr-FR/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/fr-FR/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/fr-FR/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Ce projet a été traduit par des bénévoles:
+
+[name]
+
+[name]
+
+[name]
+
+Grâce aux bénévoles, nous pouvons donner aux gens du monde entier la chance d'apprendre dans leur propre langue. Vous pouvez nous aider à atteindre plus de personnes en vous portant volontaire pour la traduction - plus d'informations sur [rpf.io/translate](https://rpf.io/translate).
diff --git a/hi-IN/images/banner.png b/hi-IN/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/hi-IN/images/banner.png differ
diff --git a/hi-IN/images/flask-app-link.png b/hi-IN/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/hi-IN/images/flask-app-link.png differ
diff --git a/hi-IN/images/flask-app-with-colour.png b/hi-IN/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/hi-IN/images/flask-app-with-colour.png differ
diff --git a/hi-IN/images/flask-cakes.png b/hi-IN/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/hi-IN/images/flask-cakes.png differ
diff --git a/hi-IN/images/flask-hello-paul.png b/hi-IN/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/hi-IN/images/flask-hello-paul.png differ
diff --git a/hi-IN/images/flask-hello-world.png b/hi-IN/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/hi-IN/images/flask-hello-world.png differ
diff --git a/hi-IN/images/flask-template.png b/hi-IN/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/hi-IN/images/flask-template.png differ
diff --git a/hi-IN/images/html-file.png b/hi-IN/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/hi-IN/images/html-file.png differ
diff --git a/hi-IN/images/idle-css.png b/hi-IN/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/hi-IN/images/idle-css.png differ
diff --git a/hi-IN/images/idle-html.png b/hi-IN/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/hi-IN/images/idle-html.png differ
diff --git a/hi-IN/images/open-terminal.png b/hi-IN/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/hi-IN/images/open-terminal.png differ
diff --git a/hi-IN/images/open-text-editor.png b/hi-IN/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/hi-IN/images/open-text-editor.png differ
diff --git a/hi-IN/images/pi-run-web-app.png b/hi-IN/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/hi-IN/images/pi-run-web-app.png differ
diff --git a/hi-IN/images/solution.png b/hi-IN/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/hi-IN/images/solution.png differ
diff --git a/hi-IN/meta.yml b/hi-IN/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/hi-IN/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/hi-IN/resources/.keep b/hi-IN/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/hi-IN/solutions/webapp.zip b/hi-IN/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/hi-IN/solutions/webapp.zip differ
diff --git a/hi-IN/step_1.md b/hi-IN/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/hi-IN/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/hi-IN/step_2.md b/hi-IN/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/hi-IN/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/hi-IN/step_3.md b/hi-IN/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/hi-IN/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/hi-IN/step_4.md b/hi-IN/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/hi-IN/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/hi-IN/step_5.md b/hi-IN/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/hi-IN/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/hi-IN/step_6.md b/hi-IN/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/hi-IN/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/hi-IN/step_7.md b/hi-IN/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/hi-IN/step_7.md
@@ -0,0 +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
diff --git a/hi-IN/step_8.md b/hi-IN/step_8.md
new file mode 100644
index 0000000..2178c6a
--- /dev/null
+++ b/hi-IN/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/hi-IN/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/hi-IN/projects?software%5B%5D=html-css-javascript) project.
+
+***
+इस परियोजना का अनुवाद स्वयंसेवकों ने किया:
+
+[name]
+
+[name]
+
+[name]
+
+स्वयंसेवकों को धन्यवाद, हम दुनिया भर के लोगों को अपनी भाषा में सीखने का मौका दे सकते हैं। आप स्वेच्छा से अधिक लोगों तक पहुँचने में मदद कर सकते हैं - [rpf.io/translate](https://rpf.io/translate) पर अधिक जानकारी प्राप्त करें।
diff --git a/it-IT/images/banner.png b/it-IT/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/it-IT/images/banner.png differ
diff --git a/it-IT/images/flask-app-link.png b/it-IT/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/it-IT/images/flask-app-link.png differ
diff --git a/it-IT/images/flask-app-with-colour.png b/it-IT/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/it-IT/images/flask-app-with-colour.png differ
diff --git a/it-IT/images/flask-cakes.png b/it-IT/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/it-IT/images/flask-cakes.png differ
diff --git a/it-IT/images/flask-hello-paul.png b/it-IT/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/it-IT/images/flask-hello-paul.png differ
diff --git a/it-IT/images/flask-hello-world.png b/it-IT/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/it-IT/images/flask-hello-world.png differ
diff --git a/it-IT/images/flask-template.png b/it-IT/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/it-IT/images/flask-template.png differ
diff --git a/it-IT/images/html-file.png b/it-IT/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/it-IT/images/html-file.png differ
diff --git a/it-IT/images/idle-css.png b/it-IT/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/it-IT/images/idle-css.png differ
diff --git a/it-IT/images/idle-html.png b/it-IT/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/it-IT/images/idle-html.png differ
diff --git a/it-IT/images/open-terminal.png b/it-IT/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/it-IT/images/open-terminal.png differ
diff --git a/it-IT/images/open-text-editor.png b/it-IT/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/it-IT/images/open-text-editor.png differ
diff --git a/it-IT/images/pi-run-web-app.png b/it-IT/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/it-IT/images/pi-run-web-app.png differ
diff --git a/it-IT/images/solution.png b/it-IT/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/it-IT/images/solution.png differ
diff --git a/it-IT/meta.yml b/it-IT/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/it-IT/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/it-IT/resources/.keep b/it-IT/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/it-IT/solutions/webapp.zip b/it-IT/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/it-IT/solutions/webapp.zip differ
diff --git a/it-IT/step_1.md b/it-IT/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/it-IT/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/it-IT/step_2.md b/it-IT/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/it-IT/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/it-IT/step_3.md b/it-IT/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/it-IT/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/it-IT/step_4.md b/it-IT/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/it-IT/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/it-IT/step_5.md b/it-IT/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/it-IT/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/it-IT/step_6.md b/it-IT/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/it-IT/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/it-IT/step_7.md b/it-IT/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/it-IT/step_7.md
@@ -0,0 +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
diff --git a/it-IT/step_8.md b/it-IT/step_8.md
new file mode 100644
index 0000000..a04e6de
--- /dev/null
+++ b/it-IT/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/it-IT/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/it-IT/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Questo progetto è stato tradotto da volontari:
+
+[name]
+
+[name]
+
+[name]
+
+Grazie ai volontari, possiamo offrire alle persone di tutto il mondo la possibilità di imparare nella loro lingua. Puoi aiutarci a raggiungere più persone offrendoti come volontario per la traduzione - puoi trovare maggiori informazioni su [rpf.io/translate](https://rpf.io/translate).
diff --git a/ja-JP/images/banner.png b/ja-JP/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/ja-JP/images/banner.png differ
diff --git a/ja-JP/images/flask-app-link.png b/ja-JP/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/ja-JP/images/flask-app-link.png differ
diff --git a/ja-JP/images/flask-app-with-colour.png b/ja-JP/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/ja-JP/images/flask-app-with-colour.png differ
diff --git a/ja-JP/images/flask-cakes.png b/ja-JP/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/ja-JP/images/flask-cakes.png differ
diff --git a/ja-JP/images/flask-hello-paul.png b/ja-JP/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/ja-JP/images/flask-hello-paul.png differ
diff --git a/ja-JP/images/flask-hello-world.png b/ja-JP/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/ja-JP/images/flask-hello-world.png differ
diff --git a/ja-JP/images/flask-template.png b/ja-JP/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/ja-JP/images/flask-template.png differ
diff --git a/ja-JP/images/html-file.png b/ja-JP/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/ja-JP/images/html-file.png differ
diff --git a/ja-JP/images/idle-css.png b/ja-JP/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/ja-JP/images/idle-css.png differ
diff --git a/ja-JP/images/idle-html.png b/ja-JP/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/ja-JP/images/idle-html.png differ
diff --git a/ja-JP/images/open-terminal.png b/ja-JP/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/ja-JP/images/open-terminal.png differ
diff --git a/ja-JP/images/open-text-editor.png b/ja-JP/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/ja-JP/images/open-text-editor.png differ
diff --git a/ja-JP/images/pi-run-web-app.png b/ja-JP/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/ja-JP/images/pi-run-web-app.png differ
diff --git a/ja-JP/images/solution.png b/ja-JP/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/ja-JP/images/solution.png differ
diff --git a/ja-JP/meta.yml b/ja-JP/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/ja-JP/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/ja-JP/resources/.keep b/ja-JP/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/ja-JP/solutions/webapp.zip b/ja-JP/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/ja-JP/solutions/webapp.zip differ
diff --git a/ja-JP/step_1.md b/ja-JP/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/ja-JP/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/ja-JP/step_2.md b/ja-JP/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/ja-JP/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/ja-JP/step_3.md b/ja-JP/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/ja-JP/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/ja-JP/step_4.md b/ja-JP/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/ja-JP/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/ja-JP/step_5.md b/ja-JP/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/ja-JP/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/ja-JP/step_6.md b/ja-JP/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/ja-JP/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/ja-JP/step_7.md b/ja-JP/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/ja-JP/step_7.md
@@ -0,0 +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
diff --git a/ja-JP/step_8.md b/ja-JP/step_8.md
new file mode 100644
index 0000000..1cdb926
--- /dev/null
+++ b/ja-JP/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/ja-JP/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/ja-JP/projects?software%5B%5D=html-css-javascript) project.
+
+***
+このプロジェクトは以下のボランティアによって翻訳されました。
+
+[name]
+
+[name]
+
+[name]
+
+ボランティアのおかげで、世界中の人々に母国語で学ぶ機会を与えることができます。翻訳を引き受けていただくことで、より多くの人々に手を差し伸べることができます。詳しくは [rpf.io/translate](https://rpf.io/translate) をご覧ください。
diff --git a/nl-NL/images/banner.png b/nl-NL/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/nl-NL/images/banner.png differ
diff --git a/nl-NL/images/flask-app-link.png b/nl-NL/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/nl-NL/images/flask-app-link.png differ
diff --git a/nl-NL/images/flask-app-with-colour.png b/nl-NL/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/nl-NL/images/flask-app-with-colour.png differ
diff --git a/nl-NL/images/flask-cakes.png b/nl-NL/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/nl-NL/images/flask-cakes.png differ
diff --git a/nl-NL/images/flask-hello-paul.png b/nl-NL/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/nl-NL/images/flask-hello-paul.png differ
diff --git a/nl-NL/images/flask-hello-world.png b/nl-NL/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/nl-NL/images/flask-hello-world.png differ
diff --git a/nl-NL/images/flask-template.png b/nl-NL/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/nl-NL/images/flask-template.png differ
diff --git a/nl-NL/images/html-file.png b/nl-NL/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/nl-NL/images/html-file.png differ
diff --git a/nl-NL/images/idle-css.png b/nl-NL/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/nl-NL/images/idle-css.png differ
diff --git a/nl-NL/images/idle-html.png b/nl-NL/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/nl-NL/images/idle-html.png differ
diff --git a/nl-NL/images/open-terminal.png b/nl-NL/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/nl-NL/images/open-terminal.png differ
diff --git a/nl-NL/images/open-text-editor.png b/nl-NL/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/nl-NL/images/open-text-editor.png differ
diff --git a/nl-NL/images/pi-run-web-app.png b/nl-NL/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/nl-NL/images/pi-run-web-app.png differ
diff --git a/nl-NL/images/solution.png b/nl-NL/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/nl-NL/images/solution.png differ
diff --git a/nl-NL/meta.yml b/nl-NL/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/nl-NL/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/nl-NL/resources/.keep b/nl-NL/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/nl-NL/solutions/webapp.zip b/nl-NL/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/nl-NL/solutions/webapp.zip differ
diff --git a/nl-NL/step_1.md b/nl-NL/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/nl-NL/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/nl-NL/step_2.md b/nl-NL/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/nl-NL/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/nl-NL/step_3.md b/nl-NL/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/nl-NL/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/nl-NL/step_4.md b/nl-NL/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/nl-NL/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/nl-NL/step_5.md b/nl-NL/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/nl-NL/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/nl-NL/step_6.md b/nl-NL/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/nl-NL/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/nl-NL/step_7.md b/nl-NL/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/nl-NL/step_7.md
@@ -0,0 +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
diff --git a/nl-NL/step_8.md b/nl-NL/step_8.md
new file mode 100644
index 0000000..1730e8d
--- /dev/null
+++ b/nl-NL/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/nl-NL/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/nl-NL/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Dit project werd vertaald door vrijwilligers:
+
+[name]
+
+[name]
+
+[name]
+
+Dankzij vrijwilligers kunnen we mensen over de hele wereld de kans geven om in hun eigen taal te leren. Jij kunt ons helpen meer mensen te bereiken door vrijwillig te starten met vertalen - meer informatie op [rpf.io/translate](https://rpf.io/translate).
diff --git a/pt-BR/images/banner.png b/pt-BR/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/pt-BR/images/banner.png differ
diff --git a/pt-BR/images/flask-app-link.png b/pt-BR/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/pt-BR/images/flask-app-link.png differ
diff --git a/pt-BR/images/flask-app-with-colour.png b/pt-BR/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/pt-BR/images/flask-app-with-colour.png differ
diff --git a/pt-BR/images/flask-cakes.png b/pt-BR/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/pt-BR/images/flask-cakes.png differ
diff --git a/pt-BR/images/flask-hello-paul.png b/pt-BR/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/pt-BR/images/flask-hello-paul.png differ
diff --git a/pt-BR/images/flask-hello-world.png b/pt-BR/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/pt-BR/images/flask-hello-world.png differ
diff --git a/pt-BR/images/flask-template.png b/pt-BR/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/pt-BR/images/flask-template.png differ
diff --git a/pt-BR/images/html-file.png b/pt-BR/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/pt-BR/images/html-file.png differ
diff --git a/pt-BR/images/idle-css.png b/pt-BR/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/pt-BR/images/idle-css.png differ
diff --git a/pt-BR/images/idle-html.png b/pt-BR/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/pt-BR/images/idle-html.png differ
diff --git a/pt-BR/images/open-terminal.png b/pt-BR/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/pt-BR/images/open-terminal.png differ
diff --git a/pt-BR/images/open-text-editor.png b/pt-BR/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/pt-BR/images/open-text-editor.png differ
diff --git a/pt-BR/images/pi-run-web-app.png b/pt-BR/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/pt-BR/images/pi-run-web-app.png differ
diff --git a/pt-BR/images/solution.png b/pt-BR/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/pt-BR/images/solution.png differ
diff --git a/pt-BR/meta.yml b/pt-BR/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/pt-BR/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/pt-BR/resources/.keep b/pt-BR/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/pt-BR/solutions/webapp.zip b/pt-BR/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/pt-BR/solutions/webapp.zip differ
diff --git a/pt-BR/step_1.md b/pt-BR/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/pt-BR/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/pt-BR/step_2.md b/pt-BR/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/pt-BR/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/pt-BR/step_3.md b/pt-BR/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/pt-BR/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/pt-BR/step_4.md b/pt-BR/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/pt-BR/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/pt-BR/step_5.md b/pt-BR/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/pt-BR/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/pt-BR/step_6.md b/pt-BR/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/pt-BR/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/pt-BR/step_7.md b/pt-BR/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/pt-BR/step_7.md
@@ -0,0 +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
diff --git a/pt-BR/step_8.md b/pt-BR/step_8.md
new file mode 100644
index 0000000..7a5cdee
--- /dev/null
+++ b/pt-BR/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/pt-BR/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/pt-BR/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Este projeto foi traduzido por voluntários:
+
+[name]
+
+[name]
+
+[name]
+
+Graças a voluntários, podemos dar às pessoas de todo o mundo a chance de aprender em seu próprio idioma. Você pode nos ajudar a alcançar mais pessoas oferecendo-se para traduzir - mais informações em [rpf.io/translate](https://rpf.io/translate).
diff --git a/uk-UA/images/banner.png b/uk-UA/images/banner.png
new file mode 100644
index 0000000..082983c
Binary files /dev/null and b/uk-UA/images/banner.png differ
diff --git a/uk-UA/images/flask-app-link.png b/uk-UA/images/flask-app-link.png
new file mode 100644
index 0000000..c75fee1
Binary files /dev/null and b/uk-UA/images/flask-app-link.png differ
diff --git a/uk-UA/images/flask-app-with-colour.png b/uk-UA/images/flask-app-with-colour.png
new file mode 100644
index 0000000..11aee4b
Binary files /dev/null and b/uk-UA/images/flask-app-with-colour.png differ
diff --git a/uk-UA/images/flask-cakes.png b/uk-UA/images/flask-cakes.png
new file mode 100644
index 0000000..2232934
Binary files /dev/null and b/uk-UA/images/flask-cakes.png differ
diff --git a/uk-UA/images/flask-hello-paul.png b/uk-UA/images/flask-hello-paul.png
new file mode 100644
index 0000000..e6b519e
Binary files /dev/null and b/uk-UA/images/flask-hello-paul.png differ
diff --git a/uk-UA/images/flask-hello-world.png b/uk-UA/images/flask-hello-world.png
new file mode 100644
index 0000000..fa6c410
Binary files /dev/null and b/uk-UA/images/flask-hello-world.png differ
diff --git a/uk-UA/images/flask-template.png b/uk-UA/images/flask-template.png
new file mode 100644
index 0000000..a62457e
Binary files /dev/null and b/uk-UA/images/flask-template.png differ
diff --git a/uk-UA/images/html-file.png b/uk-UA/images/html-file.png
new file mode 100644
index 0000000..dead737
Binary files /dev/null and b/uk-UA/images/html-file.png differ
diff --git a/uk-UA/images/idle-css.png b/uk-UA/images/idle-css.png
new file mode 100644
index 0000000..090a1ac
Binary files /dev/null and b/uk-UA/images/idle-css.png differ
diff --git a/uk-UA/images/idle-html.png b/uk-UA/images/idle-html.png
new file mode 100644
index 0000000..f3d229a
Binary files /dev/null and b/uk-UA/images/idle-html.png differ
diff --git a/uk-UA/images/open-terminal.png b/uk-UA/images/open-terminal.png
new file mode 100644
index 0000000..c4bf48e
Binary files /dev/null and b/uk-UA/images/open-terminal.png differ
diff --git a/uk-UA/images/open-text-editor.png b/uk-UA/images/open-text-editor.png
new file mode 100644
index 0000000..552b289
Binary files /dev/null and b/uk-UA/images/open-text-editor.png differ
diff --git a/uk-UA/images/pi-run-web-app.png b/uk-UA/images/pi-run-web-app.png
new file mode 100644
index 0000000..6973df6
Binary files /dev/null and b/uk-UA/images/pi-run-web-app.png differ
diff --git a/uk-UA/images/solution.png b/uk-UA/images/solution.png
new file mode 100644
index 0000000..9f2de5a
Binary files /dev/null and b/uk-UA/images/solution.png differ
diff --git a/uk-UA/meta.yml b/uk-UA/meta.yml
new file mode 100644
index 0000000..cd31b2c
--- /dev/null
+++ b/uk-UA/meta.yml
@@ -0,0 +1,33 @@
+---
+title: Build a Python Web Server with Flask
+hero_image: images/banner.png
+description: Install the Python web framework Flask and set up a basic web server with different pages
+original_url: https://raspberrypi.org/learning/python-web-server-with-flask
+theme: yellow
+duration: 2
+listed: true
+ingredient: false
+copyedit: true
+curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
+interests: ''
+technologies: python, html-css-javascript
+site_areas: projects
+hardware: ''
+software: python, html-css-javascript
+version: 4.1
+last_tested: 2018-08-02
+steps:
+ - title: What you will make
+ - title: Create the app
+ completion:
+ - engaged
+ - title: Add a new page
+ - title: Create a HTML template
+ - title: Use CSS styles
+ completion:
+ - internal
+ - title: Dynamic content
+ completion:
+ - external
+ - title: 'Challenge'
+ challenge: true
diff --git a/uk-UA/resources/.keep b/uk-UA/resources/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/uk-UA/solutions/webapp.zip b/uk-UA/solutions/webapp.zip
new file mode 100644
index 0000000..c5d280b
Binary files /dev/null and b/uk-UA/solutions/webapp.zip differ
diff --git a/uk-UA/step_1.md b/uk-UA/step_1.md
new file mode 100644
index 0000000..0f08786
--- /dev/null
+++ b/uk-UA/step_1.md
@@ -0,0 +1,32 @@
+## 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 will need:
+
+- A Raspberry Pi with the latest Raspberry Pi OS
+
+--- collapse ---
+---
+title: Installing Flask
+---
+
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
+
+You can install it manually with the command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+sudo apt install python3-flask
+
+--- /code ---
+
+--- /collapse ---
\ No newline at end of file
diff --git a/uk-UA/step_2.md b/uk-UA/step_2.md
new file mode 100644
index 0000000..92e53d1
--- /dev/null
+++ b/uk-UA/step_2.md
@@ -0,0 +1,110 @@
+## Create the app
+
+--- task ---
+
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Use the 'change directory' command `cd` to open the new directory.
+
+##
+--- code ---
+
+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.
+
+##
+--- code ---
+
+language: python
+line_numbers: false
+--------------------------------------------------------
+
+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')
+
+--- /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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+python3 app.py
+
+--- /code ---
+
+--- /task ---
+
+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 ---
+
+--- task ---
+
+In the address bar, type `localhost:5000` and press Enter. You should see the welcome page.
+
+--- /task ---
+
+
+
+
diff --git a/uk-UA/step_3.md b/uk-UA/step_3.md
new file mode 100644
index 0000000..0bc0d8e
--- /dev/null
+++ b/uk-UA/step_3.md
@@ -0,0 +1,59 @@
+## Add a new page
+
+To add a new page to your web app, you create a new **route**.
+
+--- collapse ---
+---
+title: What is a route?
+---
+
+In the code you already have, there is a single route:
+
+```python
+@app.route('/')
+def index():
+ return 'Hello world'
+```
+
+This route is made up of three parts:
+
+- `@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`
+
+--- /collapse ---
+
+--- task ---
+
+Add the code for a new route to `app.py` and **save** the file.
+
+##
+--- code ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
+----------------------------------------------------------
+
+@app.route('/')
+def index():
+return 'Hello world'
+
+@app.route('/cakes')
+def cakes():
+return 'Yummy cakes!'
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+
+
+--- /task ---
diff --git a/uk-UA/step_4.md b/uk-UA/step_4.md
new file mode 100644
index 0000000..6ec7df1
--- /dev/null
+++ b/uk-UA/step_4.md
@@ -0,0 +1,123 @@
+## Create a HTML template
+
+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 ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir templates
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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.
+
+##
+--- code ---
+
+language: html
+line_numbers: true
+-------------------------------------------------------
+
+
+
+
My website
+
+
+
+--- /code ---
+
+
+
+--- /task ---
+
+--- task ---
+
+--- /task ---
+
+--- task ---
+
+Return to your `app.py` file and change the first line of code:
+
+##
+--- code ---
+
+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 ---
+
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 7
+-------------------------------------------------------
+
+@app.route('/')
+def index():
+return render_template('index.html')
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+Go to `localhost:5000/` page in **Chromium** to see your new HTML template displayed.
+
+
+
+--- /task ---
+
diff --git a/uk-UA/step_5.md b/uk-UA/step_5.md
new file mode 100644
index 0000000..de41298
--- /dev/null
+++ b/uk-UA/step_5.md
@@ -0,0 +1,123 @@
+## Use CSS styles
+
+**Cascading Style Sheets (CSS)** are rules to tell a browser how to display HTML content.
+
+--- task ---
+
+Open a new terminal window, so that you can leave the Flask web server running in the other one.
+
+--- /task ---
+
+--- task ---
+
+Make sure you are in the `webapp` directory using this command:
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+cd ~/Documents/webapp
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Create a new directory called `static`.
+
+##
+--- code ---
+
+language: bash
+line_numbers: false
+--------------------------------------------------------
+
+mkdir static
+
+--- /code ---
+
+--- /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
+---------------------------------------------------------
+
+
+
+
+
+
+
My website
+
+
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+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 ---
+
+--- collapse ---
+---
+title: I can't see the colours
+---
+
+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/uk-UA/step_6.md b/uk-UA/step_6.md
new file mode 100644
index 0000000..3273b19
--- /dev/null
+++ b/uk-UA/step_6.md
@@ -0,0 +1,111 @@
+## Dynamic content
+
+Websites like Facebook, YouTube and BBC News have dynamic content: these websites show different content within the same template.
+
+Now you will create a new route on your website so that the page will show you a personalised greeting.
+
+--- task ---
+
+Open `app.py` and add a new route to your application:
+
+##
+--- 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 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 ---
+
+Save both files, then visit `localhost:5000/hello/Paul` in the **Chromium browser**.
+
+The page you see should look like this:
+
+
+
+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 ---
+
+language: html
+line_numbers: true
+line_number_start: 6
+line_highlights: 7
+-------------------------------------------------------
+
+
My website
Hi Paul
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Save the changes to `index.html`, and then open `localhost:5000` to see the updated version.
+
+
+
+--- /task ---
+
+--- collapse ---
+---
+title: How does this route work?
+---
+
+- `@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.
+
+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 use the variable `name` that was passed in the route function `hello`.
+
+Visiting `localhost:5000/hello/` without a name creates an error.
+
+--- /collapse ---
\ No newline at end of file
diff --git a/uk-UA/step_7.md b/uk-UA/step_7.md
new file mode 100644
index 0000000..5b16d07
--- /dev/null
+++ b/uk-UA/step_7.md
@@ -0,0 +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
diff --git a/uk-UA/step_8.md b/uk-UA/step_8.md
new file mode 100644
index 0000000..762e3ae
--- /dev/null
+++ b/uk-UA/step_8.md
@@ -0,0 +1,28 @@
+## What can you do now?
+
+Try our [Introduction to web](https://projects.raspberrypi.org/uk-UA/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/uk-UA/projects?software%5B%5D=html-css-javascript) project.
+
+***
+Цей проєкт переклали волонтери:
+
+[name]
+
+[name]
+
+[name]
+
+Завдяки волонтерам ми надаємо можливість людям у всьому світі навчатися рідною мовою. Ви також можете допомогти нам у цьому — більше інформації про волонтерську програму на [rpf.io/translate](https://rpf.io/translate).