1️⃣ HTML (HyperText Markup Language)
Purpose: It gives structure to a webpage.
Think of it like the skeleton of your site.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
💡 Tags like <h1> are for headings, <p> for paragraphs. Pro tip: Use semantic tags like <article> for better SEO and screen readers.
2️⃣ CSS (Cascading Style Sheets)
Purpose: Adds style to your HTML – colors, fonts, layout.
Think of it like makeup or clothes for your HTML skeleton.
Example:
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
</style>
💡 You can add CSS inside <style> tags, or link an external CSS file. In 2025, master Flexbox for layouts:
display: flex; aligns items like magic!3️⃣ JavaScript
Purpose: Makes your site interactive – clicks, animations, data changes.
Think of it like the brain of the site.
Example:
<script>
function greet() {
alert("Welcome to my site!");
}
</script>
<button onclick="greet()">Click Me</button>
💡 When you click the button, it shows a popup. Level up with event listeners:
button.addEventListener('click', greet); for cleaner code.👶 Mini Project Example
<!DOCTYPE html>
<html>
<head>
<title>Simple Site</title>
<style>
body { font-family: Arial; text-align: center; }
h1 { color: green; }
button { padding: 10px 20px; }
</style>
</head>
<body>
<h1>My Simple Webpage</h1>
<p>Click the button below:</p>
<button onclick="alert('Hello Developer!')">Say Hi</button>
</body>
</html>
✅ Summary:
⦁ HTML = structure
⦁ CSS = style
⦁ JavaScript = interactivity
Mastering these 3 is your first step to becoming a web developer!
💬 Tap ❤️ for more!