Failed to load resource: the server responded with a status of 404 (NOT FOUND)" When trying to link CSS and JS in Flask

Question

When trying to link a CSS and JS file to the HTML file, it fetch it from the URL instead of from files!! Meaning that if trying to link "../static/style.css" it tries to find it from the URL and link "subjects/static/style.css"

Note: When tried to make the URL shorter it worked.

Here is the Python Code

@app.route("/subjects/<subject>/<LO_id>")
@app.route("/subjects/<subject>/<LO_id>/")
def LO(subject, LO_id):
    return render_template("LO.html")

Here is the HTML Code

{% extends "layout.html" %}
{% block body %}
    <main class="LO">
        <h1>PH.1.05</h1>
        <hr>
        <div class="concepts">
            <h2>Concepts</h2>
            <ul>
                <div class="concept">
                    <li>Measurement Error Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
                <div class="concept">
                    <li>Measurement Error</li>
                    <div class="video-container">
                        <i class='bx bx-x close'></i>
                        <iframe class="video" width="836" height="480"
                                src="https://www.youtube.com/embed/pjQgH_KmedA" 
                                title="أسباب حبنا للتفاهة - بودكاست إطناب" 
                                frameborder="0"  allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                </div>
            </ul>
        </div>
        <hr>
        <div class="extra-resources">
            <div class="buttons">

            </div>
            <h2>Extra Resources</h2>
            <h3>References</h3>
            <ul>
                <li><a href="#">Zumbdall - Chapter 6</a></li>
                <li>Campbell - Chapter 7</li>
                <li>Serway - Lesson 2</li>
                <li>Haliday</li>
            </ul>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptatum et error cum assumenda, sapiente in quaerat quidem exercitationem neque sequi ratione soluta ducimus iste voluptatibus atque nemo iusto? Earum!</p>
            <p>You can also see this <a href="#">channel</a> for more visual representation</p>
        </div>
    </main>
    <!-- <script src="../static/xdPlayer/player.js"></script> -->
    <script src="../static/script.js"></script>
{% endblock %}

I tried to make the URL for this template shorter instead of indenting it in a long URL and it worked! But this is not what I want.

Answer 1

The browser tries to resolve the .. which evaluates to subject, since that's the parent part of the current URI. For static files there's a specific API you can use to avoid such behaviour:
url_for('static', filename='style.css') will find style.css in your static directory, as described in the documentation