Hackforge Academy

Explanation

Flask serves static files such as CSS, JavaScript, and images from the static directory by default.

Code:

static/
├── css/style.css
├── js/app.js
└── images/logo.png

Explanation

Use url_for() in Jinja2 to generate the correct URL for a static CSS file.

Code:

<link rel="stylesheet"
      href="{{ url_for('static', filename='css/style.css') }}">

Explanation

JavaScript files can be included using the static URL generated by url_for().

Code:

<script src="{{ url_for('static', filename='js/app.js') }}"></script>

Explanation

Images can also be referenced from the static directory using url_for().

Code:

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

Explanation

Keeping frontend assets in separate folders makes the Flask application easier to maintain.

Code:

static/
├── css/
├── js/
├── images/
└── fonts/