Serving CSS files in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to serve static CSS files in Flask.

Flask

app = Flask(__name__, static_folder=[1])

Drag options to blanks, or click blank then click option'

A"static"

B"templates"

C"assets"

D"css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates' folder for static files

Using incorrect folder names like 'css' or 'assets'

Flask serves static files from the folder named "static" by default. Setting static_folder="static" tells Flask where to find CSS files.

2fill in blank

medium

Complete the HTML code to link a CSS file named 'style.css' located in the static folder.

Flask

<link rel="stylesheet" href="{{ url_for([1], filename='style.css') }}">

Drag options to blanks, or click blank then click option'

A"styles"

B"static"

C"css"

D"static_files"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect endpoint names like 'css' or 'styles'

Forgetting to use url_for function

In Flask, url_for('static', filename='style.css') generates the correct URL to the CSS file inside the static folder.

3fill in blank

hard

Fix the error in the Flask route to serve a CSS file manually.

Flask

@app.route('/css/<path:filename>')
def send_css(filename):
    return send_from_directory([1], filename)

Drag options to blanks, or click blank then click option'

A"assets/css"

B"templates/css"

C"css"

D"static/css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates/css' which is for HTML templates

Using just 'css' without 'static' prefix

To serve CSS files manually, the directory path should point to the CSS folder inside the static folder, which is 'static/css'.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps CSS filenames to their sizes in bytes from the static/css folder.

Flask

css_files = {filename: os.path.getsize(os.path.join([1], filename)) for filename in os.listdir([2]) if filename.endswith('.css')}

Drag options to blanks, or click blank then click option'

A"static/css"

B"static"

C"templates/css"

D"assets/css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different folder paths for listing and size

Using 'templates/css' which is incorrect

Both blanks should be 'static/css' to correctly access the CSS files folder for listing and size checking.

5fill in blank

hard

Fill all three blanks to create a Flask route that serves a CSS file from the static folder with caching headers.

Flask

@app.route('/styles/<path:filename>')
def styles(filename):
    response = send_from_directory([1], filename)
    response.headers['Cache-Control'] = [2]
    response.headers['Content-Type'] = [3]
    return response

Drag options to blanks, or click blank then click option'

A"static/css"

B"public/css"

C"no-cache, max-age=3600"

D"text/css"

Attempts:

3 left

💡 Hint

Common Mistakes

Wrong folder path

Wrong Cache-Control value

Wrong Content-Type header

The CSS files are served from 'static/css'. The Cache-Control header sets caching rules, and Content-Type must be 'text/css' for CSS files.