​WEB TECHNOLOGIES​

​CCS375​

​ CS375 – Web Technologies | Unit 1 Part​

C
​B Answers​

​ UESTION 1: HTTP Request and​

Q
​Response Message Format​

​INTRODUCTION​
​ he internet works because computers talk to each other using a​
T
​common language. That language is HTTP — HyperText Transfer​
​Protocol. Every time you open a webpage, your browser sends a request​
​and the server sends back a response. Understanding this message​
​format is the foundation of all web communication.​

​DEFINITION​
​ TTP (HyperText Transfer Protocol)​​is an application-layer,​​stateless,​
H
​request-response protocol used for communication between a client​
​(browser) and a server over the internet. It operates on​​port 80​​(HTTP)​
​and​​port 443​​(HTTPS).​
​TOPICS & SUBTOPICS​

​TOPIC 1 — HTTP Request Message Format​

​ n HTTP request is a message sent by the​​client to​​the server​​asking​

A
​for a resource.​

​Structure of HTTP Request:​

​[Request Line]​

​[Headers]​

​[Blank Line]​

​[Body (optional)]​

​1. Request Line​

​The first line of any HTTP request. It has three parts:​

​​ M
● ​ ethod​​— What action to perform​
​●​ ​Request URI​​— The resource being requested​
​●​ ​HTTP Version​​— Which version of HTTP is being used​

​Format:​

​METHOD /resource/path HTTP/version​

​Example:​

​GET /[Link] HTTP/1.1​

​2. HTTP Methods (Types)​

​Method​ ​Purpose​ ​ as​

H
​Body?​

​GET​ ​Retrieve a resource​ ​No​

​POST​ ​Submit data to server​ ​Yes​

​PUT​ ​Update entire resource​ ​Yes​

​PATCH​ ​Partial update​ ​Yes​

​ ELET​ ​Remove a resource​

D ​No​
​E​

​HEAD​ ​ ike GET but no body in​

L ​No​
​response​
​ PTIO​
O ​ sk what methods are​
A ​No​
​NS​ ​allowed​

​3. Request Headers​

​ eaders carry additional information about the request. They are​

H
​key-value pairs.​

​Header​ ​Meaning​ ​Example​

​Host​ ​Server domain name​ ​Host: [Link]​

​ ser-Agen​ ​Browser/client info​

U ​User-Agent: Chrome/90​
​t​

​Accept​ ​ hat content type client​

W ​Accept: text/html​
​accepts​

​ ontent-T​ F
C ​ ormat of body being​ ​ ontent-Type:​
C
​ype​ ​sent​ ​application/json​

​ uthorizati​ ​Login credentials/token​

A ​ uthorization: Bearer​
A
​on​ ​xyz​
​Cookie​ ​Session info​ ​Cookie: sessionid=abc​

​4. Request Body​

​ nly present in POST, PUT, PATCH requests. Contains the actual data​
O
​being sent.​

​Full GET Request Example:​

​GET /products/list HTTP/1.1​

​Host: [Link]​

​User-Agent: Mozilla/5.0 (Chrome)​

​Accept: text/html, application/json​

​Accept-Language: en-US​

​Connection: keep-alive​

​Full POST Request Example:​

​POST /login HTTP/1.1​

​Host: [Link]​

​Content-Type: application/x-www-form-urlencoded​
​Content-Length: 35​

​username=john&password=secret123​

​TOPIC 2 — HTTP Response Message Format​

​ n HTTP response is the message sent by the​​server​​back to the​

A
​client​​after receiving a request.​

​Structure of HTTP Response:​

​[Status Line]​

​[Headers]​

​[Blank Line]​

​[Body (optional)]​

​1. Status Line​

​Format:​

​HTTP/version Status-Code Reason-Phrase​

​Example:​

​HTTP/1.1 200 OK​

​2. HTTP Status Codes (Types)​

​Status codes are 3-digit numbers that tell the result of the request.​

​Ran​ ​Category​ ​Meaning​

​ge​

​1xx​ I​nformatio​ R
​ equest received,​
​nal​ ​processing​

​2xx​ ​Success​ ​Request fulfilled​

​3xx​ ​ edirectio​ ​Further action needed​

R
​n​

​4xx​ ​ lient​
C ​Problem with request​
​Error​

​5xx​ ​ erver​
S ​ roblem on server​
P
​Error​ ​side​
​Important Status Codes:​

​Cod​ ​Meaning​ ​When Used​

​e​

​200​ ​OK​ ​Successful GET/POST​

​201​ ​Created​ ​ esource successfully​

R
​created​

​301​ M
​ oved​ ​URL changed forever​
​Permanently​

​302​ F
​ ound​ ​Temporary redirect​
​(Redirect)​

​400​ ​Bad Request​ ​Malformed syntax​

​401​ ​Unauthorized​ ​Login required​

​403​ ​Forbidden​ ​No permission​

​404​ ​Not Found​ ​Resource doesn't exist​

​500​ I​nternal Server​ ​Server crashed​
​Error​

​503​ S
​ ervice​ ​Server overloaded​
​Unavailable​

​3. Response Headers​

​Header​ ​Meaning​

​ ontent-Typ​ F
C ​ ormat of​
​e​ ​response body​

​ ontent-Le​ S
C ​ ize of body in​
​ngth​ ​bytes​

​Date​ ​ ate/time of​

D
​response​

​Server​ ​ erver software​

S
​info​

​Set-Cookie​ S
​ ends cookie to​
​client​
​ ache-Cont​ ​Caching​
C
​rol​ ​instructions​

​4. Response Body​

​The actual content — HTML page, JSON data, image, etc.​

​Full HTTP Response Example:​

​HTTP/1.1 200 OK​

​Date: Mon, 23 May 2026 10:00:00 GMT​

​Server: Apache/2.4.41​

​Content-Type: text/html; charset=UTF-8​

​Content-Length: 256​

​Set-Cookie: session=abc123; Path=/​

​<!DOCTYPE html>​

​<html>​

​<body>​

​<h1>Welcome to [Link]</h1>​
 ​</body>​

​</html>​

​TOPIC 3 — HTTP Versions​

​Versio​ Y
​ ea​ ​Key Feature​
​n​ r​ ​

​ TTP/1​ 1
H ​ 99​ O
​ ne request per​
​.0​ ​6​ ​connection​

​ TTP/1​ 1
H ​ 99​ P
​ ersistent connections,​
​.1​ ​7​ ​pipelining​

​HTTP/2​ 2
​ 01​ M
​ ultiplexing, header​
​5​ ​compression​

​HTTP/3​ 2
​ 02​ U
​ ses QUIC protocol​
​2​ ​(faster)​

​TOPIC 4 — HTTP vs HTTPS​

 ​Featu​ ​HTTP​ ​HTTPS​
​re​

​Port​ ​80​ ​443​

​ ecuri​ ​None​
S ​ SL/TLS​
S
​ty​ ​Encryption​

​Data​ ​Plain text​ ​Encrypted​

​Usage​ O
​ ld​ ​All modern sites​
​websites​

​DIAGRAM — HTTP Request-Response Cycle​

​CLIENT (Browser) SERVER​

​| |​

​|------- HTTP REQUEST -------------->|​

​| GET /[Link] HTTP/1.1 |​

​| Host: [Link] |​

​| |​
 ​|<------ HTTP RESPONSE --------------|​

​| HTTP/1.1 200 OK |​

​| Content-Type: text/html |​

​| <html>...</html> |​

​| |​

​APPLICATION​
​​
● ​ rowser-server communication for every webpage​
B
​●​ ​REST APIs use HTTP methods for CRUD operations​
​●​ ​Mobile app data fetching from backend servers​
​●​ ​Search engines crawl websites using HTTP GET​
​●​ ​E-commerce (login, checkout) uses POST with HTTPS​

​ADVANTAGES​
​​
● ​ imple and human-readable text format​
S
​●​ ​Platform and language independent​
​●​ ​Stateless design allows easy scalability​
​●​ ​Flexible — can transfer any type of data​

​DISADVANTAGES​
​​ S
● ​ tateless — server remembers nothing (needs cookies/sessions)​
​●​ ​Plain HTTP has no security​
​●​ ​High overhead for small requests due to large headers​
​REAL WORLD ANALOGY​
​Think of HTTP like​​ordering food at a restaurant:​

​●​ Y ​ ou (client) give the​​order slip (HTTP Request)​​to​​the waiter with​

​your name, table number, what you want (Method + URI +​
​Headers)​
​●​ ​The kitchen (server) prepares the food and sends back a​
​response​​— either your food (200 OK) or "Sorry, out​​of stock"​
​(404 Not Found)​
​●​ ​The waiter doesn't remember your previous orders (Stateless)​

​CONCLUSION​
​ TTP is the backbone of all web communication. Every request carries a​
H
​method, URI, headers, and optional body. Every response carries a​
​status code, headers, and the actual content. Understanding this​
​message format is essential for web development, API design, and​
​debugging network issues.​

​🧠 MEMORY TRICK​
​For Request parts:​​"R-H-B"​​→​​R​equest Line →​​H​eaders​​→​​B​ody​

​ or Status Codes:​​"I Saw Client Server"​​→​​1​xx Info,​​2​xx Success,​​3​xx​

F
​Redirect,​​4​xx Client Error,​​5​xx Server Error​

​ TTP Methods:​​"GPPDHOP"​​→​​G​ET,​​P​OST,​​P​UT,​​D​ELETE,​​H​EAD,​
H
​O​PTIONS,​​P​ATCH​
​ UESTION 2: HTML5 Form Elements and​
Q
​Control Elements​

​INTRODUCTION​
​ TML5 revolutionized the web by introducing powerful new form​
H
​elements, input types, and multimedia capabilities. Before HTML5,​
​developers needed JavaScript for validation and Flash for media.​
​HTML5 brought all this natively into the browser, making web pages​
​smarter and richer.​

​DEFINITION​
​ TML5​​is the fifth major revision of the HyperText​​Markup Language. It​
H
​introduced semantic elements, new input types, built-in form validation,​
​drag-and-drop API, and native audio/video support — eliminating the​
​need for third-party plugins like Flash.​

​TOPICS & SUBTOPICS​

​TOPIC 1 — HTML5 Form Elements​

​A​​form​​is a container that collects user input and​​sends it to the server.​

​Basic Form Structure:​

​<form action="/submit" method="POST">​

 ​<!-- form controls go here -->​

​</form>​

​Important Form Attributes:​

​Attribute​ ​Purpose​ ​Example​

​action​ ​ here to send​

W ​action="/login"​
​data​

​method​ ​HTTP method​ ​method="POST"​

​enctype​ ​ ncoding type (for​ e

E ​ nctype="multipart/form​
​files)​ ​-data"​

​novalidate​ S
​ kip HTML5​ ​novalidate​
​validation​

​ utocompl​ E
a ​ nable​ ​autocomplete="on"​
​ete​ ​autocomplete​

​New HTML5 Form Elements:​

<datalist>​​— Dropdown Suggestions​​Provides autocomplete​

​ .​​
1
​suggestions while the user types.​
​<input list="cities" name="city">​

​<datalist id="cities">​

​<option value="Chennai">​

​<option value="Mumbai">​

​<option value="Delhi">​

​</datalist>​

​Use case: Search boxes, city pickers​

<output>​​— Display Calculation Result​​Displays​​the result of a​

​ .​​
2
​calculation.​

​<output name="result" for="a b">0</output>​

<fieldset>​​and​​
​ .​​
3 <legend>​​— Grouping​​Groups related​​form​
​controls visually.​

​<fieldset>​

​<legend>Personal Details</legend>​
 ​<input type="text" name="name">​

​</fieldset>​

<progress>​​— Progress Bar​​Shows task completion.​

​4.​​

​<progress value="70" max="100">70%</progress>​

<meter>​​— Measurement Gauge​​Shows a value within​​a range (like​

​ .​​
5
​disk usage).​

​<meter value="0.7" min="0" max="1">70%</meter>​

​TOPIC 2 — HTML5 Input Types​

​HTML5 introduced 13+ new input types with built-in validation.​

​Input Type​ ​Purpose​ ​Example​

​Use​

​text​ ​General text​ ​Name field​

​password​ ​Hidden text​ ​Login​

​email​ ​ mail with​

E ​Contact form​
​validation​

​number​ ​Numeric values​ ​Age, quantity​

​range​ ​Slider control​ ​ olume,​

V
​rating​

​date​ ​Date picker​ ​ OB,​

D
​booking​

​time​ ​Time picker​ ​Appointment​

​ atetime-lo​ ​Date + time​

d ​ vent​
E
​cal​ ​scheduling​

​color​ ​Color picker​ ​ heme​

T
​settings​

​url​ ​ RL with​
U ​Website field​
​validation​
​tel​ ​ elephone​
T ​Phone field​
​number​

​search​ ​Search box​ ​Search bars​

​file​ ​File upload​ ​Profile photo​

​checkbox​ ​Multiple select​ ​Preferences​

​radio​ ​Single select​ ​Gender​

​submit​ ​Submit button​ ​Forms​

​reset​ ​Clear form​ ​ eset all​

R
​fields​

​Examples:​

​<input type="email" placeholder="Enter email" required>​

​<input type="date" min="2000-01-01" max="2026-12-31">​

​<input type="range" min="0" max="100" step="10">​

​<input type="color" value="#ff0000">​

​Important Input Attributes in HTML5:​

​Attribut​ ​Purpose​
​e​

​required​ ​Field must be filled​

​ lacehol​ ​Hint text inside​

p
​der​ ​input​

​ in /​
m ​Numeric limits​
​max​

​pattern​ ​Regex validation​

​ utofocu​ ​Auto-focus on load​

a
​s​

​readonly​ ​Cannot be edited​

​disabled​ G
​ rayed out, not​
​submitted​
​multiple​ ​ ccept multiple​
A
​values​

​TOPIC 3 — HTML5 Drag and Drop API​

​ TML5 provides a​​native Drag and Drop API​​that lets​​users drag​

H
​elements from one place and drop them in another — no JavaScript​
​library needed.​

​Key Events:​

​Event​ ​Fires When​

​ ragsta​ ​User starts dragging​

d
​rt​

​drag​ ​ lement is being​

E
​dragged​

​ ragov​ ​Dragged over a valid​

d
​er​ ​target​

​ ragen​ ​Enters a drop zone​

d
​ter​
​ raglea​ ​Leaves a drop zone​
d
​ve​

​drop​ ​Element is dropped​

​ ragen​ ​Drag operation ends​

d
​d​

​How it Works:​

draggable="true"​​on the source element​

​1.​ ​Set​​
dragstart​​to store data using​​
​2.​ ​Use​​ [Link]()​
dragover​​to prevent default (allow drop)​
​3.​ ​Use​​
drop​​to retrieve data using​​
​4.​ ​Use​​ [Link]()​

​Example (Concept):​

​<div draggable="true" ondragstart="drag(event)" id="item1">​

​Drag Me​

​</div>​

​<div ondrop="drop(event)" ondragover="allowDrop(event)">​

​Drop Here​

​</div>​
​Real World Use Cases:​

​​
● ​ ile upload by dragging files into browser​
F
​●​ ​Kanban boards (Trello-style task movement)​
​●​ ​Image gallery reordering​
​●​ ​Shopping cart drag-and-drop​

​TOPIC 4 — HTML5 Audio Element​

​HTML5 allows embedding audio directly without Flash.​

​<audio controls autoplay loop>​

​<source src="song.mp3" type="audio/mpeg">​

​<source src="[Link]" type="audio/ogg">​

​Your browser does not support audio.​

​</audio>​

​Audio Attributes:​

​Attribu​ ​Purpose​
​te​

c​ ontrol​ S
​ hows​
​s​ ​play/pause/volume UI​
​ utopla​ ​Plays automatically on​
a
​y​ ​load​

​loop​ ​Repeats the audio​

​muted​ ​Starts muted​

​preload​ ​auto / metadata / none​

​Supported Formats:​

​Form​ E
​ xtensi​ ​ rowser​
B
​at​ ​ n​
o ​Support​

​MP3​ ​.mp3​ ​All browsers​

​OGG​ ​.ogg​ ​ irefox,​

F
​Chrome​

​WAV​ ​.wav​ ​All browsers​

​TOPIC 5 — HTML5 Video Element​

​HTML5 replaces Flash video with native video playback.​

​<video width="640" height="360" controls poster="[Link]">​

​<source src="movie.mp4" type="video/mp4">​

​<source src="[Link]" type="video/webm">​

​Your browser does not support video.​

​</video>​

​Video Attributes:​

​Attribute​ ​Purpose​

​controls​ ​Shows video controls​

​autoplay​ ​Plays on page load​

​loop​ ​Loops video​

​muted​ ​Starts without sound​

​poster​ ​ humbnail image​

T
​before play​
 ​ idth/hei​ ​Video dimensions​
w
​ght​

​preload​ ​Preloading strategy​

​Supported Formats:​

​Format​ ​Extensi​ ​Best For​

​on​

​ P4​
M ​.mp4​ ​Universal​
​(H.264)​

​WebM​ ​.webm​ ​ hrome,​

C
​Firefox​

​OGG​ ​.ogv​ ​Firefox​

​DIAGRAM — HTML5 Form and Media Overview​

​HTML5 FEATURES​

​│​

​├── FORMS​
​│ ├── <form>, <fieldset>, <legend>​

​│ ├── <datalist>, <output>​

​│ ├── <progress>, <meter>​

​│ └── Input Types: email, date, range, color, url...​

​│​

​├── DRAG & DROP​

​│ ├── draggable="true"​

​│ ├── Events: dragstart, drop, dragover​

​│ └── dataTransfer object​

​│​

​└── MULTIMEDIA​

​├── <audio> — MP3, OGG, WAV​

​└── <video> — MP4, WebM, OGG​

​APPLICATION​
​●​ ​Contact forms, registration forms with email/phone validation​
 ​​
● ​ -commerce product upload with file drag-and-drop​
E
​●​ ​Music streaming (Spotify web uses HTML5 audio)​
​●​ ​Video platforms (YouTube uses HTML5 video)​
​●​ ​Online education platforms with embedded lectures​

​ADVANTAGES​
​​
● ​ o plugins required (no Flash, Java needed)​
N
​●​ ​Built-in validation reduces JavaScript code​
​●​ ​Accessible and SEO-friendly​
​●​ ​Cross-platform and mobile-friendly​
​●​ ​Multiple format fallback ensures compatibility​

​DISADVANTAGES​
​​ B
● ​ rowser compatibility varies for some features​
​●​ ​No fine-grained control over media (needs JavaScript for​
​advanced features)​
​●​ ​Drag and Drop limited on mobile/touch devices​

​REAL WORLD ANALOGY​

​Think of HTML5 forms like a​​smart government application​​form:​

​●​ E ​ ach field has a specific type (Aadhaar = 12-digit number, Email​
​field validates @)​
​●​ ​Required fields won't let you submit without filling them​
​●​ ​Drag-and-drop is like physically moving documents from one tray​
​to another​
​●​ ​Audio/Video tags are like built-in speakers/screens that need no​
​extra equipment​
​CONCLUSION​
​ TML5 greatly enhanced web interactivity by introducing intelligent form​
H
​elements, diverse input types with built-in validation, a native Drag and​
​Drop API, and seamless audio/video embedding. These features​
​reduced dependency on external plugins and made modern, accessible​
​web applications possible.​

​🧠 MEMORY TRICK​
​ ew Input Types — "ENDER CUTS":​​E​mail,​​N​umber,​​D​ate,​​E​mail,​
N
​R​ange,​​C​olor,​​U​rl,​​T​el,​​S​earch​

​ rag Events — "DS-DEED":​​D​ragStart →​​D​rag →​​D​ragEnter​​→​

D
​D​ragOver →​​D​rop →​​D​ragEnd​

​Audio/Video formats — "MOW":​​M​P3/MP4,​​O​GG,​​W​AV/WebM​

​ UESTION 3: CSS3 Features —​

Q
​Backgrounds, Border Images, Shadows,​
​Transformations, Transitions and​
​Animations​

​INTRODUCTION​
​ SS3 brought a visual revolution to web design. Before CSS3,​
C
​designers needed images and JavaScript for rounded corners, shadows,​
​ nd animations. CSS3 provides all these natively through simple​
a
​properties, making websites faster, more flexible, and visually stunning.​

​DEFINITION​
​ SS3 (Cascading Style Sheets Level 3)​​is the latest​​evolution of the​
C
​CSS standard. It introduces modular features for advanced visual styling​
​including multi-backgrounds, gradient fills, box/text shadows, 2D/3D​
​transformations, smooth transitions, and keyframe animations — all​
​without images or JavaScript.​

​TOPICS & SUBTOPICS​

​TOPIC 1 — CSS3 Backgrounds​

​ SS3 provides multiple background options far beyond just a single​

C
​color or image.​

​ . Multiple Backgrounds​​Multiple background images​​can be layered​

1
​using commas.​

​div {​

​background-image: url('[Link]'), url('[Link]');​

​background-position: center top, center center;​

​background-repeat: no-repeat, repeat;​

​}​
​2. Background Size​

​background-size: cover; /* Fill entire element */​

​background-size: contain; /* Fit inside element */​

​background-size: 300px 200px; /* Exact size */​

​3. Background Origin​​Defines where background starts.​

​background-origin: border-box | padding-box | content-box;​

​4. Background Clip​​Defines where background is visible.​

​background-clip: border-box | padding-box | content-box | text;​

​5. CSS Gradients (No images needed)​

​Linear Gradient:​

​background: linear-gradient(to right, #ff0000, #0000ff);​

​Radial Gradient:​

​background: radial-gradient(circle, #ffff00, #ff0000);​

​TOPIC 2 — CSS3 Border Images​

​CSS3 allows using an image as a border, creating decorative frames.​

​div {​

​border: 20px solid transparent;​

​border-image-source: url('[Link]');​

​border-image-slice: 30;​

​border-image-repeat: round;​

​}​

​/* Shorthand */​

​border-image: url('[Link]') 30 round;​

​Border Image Properties:​

​Property​ ​Purpose​
​ order-image-s​ ​URL of the image​
b
​ource​

​ order-image-sl​ ​How to slice the​

b
​ice​ ​image​

​ order-image-w​ ​Width of border​

b
​idth​ ​image​

​ order-image-re​ s
b ​ tretch / repeat /​
​peat​ ​round​

​Also: CSS3 Border Radius (Rounded Corners):​

​border-radius: 10px; /* All corners */​

​border-radius: 50%; /* Circle shape */​

​border-radius: 10px 20px 30px 40px; /* Each corner */​

​TOPIC 3 — CSS3 Shadows​

​CSS3 provides two types of shadows:​

​1. Box Shadow​​Adds shadow to an element's box.​

box-shadow: h-offset v-offset blur spread​​

​Syntax:​​ color​
inset;​
​
​/* Simple shadow */​

​box-shadow: 5px 5px 10px #888888;​

​/* Multiple shadows */​

​box-shadow: 5px 5px 10px grey, -5px -5px 10px blue;​

​/* Inset (inner) shadow */​

​box-shadow: inset 5px 5px 10px #000000;​

​Value​ ​Meaning​

​ -offs​ H
h ​ orizontal shift (+ =​
​et​ ​right)​

v​ -offs​ V
​ ertical shift (+ =​
​et​ ​down)​

​blur​ ​ lurriness of​

B
​shadow​
 s​ prea​ S
​ ize expansion of​
​d​ ​shadow​

​inset​ ​ hadow inside the​

S
​element​

​2. Text Shadow​​Adds shadow behind text.​

text-shadow: h-offset v-offset blur color;​

​Syntax:​​

​h1 {​

​text-shadow: 3px 3px 5px #ff0000;​

​}​

​/* Glowing effect */​

​h1 {​

​text-shadow: 0 0 10px cyan, 0 0 20px blue;​

​}​

​TOPIC 4 — CSS3 Transformations​

​ SS3 Transform allows you to move, rotate, scale, and skew elements​
C
​without changing page layout.​

transform: function(value);​
​Syntax:​​

​2D Transform Functions:​

​Function​ ​What it Does​ ​Example​

t​ranslate(x​ ​Move element​ t​ranslate(50px,​

​, y)​ ​100px)​

r​ otate(angl​ ​Rotate element​ ​rotate(45deg)​

​e)​

​scale(x, y)​ ​Resize element​ ​scale(2, 1.5)​

​skew(x, y)​ ​Slant element​ ​skew(30deg, 0)​

​matrix()​ ​ ll transforms​
A ​Advanced use​
​combined​

​/* Move right 50px and down 100px */​

​transform: translate(50px, 100px);​

​/* Rotate 45 degrees clockwise */​

​transform: rotate(45deg);​

​/* Scale to double size */​

​transform: scale(2);​

​/* Combine transforms */​

​transform: translate(50px, 50px) rotate(45deg) scale(1.5);​

​3D Transform Functions:​

​Function​ ​What it Does​

r​ otateX(angl​ R
​ otate around X​
​e)​ ​axis​

r​ otateY(angl​ R
​ otate around Y​
​e)​ ​axis​

r​ otateZ(angl​ R
​ otate around Z​
​e)​ ​axis​
 t​ranslateZ(va​ M
​ ove in/out of​
​lue)​ ​screen​

​ erspective(​ S
p ​ et depth of 3D​
​n)​ ​view​

​/* 3D Flip Effect */​

​transform: rotateY(180deg);​

​TOPIC 5 — CSS3 Transitions​

​ ransitions create​​smooth animation between two states​​(like hover​

T
​effects) without keyframes.​

transition: property duration timing-function​

​Syntax:​​
delay;​
​

​button {​

​background: blue;​

​transition: background 0.5s ease-in-out;​

​}​
​button:hover {​

​background: red;​

​}​

​Transition Properties:​

​Property​ ​Purpose​ ​Values​

t​ransition-propert​ W
​ hich CSS property​ ​all, color, width​
​y​ ​to animate​

t​ransition-duratio​ ​How long the​ ​0.5s, 2s​

​n​ ​transition takes​

t​ransition-timing-f​ ​Speed curve​ ​ ase, linear, ease-in,​

e
​unction​ ​ease-out, cubic-bezier​

​transition-delay​ ​Wait before starting​ ​0s, 1s​

​Timing Functions Explained:​

​Value​ ​Effect​
​linear​ ​Constant speed​

​ease​ ​ low-fast-slow​
S
​(default)​

​ease-in​ ​ tarts slow, ends​

S
​fast​

​ease-out​ S
​ tarts fast, ends​
​slow​

c​ ubic-bez​ ​Custom curve​

​ier​

​TOPIC 6 — CSS3 Animations​

​ nimations allow​​multi-step, keyframe-based​​animation​​that runs​

A
​automatically (no hover needed).​

​Two Steps:​

@keyframes​
​1.​ ​Define animation using​​
animation​​property​
​2.​ ​Apply animation using​​

​Step 1: Define Keyframes​

​@keyframes slideIn {​

​0% { left: -200px; opacity: 0; }​

 ​50% { left: 50px; opacity: 0.5; }​

​100% { left: 0; opacity: 1; }​

​}​

​Step 2: Apply Animation​

​div {​

​animation: slideIn 2s ease-in-out 0s infinite alternate;​

​}​

​Animation Properties:​

​Property​ ​Purpose​ ​Example​

​animation-name​ ​@keyframes name​ ​slideIn​

​animation-duration​ ​How long​ ​2s​

​ nimation-timing-fun​ ​Speed curve​

a ​ease​
​ction​
​animation-delay​ ​Wait before start​ ​0.5s​

​ nimation-iteration-c​ ​How many times​

a ​3 or infinite​
​ount​

​animation-direction​ ​ ormal / reverse /​

n ​alternate​
​alternate​

​animation-fill-mode​ ​State before/after​ f​orwards,​

​backwards​

​animation-play-state​ ​running / paused​ ​paused​

​DIFFERENCE: Transitions vs Animations​

​Featur​ ​Transitions​ ​Animations​

​e​

​Trigger​ N
​ eeds a trigger (hover,​ ​Runs automatically​
​focus)​

​Steps​ ​ nly start and end​

O ​ ultiple keyframe​
M
​states​ ​steps​
 ​Loop​ ​No looping​ ​Can loop infinitely​

​Code​ ​Simpler​ ​More complex​

​ se​
U ​Hover effects, toggles​ ​ oading spinners,​
L
​Case​ ​banners​

​DIAGRAM — CSS3 Features Summary​

​CSS3 VISUAL FEATURES​

​│​

​├── BACKGROUND​

​│ ├── Multiple Backgrounds​

​│ ├── background-size (cover/contain)​

​│ └── Gradients (linear, radial)​

​│​

​├── BORDER​

​│ ├── border-radius (rounded corners)​

​│ └── border-image (decorative borders)​

​│​

​├── SHADOWS​

​│ ├── box-shadow (element shadow)​

​│ └── text-shadow (text shadow)​

​│​

​├── TRANSFORM (Static change)​

​│ ├── 2D: translate, rotate, scale, skew​

​│ └── 3D: rotateX, rotateY, perspective​

​│​

​├── TRANSITION (2-state animation)​

​│ └── Triggered by :hover / :focus​

​│​

​└── ANIMATION (Multi-step)​

​├── @keyframes (define steps)​

​└── animation property (apply)​

​APPLICATION​
​​
● ​ utton hover effects → Transitions​
B
​●​ ​Loading spinners → Animations​
​●​ ​Card flip effects → 3D Transforms​
​●​ ​Image galleries with smooth zoom → Transform + Transition​
​●​ ​Animated banners → @keyframes Animation​
​●​ ​Website background gradients → CSS3 Gradients​

​ADVANTAGES​
​​
● ​ o JavaScript or Flash needed​
N
​●​ ​GPU-accelerated (smooth performance)​
​●​ ​Reduces image usage (gradients, shadows)​
​●​ ​Fully responsive and scalable​
​●​ ​Easy to maintain in CSS​

​DISADVANTAGES​
​​ C
● ​ omplex animations harder to manage than JavaScript​
​●​ ​Some older browsers (IE) need vendor prefixes (-webkit-, -moz-)​
​●​ ​Too many animations can hurt performance​

​REAL WORLD ANALOGY​

​●​ T ​ ransition​​= Dimmer switch — gradually changes light​​from bright​
​to dim when you touch it​
​●​ ​Animation​​= A clock — automatically moves the hands​​in steps​
​without any trigger​
​●​ ​Transform​​= Funhouse mirror — changes the appearance​​of an​
​object without moving it in the room​
 ​●​ ​Box Shadow​​= A lamp casting shadow behind a book on the table​

​CONCLUSION​
​ SS3 visual features — backgrounds, border-images, shadows,​
C
​transforms, transitions, and animations — empower developers to create​
​stunning, responsive, and performant web interfaces purely through​
​CSS. These features eliminate the need for images and JavaScript for​
​most visual effects, resulting in faster-loading and more maintainable​
​websites.​

​🧠 MEMORY TRICK​
​ SS3 Features — "Big Beautiful Styled Tigers Take Aggressive​
C
​Actions"​​B​ackground →​​B​order-image →​​S​hadows →​​T​ransforms​​→​
​T​ransitions →​​A​nimations​

​Transform functions — "TRSS":​​T​ranslate,​​R​otate,​​S​cale,​​S​kew​

​ ransition shorthand — "PDTD":​​P​roperty →​​D​uration​​→​

T
​T​iming-function →​​D​elay​

​ UESTION 4: CSS3 Rule Cascading,​

Q
​Inheritance and Specificity​

​INTRODUCTION​
​ hen multiple CSS rules try to style the same element, CSS needs a​
W
​way to decide which rule wins. This decision-making system is called​
​Cascading and Specificity. Understanding this is crucial for debugging​
​and writing clean, predictable CSS.​

​DEFINITION​
​ ascading​​in CSS refers to the process by which the​​browser​
C
​determines which CSS rule to apply when multiple rules target the same​
​element. The word "Cascade" in CSS means rules flow downward, and​
​conflicts are resolved based on​​Origin, Specificity,​​and Order.​

I​nheritance​​is the mechanism by which CSS properties​​are passed from​

​a parent element to its child elements automatically.​

​TOPICS & SUBTOPICS​

​TOPIC 1 — The Cascade (Rule Priority System)​

​ hen two or more CSS rules conflict, the browser resolves them using​
W
​this​​priority order​​(highest wins):​

​1. !important declarations (highest)​

​2. Inline styles​

​3. ID selectors​

​4. Class, attribute, pseudo-class selectors​

​5. Element (tag) selectors​

​6. Inherited styles​

​7. Browser default styles (lowest)​

​Three factors determine cascade:​

​Factor​ ​Description​

​Origin​ ​ here the CSS​

W
​comes from​

​ pecifici​ H
S ​ ow specific the​
​ty​ ​selector is​

​Order​ ​ hich rule appears​

W
​last​

​TOPIC 2 — CSS Origins (Types of Stylesheets)​

​Origin Type​ ​Source​ ​Priority​

​ rowser​
B ​ efault browser​
D ​Lowest​
​Stylesheet​ ​styles​
​ ser​
U ​ eader's custom​ ​Medium​
R
​Stylesheet​ ​styles​

​ uthor​
A ​Developer's CSS​ ​High​
​Stylesheet​

!​important​ ​ eveloper forces​ V

D ​ ery​
​(Author)​ ​it​ ​High​

!​important​ ​User forces it​ ​Highest​

​(User)​

​Example:​

​/* Browser default: p { font-size: 16px; } */​

​/* Author CSS: */​

​p { font-size: 18px; } /* Wins over browser default */​

​p { font-size: 20px !important; } /* Wins over everything */​

​TOPIC 3 — Specificity (The Core Concept)​

​ pecificity​​is a numerical score that tells the browser​​how "specific" a​

S
​selector is. The​​higher the score, the higher the​​priority.​
​Specificity is calculated as a 4-part score:​

​(Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element)​

​A B C D​

​Selector Type​ ​ core​

S ​Poin​
​Column​ ​ts​

​Inline style​ ​A​ ​ ,0,0​

1
​,0​

​ID selector (#id)​ ​B​ ​ ,1,0​

0
​,0​

​ lass (.class), Attribute ([type]),​

C ​C​ ​ ,0,1​
0
​Pseudo-class (:hover)​ ​,0​

​ lement (div, p, h1), Pseudo-element​

E ​D​ ​ ,0,0​
0
​(::before)​ ​,1​

​Universal (*)​ ​—​ ​ ,0,0​

0
​,0​

​Specificity Calculation Examples:​

 ​Selector​ ​Scor​ ​Reasoning​
​e​

p​
​ ​ ,0,0​ ​1 element​
0
​,1​

.nav​
​ ​ ,0,1​ ​1 class​
0
​,0​

#header​
​ ​ ,1,0​ ​1 ID​
0
​,0​

div p​
​ ​ ,0,0​ ​2 elements​
0
​,2​

[Link] p​ ​0,0,1​ 1
​ ​ class + 2​
​,2​ ​elements​

#header​
​ ​ ,1,1​ 1
0 ​ ID + 1 class + 1​
.nav p​
​ ​,1​ ​element​

style="..​ ​1,0,0​ ​Inline style​

​
."​
​ ​,0​
​Comparing Specificity — Example:​

​/* Rule 1: Score = 0,0,0,1 */​

​p { color: blue; }​

​/* Rule 2: Score = 0,0,1,1 */​

​div p { color: green; }​

​/* Rule 3: Score = 0,1,0,0 */​

​#main { color: red; }​

<p id="main">​​inside a​​

​For​​ <div>​
​:​

​​ R
● ​ ule 1: 0,0,0,1​
​●​ ​Rule 2: 0,0,0,2​
​●​ ​Rule 3: 0,1,0,0 ← WINS (highest specificity)​

​Result: Text will be​​red​​.​

​The !important Exception:​

​p { color: blue !important; }​

​p { color: red; }​
 !important​​overrides specificity​
​ esult: Blue wins — because​​
R
​completely.​

⚠️ !important​​makes CSS hard to​​debug. Use​

​ Warning: Overusing​​
​sparingly.​

​TOPIC 4 — Rule Order (Last Rule Wins)​

​ hen two rules have​​equal specificity​​, the one that​​appears​​last​​in the​

W
​CSS wins.​

​p { color: blue; }​

​p { color: red; } /* This wins — appears last */​

​This also applies across files — the last linked stylesheet wins.​

​<link rel="stylesheet" href="[Link]">​

​ link rel="stylesheet" href="[Link]"> <!-- This overrides [Link]​

<
​-->​

​TOPIC 5 — CSS Inheritance​

I​nheritance​​means certain CSS properties automatically​​pass from​

​parent to child elements without needing to write them again.​
​Inherited Properties (pass from parent):​

​Property​ ​Examples​
​Type​

​ ext​
T c​ olor, font-size, font-family, font-weight,​
​properties​ ​line-height​

​ ist​
L ​list-style-type​
​properties​

​Visibility​ ​visibility​

​Non-Inherited Properties (do NOT pass):​

​Property​ ​Examples​
​Type​

​Box model​ ​ argin, padding, border,​

m
​width, height​

​ ackgroun​ b
B ​ ackground-color,​
​d​ ​background-image​

​Positioning​ ​position, top, left, float​

​Example of Inheritance:​

​body {​

​font-family: Arial;​

​color: #333;​

​}​

<p>​
​ ll​​
A <h1>​
​,​​ <span>​​inside​​
​,​​ <body>​​will automatically​​use Arial font​
​and #333 color — because they are​​inherited​​.​

​Controlling Inheritance:​

​CSS provides three special values:​

​Valu​ ​Effect​
​e​

i​nher​ F
​ orce inheritance from​
​it​ ​parent​

​initial​ R
​ eset to browser​
​default​
 ​ nse​ ​Remove all set values​
u
​t​

​p { color: inherit; } /* Force inheriting parent's color */​

​button { font-family: inherit; } /* Buttons don't inherit by default */​

​div { margin: initial; } /* Reset to 0 */​

​DIAGRAM — Specificity Hierarchy​

​SPECIFICITY HIERARCHY (Highest to Lowest)​

​┌─────────────────────────────────────────┐​

​│ !important (Overrides everything) │​

​├─────────────────────────────────────────┤​

​│ Inline Styles style="..." (1,0,0,0) │​

​├─────────────────────────────────────────┤​

​│ ID Selectors #id (0,1,0,0) │​

​├─────────────────────────────────────────┤​
​│ Class .class, :hover, [attr](0,0,1,0) │​

​├─────────────────────────────────────────┤​

​│ Elements div, p, h1 (0,0,0,1) │​

​├─────────────────────────────────────────┤​

​│ Universal * (0,0,0,0) │​

​└─────────────────────────────────────────┘​

​COMPLETE EXAMPLE​

​<div id="box" class="container">​

​<p class="text" style="color: purple;">Hello</p>​

​</div>​

​p { color: blue; } /* 0,0,0,1 */​

​.text { color: green; } /* 0,0,1,0 */​

​#box p { color: red; } /* 0,1,0,1 */​

​/* inline { color: purple; } /* 1,0,0,0 WINS */​

​Result:​​Purple​​— inline style always wins (unless​​!important overrides)​

​APPLICATION​
​​
● ​ esolving styling conflicts in large projects​
R
​●​ ​Overriding third-party CSS libraries (Bootstrap, Tailwind)​
​●​ ​Theming systems where base styles are inherited​
​●​ ​CSS debugging (understanding why a style isn't applying)​

​ADVANTAGES​
​​
● ​ ascade enables style reuse and overriding​
C
​●​ ​Inheritance reduces code repetition​
​●​ ​Specificity gives fine-grained control over styles​
​●​ ​Predictable behavior once understood​

​DISADVANTAGES​
​​ B
● ​ eginners often confused by unexpected style overrides​
​●​ ​!important overuse creates maintenance nightmares​
​●​ ​Specificity wars in large teams lead to messy CSS​

​REAL WORLD ANALOGY​

​Cascading is like​​company policy hierarchy:​

​​
● ​ overnment law (browser default) — applies everywhere​
G
​●​ ​Company rules (author CSS) — overrides government defaults​
​●​ ​Manager's instruction (ID selector) — overrides company rules​
​●​ ​CEO's direct order (inline style) — overrides manager​
 ​●​ C
​ EO's written mandate (! important) — absolute authority, no one​
​can override​

I​nheritance​​is like​​family traits​​— children inherit​​eye color, height​

​tendencies from parents, but they don't inherit their parents' job or​
​address.​

​CONCLUSION​
​ SS Cascading, Inheritance, and Specificity are the three pillars that​
C
​govern which styles are applied to elements. The cascade resolves​
​conflicts using origin, specificity, and order. Inheritance reduces​
​repetition by passing properties to child elements. Specificity is​
​calculated as a 4-part score where higher values win. Mastering these​
​concepts is essential for writing predictable, maintainable CSS.​

​🧠 MEMORY TRICK​
​ ascade Priority — "I-I-I-C-E-U":​​**!**important →​​I​nline →​​I​D →​​C​lass​
C
​→​​E​lement →​​U​niversal​

​ pecificity Score — "A-BCD":​​A​​= Inline (1,0,0,0)​​B​​= ID (0,1,0,0)​​C​​=​

S
​Class/Pseudo-class (0,0,1,0)​​D​​= Element (0,0,0,1)​

I​nherited Properties — "CFLV":​​C​olor,​​F​ont-family,​​L​ine-height,​

​V​isibility​
​ UESTION 5: Bootstrap Framework —​
Q
​Responsive Webpage with Grid, Navbar,​
​Cards, Buttons​

​INTRODUCTION​
​ esigning websites that look good on all screen sizes — mobile, tablet,​
D
​desktop — was once a complex challenge. Bootstrap solved this​
​problem by providing a ready-made, professional CSS framework.​
​Today, Bootstrap is the world's most popular front-end framework, used​
​by millions of websites.​

​DEFINITION​
​ ootstrap​​is a free, open-source front-end CSS framework​​developed​
B
​by Twitter (now maintained by the Bootstrap team). It provides a​
​responsive grid system, pre-designed components (navbar, cards,​
​buttons, modals), and utility classes that enable rapid and consistent​
​web development across all screen sizes.​

​Current Version:​​Bootstrap 5​​(dropped jQuery dependency)​

​TOPICS & SUBTOPICS​

​TOPIC 1 — Bootstrap Features Overview​

 ​Feature​ ​Description​

​ esponsive Grid​
R ​ 2-column layout that adapts to​
1
​System​ ​screen size​

​ re-built​
P ​ avbar, Cards, Buttons, Modals,​
N
​Components​ ​Forms​

​Utility Classes​ ​ argin, padding, color, display​

M
​helpers​

​Flexbox-based​ ​Uses CSS Flexbox internally​

​Mobile-first​ ​Designed for mobile, scales up​

​JavaScript Plugins​ D
​ ropdowns, modals, tooltips (via​
​CDN)​

​Customizable​ ​ ariables can be overridden with​

V
​Sass​

​TOPIC 2 — Bootstrap Grid System​

​ he grid system is the heart of Bootstrap. It divides the page into​​12​

T
​columns​​and automatically rearranges them based on​​screen size.​
​Grid Structure:​

​Container​

​└── Row​

​└── Columns (col-*)​

​Container Types:​

​Class​ ​Behavior​

​.container​ ​ ixed width,​

F
​centered​

​.container-fluid​ ​ ull width, 100%​

F
​always​

.​container-{breakp​ F
​ luid until​
​oint}​ ​breakpoint​

​Breakpoint System:​

​Breakpo​ P
​ refi​ S
​ creen​ ​Device​
​int​ ​​
x ​ ize​
S
​ xtra​
E (​ non​ ​< 576px​ ​ mall​
S
​small​ ​e)​ ​phone​

​Small​ ​sm​ ​≥ 576px​ ​Phone​

​Medium​ ​md​ ​≥ 768px​ ​Tablet​

​Large​ ​lg​ ​≥ 992px​ ​Laptop​

​ xtra​
E ​xl​ ​≥ 1200px​ ​Desktop​
​Large​

​XXL​ ​xxl​ ​≥ 1400px​ L

​ arge​
​monitor​

​Column Classes:​

​col-{breakpoint}-{number}​

​Examples:​

​●​ ​
col-12​​→ full width on all screens​
​●​ ​
col-md-6​​→ 6 of 12 columns on medium screens and above​
​●​ ​
col-lg-4​​→ 4 of 12 columns on large screens​
​Column Number Rules:​

​​ C
● ​ olumns in a row should add up to 12​
​●​ ​If they exceed 12, they wrap to next line​
​●​ ​
col​​(without number) = equal-width columns​

​Grid Example (Concept):​

​Desktop (3 columns): [col-lg-4][col-lg-4][col-lg-4]​

​Tablet (2 columns): [col-md-6][col-md-6]​

​Mobile (full width): [col-12]​

​TOPIC 3 — Bootstrap Navbar​

​ he Navbar is a responsive navigation bar that collapses into a​

T
​hamburger menu on small screens.​

​Key Navbar Classes:​

​Class​ ​Purpose​

​.navbar​ ​Base navbar class​

​.navbar-expand-lg​ ​ xpand on large​

E
​screens​
​.navbar-dark​ ​ hite text (dark​
W
​background)​

​.navbar-light​ ​ ark text (light​

D
​background)​

.​bg-dark /​ ​Background colors​

​.bg-primary​

​.navbar-brand​ ​Logo/brand name​

​.navbar-nav​ ​ avigation links​

N
​container​

​.nav-item​ ​Each nav item​

​.nav-link​ ​Clickable link​

​.navbar-toggler​ ​ amburger button for​

H
​mobile​

.​[Link]-co​ ​Collapsible content​

​llapse​
​TOPIC 4 — Bootstrap Cards​

​ ards are flexible content containers with optional header, body, footer,​
C
​image.​

​Key Card Classes:​

​Class​ ​Purpose​

​.card​ ​ ase card​

B
​container​

.​card-hea​ ​Top section​

​der​

​.card-body​ M
​ ain content​
​area​

.​card-foot​ ​Bottom section​

​er​

​.card-title​ ​ itle inside​

T
​card-body​

​.card-text​ ​ aragraph in​

P
​card​
.​card-img-​ I​mage at top of​
​top​ ​card​

​TOPIC 5 — Bootstrap Buttons​

​Bootstrap provides styled, consistent buttons.​

​Button Types:​

​Class​ ​Color​

​.btn-primary​ ​Blue​

​.btn-secondary​ ​Grey​

​.btn-success​ ​Green​

​.btn-danger​ ​Red​

​.btn-warning​ ​Yellow​

​.btn-info​ ​Cyan​

​.btn-light​ ​White​
​.btn-dark​ ​Black​

.​btn-outline-pri​ ​ utlined​
O
​mary​ ​Blue​

​Button Sizes:​

​Class​ ​Size​

​.btn-lg​ ​Large​

(​ defau​ N
​ orm​
​lt)​ ​al​

.​btn-s​ ​Small​
​m​

​TOPIC 6 — Bootstrap Utility Classes​

​ ootstrap provides hundreds of utility classes for quick styling without​

B
​writing custom CSS.​

​Catego​ ​Classes​ ​Example​

​ry​
​ pacin​ ​m-​​, p-​​, mt-​​, mb-​​, px-*​
S ​p-3, mt-4​
​g​

​Text​ ​text-center, text-bold​ ​text-center​

​Display​ ​d-flex, d-none, d-block​ ​d-flex​

​Color​ ​text-primary, bg-success​ ​bg-dark​

​Width​ ​w-100, w-50​ ​w-100​

​ lexbo​ j​ustify-content-between,​
F ​ -flex​
d
​x​ ​align-items-center​ ​justify-content-between​

​ OMPLETE RESPONSIVE WEBPAGE CODE (Bootstrap​

C
​5)​

​<!DOCTYPE html>​

​<html lang="en">​

​<head>​

​<meta charset="UTF-8">​
 ​ meta name="viewport" content="width=device-width,​
<
​initial-scale=1.0">​

​<title>Bootstrap Page</title>​

​ link​
<
​href="[Link]
​.css" rel="stylesheet">​

​</head>​

​<body>​

​<!-- NAVBAR -->​

​<nav class="navbar navbar-expand-lg navbar-dark bg-dark">​

​<div class="container">​

​<a class="navbar-brand" href="#">MyWebsite</a>​

​ button class="navbar-toggler" type="button"​

<
​data-bs-toggle="collapse" data-bs-target="#navMenu">​

​<span class="navbar-toggler-icon"></span>​

​</button>​

​<div class="collapse navbar-collapse" id="navMenu">​

​<ul class="navbar-nav ms-auto">​

 ​<li class="nav-item"><a class="nav-link" href="#">Home</a></li>​

​<li class="nav-item"><a class="nav-link" href="#">About</a></li>​

​<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>​

​</ul>​

​</div>​

​</div>​

​</nav>​

​<!-- HERO SECTION -->​

​<div class="bg-primary text-white text-center py-5">​

​<h1>Welcome to My Site</h1>​

​<p>Responsive web design made easy with Bootstrap</p>​

​<button class="btn btn-light btn-lg me-2">Get Started</button>​

​<button class="btn btn-outline-light btn-lg">Learn More</button>​

​</div>​

​<!-- CARDS SECTION -->​

​<div class="container my-5">​

​<h2 class="text-center mb-4">Our Services</h2>​

​<div class="row g-4">​

​<div class="col-12 col-md-6 col-lg-4">​

​<div class="card h-100 shadow">​

​<div class="card-body">​

​<h5 class="card-title">Web Design</h5>​

​ p class="card-text">Beautiful, responsive designs for your​

<
​business.</p>​

​<a href="#" class="btn btn-primary">Learn More</a>​

​</div>​

​</div>​

​</div>​

​<div class="col-12 col-md-6 col-lg-4">​

​<div class="card h-100 shadow">​

 ​<div class="card-body">​

​<h5 class="card-title">Development</h5>​

​ p class="card-text">Full-stack web development with modern​

<
​technologies.</p>​

​<a href="#" class="btn btn-success">Learn More</a>​

​</div>​

​</div>​

​</div>​

​<div class="col-12 col-md-6 col-lg-4">​

​<div class="card h-100 shadow">​

​<div class="card-body">​

​<h5 class="card-title">SEO Services</h5>​

​ p class="card-text">Improve your search rankings with expert​

<
​ EO.</p>​
S

​<a href="#" class="btn btn-danger">Learn More</a>​

​</div>​

​</div>​
 ​</div>​

​</div>​

​</div>​

​<!-- FOOTER -->​

​<footer class="bg-dark text-white text-center py-3">​

​<p>© 2026 MyWebsite. All rights reserved.</p>​

​</footer>​

​ script​
<
​src="[Link]
​[Link]"></script>​

​</body>​

​</html>​

​DIAGRAM — Grid System Behavior​

​SCREEN SIZE: MOBILE TABLET DESKTOP​

​(<576px) (768px) (992px+)​

​Row with 3 cols:​

c​ ol-12/col-md-6/ ┌─────────┐ ┌────┬────┐​

​┌──┬──┬──┐​

​col-lg-4 │ Card 1 │ │ C1 │ C2 │ │C1│C2│C3│​

​├─────────┤ ├────┴────┤ └──┴──┴──┘​

​│ Card 2 │ │ Card 3 │​

​├─────────┤ └─────────┘​

​│ Card 3 │​

​└─────────┘​

​APPLICATION​
​​
● ​ -commerce websites (product cards, responsive layout)​
E
​●​ ​Corporate websites (navbar, hero, cards)​
​●​ ​Admin dashboards​
​●​ ​Portfolio websites​
​●​ ​News websites with grid-based article layout​
​ADVANTAGES​
​​
● ​ educes CSS writing time drastically​
R
​●​ ​Consistent cross-browser styling​
​●​ ​Mobile-first approach built-in​
​●​ ​Large community, extensive documentation​
​●​ ​No jQuery in Bootstrap 5​

​DISADVANTAGES​
​​
● ​ ll Bootstrap sites look similar without customization​
A
​●​ ​Extra unused CSS increases file size (use PurgeCSS)​
​●​ ​Learning curve for all utility classes​
​●​ ​Heavy reliance reduces understanding of raw CSS​

​REAL WORLD ANALOGY​

​Bootstrap is like​​LEGO blocks for websites:​

​●​ I​nstead of crafting each piece from scratch, you pick pre-made​
​blocks (navbar, card, button)​
​●​ ​The grid system is the​​LEGO base plate​​— it keeps​​everything​
​aligned​
​●​ ​You can combine blocks in any way to build any design quickly​
​●​ ​All blocks fit perfectly together — just like Bootstrap components​

​CONCLUSION​
​ ootstrap is the world's most popular CSS framework, offering a​
B
​powerful 12-column responsive grid, pre-built UI components, and utility​
​classes. It enables developers to build beautiful, mobile-responsive​
​websites rapidly. Its breakpoint system ensures layouts adapt​
s​ eamlessly from mobile to desktop, making it the go-to choice for​
​modern web development.​

​🧠 MEMORY TRICK​
​ ootstrap Grid — "C-R-C-12":​​C​ontainer →​​R​ow →​​C​olumns​​→​​12​
B
​column system​

​Breakpoints — "XS-SMMLX":​​X​S,​​S​M,​​M​D,​​L​G,​​XL​​,​​XXL​

​ utton colors — "PSSDWILB":​​P​rimary,​​S​econdary,​​S​uccess,​​D​anger,​

B
​W​arning,​​I​nfo,​​L​ight,​​B​lack(dark)​

​ UESTION 6: Web 2.0 — Characteristics,​

Q
​Technologies, Differences from Web 1.0​

​INTRODUCTION​
​ he internet has evolved dramatically since its inception. In its early​
T
​days, websites were static pages where users could only read content —​
​like a digital newspaper. Then came a revolutionary shift: users could not​
​only read but also​​create, share, and interact​​. This​​transformation is​
​called​​Web 2.0​​— the social, participatory, and dynamic​​web we use​
​today.​

​DEFINITION​
​ eb 2.0​​is the second generation of the World Wide Web, characterized​
W
​by user-generated content, social networking, dynamic pages, rich​
​interactivity, and collaborative platforms. Coined by Darcy DiNucci in​
​1999 and popularized by Tim O'Reilly in 2004, Web 2.0 represents a​
​paradigm shift from passive content consumption to active user​
​participation.​

​TOPICS & SUBTOPICS​

​TOPIC 1 — Historical Background​

​Era​ ​Name​ ​Period​ ​Nature​

​First Web​ W
​ eb​ ​ 991–200​ ​Read-only, Static​
1
​1.0​ ​4​

​ urrent​
C ​ eb​
W ​ 004–Pre​ ​Read-Write, Dynamic​
2
​Web​ ​2.0​ ​sent​

​ uture​
F ​ eb​
W ​Emerging​ R
​ ead-Write-Own,​
​Web​ ​3.0​ ​Decentralized​

​Key Events in Web 2.0:​

​​
● ​ 004 — Facebook launched​
2
​●​ ​2005 — YouTube launched​
​●​ ​2006 — Twitter launched​
​●​ ​2007 — iPhone launched (mobile web boom)​
​●​ ​2008 — Google Chrome launched​
 ​●​ ​2010 — Instagram launched​

​TOPIC 2 — Web 1.0 vs Web 2.0 (Key Differences)​

​Feature​ ​Web 1.0​ ​Web 2.0​

​Nature​ ​Static HTML pages​ ​Dynamic, interactive​

​User Role​ ​ assive consumer​

P ​ ctive creator (read +​
A
​(read only)​ ​write)​

​ ontent​
C ​ ebmaster/company​
W ​Anyone (user-generated)​
​Owner​ ​only​

​Pages​ ​Fixed HTML files​ ​ enerated from​

G
​databases​

​Technology​ ​HTML, FTP, HTTP​ ​ JAX, APIs, RSS,​

A
​JavaScript​

​ usiness​
B ​Page views, banners​ ​ dvertising, SaaS,​
A
​Model​ ​subscriptions​

​Linking​ ​ yperlinks between​

H ​ ags, folksonomy,​
T
​pages​ ​mashups​
​Speed​ ​ low, page reload per​ F
S ​ ast, partial page​
​action​ ​updates​

​Examples​ ​ ikipedia 2001,​

W ​ ouTube, Facebook,​
Y
​GeoCities​ ​Twitter​

​Database​ ​Rarely used​ ​Core of every application​

​Mobile​ ​Desktop-only​ ​Mobile-first​

​ ollaboratio​ ​None​
C ​ ikis, shared docs,​
W
​n​ ​comments​

​TOPIC 3 — Characteristics of Web 2.0​

​8 Core Characteristics:​

​ . User-Generated Content (UGC)​​Users create and share​​content​

1
​instead of just consuming it. Examples: YouTube videos, Wikipedia​
​articles, Reddit posts, Instagram photos.​

​ . Rich User Experience (RUX)​​Websites feel like desktop​​applications​

2
​— smooth, fast, no constant page reloads. Technologies: AJAX,​
​JavaScript, CSS3. Examples: Gmail, Google Maps, Google Docs.​

​ . Folksonomies (Social Tagging)​​Users tag and categorize​​content​

3
​using their own keywords (not predefined categories). Examples:​
​Instagram hashtags (#food, #travel), Twitter tags, Delicious bookmarks.​
​ . Long Tail Business Model​​Serving a large number of niche markets​
4
​rather than one large mainstream market. Examples: Amazon sells​
​millions of rare products; Spotify has obscure music that gets​
​discovered.​

​ . Software as a Service (SaaS)​​Applications are delivered​​over the​

5
​web instead of installed locally. Examples: Gmail, Google Docs,​
​Salesforce, Dropbox.​

​ . Participation & Collaboration​​Collective intelligence​​— the wisdom​

6
​of the crowd improves the service. Examples: Wikipedia (community​
​editing), eBay ratings, Amazon reviews, GitHub.​

​ . Lightweight APIs and Mashups​​Web services expose​​APIs that can​

7
​be combined to create new applications. Examples: Google Maps API​
​embedded in food delivery sites; Twitter API for social login.​

​ . Data as the New Oil​​Data is the core asset. Platforms​​collect,​

8
​analyze, and leverage user data. Examples: Facebook knows your​
​interests; Netflix recommends shows based on viewing history.​

​TOPIC 4 — Core Technologies of Web 2.0​

​1. AJAX (Asynchronous JavaScript and XML)​

​ he most critical Web 2.0 technology. AJAX allows web pages to update​
T
​data asynchronously without full page reload.​

​How it works:​

​User Action → JavaScript sends request in background →​

​Server responds with data →​

​JavaScript updates only the changed part of the page​

​Before AJAX (Web 1.0):​

​●​ ​Click "Submit" → Entire page reloads → Wait → New page loads​

​With AJAX (Web 2.0):​

​●​ T
​ ype in search box → Suggestions appear instantly → No page​
​reload​

​ xamples: Gmail (emails load without refresh), Google Maps (map tiles​
E
​load while dragging), YouTube comments, Facebook like button.​

​2. JavaScript Frameworks​

​Framework/Libr​ ​Purpose​
​ary​

​jQuery​ ​ implified DOM​

S
​manipulation​

​[Link]​ ​ omponent-based UI​

C
​(Facebook)​

​Angular​ ​ ull MVC framework​

F
​(Google)​

​[Link]​ ​Progressive UI framework​

​[Link]​ ​JavaScript on server side​

​3. RSS (Really Simple Syndication)​

​ SS feeds allow users to subscribe to content updates automatically​

R
​without visiting the website.​

​Structure:​

​Website publishes RSS Feed →​

​RSS Reader (Feedly) checks feed →​

​New content shown to subscriber​

​Examples: News websites, podcasts, blog subscriptions.​

​4. XML and JSON​

​ oth are data interchange formats used to transfer data between server​
B
​and client.​

​Feature​ ​XML​ ​JSON​

​Full form​ ​ Xtensible Markup​

e J​ avaScript Object​
​Language​ ​Notation​

​Syntax​ ​Tag-based​ ​Key-value pairs​

​Size​ ​Verbose​ ​Compact​

​Parsing​ ​Slow​ ​Fast​

​ se in Web​ ​RSS, SOAP APIs​

U ​REST APIs, AJAX​
​2.0​

​5. Web APIs and REST​

​ PIs (Application Programming Interfaces) allow services to​

A
​communicate. REST is the standard for Web 2.0 APIs.​

​Examples:​

​​
● ​ oogle Maps API → Anyone can embed Google Maps​
G
​●​ ​Twitter API → Apps can post/read tweets​
​●​ ​Payment APIs (Stripe, PayPal) → E-commerce checkout​
​●​ ​Social Login APIs → "Login with Google" button​

​6. Blogs and Wikis​

​Platfor​ T
​ yp​ ​Purpose​
​m​ ​​
e

​ ordPr​
W ​ lo​ ​Individual publishing​
B
​ess​ ​g​
​Blogger​ B
​ lo​ ​Easy blogging​
​g​

​ ikipedi​ ​Wik​ C
W ​ ollaborative​
​a​ ​i​ ​encyclopedia​

​ ediaWi​ ​Wik​ C
M ​ ommunity​
​ki​ ​i​ ​knowledge base​

​7. Social Networking Technologies​

​Technology​ ​Purpose​

​OAuth​ ​ ocial login (Login with​

S
​Google/Facebook)​

​WebSockets​ ​Real-time chat (WhatsApp Web)​

​ ush​
P ​Real-time alerts​
​Notifications​

​ eolocation​
G ​Location-based services​
​API​
​8. Cloud Computing​

​Web 2.0 applications run on cloud servers, enabling infinite scalability.​

​Service​ ​Example​

​ loud​
C ​ oogle Drive,​
G
​Storage​ ​Dropbox​

​ loud​
C ​ WS, Google​
A
​Computing​ ​Cloud​

​CDN​ ​ loudflare,​
C
​Akamai​

​TOPIC 5 — Web 2.0 Applications (Types)​

​Category​ ​Examples​

​Social Networks​ ​Facebook, Instagram, LinkedIn​

​Video Platforms​ ​YouTube, TikTok, Vimeo​

​Wikis​ ​Wikipedia, Wikihow​

​Blogs​ ​WordPress, Medium, Blogger​

​E-commerce 2.0​ A
​ mazon (reviews, recommendations),​
​eBay​

​ aaS​
S ​Gmail, Google Docs, Salesforce​
​Applications​

​Crowdsourcing​ ​Upwork, Fiverr, Kickstarter​

​ ontent​
C ​Reddit, Digg, Flipboard​
​Aggregators​

​ ashup​
M ​ ber (Google Maps + Location API +​
U
​Applications​ ​Payment API)​

​DIAGRAM — Web 2.0 Ecosystem​

​WEB 2.0 ECOSYSTEM​

​│​

​┌──────────────┼──────────────┐​

​│ │ │​
​USERS PLATFORM TECHNOLOGY​

​│ │ │​

​┌──┴──┐ ┌───┴───┐ ┌───┴───┐​

​│Read │ │Social │ │ AJAX │​

​│Write│ │Network │ │ APIs │​

​│Share│ │Blogs │ │ RSS │​

​│Tag │ │Wikis │ │ JSON │​

​└─────┘ │Video │ │Cloud │​

​└───────┘ └───────┘​

​│​

​User-Generated​

​Content (UGC)​

​APPLICATION​
​​
● ​ ducation:​​Wikipedia, online courses (Coursera, Khan​​Academy)​
E
​●​ ​Business:​​LinkedIn, Salesforce CRM, collaborative​​tools​
​●​ ​Entertainment:​​YouTube, Netflix, Spotify​
​●​ ​Communication:​​Gmail, WhatsApp Web, Slack​
 ​​ E
● ​ -commerce:​​Amazon product reviews, eBay bidding​
​●​ ​News:​​Reddit, Twitter, Google News​

​ADVANTAGES OF WEB 2.0​

​​
● ​ emocratizes content creation — anyone can publish​
D
​●​ ​Real-time communication and collaboration​
​●​ ​Rich user experience through AJAX​
​●​ ​Collective intelligence improves quality (Wikipedia)​
​●​ ​New business models (advertising, SaaS)​
​●​ ​Better accessibility via cloud-based applications​

​DISADVANTAGES OF WEB 2.0​

​​
● ​ rivacy concerns — massive user data collection​
P
​●​ ​Misinformation spreads rapidly (social media)​
​●​ ​Cyberbullying and toxic communities​
​●​ ​Platform monopolies (Google, Meta, Amazon)​
​●​ ​Digital addiction and screen time issues​
​●​ ​Security vulnerabilities (XSS, CSRF attacks on dynamic sites)​

​REAL WORLD ANALOGY​

​ eb 1.0​​is like a​​Library​​— You go there, read books,​​but you cannot​
W
​add, edit, or comment on any book. The librarian controls all content.​

​ eb 2.0​​is like a​​Conversation in a Coffee Shop​​—​​Everyone talks,​

W
​shares ideas, responds to each other. You can start your own topic​
​(blog), respond to others (comments), share what someone said​
​(retweet), and vote on what matters most (upvote). No single person​
​controls the conversation.​
​CONCLUSION​
​ eb 2.0 transformed the internet from a one-way broadcast medium into​
W
​a two-way, participatory platform. Its core philosophy — "the web as​
​platform" and "harnessing collective intelligence" — gave rise to social​
​media, wikis, SaaS, and mashup applications. Technologies like AJAX,​
​RSS, APIs, and JSON enabled the rich, dynamic, real-time experience​
​that defines today's internet. While powerful, Web 2.0 also brings​
​challenges of privacy, misinformation, and platform monopolization —​
​challenges that Web 3.0 aims to address.​

​🧠 MEMORY TRICK​
​ eb 2.0 Characteristics — "U-R-F-L-S-P-A-D":​​U​ser-generated​
W
​content,​​R​ich experience,​​F​olksonomy,​​L​ong tail,​​S​aaS,​​P​articipation,​
​A​PIss,​​D​ata​

​ eb 2.0 Technologies — "AJAX-RJCS":​​A​JAX,​​R​SS,​​J​SON,​​C​loud,​

W
​S​ocial APIs​

​Web 1.0 vs 2.0 — "Read vs Read-Write":​

​​ W
● ​ eb 1.0 = Encyclopedia (you READ)​
​●​ ​Web 2.0 = Wikipedia (you READ + WRITE + EDIT)​

📋
​ QUICK REVISION TABLE — All 6​
​Questions​

​ ​ ​Topic​
Q ​Key Concept​ ​Memory Trick​
​#​
​ ​ ​HTTP​
Q ​Request-Response cycle​ ​ -H-B, I Saw​
R
​1​ ​Client Server​

​ ​ ​HTML5​ F
Q ​ orms, Input types, Audio, Video,​ ​ NDER CUTS,​
E
​2​ ​Drag-Drop​ ​DS-DEED​

​ ​ ​CSS3​
Q ​ ackgrounds, Shadows, Transform,​
B ​ ig Beautiful​
B
​3​ ​Transition, Animation​ ​Styled Tigers​

​ ​ C
Q ​ asca​ ​Specificity scores, Inheritance​ I​-I-I-C-E-U, ABCD​
​4​ ​ding​ ​scores​

​ ​ B
Q ​ ootstr​ ​Grid, Navbar, Cards, Buttons​ ​ -R-C-12,​
C
​5​ ​ap​ ​Breakpoints​

​ ​ W
Q ​ eb​ ​UGC, AJAX, APIs, Collaboration​ ​U-R-F-L-S-P-A-D​
​6​ ​2.0​

​ xam Tip:​​For 13-mark answers, write Introduction​​(2 lines) →​

E
​Definition (2 lines) → Explain 3-4 main topics with subtopics →​
​Draw a simple diagram → Write advantages/disadvantages →​
​Conclusion (2 lines). This structure ensures full marks every​
​time.​