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.

Practice

1. Where should you place CSS, JavaScript, and image files in a Flask project to serve them correctly?

easy

A. Inside the static folder

B. Inside the templates folder

C. In the root project directory

D. Inside the views folder

Solution

1. Step 1: Understand Flask static file convention

   Flask expects static files like CSS, JS, and images to be inside a folder named static for automatic serving.

2. Step 2: Identify correct folder for static files

   Files placed in templates or other folders won't be served as static assets by Flask.

3. Final Answer:

   Inside the static folder -> Option A

4. Quick Check:

   Static files = static folder [OK]

Hint: Static files always go in the 'static' folder [OK]

Common Mistakes:

• Putting CSS or JS inside the templates folder
• Placing images in the root directory
• Not using a static folder at all

2. Which of the following is the correct way to link a CSS file named style.css located inside a css folder within the static directory in a Flask template?

easy

A. <link href="/css/style.css" rel="stylesheet">

B. <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">

C. <link href="static/css/style.css" rel="stylesheet">

D. <link href="/static/style.css" rel="stylesheet">

Solution

1. Step 1: Use Flask's url_for to generate static file paths

   Flask recommends using url_for('static', filename='...') to get the correct URL for static files, ensuring it works in all environments.

2. Step 2: Check the filename path inside url_for

   The CSS file is inside css folder, so the filename should be css/style.css.

3. Final Answer:

   <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> -> Option B

4. Quick Check:

   Use url_for('static', filename=path) for static links [OK]

Hint: Always use url_for('static', filename='path') in templates [OK]

Common Mistakes:

• Hardcoding paths without url_for
• Missing subfolder in filename path
• Using incorrect folder names

3. Given this Flask project structure:

project/
 ├─ static/
 │   ├─ js/
 │   │   └─ app.js
 │   └─ images/
 │       └─ logo.png
 └─ templates/
     └─ index.html

What will be the rendered HTML for linking app.js inside index.html using:

<script src="{{ url_for('static', filename='js/app.js') }}"></script>

medium

A.

B.

C.

D.

Solution

1. Step 1: Understand url_for('static', filename=...)

   This generates a URL starting with /static/ followed by the filename path.

2. Step 2: Apply filename 'js/app.js'

   The full URL becomes /static/js/app.js, so the script tag will have src="/static/js/app.js".

3. Final Answer:

   <script src="/static/js/app.js"></script> -> Option C

4. Quick Check:

   url_for static adds '/static/' prefix [OK]

Hint: url_for('static', filename=...) adds '/static/' prefix automatically [OK]

Common Mistakes:

• Omitting the /static/ prefix in URL
• Using relative paths without /static/
• Confusing static folder with root

4. You wrote this in your Flask template to include an image:
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
But the image does not show up in the browser. What is the most likely cause?

medium

A. The url_for function cannot be used for images

B. The alt attribute is missing

C. The filename should not include the folder name

D. The static folder is missing or misplaced in the project

Solution

1. Step 1: Check static folder location

   Flask serves static files only if the static folder is in the correct place (usually project root). If missing or misplaced, files won't be found.

2. Step 2: Validate usage of url_for and filename

   The url_for usage is correct including folder name. The alt attribute does not affect image loading.

3. Final Answer:

   The static folder is missing or misplaced in the project -> Option D

4. Quick Check:

   Static folder must exist and be correctly placed [OK]

Hint: Ensure 'static' folder exists at project root [OK]

Common Mistakes:

• Forgetting to create the static folder
• Placing static folder inside templates
• Removing folder path from filename

5. You want to organize your static files neatly by placing CSS files in a css folder, JavaScript files in a js folder, and images in an images folder inside the static directory. Which of the following Flask template snippets correctly links a CSS file named main.css located in static/css/ and a JavaScript file named app.js located in static/js/?

hard

A. <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

B. <link rel="stylesheet" href="/css/main.css">
<script src="/js/app.js"></script>

C. <link rel="stylesheet" href="static/main.css">
<script src="static/app.js"></script>

D. <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script src="{{ url_for('static', filename='app.js') }}"></script>

Solution

1. Step 1: Use url_for with correct subfolder paths

   Since files are inside subfolders css and js, the filename argument must include these folders.

2. Step 2: Confirm correct HTML tags and attributes

   The <link> tag for CSS and <script> tag for JS are correctly formed with href and src respectively.

3. Final Answer:

   Use url_for with 'css/main.css' and 'js/app.js' paths -> Option A

4. Quick Check:

   Subfolders in filename + url_for = correct static linking [OK]

Hint: Include subfolder names in url_for filename for neat static files [OK]

Common Mistakes:

• Omitting subfolder names in filename
• Hardcoding paths without url_for
• Using wrong HTML attributes for CSS or JS