Master full-stack web development in just 5 hours through this intensive, project-based bootcamp. Learn the complete web development stack from front-end technologies (HTML5, CSS3, JavaScript, React) to back-end systems (Node.js, Express, databases) in 20 focused, 15-minute lessons.
Each lesson is designed for maximum learning efficiency. You'll build real projects, understand core concepts with practical examples, and gain skills that employers demand. Perfect for self-paced online learning with clear learning objectives and hands-on practice.
Format: 20 lessons × 15 minutes each = 5 hours total | Level: Beginner to Intermediate | Prerequisites: Basic computer skills only
HTML (HyperText Markup Language) is the skeleton of every webpage. It provides structure and meaning to content. HTML5 added semantic elements that describe content purpose (header, nav, article, footer).
Analogy: HTML is like the blueprint of a house—it defines rooms (sections), walls (divs), and purpose of each space.
<!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="Page description for SEO">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Semantic HTML5 Structure -->
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to My Website</h1>
<p>This is a <strong>modern</strong> website built with <em>semantic HTML5</em>.</p>
</section>
<article>
<h2>Article Title</h2>
<time datetime="2025-10-18">October 18, 2025</time>
<p>Article content goes here...</p>
</article>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html><form action="/submit" method="POST">
<!-- Text inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<!-- Email with validation -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" minlength="8">
<!-- Select dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Checkbox -->
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to terms</label>
<!-- Submit button -->
<button type="submit">Submit</button>
</form>Try these yourself:
CSS (Cascading Style Sheets) controls the visual presentation of HTML. It defines colors, layout, typography, and animations. The "cascade" means styles flow down and can be overridden.
/* CSS Selectors */
/* Element selector - applies to all <p> tags */
p {
color: #333;
line-height: 1.6;
}
/* Class selector - reusable styles */
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* ID selector - unique element */
#header {
background-color: #000;
padding: 20px;
}
/* Descendant selector */
nav a {
text-decoration: none;
color: white;
}
/* Direct child selector */
ul > li {
list-style: none;
}
/* Pseudo-classes */
a:hover {
color: #ff6600;
}
button:active {
transform: scale(0.98);
}
input:focus {
border-color: #007bff;
outline: none;
}/* Box Model: Content → Padding → Border → Margin */
.box {
/* Content */
width: 300px;
height: 200px;
/* Padding - space inside border */
padding: 20px; /* All sides */
padding: 10px 20px; /* Top/bottom, left/right */
padding: 10px 15px 20px 25px; /* Top, right, bottom, left */
/* Border */
border: 2px solid #333;
border-radius: 8px; /* Rounded corners */
/* Margin - space outside border */
margin: 20px auto; /* Auto centers horizontally */
/* Box-sizing fix */
box-sizing: border-box; /* Include padding in width */
}
/* Colors */
.colorful {
color: #333; /* Hex */
background-color: rgb(0, 123, 255); /* RGB */
border-color: rgba(0, 0, 0, 0.2); /* RGBA (with transparency) */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Typography */
.text {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: 600; /* bold */
font-style: italic;
text-align: center;
line-height: 1.6;
letter-spacing: 1px;
text-transform: uppercase;
}Try these yourself:
/* Flexbox - Perfect for navigation, toolbars, card layouts */
.navbar {
display: flex;
justify-content: space-between; /* Space items apart */
align-items: center; /* Vertical centering */
padding: 1rem 2rem;
background: #333;
}
.nav-links {
display: flex;
gap: 2rem; /* Space between items */
list-style: none;
}
/* Card layout with Flexbox */
.cards {
display: flex;
flex-wrap: wrap; /* Wrap to next line */
gap: 1.5rem;
}
.card {
flex: 1 1 300px; /* Grow, shrink, base width */
padding: 1.5rem;
background: white;
border-radius: 8px;
}/* CSS Grid - Perfect for page layouts, photo galleries */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 2rem;
}
/* Responsive grid */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
/* Complex layouts */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Try these yourself:
/* Mobile-first approach - Start with mobile, add desktop */
/* Base styles for mobile (320px+) */
.container {
padding: 1rem;
}
/* Tablet (768px+) */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}/* Transitions */
.button {
background: blue;
transition: all 0.3s ease;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: fadeIn 0.6s ease-out;
}// Variables - let, const, var
let name = "Alice"; // Can be reassigned
const age = 25; // Cannot be reassigned
var old = "avoid"; // Old syntax, avoid
// Data types
const string = "Hello";
const number = 42;
const boolean = true;
const array = [1, 2, 3];
const object = { name: "Bob", age: 30 };
// Template literals
const greeting = `Hello, ${name}! You are ${age} years old.`;
// Conditionals
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// Loops
for (let i = 0; i < 5; i++) {
console.log(i);
}
array.forEach(num => console.log(num));// Selecting elements
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn');
const input = document.getElementById('username');
// Modifying content
title.textContent = "New Title";
title.innerHTML = "<span>Styled Title</span>";
// Changing styles
title.style.color = "blue";
title.classList.add('active');
title.classList.remove('hidden');
title.classList.toggle('dark-mode');
// Event listeners
button.addEventListener('click', () => {
alert('Button clicked!');
});
input.addEventListener('input', (e) => {
console.log(e.target.value);
});
// Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = "New content";
document.body.appendChild(newDiv);// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Arrow functions (ES6)
const add = (a, b) => a + b;
const square = x => x * x;
// Scope
let global = "accessible everywhere";
function outer() {
let outerVar = "outer scope";
function inner() {
let innerVar = "inner scope";
console.log(global, outerVar, innerVar); // All accessible
}
}// Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);
// Destructuring
const [first, second, ...rest] = numbers;
const { name, age } = { name: "Alice", age: 25 };
// Spread operator
const combined = [...numbers, 6, 7, 8];
const person = { ...user, city: "NYC" };// Promises
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Async/Await (cleaner)
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
// Using Fetch API
async function getUsers() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
return users;
}// Component with JSX
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Using the component
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}
// Lists
function UserList({ users }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
// useEffect for side effects
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(setData);
}, []); // Empty array = run once on mount
return <div>{JSON.stringify(data)}</div>;
}function LoginForm() {
const [formData, setFormData] = useState({
email: '',
password: ''
});
const handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted:', formData);
};
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
return (
<form onSubmit={handleSubmit}>
<input
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<input
name="password"
type="password"
value={formData.password}
onChange={handleChange}
placeholder="Password"
/>
<button type="submit">Login</button>
</form>
);
}import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}import { createContext, useContext, useReducer } from 'react';
// Create context
const AppContext = createContext();
// Reducer
function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
// Provider
function AppProvider({ children }) {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
}// Import modules
const fs = require('fs');
const http = require('http');
// Read file
fs.readFile('file.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});
// Create server
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Hello World!</h1>');
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});const express = require('express');
const app = express();
// Middleware
app.use(express.json());
// Routes
app.get('/', (req, res) => {
res.send('Welcome!');
});
app.get('/api/users', (req, res) => {
res.json([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]);
});
app.post('/api/users', (req, res) => {
const newUser = req.body;
res.status(201).json(newUser);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});const mongoose = require('mongoose');
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/myapp');
// Define schema
const userSchema = new mongoose.Schema({
name: String,
email: { type: String, required: true, unique: true },
age: Number
});
// Create model
const User = mongoose.model('User', userSchema);
// CRUD operations
// Create
const user = new User({ name: 'Alice', email: 'alice@example.com', age: 25 });
await user.save();
// Read
const users = await User.find();
const alice = await User.findOne({ email: 'alice@example.com' });
// Update
await User.updateOne({ email: 'alice@example.com' }, { age: 26 });
// Delete
await User.deleteOne({ email: 'alice@example.com' });const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
// Hash password
const hashedPassword = await bcrypt.hash('password123', 10);
// Verify password
const isValid = await bcrypt.compare('password123', hashedPassword);
// Generate JWT token
const token = jwt.sign(
{ userId: user._id, email: user.email },
'SECRET_KEY',
{ expiresIn: '24h' }
);
// Verify token middleware
function authMiddleware(req, res, next) {
const token = req.headers.authorization?.split(' ')[1];
try {
const decoded = jwt.verify(token, 'SECRET_KEY');
req.user = decoded;
next();
} catch (error) {
res.status(401).json({ error: 'Unauthorized' });
}
}// .env file (don't commit!)
DATABASE_URL=mongodb://...
JWT_SECRET=your-secret-key
PORT=3000
// Load environment variables
require('dotenv').config();
const dbUrl = process.env.DATABASE_URL;
// Git commands
git init
git add .
git commit -m "Initial commit"
git push origin main
// Deploy to Vercel (React)
vercel --prod
// Deploy to Heroku (Node.js)
heroku create myapp
git push heroku mainYou've completed the Web Development Bootcamp! 🚀
You've mastered: HTML5 → CSS3 → JavaScript ES6+ → React → Node.js → Express → MongoDB → Deployment
Next Steps: Build your portfolio, contribute to open source, learn TypeScript, explore Next.js, or dive into advanced topics like GraphQL, Docker, and Kubernetes!
Apply everything you've learned by building these production-ready applications. Each project includes specific features and technologies to master.
Learn modern JavaScript features including arrow functions, destructuring, async/await, and more. Write cleaner, more efficient code.
// Arrow Functions - concise function syntax
const greet = (name) => `Hello, ${name}!`;
const square = x => x ** 2;
console.log(greet('World')); // "Hello, World!"
console.log(square(5)); // 25
// Destructuring - extract values from objects/arrays
const user = { name: 'Alice', age: 25, city: 'NYC', email: 'alice@example.com' };
const { name, age, ...rest } = user;
console.log(name); // "Alice"
console.log(rest); // { city: 'NYC', email: 'alice@example.com' }
const [first, second, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [3, 4, 5]
// Spread Operator - expand arrays/objects
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
const person = { name: 'Bob', age: 30 };
const employee = { ...person, role: 'Developer', salary: 80000 };
// Template Literals - string interpolation
const message = `User ${name} is ${age} years old`;
// Async/Await - handle asynchronous operations
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Data:', data);
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}
// Promises - alternative async handling
fetch('https://api.example.com/users')
.then(response => response.json())
.then(users => {
console.log('Users:', users);
return users.map(user => user.name);
})
.then(names => console.log('Names:', names))
.catch(error => console.error('Error:', error))
.finally(() => console.log('Request completed'));
// Array Methods - functional programming
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
// Object Methods
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ['a', 'b', 'c']
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]Build dynamic, interactive user interfaces with React. Learn hooks, state management, and component-based architecture.
import React, { useState, useEffect } from 'react';
// Functional Component with Hooks
function TodoApp() {
// State management with useState
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const [filter, setFilter] = useState('all');
// Side effects with useEffect
useEffect(() => {
// Load todos from localStorage on mount
const saved = localStorage.getItem('todos');
if (saved) {
setTodos(JSON.parse(saved));
}
}, []);
// Save to localStorage whenever todos change
useEffect(() => {
if (todos.length > 0) {
localStorage.setItem('todos', JSON.stringify(todos));
}
}, [todos]);
const addTodo = () => {
if (input.trim()) {
const newTodo = {
id: Date.now(),
text: input,
done: false,
createdAt: new Date().toISOString()
};
setTodos([...todos, newTodo]);
setInput('');
}
};
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, done: !todo.done } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
// Filter todos based on status
const filteredTodos = todos.filter(todo => {
if (filter === 'active') return !todo.done;
if (filter === 'completed') return todo.done;
return true;
});
return (
<div className="todo-app">
<h1>My Todo List</h1>
<div className="input-group">
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTodo()}
placeholder="What needs to be done?"
aria-label="New todo"
/>
<button onClick={addTodo}>Add</button>
</div>
<div className="filters">
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('active')}>Active</button>
<button onClick={() => setFilter('completed')}>Completed</button>
</div>
<ul className="todo-list">
{filteredTodos.map(todo => (
<li key={todo.id} className={todo.done ? 'done' : ''}>
<input
type="checkbox"
checked={todo.done}
onChange={() => toggleTodo(todo.id)}
/>
<span onClick={() => toggleTodo(todo.id)}>
{todo.text}
</span>
<button onClick={() => deleteTodo(todo.id)}>✕</button>
</li>
))}
</ul>
<div className="stats">
{todos.filter(t => !t.done).length} items left
</div>
</div>
);
}
export default TodoApp;Build scalable server-side applications with Node.js and Express. Create REST APIs, connect to databases, and handle authentication.
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bcrypt = require('bcrypt');
const app = express();
// Middleware
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// MongoDB Connection
mongoose.connect('mongodb://localhost:27017/myapp', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log('✅ Connected to MongoDB'))
.catch(err => console.error('❌ MongoDB connection error:', err));
// User Schema with validation
const userSchema = new mongoose.Schema({
name: {
type: String,
required: [true, 'Name is required'],
trim: true
},
email: {
type: String,
required: [true, 'Email is required'],
unique: true,
lowercase: true,
match: [/^\S+@\S+\.\S+$/, 'Invalid email format']
},
password: {
type: String,
required: [true, 'Password is required'],
minlength: [6, 'Password must be at least 6 characters']
},
createdAt: {
type: Date,
default: Date.now
}
});
const User = mongoose.model('User', userSchema);
// REST API Routes
// GET all users
app.get('/api/users', async (req, res) => {
try {
const users = await User.find().select('-password');
res.json({
success: true,
count: users.length,
data: users
});
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
});
// POST create new user
app.post('/api/users', async (req, res) => {
try {
// Hash password before saving
const hashedPassword = await bcrypt.hash(req.body.password, 10);
const user = new User({
...req.body,
password: hashedPassword
});
await user.save();
res.status(201).json({
success: true,
data: {
id: user._id,
name: user.name,
email: user.email
}
});
} catch (error) {
res.status(400).json({
success: false,
error: error.message
});
}
});
// PUT update user
app.put('/api/users/:id', async (req, res) => {
try {
const user = await User.findByIdAndUpdate(
req.params.id,
req.body,
{ new: true, runValidators: true }
).select('-password');
if (!user) {
return res.status(404).json({
success: false,
error: 'User not found'
});
}
res.json({ success: true, data: user });
} catch (error) {
res.status(400).json({
success: false,
error: error.message
});
}
});
// DELETE user
app.delete('/api/users/:id', async (req, res) => {
try {
const user = await User.findByIdAndDelete(req.params.id);
if (!user) {
return res.status(404).json({
success: false,
error: 'User not found'
});
}
res.json({
success: true,
message: 'User deleted successfully'
});
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
});
// Error handling middleware
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).json({
success: false,
error: 'Internal Server Error'
});
});
// Start server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`🚀 Server running on port ${PORT}`);
});Apply everything you've learned by building these production-ready applications. Each project includes specific features and technologies to master.
Features: Responsive design, smooth scrolling, animated sections, contact form with validation, project showcase grid, dark/light theme toggle
Technologies: HTML5, CSS3 Grid/Flexbox, Vanilla JavaScript, EmailJS API
Features: Product catalog with filters, shopping cart, checkout process, payment integration (Stripe), user authentication, order history, admin dashboard
Technologies: React, Node.js, Express, MongoDB, JWT, Stripe API, Redux
Features: User profiles, post creation with image upload, like/comment system, follow/unfollow, real-time notifications, news feed algorithm
Technologies: React, Node.js, Express, MongoDB, Cloudinary, Socket.io, JWT
Features: Markdown editor, rich text formatting, category/tag system, search functionality, user comments, admin panel, SEO optimization
Technologies: React, Node.js, Express, MongoDB, Markdown-it, React-Quill
Features: Drag-and-drop cards, multiple boards, task categories, due dates, priority levels, team collaboration, progress tracking
Technologies: React, React Beautiful DnD, Node.js, Express, MongoDB
Features: Current weather, 7-day forecast, geolocation detection, city search with autocomplete, weather maps, favorite locations, unit conversion
Technologies: React, OpenWeatherMap API, Geolocation API, Chart.js
Features: One-on-one messaging, group chats, typing indicators, read receipts, file sharing, emoji support, online status, message history
Technologies: React, Node.js, Express, Socket.io, MongoDB, Cloudinary
Test your web development knowledge with 20 random questions. Navigate one question at a time!