Static Files

Static Files — CSS, JavaScript, images, fonts, PDFs, etc. The files that make your site look beautiful and modern instead of plain HTML.

Many beginners either:

• hardcode inline styles forever (messy)
• put CSS in <style> tags in every template (DRY violation)
• or get stuck with “404 not found” errors when deploying because static files don’t work the same in development and production

Today we’re going to fix all that — step by step — like I’m sitting next to you, creating folders, writing files, and testing together.

We’ll make your polls app look professional with proper CSS, images, and JavaScript.

Goal for Today

By the end, you’ll have:

• A clean static/ folder structure
• CSS that applies globally (from base.html)
• A logo image in the header
• Page-specific JavaScript (e.g. vote counter animation)
• Working in both development (runserver) and ready for production (collectstatic)

Step 1: Understand Django’s Static Files Philosophy

Django has two modes:

Golden rule: Always develop with the same structure you’ll use in production.

Step 2: Create the Standard Static Folder Structure

In your project root (next to manage.py):

Now create app-specific static (recommended for reusability):

Why the extra polls/ inside? → Namespacing — prevents conflicts if two apps have style.css

Final structure:

Step 3: Add Settings for Static Files

Open mysite/settings.py

Make sure these are present (they usually are by default):

Step 4: Create Some Real Static Files

Global CSS: static/css/global.css

App-specific CSS: polls/static/polls/css/polls.css

A logo image

Download any small PNG (or create placeholder) → static/images/logo.png

Step 5: Load & Use Static Files in Templates

In templates/base.html (your master template):

Step 6: Test in Development

Visit any page → you should see:

• Logo in header
• Global styles (fonts, colors)
• Polls-specific styles
• No 404 errors in browser console

Common error: 404 for static files

Fixes:

• Did you add {% load static %} at top?
• Is STATICFILES_DIRS correct?
• Restart server after adding files

Step 7: Production – collectstatic

When deploying:

→ Copies all static files from everywhere into STATIC_ROOT (staticfiles/ folder)

Then configure your web server (nginx, Apache, Whitenoise) to serve /static/ from there.

Your Quick Practice Task (Do This Right Now)

1. Create the folders and files as shown

2. Add {% load static %} to base.html

3. Add global CSS link and logo image

4. Create polls/static/polls/css/polls.css with some style (e.g. .poll-card { border-left: 5px solid #006400; })

5. In index.html → add class to cards → see style apply

6. Add a small JS file static/js/alert.js:

   JavaScript

   PHP

   0 1 2 3 4 5 6

   alert("Static JS works!");

   Include it → reload → see alert

Tell me what feels next:

• “Done! Now show me how to use images in templates (user uploads later)”
• “How to use Bootstrap/Tailwind via CDN or local files?”
• “What is Whitenoise for production static files?”
• “Got 404 on static – here’s error”
• Or ready for Forms + Voting + POST + F()?

You now have a professional, maintainable static files setup — your site is starting to look like a real product.

You’re doing fantastic — let’s keep going! 🚀🇮🇳