What is Web Technology?
Definition:
The tools & standards used to create, deploy, and manage websites and web applications.
Purpose / logic:
● Build dynamic, interactive, user-friendly websites
● Enable communication between client (browser) & server
Example:
HTML, CSS, JavaScript, HTTP, frameworks.
2. Abbreviations (must-know)
Abbreviation Full Form
HTML HyperText Markup Language
CSS Cascading Style Sheets
JS JavaScript
DOM Document Object Model
AJAX Asynchronous JavaScript and XML
JSON JavaScript Object Notation
API Application Programming Interface
HTTP Hypertext Transfer Protocol
URL Uniform Resource Locator
WWW World Wide Web
3. Web Layers & Technologies
Layer Purpose Example
Content Structure HTML
Presentatio Style CSS
n
Behavior Interactivity JavaScript
Server Backend Node.js, PHP,
Python
Database Data MySQL, MongoDB
storage
4. JavaScript: What is it?
Definition:
JavaScript (JS) is a lightweight, interpreted, scripting language used to make web pages
interactive.
Purpose:
● Add logic & behavior
● Respond to user actions
● Modify HTML/CSS dynamically
Example:
Show alert, validate form, update content without reloading.
5. JavaScript Features
Feature Detail
Interpreted Runs in browser, no compile
needed
Dynamic Variables can change type
Event-driven Responds to user actions
Object-base Works with objects & methods
d
Lightweight Small code, runs fast
6. HTML, CSS & JS: Roles
Purpose Example
HTML Structure <h1>Title</
h1>
CSS Style color: red;
JS Behavior alert("Hi")
;
7. JavaScript Data Types
Type Example
Number 5, 3.14
String "Hello"
Boolean true, false
Object {name:"Al
i"}
Array [1,2,3]
Null null
Undefined undefined
8. Variables
Purpose:
Store data.
Syntax:
js
CopyEdit
let x = 5;
const y = 10;
var z = "test";
Keyword Scope Changeable
?
var Function Yes
let Block Yes
const Block No
9. Operators
Type Example
Arithmetic +-*/%
Assignment = += -=
Compariso == === != < >
n
Logical &&
10. Functions
Definition:
Reusable blocks of code.
Syntax:
js
CopyEdit
function greet(name) { return "Hi " + name; }
11. Control Structures
Type Example
Conditional if, else, switch
Loop for, while, do...while
12. DOM (Document Object Model)
Definition:
Tree-like structure representing HTML page.
Purpose:
JS can change page content dynamically.
Example:
js
CopyEdit
document.getElementById("msg").innerHTML = "Welcome!";
13. Events
Purpose:
React to user actions.
Event Example
onclick Click button
onmouseove Hover on item
r
onchange Form input
changed
14. Arrays & Objects
Example
Array let arr=[1,2,3];
Object let car={brand:"Toyota",
year:2020};
15. JSON (JavaScript Object Notation)
Definition:
Text format to store & exchange data.
Example:
json
CopyEdit
{"name":"Ali","age":21}
Purpose:
APIs & server–client data transfer.
16. AJAX
Definition:
Load data from server without reloading page.
Purpose:
Dynamic content.
Example:
Search suggestions.
17. ES6 Features (Modern JS)
Feature Example
let & const Better scoping
Arrow functions (x) => x*2
Template literals `Hi
${name}`
Classes class Car
{}
Modules import,
export
18. Difference: == vs ===
== ===
Check Value Value + type
Example:
5=="5" → true
5==="5" → false
19. Libraries & Frameworks
Purpose
jQuery Simplify DOM, AJAX
React Build UI components
Angular Full web framework
Vue Reactive UI
20. Client vs Server
Client Server
Runs on Browser Server machine
Languag JS, HTML, CSS Node.js, PHP,
e Python
Role UI, validation DB, auth, API
22. Node.js
Definition:
JavaScript runtime to run JS on server.
Purpose:
Build backend using JS.
23. API (Application Programming Interface)
Purpose:
Allow apps to talk to each other.
Example:
Weather API shows temperature in your app.
What is HTML?
Definition:
HTML (HyperText Markup Language) is the standard markup language used to create the
structure and content of web pages.
Purpose / logic:
● Define headings, paragraphs, tables, images, links, etc.
● Tell the browser how to structure content
Example:
html
<h1>Hello World</h1>
<p>This is a paragraph.</p>
2. What is CSS?
Definition:
CSS (Cascading Style Sheets) is used to control the style & layout of web pages — e.g.,
colors, fonts, spacing.
Purpose / logic:
● Make pages look attractive & consistent
● Separate content (HTML) from design (CSS)
Example:
css
p { color: blue; font-size: 16px; }
3. Abbreviations
Abbreviation Full Form
HTML HyperText Markup Language
CSS Cascading Style Sheets
DOM Document Object Model
W3C World Wide Web Consortium
RGB Red Green Blue
4. HTML: Page structure
html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Tag Purpose
<!DOCTYPE html> Document type
declaration
<html> Root element
<head> Metadata, title, links
<body> Visible content
5. CSS: How to add styles
Method Example
Inline <p style="color:red;">Hello</p>
Internal <style> p { color:red; } </style>
in <head>
External <link rel="stylesheet"
href="style.css">
Purpose:
External CSS keeps HTML clean; reusable across pages.
6. HTML Elements & Tags
Element Purpose
<h1>–<h6> Headings
<p> Paragraph
<a href=""> Link
<img src=""> Image
<ul>, <ol>, <li> Lists
<table>, <tr>, <td> Tables
<form> Input form
7. CSS Selectors
Selector Example Purpose
Element p{} All paragraphs
Class .note { } Elements with class="note"
ID #header { } Element with id="header"
Universal *{} All elements
8. HTML Attributes
Definition:
Extra information in tags.
Example:
html
<img src="logo.png" alt="Logo">
<a href="page.html" target="_blank">Visit</a>
9. CSS Properties
Property Example
color color: red;
background-color background-color: yellow;
font-size font-size: 14px;
margin margin: 10px;
padding padding: 5px;
border border: 1px solid black;
10. Colors in CSS
Method Example
Name red
HEX #FF0000
RGB rgb(255,0,0)
11. HTML Forms
Purpose:
Collect user input.
Element Example
Input <input type="text">
Button <button>Submit</button>
Select <select><option>One</option></
select>
Textarea <textarea></textarea>
12. CSS Box Model
Parts:
● Content → Padding → Border → Margin
Purpose:
Control element spacing & layout.
13. HTML vs CSS
HTML CSS
Role Structure/conten Style/layout
t
Language Markup Style sheet
type
Example <h1> h1 { color:
red; }
14. CSS Units
Unit Meaning Example
px Pixels width: 200px;
% Percentage width: 50%;
em Relative to font-size font-size: 2em;
15. Semantic Elements (HTML5)
Element Purpose
<header> Top section
<footer> Bottom section
<nav> Navigation
<section> Group content
<article> Self-contained
16. Comments
Syntax
HTML <!-- comment
-->
CSS /* comment */
17. CSS Display Property
Value Purpose
block Starts on new
line
inline Same line
none Hide element
18. Responsive Design
Definition:
Make sites look good on phones, tablets, desktops.
Tool:
CSS Media Queries
css
CopyEdit
@media (max-width:600px){ body{ font-size:14px; } }
19. HTML5 New Features
Feature Example
Video <video src="movie.mp4" controls></video>
Audio <audio src="song.mp3" controls></audio>
Canvas <canvas></canvas>
Local storage Save data in browser
20. CSS Position Property
Value Purpose
static Default
relative Move relative to normal
absolut Position relative to parent
e
fixed Fixed in viewport
21. Inline vs Block Elements
Inline Block
Width Auto Full line
Example <a>, <p>, <div>
<span>