Run Python Flask Application in Visual Studio Code

ADD STATIC FILE CSS, JS, IMAGES IN PYTHON FLASK

Flask_project/app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
@app.route('/index')
def index():
    courses = ["C", "C++", "Java", "Python", "HTML", "CSS"]
    return render_template("index.html", courses=courses)


if __name__ == '__main__':
    app.run(debug=True)

Flask_project/templates/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{{url_for('static',filename='css/style.css')}}" />
  </head>
  <body>
    <h1>Tutor Joes</h1>
    <p>Learn More Be Smart</p>
    <h3>List of Computer Courses</h3>
    <ul>
      {% for course in courses %}
      <li>{{course}}</li>
      {% endfor %}
    </ul>
    <img src="{{url_for('static',filename='images/tree.png')}}" alt="Tree" />
    <script src="{{url_for('static',filename='js/script.js')}}"></script>
  </body>
</html>

Flask_project/static/css/style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  font-family: "Poppins", sans-serif;
}
body {
  background-color: palegreen;
}

h1 {
  font-weight: 600;
  color: #192a56;
}

h3 {
  font-weight: 500;
  color: #e84118;
}

Flask_project/static/js/script.js

console.log("Working");

TEMPLATE INHERITANCE IN PYTHON FLASK

Flask_project/app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
@app.route('/index')
def index():
    courses = ["C", "C++", "Java", "Python", "HTML", "CSS"]
    return render_template("index.html", courses=courses)


@app.route('/about')
def about():
    fruits=['orange','apple','pineapple','banana']
    return render_template("about.html",fruits=fruits)


if __name__ == '__main__':
    app.run(debug=True)

Flask_project/templates/index.html

{% extends "layout.html" %} {% block title %} Home Page{% endblock %} {% block body %}
<h1>Tutor Joes</h1>
<p>Learn More Be Smart</p>
<h3>List of Computer Courses</h3>
{#
<ul>
  {% for course in courses %}
  <li>{{course}}</li>
  {% endfor %}
</ul>
#}

<img src="{{url_for('static',filename='images/tree.png')}}" alt="Tree" />

{% endblock %}

Flask_project/templates/about.html

{% extends "layout.html" %} {% block title %}About Page{% endblock %} {% block body %}
<h1>About Tutor Joe's</h1>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum hic laborum rem ratione. Dolore tempora minus aliquid officiis ullam aspernatur tempore magni distinctio ipsum quas. Repudiandae aliquid dolorum id natus reiciendis aperiam amet, itaque, consectetur facere nobis totam tempora vero, sed
  sunt earum ducimus et eligendi. Perferendis officiis magni pariatur sapiente doloribus est laudantium libero! Libero expedita repudiandae incidunt optio nobis error sapiente modi. Ipsum cupiditate ab nam modi temporibus quisquam voluptates, inventore in. Expedita dolorem odit aperiam omnis non
  optio necessitatibus, corporis eveniet autem error, animi saepe consequuntur. Saepe quod magni maiores doloremque itaque non fugit? Nulla, voluptas ipsum.
</p>
 {% endblock %}

Flask_project/templates/layout.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}{% endblock %} - Flask Tutorial</title>
    <link rel="stylesheet" href="{{url_for('static',filename='css/style.css')}}" />
  </head>
  <body>
    {% block body %}{% endblock %}
    <script src="{{url_for('static',filename='js/script.js')}}"></script>
  </body>
</html>

COMMENTS IN JINJA TEMPLATE IN PYTHON FLASK

In Jinja2 templates used in Python Flask, you can add comments using the {# ... #}. Anything between {# and #} will be ignored by the template engine and won't be included in the rendered output.