Web Development

by mindrally97184105b5daNo license269 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 5 weeks ago

Web development guidelines covering Bootstrap, Django, HTMX, and general web best practices

Instructions onlySoftware Development

AI-generated overview

Provides web development guidelines for Bootstrap, Django, HTMX, and general web best practices.

What it does: This skill supplies reference guidance for building web applications, covering Bootstrap grid and component usage, Django project structure, views, models and forms, and HTMX attributes for AJAX-style interactions. It also lists general best practices for performance, security, accessibility and SEO. It produces advice and code examples rather than running tools or generating files.
When to use it: Use it when working on web front-end or Django back-end code and needing conventions or example snippets. It is suited to questions about Bootstrap layout, Django models and views, or HTMX request and swap behavior.
Requirements: No scripts or tools are required; it is instructions only.

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

html

<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>

<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

scss

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

// 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

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

Views

python

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})

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

python

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

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

python

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

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

html

<!-- 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>

<!-- 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

html

<!-- 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>

<!-- 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

html

<!-- 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>

<!-- 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

html

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

<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

Source and attribution

Source:mindrally/skillsinweb-developmentat commit9718410

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Web Development

Web Development Guidelines

Bootstrap Development

Core Principles

Grid System

Components

Customization

Django Development

Project Structure

Views

Models

Forms

HTMX Development

Core Concepts

Basic Usage

Triggers

Swap Options

Loading States

General Best Practices

Performance

Security

Accessibility

SEO

Source and attribution

More from mindrally/skills

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Scraping

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices