Web Development
Frontend Development
Frontend development focuses on creating the user interface and user experience of web applications.
web_app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web App</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.container { max-width: 600px; margin: 0 auto; }
button { padding: 10px 20px; margin: 5px; }
#result { margin-top: 20px; padding: 10px; background: #f0f0f0; }
</style>
</head>
<body>
<div class="container">
<h1>Simple Web App</h1>
<button onclick="sayHello()">Say Hello</button>
<button onclick="calculateSum()">Calculate Sum</button>
<div id="result"></div>
</div>
<script>
function sayHello() {
document.getElementById('result').innerHTML = 'Hello, World!';
}
function calculateSum() {
const a = 5;
const b = 3;
const sum = a + b;
document.getElementById('result').innerHTML =
`${a} + ${b} = ${sum}`;
}
</script>
</body>
</html>