**Course Title:** Mastering Django Framework: Building Scalable Web Applications **Section Title:** Static Files and Media Management **Topic:** Handling static files (CSS, JavaScript, images) in Django In this topic, we will explore how to handle static files in Django, including CSS, JavaScript, and images. We will cover the following topics: ### What are Static Files? Static files are files that do not change frequently, such as CSS, JavaScript, and images. These files are typically served directly by the web server without any processing. ### Serving Static Files in Django Django provides a built-in way to serve static files. To serve static files, you need to: 1. **Create a static directory**: Create a directory named `static` in your app directory. This directory will hold all your static files. 2. **Configure the static files**: In your `settings.py` file, add the following code to configure the static files: ```python STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] ``` The `STATIC_URL` variable specifies the URL prefix for serving static files. The `STATICFILES_DIRS` variable specifies the directories where Django will look for static files. 3. **Collect static files**: Run the following command to collectstatic to collect all static files from your app and store them in a single directory: ```bash python manage.py collectstatic ``` 4. **Serve static files**: To serve static files, you need to add the following code to your `urls.py` file: ```python from django.conf import settings from django.conf.urls.static import static urlpatterns = [ # ... ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) ``` ### Serving CSS Files To serve CSS files, you can create a CSS file in your `static` directory and link it to your HTML template using the following code: ```html <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> ``` ### Serving JavaScript Files To serve JavaScript files, you can create a JavaScript file in your `static` directory and link it to your HTML template using the following code: ```html <script src="{% static 'js/script.js' %}"></script> ``` ### Serving Images To serve images, you can create an images directory in your `static` directory and link it to your HTML template using the following code: ```html <img src="{% static 'images/image.jpg' %}"> ``` ### Best Practices * Keep your static files organized by creating separate directories for CSS, JavaScript, and images. * Use the `collectstatic` command to collect all static files from your app and store them in a single directory. * Use the `STATIC_URL` variable to specify the URL prefix for serving static files. * Use the `STATICFILES_DIRS` variable to specify the directories where Django will look for static files. ### Conclusion In this topic, we have covered how to handle static files in Django, including CSS, JavaScript, and images. We have also covered best practices for serving static files and organizing your static files. ### What's Next? In the next topic, we will cover how to serve media files and user uploads in Django. ### Leave a Comment or Ask for Help If you have any questions or need help with serving static files in Django, please leave a comment below.