Djangoframework~30 mins

Why static file management matters in Django - See It in Action

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Why static file management matters

📖 Scenario: You are building a simple Django website that needs to show a logo image and style the page with CSS. To do this correctly, you must manage static files like images and stylesheets properly.

🎯 Goal: Create a Django project setup that includes static files management. You will add a CSS file and an image file, configure Django to find these static files, and use them in a template so the page displays styled content with the logo image.

📋 What You'll Learn

Create a static folder inside your Django app

Add a CSS file named style.css with simple styling

Add an image file named logo.png inside the static folder

Configure settings.py to include static files settings

Use the {% load static %} tag in your template

Reference the CSS and image files correctly in the template

💡 Why This Matters

🌍 Real World

Websites need styles, images, and scripts to look good and work well. Managing static files properly helps deliver these assets efficiently to users.

💼 Career

Understanding static file management is essential for Django developers to build professional, maintainable web applications.

Progress0 / 4 steps

Create the static folder and add CSS file

Inside your Django app folder, create a folder named static. Inside this static folder, create a CSS file named style.css with the exact content: body { background-color: #f0f0f0; }

Django

# Create a folder named 'static' inside your app
# Inside 'static', create 'style.css' with the content:
# body { background-color: #f0f0f0; }

Need a hint?

Static files like CSS should be inside a folder named static in your app.

Add logo image and configure settings.py

Add an image file named logo.png inside the same static folder. Then, in your project's settings.py, add the line STATIC_URL = '/static/' if it is not already present.

Django

static/style.css

body { background-color: #f0f0f0; }
# Add 'logo.png' inside 'static' folder
# Add 'STATIC_URL = "/static/"' in settings.py

Need a hint?

The STATIC_URL setting tells Django where to find static files in URLs.

Load static files in template and link CSS

In your Django template HTML file, add the line {% load static %} at the top. Then, add a <link> tag to include the CSS file using {% static 'style.css' %} inside the <head> section.

Django

{% load static %}

Need a hint?

Use the {% load static %} tag to enable static file usage in templates.

Add logo image tag in template

Inside the <body> of your template, add an <img> tag that uses {% static 'logo.png' %} as the src attribute to display the logo image.

Django

{% load static %}

Need a hint?

Use the {% static %} tag inside the src attribute to load images.