Index Page Elements

<h1>Welcome!</h1>
<p>Tagline here</p>

<nav>
  <a href="/about">About</a>
</nav>

<div class="features">
  <h3>Feature 1</h3>
</div>

<button>Get Started</button>

🔹 Step 1: Create Index View

The index view is a simple function that renders your homepage template. You can pass context data like featured items, statistics, or dynamic content to make the page more engaging.

# myapp/views.py
from django.shortcuts import render

def index(request):
    context = {
        'site_name': 'My Django Site',
        'tagline': 'Building amazing web applications',
        'features': [
            {'title': 'Fast', 'description': 'Lightning-fast performance'},
            {'title': 'Secure', 'description': 'Built-in security features'},
            {'title': 'Scalable', 'description': 'Grows with your needs'},
        ]
    }
    return render(request, 'index.html', context)

🔹 Step 2: Configure Root URL

Set up the root URL pattern to point to your index view. This makes your homepage accessible at the base URL of your site without any additional path.

# myapp/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

# project/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

🔹 Step 3: Create Index Template

Design an attractive homepage that extends your base template. Include a hero section, feature highlights, and clear navigation to guide visitors through your site.

<!-- templates/index.html -->
{% extends 'base.html' %}

{% block title %}{{ site_name }} - Home{% endblock %}

{% block content %}
    <div class="hero">
        <h1>{{ site_name }}</h1>
        <p class="tagline">{{ tagline }}</p>
        <a href="{% url 'about' %}" class="btn">Learn More</a>
    </div>

    <section class="features">
        <h2>Why Choose Us?</h2>
        <div class="feature-grid">
            {% for feature in features %}
                <div class="feature-card">
                    <h3>{{ feature.title }}</h3>
                    <p>{{ feature.description }}</p>
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="cta">
        <h2>Ready to Get Started?</h2>
        <a href="{% url 'signup' %}" class="btn-primary">Sign Up Now</a>
    </section>
{% endblock %}

🔹 Add Styling

Create an attractive design for your index page using CSS. You can add styles directly in the template or use a separate CSS file for better organization.

<!-- Add to base.html or index.html -->
{% block extra_css %}
<style>
    .hero {
        text-align: center;
        padding: 60px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .hero h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .tagline {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .btn {
        display: inline-block;
        padding: 12px 30px;
        background: white;
        color: #667eea;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }
    
    .features {
        padding: 60px 20px;
        text-align: center;
    }
    
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }
    
    .feature-card {
        padding: 30px;
        background: #f8f9fa;
        border-radius: 10px;
    }
    
    .cta {
        text-align: center;
        padding: 60px 20px;
        background: #f8f9fa;
    }
    
    .btn-primary {
        display: inline-block;
        padding: 15px 40px;
        background: #667eea;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.2rem;
        margin-top: 20px;
    }
</style>
{% endblock %}

🔹 Simple Index Example

Here's a minimal index page perfect for beginners. It includes just the essential elements: a welcome message, brief description, and navigation links to other pages.

<!-- Simple index.html -->
{% extends 'base.html' %}

{% block content %}
    <div style="text-align: center; padding: 50px;">
        <h1>Welcome to My Django Site</h1>
        <p>This is my first Django website!</p>
        
        <div style="margin-top: 30px;">
            <a href="{% url 'about' %}">About</a> |
            <a href="{% url 'contact' %}">Contact</a> |
            <a href="{% url 'blog' %}">Blog</a>
        </div>
    </div>
{% endblock %}

🔹 Dynamic Content

Make your index page dynamic by displaying database content like recent posts, featured products, or user statistics. This keeps your homepage fresh and engaging for returning visitors.

# views.py
from .models import Post, Product

def index(request):
    recent_posts = Post.objects.all()[:3]
    featured_products = Product.objects.filter(featured=True)[:4]
    
    context = {
        'recent_posts': recent_posts,
        'featured_products': featured_products,
    }
    return render(request, 'index.html', context)

<!-- index.html -->
<h2>Recent Blog Posts</h2>
{% for post in recent_posts %}
    <article>
        <h3>{{ post.title }}</h3>
        <p>{{ post.excerpt }}</p>
        <a href="{% url 'post_detail' post.id %}">Read More</a>
    </article>
{% endfor %}