HTML Basics
Learn the building blocks of the web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fundamentals
Style your HTML with modern CSS.
/* Center content */
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Button hover effect */
button {
background: var(--accent);
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 4px;
cursor: pointer;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
JavaScript Interactivity
Add dynamic behavior to your pages.
// Toggle visibility of a section
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('expanded');
});
});
// Simple dark mode toggle (also works with button above)
function setTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem('theme', theme);
}