HTML (HyperText Markup Language) is the skeleton of web pages. It structures your content using tags.
These tags define the overall framework and essential parts of an HTML document.
These tags structure and style text within the webpage.
Handle navigation and organized information.
Embed images, audio, and video content.
Create interactive forms for user input.
HTML5 tags providing meaning for better accessibility and SEO.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>Content here</p>
</section>
</main>
<footer>
<p>© 2025</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS (Cascading Style Sheets) makes websites beautiful. It controls colors, fonts, spacing, and layout.
Methods to integrate CSS into HTML:
Patterns to find and style HTML elements:
Color & Background:
Typography:
Box Model:
Layout:
Visual Effects:
CSS rules follow: selector { property: value; }. Styles cascade from parent to child elements.
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f4f4f4;
}
/* Header Styles */
header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
color: #0080ff;
}
/* Main Content */
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
section {
background: #fff;
padding: 2rem;
margin: 1rem 0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Footer */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
Before CSS: Plain text
After CSS: Colors, spacing, shadows, rounded corners!
JavaScript brings websites to life! It adds interactivity, handles user actions, and updates content dynamically. JavaScript is dynamically typed.
Primitive Types:
Non-Primitive:
Containers for storing data values:
Conditional: if, else if, else, switch, ternary (?:)
Looping: for, while, do...while, for...in, for...of
Jump: break, continue, return, throw
Reusable blocks of code:
Handle operations without blocking execution:
JS runs in the browser, listens for events (clicks, inputs), manipulates DOM, and changes the page without reloading.
// DOM Ready
document.addEventListener('DOMContentLoaded', function() {
console.log('Page loaded!');
init();
});
// Initialize
function init() {
setupEventListeners();
loadData();
}
// Event Listeners
function setupEventListeners() {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
btn.addEventListener('click', handleClick);
});
}
function handleClick(event) {
console.log('Button clicked:', event.target);
}
// Data Operations
function loadData() {
// Fetch data
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data loaded:', data);
displayData(data);
})
.catch(error => {
console.error('Error:', error);
});
}
function displayData(data) {
// Display data in UI
const container = document.getElementById('data');
container.innerHTML = data.map(item =>
`<div class="item">${item.name}</div>`
).join('');
}
// Utility Functions
function $(selector) {
return document.querySelector(selector);
}
function $$(selector) {
return document.querySelectorAll(selector);
}
Examples: Buttons, forms, animations, live updates, games!