Web Development — HTML · CSS · JS · Django · APIs
WEB DEVELOPMENT
A Comprehensive Reference Guide
Covers: Intro · HTML · CSS · JavaScript · Python Frameworks · Django · MVT · Database Integration · REST
APIs
1. Introduction to Web Development
Web development is the process of creating websites and web applications that run on the
internet or a local network. It encompasses everything from designing a simple static webpage
to building complex, data-driven applications.
Complex applications include:
• E-commerce websites
• Social media platforms
• Online learning portals
• Banking and financial systems
Main Parts of Web Development
Frontend Backend Database
Includes: Includes: Includes:
– Layout & colours – Business logic – User information
– Buttons & forms – Authentication – Product details
– Menus & animations – Database ops – Orders & messages
Technologies: – API handling Technologies:
✓ HTML Technologies: ✓ MySQL
✓ CSS ✓ Python ✓ PostgreSQL
✓ JavaScript ✓ [Link] ✓ MongoDB
✓ Java ✓ SQLite
✓ PHP
Web Application Workflow — Example
When a user logs into a website, the three layers work together in sequence:
Web Development Reference Guide | Page 1 of 11
Web Development — HTML · CSS · JS · Django · APIs
• Step 1 — Frontend displays the login form to the user.
• Step 2 — User enters username and password.
• Step 3 — Backend receives and validates the credentials.
• Step 4 — Database stores and verifies user data.
• Step 5 — Website grants access if the login is correct.
Simple Definition
Web development is the process of building websites and web applications using frontend,
backend, and database technologies working together.
2. HTML, CSS, and JavaScript Basics
These three technologies form the foundation of all frontend web development. Each plays a
distinct role in how a webpage looks and behaves.
HTML CSS JS
Structure Styling Interactivity
Defines the skeleton and content Controls layout, colours, fonts Adds dynamic behaviour, events
of the page and responsiveness and animations
a) HTML — HyperText Markup Language
HTML defines the structure of a webpage using elements called tags. It forms the skeleton that
every browser reads and renders.
HTML can define:
• Headings, paragraphs, and text formatting
• Images and hyperlinks
• Forms, buttons, and inputs
• Tables and lists
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a simple webpage.</p>
</body>
</html>
Web Development Reference Guide | Page 2 of 11
Web Development — HTML · CSS · JS · Django · APIs
Explanation
<h1> creates a heading | <p> creates a paragraph | HTML provides the skeleton of every
webpage.
b) CSS — Cascading Style Sheets
CSS is used to style HTML elements and make webpages visually attractive and responsive
across devices.
CSS controls:
• Colours, fonts, and spacing
• Layout and positioning
• Borders, shadows, and backgrounds
• Responsiveness for different screen sizes
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
}
</style>
Result
The heading becomes blue and centred. The paragraph text is rendered at 18px. CSS brings
the design to life.
c) JavaScript — Interactivity and Behaviour
JavaScript makes webpages dynamic and interactive. It runs directly in the browser and
responds to user actions in real time.
JavaScript can:
• Respond to button clicks and keyboard events
• Validate form inputs before submission
• Show popups, modals, and alerts
• Update page content without reloading
• Create animations and transitions
<button onclick="showMessage()">Click Me</button>
Web Development Reference Guide | Page 3 of 11
Web Development — HTML · CSS · JS · Django · APIs
<script>
function showMessage() {
alert("Hello, welcome!");
}
</script>
Explanation
When the button is clicked, a popup alert appears with the message. JavaScript handles all user
interaction logic.
3. Python Web Frameworks
A web framework is a collection of tools, libraries, and conventions that helps developers build
web applications faster and more reliably. Python has three especially popular frameworks.
Framework Comparison
Framework Best For Main Strength
Flask Small to medium projects, prototypes Simplicity and developer control
Django Large, database-driven web Built-in features and security
applications
FastAPI APIs, microservices, ML model serving Speed and automatic API
documentation
a) Flask — Lightweight and Flexible
Flask is a minimal Python web framework ideal for small to medium projects. It gives developers
full control with minimal built-in assumptions.
Features:
• Simple and easy to learn
• Good for small to medium projects
• Highly flexible — build only what you need
• Gives more control to the developer
from flask import Flask
app = Flask(__name__)
@[Link]('/')
def home():
return "Hello from Flask!"
Web Development Reference Guide | Page 4 of 11
Web Development — HTML · CSS · JS · Django · APIs
Best For
Beginners, personal websites, small REST APIs, and rapid prototypes.
b) Django — Full-Featured and Scalable
Django is a high-level Python framework designed for building full-featured, database-driven
web applications rapidly and securely.
Features:
• Built-in admin panel out of the box
• User authentication and session management
• ORM for database access without raw SQL
• Strong security features (CSRF, XSS protection)
• Scalable for large enterprise applications
Best For
E-commerce sites, content management systems, educational platforms, and enterprise
applications.
c) FastAPI — Modern and High Performance
FastAPI is a modern Python framework optimised for building APIs with exceptional speed and
automatic documentation.
Features:
• Very fast performance (comparable to [Link] and Go)
• Easy API development with type hints
• Automatic OpenAPI / Swagger documentation generation
• Great support for asynchronous programming
• Ideal for machine learning model deployment
Best For
REST APIs, microservices, AI/ML backend services, and high-performance modern systems.
4. Django — In Depth
Django is one of the most widely used Python web frameworks. It enables developers to build
secure, scalable, and maintainable web applications quickly by following well-established
conventions.
Web Development Reference Guide | Page 5 of 11
Web Development — HTML · CSS · JS · Django · APIs
Why Django is Popular
• Follows the "Don't Repeat Yourself" (DRY) principle
• Comes with many built-in tools ready to use
• Supports rapid development from prototype to production
• Has strong security features enabled by default
• Includes a fully functional admin dashboard
• Uses MVT architecture (Model–View–Template)
What Django Provides Out of the Box
• URL routing and request dispatching
• Template engine for HTML rendering
• ORM for database access in Python
• Authentication and session system
• Form handling and validation
• Admin panel for content management
Example
A Django application can manage user registration, blog posts, product listings, comments, and
dashboards — all within one framework.
5. MVT Architecture
Django follows the MVT (Model–View–Template) architecture. It is similar to the traditional MVC
pattern but adapted to Django's way of working.
a) Model — Data and Database Structure
The Model defines what data is stored, the fields in the database, and the relationships between
data entities.
class Student([Link]):
name = [Link](max_length=100)
age = [Link]()
Explanation
This model automatically creates a 'student' table in the database with 'name' and 'age'
columns.
Web Development Reference Guide | Page 6 of 11
Web Development — HTML · CSS · JS · Django · APIs
b) View — Business Logic
The View contains the application's logic. It receives HTTP requests, processes data, interacts
with models, and returns responses.
from [Link] import HttpResponse
def home(request):
return HttpResponse("Welcome to Django")
c) Template — Presentation Layer
The Template is an HTML file that displays data passed from the View. It uses Django's
template language for dynamic content.
<h1>Welcome {{ name }}</h1>
<p>Your course is: {{ course }}</p>
Explanation
{{ name }} and {{ course }} are template variables replaced with actual values from the View at
runtime.
MVT Request-Response Flow
# Layer Role
1 User Request Browser sends an HTTP request to the Django application.
2 View (Logic) View function receives the request and applies business logic.
3 Model (Data) View queries the Model which communicates with the database.
4 Database Database fetches or stores the required data.
5 View → Template View passes the fetched data to the appropriate Template.
Template (Output) Template renders HTML with dynamic data and returns it to the
6
user.
Simple Summary
Model = data | View = logic | Template = presentation. Together they handle every web
request end-to-end.
Web Development Reference Guide | Page 7 of 11
Web Development — HTML · CSS · JS · Django · APIs
6. Database Integration
Database integration connects a web application to a database so it can permanently store,
retrieve, update, and delete data. Without a database, websites cannot retain any information
between sessions.
Why Database Integration is Needed
Without a database, a website cannot store:
• User accounts and passwords
• Product catalogues and inventory
• Orders and transaction history
• Blog posts, comments, and messages
Django ORM — Object Relational Mapper
Django provides a powerful ORM that allows developers to interact with databases using
Python classes instead of writing raw SQL queries.
class Product([Link]):
name = [Link](max_length=100)
price = [Link]()
Explanation
This Python class automatically creates a 'product' table with 'name' and 'price' columns in the
configured database.
CRUD Operations
The four fundamental database operations are commonly called CRUD:
• Create — insert new records
• Read — retrieve existing records
• Update — modify existing records
• Delete — remove records
# CREATE — save a new product
product = Product(name="Laptop", price=50000)
[Link]()
# READ — get all products
all_products = [Link]()
# UPDATE — change price
product = [Link](id=1)
Web Development Reference Guide | Page 8 of 11
Web Development — HTML · CSS · JS · Django · APIs
[Link] = 45000
[Link]()
# DELETE — remove product
[Link]()
Common Databases
• SQLite — default in Django; ideal for beginners and small projects
• MySQL — widely used for medium to large web applications
• PostgreSQL — robust, feature-rich; preferred for production environments
• MongoDB — NoSQL document database for unstructured data
7. API — GET, POST, PUT, DELETE
An API (Application Programming Interface) allows different applications or systems to
communicate with each other over the internet. REST APIs use standard HTTP methods to
perform operations on data.
HTTP Methods Reference
Method Purpose Example Request Use Case
Retrieve data from the GET /students/ Get product list, user details, blog
GET
server posts
Send new data to the POST /students/ Register new user, add product,
POST
server submit form
Update existing data PUT /students/1/ Edit profile, update product details
PUT
completely
Remove data from the DELETE Delete user, remove product or
DELETE /students/1/
server comment
Detailed Method Explanations
a) GET — Retrieve Data
Used to fetch data from the server. GET requests do not modify any data on the server.
GET /students/ → Fetch all student records
GET /students/1/ → Fetch student with ID 1
Web Development Reference Guide | Page 9 of 11
Web Development — HTML · CSS · JS · Django · APIs
b) POST — Create New Data
Used to send new data to the server to create a new resource.
POST /students/ → Create a new student record
(data sent in the request body)
c) PUT — Update Existing Data
Used to update an existing resource completely. All fields are replaced with the new values
provided.
PUT /students/1/ → Completely update student with ID 1
d) DELETE — Remove Data
Used to delete a specific resource from the server permanently.
DELETE /students/1/ → Delete student with ID 1
Practical Example — Student Management System
• GET → View all students in the system
• POST → Add a new student record
• PUT → Update an existing student's information
• DELETE → Remove a student from the system
Final Conclusion
Web development is a multi-layered discipline that combines design, logic, data management,
and communication protocols to create modern, interactive websites and applications.
Key Technologies Covered
• HTML — defines the structure and content of every webpage
• CSS — styles and makes webpages visually attractive and responsive
• JavaScript — adds interactivity and dynamic behaviour in the browser
• Flask, Django, FastAPI — Python frameworks for backend development
• MVT Architecture — Django's Model-View-Template pattern
• Database Integration — ORM and CRUD operations with Django
• REST API — GET, POST, PUT, DELETE for data communication
Web Development Reference Guide | Page 10 of 11
Web Development — HTML · CSS · JS · Django · APIs
One-Line Summary
Web development combines design, logic, data handling, and APIs to create
modern interactive websites and applications.
Web Development Reference Guide | Page 11 of 11