HTML, CSS, and JavaScript form the core technologies for building websites and web applications. HTML structures the content, CSS styles it, and JavaScript adds interactivity. Mastering these languages will empower you to create dynamic, responsive, and visually appealing web pages.
HTML (HyperText Markup Language) uses elements (tags) to create structured content. Here’s a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click Here</a>
</body>
</html>
<div>, <h1> to <h6>, <p>, <form><span>, <a>, <img>, <input>href in <a> for links, src in <img> for images.CSS (Cascading Style Sheets) allows you to style HTML elements. CSS can be applied inline, internally within a <style> block, or externally via a linked stylesheet.
/* External CSS */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
p), class selectors (e.g., .className), and ID selectors (e.g., #idName).color, background-color, padding, and margin.JavaScript brings interactivity to web pages. Here’s a simple script that changes an element’s content on button click:
<button onclick="changeText()">Click Me</button>
<p id="text">Original Text</p>
<script>
function changeText() {
document.getElementById("text").textContent = "You clicked the button!";
}
</script>
let and const for declaring variables.function keyword or arrow functions (=> syntax).document.getElementById).display: flex and display: grid to build layouts.@media (max-width: 768px) { /* Styles for mobile */ }transition and @keyframes.let and const for variables, arrow functions, and template literals.fetch() with async functions to handle responses.fetch('https://api.example.com/data').<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.form-container {
max-width: 600px;
margin: auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input, textarea { width: 100%; padding: 10px; margin: 10px 0; }
</style>
<script>
function validateForm() {
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
if (!name || !email) {
alert('Please fill out all fields');
return false;
}
alert('Form submitted successfully');
return true;
}
</script>
</head>
<body>
<div class="form-container">
<h2>Contact Us</h2>
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Your Name" required>
<input type="email" id="email" placeholder="Your Email" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>
Writing efficient and maintainable code is essential for web development.
<header>, <footer>) for better structure and accessibility.