Full Stack Web Development VVPCS
JSON (JavaScript Object Notation)
JSON is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to
parse and generate. It is mainly used to store and exchange data between a server and a web application.
Syntax Rules:
• Data is in name/value pairs.
• Data is separated by commas.
• Curly braces {} hold objects.
• Square brackets [] hold arrays.
Example:
{
"name": "Balor",
"age": 30,
"isStudent": false,
"skills": [“HTML”, “CSS”, “JavaScript”, “OS”],
"address": {
"city": "Mysore",
"zip": "570030”
}
}
CSS (Cascading Style Sheets)
CSS is a style sheet language used for describing the presentation of a web page written in HTML or XML. It
controls layout, colors, fonts, spacing, and more.
Types of CSS:
1. Inline CSS – styles are written inside HTML elements.
2. Internal CSS – styles are placed within a <style> tag in the <head> section of HTML.
3. External CSS – styles are written in a separate .css file and linked using the <link> tag.
Internal CSS Example: External CSS Example:
<head> HTML file:
<style> <head>
body { <link rel="stylesheet"
href="styles.css">
background-color: lightblue;
</head>
}
styles.css file:
h1 {
body {
color: navy;
background-color: #f4f4f4;
}
}
</style>
h1 {
</head>
color: green;
}
Rakesh Kashyap 1
Full Stack Web Development VVPCS
Common CSS Properties:
Property Description Example
color Text color color: red;
background-color Background color background-color: yellow;
font-size Size of the font font-size: 16px;
Space outside the
margin margin: 10px;
element
padding Space inside the element padding: 15px;
border Border of the element border: 1px solid black;
text-align Alignment of text text-align: center;
HTML (HyperText Markup Language)
Definition:
HTML is the standard markup language used to create web pages. It structures the content using tags, which tell the browser
how to display text, images, links, etc.
Basic Structure of HTML:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
//Body of the website
</body>
</html>
• <!DOCTYPE html> – Declares the document type.
• <html> – Root element.
• <head> – Contains metadata like title, styles, scripts.
• <title> – Sets the title of the page (shown in tab).
• <body> – Main content of the web page.
JS (JavaScript)
JavaScript is a scripting language used to create interactive and dynamic web pages. It can change HTML content,
validate forms, create animations, and much more.
How to Use JavaScript:
1. Inline JavaScript:
<button onclick="alert('Hello!')">Click Me</button>
2. Internal JavaScript:
<script>
function greet() {
alert("Welcome!");
}
</script>
<button onclick="greet()">Greet</button>
Rakesh Kashyap 2
Full Stack Web Development VVPCS
3. External JavaScript:
HTML File:
<script src="script.js"></script>
script.js File:
function greet() {
alert("Hello from external JS!");
}
What Can JavaScript Do?
• Manipulate HTML elements (DOM)
• Handle events (click, hover, etc.)
• Validate forms
• Communicate with server (AJAX/fetch)
• Create animations
• Store data locally (LocalStorage)
Rakesh Kashyap 3
