How to Set Up a Django Frontend: A Complete Tutorial

Previous Related Blog : How to Use Django Admin and Models: A Beginner's Guide

Prerequisites:

To access the frontend files, go to my GitHub repository, download the zip file containing the Starter-kit, and extract it as follows:
1. Download the starter_kit.zip file from the repository.
2. Extract the contents to your desired folder.

GitHub Repository - Django_App

In Django, the common structure for organizing HTML, CSS, and JS files involves using the templates and static directories. Place your files in these folders to avoid errors:
1. HTML files go into the templates folder.
2. CSS and JS files go into the static folder.

    ├── core/  # Project File
    ├── gsap-public/ # File from Starter-Kit
    ├── media/ # For Media which is added from Backend
    ├── static/ # File from Start-Kit
    │   ├── assets/ # File Containing Favicon
    │   |   ├── favicon.png
    |   ├── css/ # File Contains CSS Files
    │   │   ├── styles.css
    │   │   └── swiper-bundle.min.css
    │   ├── img/ # File Contains all Images
    │   │   ├── watches-1.png
    │   │   ├── watches-2.png
    │   │   ├── watches-3.png
    │   │   └── watches-border.png
    │   ├── js/ # File Contains JS Files
    │   |    ├── gsap.min.js
    │   │    ├── main.js
    │   │    └── swiper-bundle.min.js
    ├── store/ # App of the Project Core
    │   ├── __pycache__/
    │   ├── migrations/
    │   └── templates/ # File Contains HTML Files
    │       └── index.html
    │   ├── __init__.py
    │   ├── admin.py
    │   ├── apps.py
    │   ├── models.py
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py
    ├── venv/
    ├── .gitignore
    ├── db.sqlite3
    ├── manage.py
    └── starter_kit.zip

What is `{% load static %}` in Django ?

In Django, {% load static %} is a special command used inside HTML template to make sure that CSS, JavaScript and Image files are loaded properly.
These files are called static files because they don’t change dynamically they just sit there, like stylesheets and scripts that a website uses.

Why do we need `{% load static %}` ?

The {% load static %} command helps Django understand where to find these static files when the website is running.
Without this, Django won’t know how to link to these files correctly, and your website might break or look strange because it can’t load the necessary CSS or JavaScript.

How do we use it ?

{% load static %}: This tells Django to prepare to load static files.
{% static 'path/to/file' %}: This finds the correct file (like CSS, JavaScript, or an image) and creates the correct link to it.

First, we will add {% load static %} at the top of our templates/index.html file. This ensures that all static files (like CSS and JS) load properly and don't cause any issues.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ========================= FAVICON ============================ -->
    <link rel="shortcut icon" href="{% static '/assets/favicon.png' %}" type="image/x-icon">

    <!-- ========================= REMIXICONS ============================ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css">

    <!-- ========================= SWIPER CSS ============================ -->
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">

    <!-- ========================= CSS ================================== -->
    <link rel="stylesheet" href="{% static '/css/styles.css'%}">

    <title>WATCHES</title>
</head>
<body>
    <!-- ======================== Below Rest of the Code==================== -->

    <!-- =============================== GSAP ================================= -->
    <script src="/static/js/gsap.min.js"></script>

    <!-- =============================== SWIPER JS ============================= -->
    <script src="/static/js/swiper-bundle.min.js"></script>

    <!-- =====================JavaScript========================= -->
    <script src="{% static '/js/main.js' %}"></script>
</body>