Link Assets with url_for static
Reference CSS and JS without hardcoded paths.
Link Assets with url_for static is a free Flask Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flask Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Stop Hardcoding Paths
Writing /static/style.css by hand in every template feels easy, but it is fragile. Flask gives you url_for to build asset links for you. 🔧
The static Endpoint
Flask registers a built-in endpoint named static for your assets. You ask url_for for it instead of typing the raw path yourself.
Pass the Filename
Call url_for with the endpoint and a filename argument. Flask returns the correct URL pointing into your static folder.
url_for("static", filename="style.css")
# -> /static/style.cssUse It in a Template
Inside a Jinja2 template you wrap the call in double braces. The link tag then receives a generated, always-correct href.
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">Subfolders Work Too
Put the subpath right inside filename. Slashes in the value map straight onto folders within static.
url_for("static", filename="css/style.css")
# -> /static/css/style.cssWhy Bother
If you ever change static_url_path, every url_for link updates itself. Hardcoded paths would all silently break instead.
Correct Prefixes for Free
When your app runs under a sub-path on a server, url_for adds the right prefix automatically, so links keep working everywhere.
Link Your JavaScript
The same call wires up scripts. Point the script tag at url_for and your JS loads from static without a hardcoded path.
<script src="{{ url_for('static', filename='js/app.js') }}"></script>Images the Same Way
Pictures follow the identical pattern. Feed the filename to url_for and drop the result into the img tag source.
<img src="{{ url_for('static', filename='img/logo.png') }}">Call It in Python Too
url_for is not template-only. Inside a view you can call url_for to compute an asset URL and return or log it.
from flask import url_for
link = url_for("static", filename="style.css")One Habit to Keep
Make it a rule: every asset link goes through url_for. Future renames, prefixes, and cache busting then just work for you. ✅
Quick Check
You want a clean link to css/style.css inside static. Which call is right?
Recap: Linking Assets
You now use url_for with the static endpoint to build every asset link, so paths stay correct no matter how config changes. 🎯
Frequently asked questions
Is the “Link Assets with url_for static” lesson free?
Yes — the full text of “Link Assets with url_for static” is free to read here on the web, and the Flask Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flask Academy course, upgrade to CoddyKit PRO.
What will I learn in “Link Assets with url_for static”?
Reference CSS and JS without hardcoded paths. You practise Flask Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Flask Academy?
No prior experience is required. Flask Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Link Assets with url_for static” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Flask Academy lesson?
Yes. Every Flask Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The static Folder Convention
- Link Assets with url_for static
- Cache Busting with File Versions
- Static Files in Production Reality