HTML5 CSS3 JavaScript

Learn to build modern websites

A hands-on guide to web development — from HTML structure and CSS styling to interactive JavaScript. Learn by reading real code examples.

Start Learning → Browse Topics
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <link rel="stylesheet"
        href="style.css">
</head>
<body>
  <header>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <h1>Hello World!</h1>
</body>
</html>
📚 Tutorials

What you'll learn

Everything you need to build a complete website from scratch — structure, design, and interactivity.

<>
→

HTML Basics

Learn how to structure a web page — headings, paragraphs, links, images, lists, forms, and semantic elements.

Elements Attributes Forms Semantic HTML
{ }
→

CSS Styling

Master modern layouts with flexbox and grid, add animations, and build responsive designs for all devices.

Selectors Flexbox Grid Responsive
JS
→

JavaScript

Add interactivity — handle events, manipulate the DOM, work with arrays, and build dynamic UI components.

DOM Events Functions Arrays
💡 Quick Preview

Code examples

Take a look at real code snippets from a complete website project.

index.html — Navigation & Hero 
<header>
  <div class="nav-container">
    <a href="#" class="logo">BRAND NAME</a>
    <nav>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <a href="#" class="btn-cta">Get a Quote</a>
  </div>
</header>

<section class="hero">
  <div class="hero-content">
    <h1>Welcome to Our Site</h1>
    <p>We build handcrafted products
       with care and precision.</p>
    <div class="hero-buttons">
      <a href="#" class="btn-cta">Learn More</a>
      <a href="#gallery" class="btn-ghost">
        View Work
      </a>
    </div>
  </div>
</section>
style.css — Layout & Colors 
.hero {
    position: relative;
    height: 720px;
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.7)
    );
}

.btn-cta {
    background-color: #d4b48c;
    padding: 18px 44px;
    border-radius: 50px;
    transition: all 0.4s ease;
}

.btn-cta:hover {
    transform: translateY(-3px);
}
app.js — Tab Switching 
document.addEventListener('DOMContentLoaded', () => {

    const buttons = document.querySelectorAll('.tab-btn');
    const image = document.getElementById('gallery-image');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            buttons.forEach(
                b => b.classList.remove('active')
            );
            button.classList.add('active');

            const name = button.dataset.image;
            image.src = `img/gallery/${name}.jpg`;
        });
    });

});