Every website you visit is built using three core technologies:
Think of building a house: HTML is the structure (walls, rooms, doors), CSS is the decoration (paint, furniture, curtains), and JavaScript is the functionality (lights, appliances, doors that open).
HTML (HyperText Markup Language) uses tags to structure content. Here's a simple HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</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>
Common HTML tags:
<h1> to <h6> - Headings<p> - Paragraphs<a> - Links<img> - Images<div> - Container<button> - ButtonsCSS (Cascading Style Sheets) makes your website look good. You can add CSS in three ways:
/* Inline CSS */
<p style="color: green; font-size: 20px;">Green text</p>
/* Internal CSS (in <head>) */
<style>
p {
color: green;
font-size: 20px;
}
</style>
/* External CSS (separate file) */
<link rel="stylesheet" href="styles.css">
/* Element selector */
p {
color: green;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#main-title {
font-size: 32px;
}
/* Multiple selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Every HTML element is a box with margin, border, padding, and content:
.box {
/* Content size */
width: 200px;
height: 100px;
/* Padding (inside space) */
padding: 20px;
/* Border */
border: 2px solid black;
/* Margin (outside space) */
margin: 10px;
}
Margin → Border → Padding → Content
Flexbox makes it easy to create responsive layouts:
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
}
.item {
flex: 1; /* Each item takes equal space */
}
JavaScript adds interactivity to your website. You can add it before the closing </body> tag:
<script>
// Display a message
console.log("Hello from JavaScript!");
// Show an alert
alert("Welcome to my website!");
// Variables
let userName = "Neo";
const siteTitle = "HomePortal";
// Functions
function greet(name) {
return "Hello, " + name + "!";
}
</script>
The DOM (Document Object Model) lets JavaScript interact with HTML elements:
// Select elements
let title = document.getElementById("title");
let buttons = document.querySelectorAll(".btn");
// Change content
title.textContent = "New Title";
title.innerHTML = "<strong>Bold Title</strong>";
// Change styles
title.style.color = "green";
title.style.fontSize = "32px";
// Add/remove classes
title.classList.add("highlight");
title.classList.remove("old-style");
title.classList.toggle("active");
Make your website interactive by responding to user actions:
// Click event
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
// Input event
let input = document.getElementById("nameInput");
input.addEventListener("input", function() {
console.log("Current value:", input.value);
});
// Mouse hover
let box = document.getElementById("box");
box.addEventListener("mouseenter", function() {
box.style.backgroundColor = "green";
});
box.addEventListener("mouseleave", function() {
box.style.backgroundColor = "blue";
});
Let's combine everything into a simple interactive page:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background: blue;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="colorBox">Click Me!</div>
<script>
let box = document.getElementById("colorBox");
let colors = ["blue", "green", "red", "purple", "orange"];
let currentIndex = 0;
box.addEventListener("click", function() {
currentIndex = (currentIndex + 1) % colors.length;
box.style.backgroundColor = colors[currentIndex];
});
</script>
</body>
</html>
Build a to-do list where users can:
This project combines all three technologies: HTML for structure, CSS for styling, and JavaScript for interactivity. Ask the AI assistant if you need help!
Excellent work! You now know the fundamentals of web development.
What to learn next: