Djangoframework~30 mins

Static files in development in Django - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Static files in development

📖 Scenario: You are building a simple Django website that needs to show a logo image and apply some basic styles using CSS. To do this, you must set up static files correctly so Django can find and serve your CSS and image files during development.

🎯 Goal: Set up Django static files configuration and create a simple HTML page that loads a CSS file and displays an image from the static folder.

📋 What You'll Learn

Create a STATIC_URL setting in settings.py

Create a folder named static inside your Django app

Add a CSS file and an image file inside the static folder

Load static files in the Django template using the {% load static %} tag

Use the {% static %} template tag to link the CSS and image files

Ensure the development server serves static files correctly

💡 Why This Matters

🌍 Real World

Websites often need to serve images, stylesheets, and scripts. Proper static file setup ensures these assets load correctly during development.

💼 Career

Understanding static files is essential for Django developers to build visually appealing and functional web applications.

Progress0 / 4 steps

Add STATIC_URL setting in settings.py

In your Django project's settings.py file, create a variable called STATIC_URL and set it to the string '/static/'.

Django

# Your code here

Need a hint?

This setting tells Django the URL prefix to use for static files during development.

Create a static folder and add CSS and image files

Inside your Django app folder, create a folder named static. Inside this static folder, create a CSS file named styles.css with the content body { background-color: #f0f0f0; }. Also, add an image file named logo.png (you can use any small image).

Django

STATIC_URL = '/static/'
# Create static/styles.css and add body background color
# Add logo.png image file inside static folder

Need a hint?

The static folder inside your app holds your CSS and image files. The CSS file changes the background color.

Load static files in the Django template

In your Django template HTML file, add the line {% load static %} at the very top. Then, inside the <head> tag, link the CSS file using <link rel="stylesheet" href="{% static 'styles.css' %}">. Inside the <body>, add an <img> tag with the source set to {% static 'logo.png' %} and alt text Logo.

Django

STATIC_URL = '/static/'

# Add {% load static %} at the top of your template
# Link styles.css in 
# Add  with logo.png in

Need a hint?

The {% load static %} tag enables using the {% static %} template tag to link static files.

Run development server and verify static files load

Start the Django development server using python manage.py runserver. Open your browser and go to http://127.0.0.1:8000/ to see the page with the background color applied and the logo image displayed. Ensure the static files are served correctly without errors.

Django

STATIC_URL = '/static/'

# static/styles.css content:
# body { background-color: #f0f0f0; }

# static/logo.png is an image file placed here


{% load static %}



    
    
    Static Files Example
    


    



# Run the server and check the page

Need a hint?

Use the Django development server to test your static files setup. The background color and logo image should appear on the page.