Static file organization in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to serve static files in Flask.

Flask

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

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

A"templates"

B"public"

C"assets"

D"static"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates' folder which is for HTML templates, not static files.

Using 'assets' or 'public' which are common in other frameworks but not default in Flask.

Flask uses the folder named static by default to serve static files like CSS and images.

2fill in blank

medium

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

Flask

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

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

A"style.css"

B"css/style.css"

C"/static/style.css"

D"static/style.css"

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'static/' prefix inside filename which duplicates the path.

Using absolute paths starting with a slash which is incorrect here.

The url_for('static', filename='style.css') function generates the correct URL for the file style.css inside the static folder.

3fill in blank

hard

Fix the error in the Flask route to serve a static image named logo.png from the static folder.

Flask

@app.route('/logo')
def logo():
    return send_from_directory([1], 'logo.png')

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

A"assets"

B"static"

C"templates"

D"public"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates' folder which is for HTML files, not static files.

Using 'assets' or 'public' which are not default Flask static folders.

The send_from_directory function needs the folder name where static files are stored, which is static in Flask.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps filenames to their sizes for all files in the static folder.

Flask

import os
files = {f: os.path.getsize(os.path.join([1], f)) for f in os.listdir([2])}

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

A"static"

B"templates"

C"assets"

D"public"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different folder names in the two blanks causing path errors.

Using 'templates' or other folders which do not contain static files.

Both blanks should be the static folder name because we want to list and get sizes of files inside the static folder.

5fill in blank

hard

Fill all three blanks to create a Flask route that serves a static CSS file from a subfolder named 'css' inside the static folder.

Flask

@app.route('/custom-style')
def custom_style():
    return send_from_directory(os.path.join([1], [2]), [3])

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

A"static"

B"css"

C"style.css"

D"templates"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templates' instead of 'static' for the main folder.

Putting the filename in the folder argument or vice versa.

The send_from_directory function needs the path to the 'css' subfolder inside 'static' and the filename 'style.css' to serve the CSS file correctly.