🔹 1️⃣ Introduction to Web Development
Web Development is the process of creating websites and web applications that run on the
internet.
● Website: A collection of web pages under a single domain name.
● Web Application: An interactive website with dynamic features (e.g., Gmail, Facebook).
● Web development involves design, coding, testing, and deployment.
Roles in Web Development:
● Web Designers: Focus on look & feel (UI/UX).
● Front-End Developers: Code the visible part (HTML, CSS, JS).
● Back-End Developers: Build the server-side logic (databases, server scripts).
● Full-Stack Developers: Handle both front-end & back-end.
🔹 2️⃣ How the Web Works
The Internet is a network of connected devices. The Web is one of its services — it uses HTTP
to share information.
Key Concepts:
✅ Clients:
● Devices (computers, phones) that request web pages.
● Browsers (Chrome, Firefox) are clients.
✅ Servers:
● Computers that store websites and handle requests.
● A single server can host multiple websites.
✅ HTTP & HTTPS:
● HTTP (Hypertext Transfer Protocol) is the standard protocol for transferring web pages.
● HTTPS is the secure version — data is encrypted using SSL/TLS.
● Example: http:// vs. https://
✅ DNS (Domain Name System):
● Like the internet’s phone book.
● Converts human-friendly domain names (e.g., www.google.com) into IP addresses
(142.250.68.78) that computers use.
● Steps:
1. User types URL in browser.
2. DNS resolves domain to IP.
3. Browser sends HTTP request to server’s IP.
4. Server responds with the webpage.
5. Browser renders the page.
✅ Request/Response Cycle:
1. Client: Makes a request (GET, POST, etc.)
2. Server: Processes the request and sends back a response (HTML, JSON, files)
3. Browser: Displays the response to the user.
🔹 3️⃣ Front-end vs. Back-end Development
✅ Front-End (Client-Side)
● Everything the user sees & interacts with.
● Technologies:
○ HTML — Structure of the page
○ CSS — Styling (colors, layout)
○ JavaScript — Interactivity (click events, animations)
● Examples: Buttons, forms, navigation menus, sliders.
✅ Back-End (Server-Side)
● Behind-the-scenes logic and database operations.
● Handles:
○ User authentication
○ Storing and retrieving data
○ Business logic
○ Security
● Technologies:
○ Programming languages: Python, Node.js, PHP, Java, Ruby
○ Databases: MySQL, PostgreSQL, MongoDB
📌 How They Connect:
● Front-end sends requests to the back-end (e.g., submit a form).
● Back-end processes the request, talks to the database, and sends a response.
● They communicate via APIs (Application Programming Interfaces).
✅ 1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages.
It describes the structure of a webpage using tags.
✅ 2. Basic Structure of an HTML Document
An HTML document has a standard structure which must be followed.
Below is the basic skeleton of any HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Page Content Goes Here -->
</body>
</html>
📌 Explanation:
1️⃣ <!DOCTYPE html>
● Tells the browser that this is an HTML5 document.
2️⃣ <html>
● The root element of the HTML document.
● All other elements are inside this tag.
3️⃣ <head>
● Contains meta-information about the page:
○ Title
○ Character set
○ CSS links
○ Scripts
○ Other metadata
4️⃣ <title>
● Sets the title of the page, which appears in the browser tab.
5️⃣ <body>
● Contains all the content that will be displayed on the web page:
○ Text
○ Images
○ Videos
○ Links
○ Forms, etc.
✅ 3. Important Basic HTML Tags
Here are some must-know HTML tags for beginners:
Tag Description Example
<html> Root element <html> ... </html>
<head> Metadata container <head> ... </head>
<title> Page title in browser tab <title>My First Page</title>
<body> Main content of the page <body> ... </body>
<h1> to Headings, from largest to smallest <h1>Main Heading</h1>
<h6>
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break (no closing tag) Line 1<br>Line 2
<hr> Horizontal rule (line) <hr>
<a> Hyperlink <a
href="https://example.com">Visi
t</a>
<img> Image <img src="image.jpg"
alt="Description">
<ul> Unordered list (bullet points) <ul><li>Item 1</li></ul>
<ol> Ordered list (numbered) <ol><li>First</li></ol>
<li> List item <li>Item</li>
<strong> Bold text (semantically important) <strong>Important</strong>
<em> Emphasized text (usually italic) <em>Emphasized</em>
<div> Generic container (block-level) <div>Content</div>
<span> Generic inline container <span>Inline</span>
✅ 4. Sample HTML Example
Here’s a complete simple HTML page putting it all together:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p>
<p>Visit my <a href="https://example.com">website</a>.</p>
<h2>My List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<img src="logo.png" alt="Website Logo">
<hr>
<p>© 2025 My Website</p>
</body>
</html>
✅ 1. What is an HTML Form?
An HTML form is used to collect user input.
For example: login forms, registration forms, search boxes, contact forms.
A form usually sends data to a server for processing.
✅ 2. Basic <form> Tag
A form starts with the <form> tag.
Example:
<form action="submit.php" method="POST">
<!-- Form elements go here -->
</form>
Attributes of <form>:
Attribute Purpose
action URL where form data will be sent
method HTTP method: GET or POST
📌 GET vs POST:
● GET: Data is sent in the URL (visible). Used for simple searches.
● POST: Data is sent in the request body (hidden). Used for secure data like passwords.
✅ 3. Input Elements
Input elements are used inside a form to collect different types of data.
The basic input tag:
<input type="text" name="username">
Attributes of <input>:
Attribute Purpose
type Type of input (text, password, checkbox, etc.)
name Name of the input (used as key when data is
sent)
value Default value
placehold Hint text shown inside the input
er
required Makes the field mandatory
✅ 4. Common Input Types
Type Description Example
text Single-line text <input type="text">
passwo Hidden input for passwords <input type="password">
rd
email Validates email <input type="email">
number Numbers only <input type="number">
checkb Checkbox <input type="checkbox">
ox
radio Radio buttons <input type="radio">
submit Submit button <input type="submit"
value="Submit">
reset Reset button <input type="reset"
value="Reset">
button Generic button <input type="button"
value="Click Me">
file File upload <input type="file">
date Date picker <input type="date">
range Slider <input type="range">
hidden Hidden input <input type="hidden">
✅ 5. Labels
A <label> is used to define a label for an input.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Tip: The for attribute of <label> should match the id of the input.
✅ 6. Other Useful Form Elements
1️⃣ <textarea>
For multi-line input:
<textarea name="message" rows="4" cols="50"></textarea>
2️⃣ <select>
Dropdown menu:
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>
3️⃣ <button>
Custom buttons:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
✅ 7. Complete Example
Here’s a full form example:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name"
required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your
email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" name="hobby" value="reading">Reading
<input type="checkbox" name="hobby" value="sports">Sports
<input type="checkbox" name="hobby" value="music">Music<br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select><br><br>
<label for="bio">Bio:</label><br>
<textarea id="bio" name="bio" rows="4"
cols="40"></textarea><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
✅ 1. What is Django?
● Django is a high-level Python web framework that lets you build secure, scalable, and
maintainable websites quickly.
● It was created to help developers build web apps fast, with clean, reusable code.
● It follows the “batteries included” principle — many common web development tasks
are built in.
● Popular sites using Django: Instagram, Pinterest, Mozilla, Disqus.
Key Features:
● Follows MVT Architecture (explained next)
● Has an ORM (Object Relational Mapper) to work with databases easily
● Built-in Admin interface
● Built-in User Authentication
● Strong focus on security
● Highly scalable
✅ 2. MVT Architecture
Django follows the MVT pattern: Model – View – Template.
It’s similar to MVC but with slight differences.
MVT Stands for:
● M (Model): Handles the data and database structure.
● V (View): Contains business logic — gets data from the model and passes it to the
template.
● T (Template): Handles the presentation layer — how the data is displayed in HTML.
How it works:
Browser Request ➜ URL ➜ View ➜ Model ➜ View ➜ Template ➜ Browser
Response
Example:
● A user requests a page (URL).
● The URL maps to a View.
● The View may pull data from the Model.
● The View passes data to the Template.
● The Template generates the HTML shown to the user.
✅ 3. Django Settings & URL Routing
📌 3.1 Django Settings
● Every Django project has a settings.py file.
● This file holds all project configuration:
○ Database connection
○ Installed apps
○ Static files and media settings
○ Templates settings
○ Middleware
○ Debug mode, allowed hosts, security keys, etc.
Example:
# settings.py (snippet)
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'myapp', # Your custom app
]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / "db.sqlite3",
}
}
Key Point:
Change settings carefully — especially DEBUG and ALLOWED_HOSTS when deploying live!
📌 3.2 URL Routing
● Django uses URLconf (URL Configuration) to map URLs to views.
● The urls.py file defines the URL patterns.
Example:
# project_name/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('about/', views.about, name='about'),
]
● Here, / maps to the home view, /about/ maps to the about view.
● path() connects a URL pattern to a view function.
Tip: Each app can have its own urls.py and be included in the project’s main urls.py using
include().
✅ 4. Defining Models
What is a Model?
● A Model is a Python class that defines the structure of your database tables.
● Each model maps to a single database table.
How to define a model:
# myapp/models.py
from django.db import models
class Student(models.Model):
name = models.CharField(max_length=100)
age = models.IntegerField()
email = models.EmailField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
Key Points:
● Each field becomes a column in the database.
● Django provides field types like CharField, IntegerField, EmailField,
DateTimeField, etc.
● __str__ method makes the model readable in the admin panel.
✅ 5. Migrations
What are Migrations?
● Migrations are how Django keeps track of changes you make to your models and
applies those changes to the database schema.
● Whenever you add/edit a model, you need to create and apply migrations.
Basic Commands:
1️⃣ Create migration:
python manage.py makemigrations
2️⃣ Apply migration to DB:
python manage.py migrate
Example Workflow:
● You define or edit a model.
● Run makemigrations — Django creates migration files.
● Run migrate — Django applies those migrations to the database.
✅ This keeps your database schema in sync with your Python models.
✅ 1️⃣ CSS Selectors
What are Selectors?
Selectors are patterns used to select HTML elements you want to style.
✔️ Common Selectors
Selector Example What it selects
Element Selector p {} All <p> tags
Class Selector .box {} All elements with
class="box"
ID Selector #header {} The element with
id="header"
Universal Selector * {} All elements
Attribute Selector input[type="text" <input> tags with
] {} type="text"
Descendant div p {} <p> inside <div>
Selector
Child Selector ul > li {} Direct <li> children of <ul>
Pseudo-class a:hover {} <a> when hovered
Pseudo-element p::first-letter First letter of <p>
{}
✅ 2️⃣ CSS Properties
Properties define what styles are applied.
Examples:
p {
color: red; /* text color */
font-size: 16px; /* text size */
background-color: yellow; /* element background */
border: 1px solid black; /* border style */
margin: 10px; /* space outside */
padding: 5px; /* space inside */
width: 200px; /* width */
height: 100px; /* height */
}
✔️ Properties are always key: value;
✔️ Always end each line with a semicolon ;.
✅ 3️⃣ CSS Box Model
What is the Box Model?
Every HTML element is a box made up of:
● Content → Text or image.
● Padding → Space inside the box, around content.
● Border → Line around padding.
● Margin → Space outside the border.
Box Model Layers:
+-------------------+
| Margin |
| +------------+ |
| | Border | |
| | +--------+ | |
| | | Padding | | |
| | | Content | | |
| | +--------+ | |
| +------------+ |
+-------------------+
Example:
.box {
width: 200px; /* Content width */
padding: 20px; /* Inside space */
border: 5px solid black;
margin: 10px; /* Outside space */
}
✅ 4️⃣ Flexbox
What is Flexbox?
Flexbox is a 1D layout system — great for aligning items horizontally or vertically.
Flex Container:
Set display: flex; on a parent.
.container {
display: flex;
}
Key Properties (Container):
Property Use
flex-directi row, column, row-reverse, column-reverse
on
justify-cont Align items on main axis (start, end, center, space-between,
ent space-around)
align-items Align items on cross axis (start, end, center, stretch)
flex-wrap Wrap items to next line
Key Properties (Items):
Property Use
flex Shorthand for grow, shrink, basis
order Change display order
align-se Override align-items for individual item
lf
Example:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>
✅ 5️⃣ CSS Grid
What is Grid?
Grid is a 2D layout system — perfect for designing rows & columns at the same time.
Grid Container:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 equal columns */
grid-template-rows: auto auto; /* Rows adjust automatically */
gap: 10px; /* Gap between grid items */
}
Grid Item Placement:
.item {
grid-column: 1 / 2; /* Start at col 1, end before col 2 */
grid-row: 1 / 3; /* Span 2 rows */
}
Example:
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Container CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
✅ Flexbox vs Grid
Flexbox Grid
1D Layout 2D Layout
Better for aligning items in a row or column Better for full page or complex layouts
Content drives layout Layout drives content
✅ login.html
Save this inside your Django app’s templates folder, e.g. myapp/templates/login.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login Form</title>
<style>
body {
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
.login-container {
width: 300px;
margin: 80px auto;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
width: 100%;
padding: 10px;
background: #007bff;
border: none;
color: white;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form method="POST">
{% csrf_token %}
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>
📘 JavaScript: Variables, Data Types, Operators, Control
Flow
✅ 1️⃣ Variables
What are Variables?
Variables are containers for storing data values.
How to Declare:
var x = 5; // old way
let y = 10; // modern, block scoped
const z = 15; // constant, cannot be changed
Key Points:
● var — function scoped, avoid for modern JS.
● let — block scoped, can be updated.
● const — block scoped, cannot be reassigned.
✅ 2️⃣ Data Types
Primitive Types:
● String — "Hello"
● Number — 42, 3.14
● Boolean — true or false
● Null — empty value (null)
● Undefined — declared but not defined (undefined)
● Symbol — unique identifier (advanced)
Non-Primitive:
● Object — { name: "John", age: 30 }
● Array — [1, 2, 3]
● Function — function sayHi() {}
Example:
let name = "Alice"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let address = null; // Null
let city; // Undefined
✅ 3️⃣ Operators
Arithmetic Operators:
javascript
CopyEdit
+ // Addition
- // Subtraction
* // Multiplication
/ // Division
% // Modulus (remainder)
** // Exponentiation (2 ** 3 = 8)
++ // Increment
-- // Decrement
Assignment Operators:
= // Assign
+= // x += 5 (x = x + 5)
-= // x -= 5
*= // x *= 5
/= // x /= 5
%= // x %= 5
Comparison Operators:
== // Equal to (type coercion)
=== // Strict equal (value + type)
!= // Not equal
!== // Strict not equal
> // Greater than
< // Less than
>= // Greater than or equal to
<= // Less than or equal to
Logical Operators:
&& // AND
|| // OR
! // NOT
✅ 4️⃣ Control Flow
if Statement:
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
else if Statement:
if (marks >= 90) {
console.log("A Grade");
} else if (marks >= 75) {
console.log("B Grade");
} else {
console.log("C Grade");
}
Switch Statement:
let day = 2;
switch(day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Other day");
}
Loops:
// for loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while loop
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
// do...while loop
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);
📗 JavaScript: DOM Manipulation & Event Handling
✅ 1️⃣ What is the DOM?
DOM = Document Object Model
It’s a tree-like structure representing HTML elements in the browser.
You can access and change elements with JS!
✅ 2️⃣ Accessing Elements
document.getElementById("myId");
document.getElementsByClassName("myClass");
document.getElementsByTagName("p");
document.querySelector("#myId");
document.querySelectorAll(".myClass");
✅ 3️⃣ Changing Content
<p id="demo">Hello</p>
document.getElementById("demo").innerText = "Hi!";
document.getElementById("demo").innerHTML = "<strong>Hi!</strong>";
✅ 4️⃣ Changing Styles
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
✅ 5️⃣ Adding & Removing Elements
// Create new element
let newPara = document.createElement("p");
newPara.innerText = "New paragraph!";
document.body.appendChild(newPara);
// Remove element
let oldPara = document.getElementById("demo");
oldPara.remove();
✅ 6️⃣ Event Handling
Events = Actions by user (click, hover, submit)
Add Event Listener:
let btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert("Button clicked!");
});
Inline Event: (not best practice)
<button onclick="alert('Clicked!')">Click me</button>
Example:
<button id="btn">Click</button>
<p id="result"></p>
<script>
document.getElementById("btn").addEventListener("click", function()
{
document.getElementById("result").innerText = "You clicked!";
});
</script>
✅ Common Events
Event When it happens
click When user clicks an element
mouseov Mouse hovers over an
er element
mouseou Mouse leaves an element
t
keydown When user presses a key
submit When a form is submitted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.signup-container {
background: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
.signup-container h2 {
text-align: center;
margin-bottom: 20px;
}
.signup-container label {
display: block;
margin: 10px 0 5px;
font-size: 14px;
}
.signup-container input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.signup-container button {
width: 100%;
padding: 10px;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.signup-container button:hover {
background: #0056b3;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="signup-container">
<h2>Sign Up</h2>
<form id="signupForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
<p class="error" id="errorMsg"></p>
<button type="submit">Register</button>
</form>
</div>
<script>
const form = document.getElementById("signupForm");
const errorMsg = document.getElementById("errorMsg");
form.addEventListener("submit", function(event) {
event.preventDefault(); // Stop actual form submit
const username = document.getElementById("username").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
if (username === "" || email === "" || password === "") {
errorMsg.textContent = "All fields are required.";
} else if (password.length < 6) {
errorMsg.textContent = "Password must be at least 6 characters.";
} else {
errorMsg.textContent = "";
alert("Form submitted successfully!");
// Here you would actually submit the form or send an AJAX request.
form.reset();
}
});
</script>
</body>
</html>
