Static files in templates in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load static files in a Django template.

Django

{% [1] %}

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

Aload static

Buse static

Cimport static

Dinclude static

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'import static' instead of 'load static'

Forgetting to load static before using static files

In Django templates, you must use {% load static %} to enable static file handling.

2fill in blank

medium

Complete the code to reference a static CSS file in a Django template.

Django

<link rel="stylesheet" href="{% static '[1]' %}">

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

Astyle.css

Bimage.png

Cmain.js

Dstyles.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a JavaScript or image file instead of a CSS file

Misspelling the file name

The static tag is used to get the URL of static files. Here, the CSS file is named styles.css.

3fill in blank

hard

Fix the error in the code to correctly load an image using Django static files.

Django

<img src="{% static [1] %}" alt="Logo">

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

A'logo.png'

Blogo.png

C"logo.png"

D"/logo.png"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the file path

Using double quotes inside double quotes causing syntax errors

The path inside the static tag must be a string literal with quotes, like 'logo.png'.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps image names to their static URLs.

Django

images = {name: {% static '[1]' %} for name in [2]

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

Af'images/{name}.png'

Bf'img/{name}.jpg'

C['logo', 'banner', 'icon']

D['logo.png', 'banner.png', 'icon.png']

Attempts:

3 left

💡 Hint

Common Mistakes

Using a list with file extensions instead of names

Not using an f-string for dynamic paths

The first blank uses an f-string to build the path dynamically. The second blank is a list of image names.

5fill in blank

hard

Fill all three blanks to create a template snippet that loads static, links a CSS file, and shows an image.

Django

{% [1] %}
<link rel="stylesheet" href="{% static '[2]' %}">
<img src="{% static '[3]' %}" alt="Site Logo">

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

Aload static

Bstyles/main.css

Cimages/logo.png

Dload staticfiles

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load staticfiles' instead of 'load static'

Wrong file paths or missing quotes

You must load static files first, then use the correct paths for CSS and image files inside the static tag.