The reason why Jinja Templates are called templates is because it makes it easier to create HTML pages by templating. Instead of re-writing the same header/navigation bar/footer you can just create a header and footer template which can then be applied to all web pages in your website.
e.g.
{% include "header.html" %}
Changeable part of your webpage. e.g. the body of the page.
{% include "footer.html" %}
Then when the website is rendered, the header.html and footer.html gets inserted where the {% include %} specifies.
Using the documentation from Jinja: https://jinja.palletsprojects.com/en/3.0.x/templates/#include
1. Remove the <head> & navigation code from index.html and place it in the header.html file.
2. Remove the <footer> from index.html and place it in the footer.html file.
3. Using the above documentation, use include to make the website still function exactly the same as before.