Flask Tutorial #9 - Static Files (Custom CSS, Images & Javascript)

This flask tutorial focuses on how to use custom CSS, images and javascript in your HTML files from within a flask app. It discusses how to render and where to place static files so that they work with
pythons flask module.

Text-Based Tutorial: Coming Soon...

◾◾◾◾◾
💻 Enroll in The Fundamentals of Programming w/ Python

◾◾◾◾◾◾

⚡ Please leave a LIKE and SUBSCRIBE for more content! ⚡

Tags:
- Tech With Tim
- Python Tutorials
- Flask tutorial python
- Python flask
- Flask python static images
- Flask python static css
- Css flask python
- Javascript flask

#Python #Flask

[adjbutler]

color #FFFA is a white color that is why the <h1> disappeared

[Carolus_]

Hey Tim, thank you for the great tutorial. I want to share a problem that I encountered during this lesson on static files and CSS templates.
I was using Firefox as browser to test the flask server and the first time I wrote the style.css file I made a syntax error so the page was not displayed with the expected body color. The problem was that after correcting the css file, the page continued to be displayed bad.
I lost a lot of time to figure where the problem was, I refreshed the web page a lot of times, I stopped and restarted the python script more time but without success. Finally I discovered that firefox has a http cache and load the css file once, so changing the file and even refreshing the page has no effect.
To solve the problem is necessary to activate the Firefox developr console pressing F12, then open the customize menu (three dots in the right upper border), Settings and finally check the box "Disable HTTP cache (when tools are open)".
After that, each time the page is refreshed the new css file with latest modifications is used and your samples are working as a charm!
I'm not an expert in web development but I'm sure that there are a lot of other followers of your channel for which this simple trick will help to save a lot of time.

[ted]

This also works:
<link rel="stylesheet" href="/static/globals.css" />

[jlu]

I believe the reason an 'extra' bracket comes out is because you are using autocomplete; where autocomplete closes the bracket for you but you typed it first, then autocomplete-ed the code. Try typing opening bracket and the code as you would without the closing bracket for autocomplete coding.


Thanks for the tutorial!

[Jeronimoooo]

If you're watching this and want to know how to write a .bat to start your Flask server in debug mode on Windows, here's how:
1. Create a virtual environment for your Flask app
2. Create a .bat file in the directory of your Flask app with the following code. Apply to your own directory settings, here I have a project on my desktop with dir Python
@echo off
cmd /k "cd /d & activate & cd & set FLASK_APP=test.py & set FLASK_ENV=development & set FLASK_DEBUG=1 & flask run"
There might be a cleaner way but this works. Cheers! You don't need to set up a virtual environment but I just think it's good practice.

[vvaallddeess]

Anyone using Google Chrome: make sure your "style.css" file is in the folder ".../styles/" or whatever you call it. You can also change the directory for the static folder by using

app = Flask(__name__,

in the class instatation.

[fcmorena]

this guy really amazing, one of the best python course instructor.

[MadeInLessDev]

Thank you i was struggling to get my JS and CSS to connect!

[cybernono]

Thank you so much Tim, despite my level in English I understood everything.

[GauravSharma-uiyd]

Can you show how to add an upload button, so that user can upload images, files, audio etc on our website, and then I can process it and return the user a processed file which they can download.
For example user uploads an image, then i process it (say just change its colour) and then the user can download the changed image.

[prosalmanplays]

Thanks
This video helped me alot, cause I was badly stuck since morning figuring out how to load images, Css styling, javascript when I tried running my already designed website using Python3 .
I was stuck with loading Images, Javascript code and CSS styling when running my website using Python.
You saved my time
Thank

[hemlatabendre]

your videos are way better than udemy course for learning python . thanks

[pseudounknow]

If the Home Page text in the home.html file is always printed in clear white color eventhough you changed the color in the css file just do "shift + F5" to clear the cache and refresh the page (Works in Chrome W10)

[Kennethlumor]

Hello bro please and please help me solve this (when i change the color or background color and refresh the page still it dosen't change any thing please

[codeencrypted]

Thank you so much, could not previously link css files but your tutorial was so helpful. Wishing you the best life possible. Thank you from England

[tharindudamintha]

Thank you for the great tutorial. Please upload some tutorials about how to deploy/host an API to an online server as well. Thanks again.

[vortex]

Great video man! Thanks for the work you do for us!

[marcioslsouza]

Hey Tim, thank you for the amazing tutorial. It would be great if you can teach us how to use DataTables in conjunction with Flask to render tables in python.

[krunaljethva]

I have a image which i wanted to set in the background which i have done in css as body { background: url(image.jpg) } how to make it work ?

[PeranMe]

Why do the url_for(), what’s the advantage compared to just doing it HTML-only? Loving this series, keep up the good work!