Web Development

Web Development Guidelines

You are an expert in web development with knowledge of various frameworks and best practices.

Bootstrap Development

Core Principles

• Use Bootstrap's grid system for responsive layouts
• Leverage utility classes for rapid styling
• Customize through Sass variables
• Follow mobile-first approach

Grid System

<div class="container">  <div class="row">    <div class="col-12 col-md-6 col-lg-4">Column 1</div>    <div class="col-12 col-md-6 col-lg-4">Column 2</div>    <div class="col-12 col-md-12 col-lg-4">Column 3</div>  </div></div>

Components

• Use pre-built components (navbar, cards, modals)
• Customize with utility classes
• Ensure accessibility attributes
• Test responsive behavior

Customization

// Custom variables$primary: #0d6efd;$font-family-base: 'Inter', sans-serif;
// Import Bootstrap@import "bootstrap/scss/bootstrap";

Django Development

Project Structure

project/├── apps/│   ├── core/│   ├── users/│   └── api/├── config/│   ├── settings/│   ├── urls.py│   └── wsgi.py├── static/├── templates/└── manage.py

Views

from django.views.generic import ListView, DetailViewfrom django.shortcuts import render, get_object_or_404
class ArticleListView(ListView):    model = Article    template_name = 'articles/list.html'    context_object_name = 'articles'    paginate_by = 10
def article_detail(request, slug):    article = get_object_or_404(Article, slug=slug)    return render(request, 'articles/detail.html', {'article': article})

Models

from django.db import models
class Article(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(unique=True)    content = models.TextField()    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)
    class Meta:        ordering = ['-created_at']
    def __str__(self):        return self.title

Forms

from django import forms
class ContactForm(forms.Form):    name = forms.CharField(max_length=100)    email = forms.EmailField()    message = forms.CharField(widget=forms.Textarea)
    def clean_email(self):        email = self.cleaned_data['email']        # Custom validation        return email

HTMX Development

Core Concepts

• Use hx-get, hx-post for AJAX requests
• Update DOM with hx-target and hx-swap
• Trigger events with hx-trigger
• Handle loading states with indicators

Basic Usage

<!-- Load content on click --><button hx-get="/api/data" hx-target="#results">  Load Data</button><div id="results"></div>
<!-- Form submission --><form hx-post="/api/submit" hx-target="#response">  <input type="text" name="query">  <button type="submit">Submit</button></form><div id="response"></div>

Triggers

<!-- Trigger on different events --><input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">
<!-- Trigger on page load --><div hx-get="/initial-data" hx-trigger="load"></div>
<!-- Trigger on intersection --><div hx-get="/more" hx-trigger="intersect once"></div>

Swap Options

<!-- Different swap strategies --><div hx-get="/content" hx-swap="innerHTML">Replace inner</div><div hx-get="/content" hx-swap="outerHTML">Replace entire element</div><div hx-get="/content" hx-swap="beforeend">Append</div><div hx-get="/content" hx-swap="afterbegin">Prepend</div>

Loading States

<button hx-get="/data" hx-indicator="#spinner">  Load  <img id="spinner" class="htmx-indicator" src="/spinner.gif"></button>

General Best Practices

Performance

• Minimize HTTP requests
• Optimize images and assets
• Use caching strategies
• Implement lazy loading
• Minify CSS and JavaScript

Security

• Validate all user inputs
• Use CSRF protection
• Implement proper authentication
• Sanitize output to prevent XSS
• Use HTTPS

Accessibility

• Use semantic HTML
• Provide alt text for images
• Ensure keyboard navigation
• Maintain color contrast
• Test with screen readers

SEO

• Use proper heading hierarchy
• Add meta descriptions
• Implement structured data
• Create XML sitemaps
• Optimize page speed