Static file organization in Flask - Mini Project: Build & Apply

Static file organization in Flask

📖 Scenario: You are building a simple Flask web app that shows a welcome page with a styled heading and an image. To keep your project clean and organized, you need to place your CSS and image files in the correct static folders.

🎯 Goal: Organize static files by creating a CSS file and an image file in the static folder, then link the CSS and image properly in your Flask template.

📋 What You'll Learn

Create a static folder in your Flask project root.

Inside static, create a css folder and add a file named style.css with a simple style.

Inside static, create an images folder and add an image file named welcome.png (assume the file exists).

Create a Flask route that renders an HTML template linking to the CSS and displaying the image using Flask's url_for function.

💡 Why This Matters

🌍 Real World

Organizing static files properly is essential for any web app to keep code clean and maintainable. This structure helps browsers find CSS, images, and scripts easily.

💼 Career

Web developers frequently work with static assets in frameworks like Flask. Knowing how to organize and link these files is a basic but crucial skill.

1

Create the Flask app and static folders

Create a Flask app in a file named app.py with a route / that renders a template called index.html. Also, create a folder named static/css and inside it create a file named style.css with the content h1 { color: blue; }.

Flask

# Create app.py with Flask app and route
# Create static/css/style.css with h1 color blue

Need a hint?

Remember to import Flask and render_template. The CSS file should be inside static/css folder.

2

Add an images folder and place welcome.png

Inside the static folder, create a new folder named images. Assume you have an image file named welcome.png placed inside static/images.

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

# Place welcome.png inside static/images folder

Need a hint?

Create the images folder inside static and place the welcome.png file there.

3

Create the HTML template linking CSS and image

Create a file named templates/index.html. Inside it, write HTML that links the CSS file using url_for('static', filename='css/style.css') and displays the image using url_for('static', filename='images/welcome.png'). The page should have an <h1> with text Welcome to Flask!.

Flask

Need a hint?

Use the Jinja2 syntax {{ url_for('static', filename='...') }} to link CSS and image files.

4

Run the Flask app and verify static files load

Add the code to run the Flask app only if the file is run directly by checking if __name__ == '__main__': and call app.run(debug=True).

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

# static/css/style.css content:
# h1 { color: blue; }
# static/images/welcome.png assumed to be placed




    
    
    Welcome
    


    Welcome to Flask!
    



# Add code to run the app below
# Your code here

Need a hint?

Use the standard Flask app run guard to start the server with debug mode on.