Web Development Fundamentals: HTML, CSS, JavaScript, DOM Manipulation & Responsive Design

This article is a comprehensive introduction to web development fundamentals – including HTML5, CSS3, JavaScript ES6+, DOM manipulation and responsive design with practical examples.

In a Nutshell

Web development is based on three core technologies: HTML for structure, CSS for styling, and JavaScript for interactivity. Responsive design ensures optimal display on all devices.

Compact Technical Description

Web development is the creation of web applications through the combination of markup, style, and programming languages.

Core Technologies:

HTML5 (HyperText Markup Language)

Structure: Semantic markup of content
Elements: Header, nav, main, section, article, footer
Forms: Input types, validation, accessibility
Multimedia: Audio, video, canvas, SVG

CSS3 (Cascading Style Sheets)

Styling: Colors, fonts, layout, animations
Layout: Flexbox, grid, positioning, responsive design
Pseudo-classes: :hover, :active, :focus, :nth-child
Media queries: Responsive design, breakpoints

JavaScript ES6+

Interactivity: DOM manipulation, event handling
Features: Arrow functions, template literals, destructuring
DOM API: Select elements, manipulate, events
Asynchronous: Promises, async/await, fetch API

Exam-Relevant Key Points

HTML5: Semantic markup language for web content
CSS3: Stylesheet language for design and layout
JavaScript: Programming language for web interactivity
DOM: Document Object Model for dynamic manipulation
Responsive Design: Adaptation to different screen sizes
Media Queries: CSS conditions for device properties
Flexbox/Grid: Modern layout techniques
IHK-relevant: Foundation for all web development professions

Core Components

HTML5: Semantic structure and content
CSS3: Visual design and layout
JavaScript: Dynamic functionality
DOM: Programmable interface
Responsive Design: Cross-device compatibility
Accessibility: Accessible web development
Performance: Loading times and optimization
Best Practices: Modern development standards

Practical Examples

1. HTML5 Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Modern web application with HTML5, CSS3 and JavaScript">
    <title>Web Development Demo</title>
    
    <!-- Include CSS -->
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Web Development Demo">
    <meta property="og:description" content="Modern web application">
    <meta property="og:type" content="website">
</head>
<body>
    <!-- Skip Navigation for Accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <!-- Header with Navigation -->
    <header class="header">
        <nav class="nav" aria-label="Main navigation">
            <div class="nav-container">
                <div class="nav-brand">
                    <a href="#" class="brand-link">
                        <img src="logo.svg" alt="Logo" class="brand-logo">
                        <span class="brand-text">WebDev</span>
                    </a>
                </div>
                
                <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
                    <span class="hamburger"></span>
                    <span class="visually-hidden">Menu</span>
                </button>
                
                <ul id="nav-menu" class="nav-menu">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#features" class="nav-link">Features</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main id="main-content" class="main">
        <!-- Hero Section -->
        <section class="hero" id="home">
            <div class="container">
                <h1 class="hero-title">Modern Web Development</h1>
                <p class="hero-subtitle">HTML5, CSS3 and JavaScript in Action</p>
                
                <div class="hero-actions">
                    <button class="btn btn-primary" data-action="start">Start</button>
                    <a href="#features" class="btn btn-secondary">Learn More</a>
                </div>
                
                <!-- Interactive Demo -->
                <div class="demo-section">
                    <div class="demo-container">
                        <canvas id="demo-canvas" width="400" height="200"></canvas>
                        <div class="demo-controls">
                            <button class="demo-btn" data-action="clear">Clear</button>
                            <button class="demo-btn" data-action="animate">Animate</button>
                            <input type="color" id="color-picker" value="#3b82f6">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Features Section -->
        <section class="features" id="features">
            <div class="container">
                <h2 class="section-title">Features</h2>
                
                <div class="features-grid">
                    <article class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
                            </svg>
                        </div>
                        <h3 class="feature-title">Security</h3>
                        <p class="feature-description">Modern security standards and best practices</p>
                    </article>
                    
                    <article class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                                <line x1="8" y1="21" x2="16" y2="21"/>
                                <line x1="12" y1="17" x2="12" y2="21"/>
                            </svg>
                        </div>
                        <h3 class="feature-title">Responsive</h3>
                        <p class="feature-description">Optimal display on all devices</p>
                    </article>
                    
                    <article class="feature-card">
                        <div class="feature-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                            </svg>
                        </div>
                        <h3 class="feature-title">Performance</h3>
                        <p class="feature-description">Fast loading times and smooth interaction</p>
                    </article>
                </div>
            </div>
        </section>
        
        <!-- Contact Form -->
        <section class="contact" id="contact">
            <div class="container">
                <h2 class="section-title">Contact</h2>
                
                <form class="contact-form" novalidate>
                    <div class="form-group">
                        <label for="name" class="form-label">Name *</label>
                        <input type="text" id="name" name="name" class="form-input" required>
                        <span class="form-error" id="name-error">Please enter your name</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="email" class="form-label">Email *</label>
                        <input type="email" id="email" name="email" class="form-input" required>
                        <span class="form-error" id="email-error">Please enter a valid email</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea id="message" name="message" class="form-textarea" rows="4"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Send</button>
                        <button type="reset" class="btn btn-secondary">Reset</button>
                    </div>
                </form>
            </div>
        </section>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Web Development Demo. All rights reserved.</p>
            <div class="footer-links">
                <a href="#imprint">Imprint</a>
                <a href="#privacy">Privacy</a>
            </div>
        </div>
    </footer>
    
    <!-- Include JavaScript -->
    <script src="script.js"></script>
</body>
</html>

2. CSS3 with Responsive Design

/* CSS Reset and Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS Custom Properties (Variables) */
:root {
    /* Colors */
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #60a5fa;
    --color-secondary: #64748b;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    
    /* Neutral */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
}

/* Base Typography */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-white);
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Header and Navigation */
.header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--color-gray-900);
    font-weight: 600;
}

.brand-logo {
    width: 32px;
    height: 32px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav-link {
    text-decoration: none;
    color: var(--color-gray-600);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
}

/* Hero Section */
.hero {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xl);
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-2xl);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-gray-100);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* Demo Section */
.demo-section {
    margin-top: var(--spacing-2xl);
}

.demo-container {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xl);
}

#demo-canvas {
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 400px;
    height: 200px;
}

.demo-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    justify-content: center;
}

.demo-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-btn:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Features Section */
.features {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-gray-50);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--color-gray-900);
}

.features-grid {
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.grid-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

JavaScript - Programming Logic

Basic JavaScript Concepts

// Variables and data types
let message = "Hello, World!";
const count = 42;
var isActive = true;

// Functions
function greet(name) {
    return `Hello, ${name}!`;
}

// Arrow functions
const add = (a, b) => a + b;

// Objects
const person = {
    name: "John Doe",
    age: 30,
    greet: function() {
        return `Hello, I'm ${this.name}`;
    }
};

// Arrays
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

DOM Manipulation

// Select elements
const header = document.getElementById('main-header');
const buttons = document.querySelectorAll('.btn');

// Modify content
header.textContent = 'New Title';
header.innerHTML = '<strong>Bold Title</strong>';

// Modify styles
header.style.color = '#333';
header.classList.add('active');
header.classList.remove('inactive');

// Event handling
document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('#click-me');
    
    button.addEventListener('click', function() {
        alert('Button clicked!');
    });
});

// Create elements
const newDiv = document.createElement('div');
newDiv.textContent = 'New content';
newDiv.className = 'new-element';
document.body.appendChild(newDiv);

Responsive Design

Media Queries

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 30px;
    }
}

Responsive Images

<!-- Responsive image with srcset -->
<img src="image-small.jpg" 
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     sizes="(max-width: 480px) 480px,
            (max-width: 768px) 768px,
            1200px"
     alt="Responsive image">

<!-- Picture element for art direction -->
<picture>
    <source media="(max-width: 768px)" srcset="mobile-image.jpg">
    <source media="(min-width: 769px)" srcset="desktop-image.jpg">
    <img src="fallback-image.jpg" alt="Adaptive image">
</picture>

Modern Web Development Practices

CSS Variables

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-family: 'Arial', sans-serif;
    --border-radius: 8px;
}

.button {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
}

JavaScript ES6+ Features

// Destructuring
const { name, age } = person;
const [first, second] = numbers;

// Spread operator
const newArray = [...numbers, 6, 7, 8];
const newPerson = { ...person, city: "New York" };

// Template literals
const template = `Hello ${name}, you are ${age} years old.`;

// Promises
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

Best Practices

Semantic HTML: Use appropriate HTML5 elements
Mobile-first design: Start with mobile styles
Performance: Optimize images and minimize CSS/JS
Accessibility: Use alt text, ARIA labels, and semantic markup
Progressive enhancement: Ensure basic functionality without JavaScript

Next Steps

After mastering these fundamentals:

Learn modern frameworks (React, Vue, Angular)
Explore build tools (Webpack, Vite)
Study backend development
Learn about web security
Master CSS animations and transitions