Build modern web applications using HTML5, CSS3, and JavaScript. Learn responsive design, performance optimization, and best practices for creating professional websites.
Modern Web Development Fundamentals
Web development has evolved rapidly with new technologies and frameworks. This guide covers essential skills for building modern, responsive web applications.
1. HTML5 and Semantic Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Web App</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome</h1>
<p>Modern web application</p>
</section>
</main>
</body>
</html>2. CSS3 and Responsive Design
/* Modern CSS with Flexbox and Grid */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
/* Responsive design */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
padding: 1rem;
}
}3. JavaScript ES6+ Features
// Modern JavaScript
const API_URL = "https://api.example.com";
// Async/await for API calls
async function fetchData() {
try {
const response = await fetch();
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching data:", error);
}
}
// Arrow functions and destructuring
const users = await fetchData();
const activeUsers = users.filter(user => user.active);
// Template literals
const createUserCard = (user) => ;4. Performance Optimization
/* CSS optimization */
.lazy-image {
opacity: 0;
transition: opacity 0.3s;
}
.lazy-image.loaded {
opacity: 1;
}
// JavaScript lazy loading
const images = document.querySelectorAll(".lazy-image");
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add("loaded");
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));Conclusion
Modern web development requires understanding of semantic HTML, responsive CSS, and modern JavaScript. These fundamentals enable creation of fast, accessible, and user-friendly web applications.