← Back to Software
Web Development Documentation
HTML, CSS, and JavaScript reference guide
HTML (HyperText Markup Language)
HTML provides the structure and content of web pages.
Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
Common Elements
<!-- Headings -->
<h1>Main Title</h1>
<h2>Subtitle</h2>
<!-- Links -->
<a href="https://example.com">Visit Example</a>
<!-- Images -->
<img src="image.jpg" alt="Description">
<!-- Lists -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS (Cascading Style Sheets)
CSS controls the visual presentation and layout of HTML elements.
Selectors and Properties
/* Element selector */
h1 {
color: blue;
font-size: 2rem;
}
/* Class selector */
.highlight {
background-color: yellow;
padding: 10px;
}
/* ID selector */
#header {
width: 100%;
margin: 0 auto;
}
/* Flexbox Layout */
.container {
display: flex;
justify-content: center;
align-items: center;
}
Responsive Design
/* Media Queries */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
h1 {
font-size: 1.5rem;
}
}
JavaScript
JavaScript adds interactivity and dynamic behavior to web pages.
Variables and Functions
// Variables
const name = "JavaScript";
let count = 0;
// Functions
function greet(person) {
return `Hello, ${person}!`;
}
// Arrow functions
const add = (a, b) => a + b;
// Event handling
document.addEventListener('click', function(event) {
console.log('Element clicked:', event.target);
});
Getting and Setting Text in Elements
// Get text from an element by ID
const elementText = document.getElementById('myElement').textContent;
console.log(elementText);
// Set text to an element by ID
document.getElementById('myElement').textContent = 'New text content';
// Alternative using innerHTML (for HTML content)
document.getElementById('myElement').innerHTML = 'Bold text';
// Get input value
const inputValue = document.getElementById('myInput').value;
// Set input value
document.getElementById('myInput').value = 'New input value';
DOM Manipulation
// Select elements
const button = document.getElementById('myButton');
const elements = document.querySelectorAll('.item');
// Modify content and styles
button.textContent = 'Click me!';
button.style.backgroundColor = 'blue';
button.style.color = 'white';
// Add event listeners
button.addEventListener('click', function() {
alert('Button clicked!');
});
// Create new elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
document.body.appendChild(newDiv);
Modern JavaScript (ES6+)
// Destructuring
const {name, age} = person;
const [first, second] = array;
// Template literals
const message = `Hello, ${name}! You are ${age} years old.`;
// Async/Await
async function fetchData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}