Build Roadmaps
Each roadmap is a progressive build series — starting simple and layering on complexity. Every step is a working web app with a blog post that explains the concept and what the AI got right or wrong. Built for beginners.
1990s — Dawn of the Web
Tribute Page
HTML & CSS
Semantic HTML structure, image embedding, timeline layout, responsive design. The absolute starting point — every web dev should build a tribute page first.
Survey Form
Forms & Inputs
Form fields, validation, labels, fieldset grouping, responsive form layout. HTML forms are the foundation of every web app.
Product Landing
Marketing Page
Hero section, feature cards, testimonials, pricing table, responsive navigation. A real-world page layout from scratch.
Doc Page
Technical Layout
Sidebar navigation, code blocks, section anchors, media queries, table of contents. The pattern every documentation site uses.
Portfolio
Personal Site
Projects grid, about section, contact form, skills, mobile nav, dark mode toggle. Your own corner of the web.
Yahoo! Clone
Web Portal
Category directory, link lists, search box, news feed, email login mock. Yahoo started in 1994 as "Jerry's Guide to the World Wide Web" — the first web portal.
Craigslist Clone
Classifieds
Category listings, post detail, search/filter, simple text-first layout. Craigslist launched in 1995 and proved that a website doesn't need to be pretty to be useful.
Amazon Clone
E-Commerce
Product listing, search, category browsing, shopping cart, checkout flow. Amazon launched in 1995 as an online bookstore and defined e-commerce as we know it.
Hotmail Clone
Webmail
Inbox, compose, send, folders, search, contact list. Hotmail launched in 1996 as the first free web-based email — making email accessible to anyone with a browser.
Netflix Clone
Media Catalog
Browse grid, category carousels, detail page, search, user profiles. Netflix launched in 1997 as a DVD-by-mail service and pioneered the streaming catalog UI.
Google Clone
Search Engine
Search box, results page, ranking by relevance, pagination, search suggestions. Google launched in 1998 and organized the world's information.
Blogger Clone
Blogging
Post editor, publish flow, archive, RSS feed, comments. Blogger launched in 1999 and put publishing power in everyone's hands.
2000s — JavaScript & Interactivity
Palindrome Checker
JavaScript
Input handling, string manipulation, case-insensitive matching, character filtering, history tracking.
Roman Numeral Converter
JavaScript
Algorithm design, mapping tables, number parsing, validation, copy-to-clipboard.
Calculator
UI + Logic
Display, operations, chained calculations, memory functions, keyboard input. Every beginner's milestone.
Countdown Timer
Time & Events
setInterval, start/stop controls, presets, progress visualization, sound alerts.
Color Picker
DOM Manipulation
RGB sliders, hex output, palette saving, contrast checking, CSS variable export.
Wikipedia Clone
Reference
Article render, edit view, search, categories, table of contents, history. Wikipedia launched in 2001 and built the largest knowledge repository in human history.
Flickr Clone
Photo Sharing
Photo upload, gallery grid, tags, comments, lightbox view. Flickr launched in 2004 and pioneered social photo sharing with tags and communities.
2000s — Web APIs
Pokémon Search
API Fetch
REST API calls, async/await, card rendering, stat display, type-based coloring.
Weather App
API + Geolocation
City search, geolocation, 7-day forecast, unit toggle, weather icons. The quintessential API project.
Random Quote
Async UI
Fetch on load, display animation, author attribution, share button, favorites list.
Image Gallery
Async Loading
Thumbnail grid, lightbox modal, category filter, masonry layout, lazy loading.
Markdown Previewer
Real-time Rendering
Editor, live preview, split view, HTML export, theme switching.
Tumblr Clone
Microblogging
Dashboard, post types (text/photo/quote), reblog, follow feed, tags. Tumblr launched in 2007 and blended blogging with social curation.
2000s — Full Stack
Timestamp Microservice
Backend API
Route handling, date parsing, JSON response, validation, timezone support.
URL Shortener
CRUD + Redirect
Form, slug generation, redirect, click counter, QR code. Your own TinyURL.
Exercise Tracker
Data + Logging
Add entries, log view, filters, summary stats, streak tracking.
Notes App
Full CRUD
Create, edit, delete, search, categories. The classic full-stack benchmark.
Reddit Clone
Social Platform
Subreddits, posts, voting, threaded comments, user profiles. The social news platform that defined online communities in the late 2000s.
YouTube Clone
Video Platform
Video grid, search, channel page, player embed, comments, recommended sidebar. How user-generated content platforms work.
X / Twitter Clone
Microblogging
Compose, feed, follow/unfollow, retweet, like, trending topics. The microblogging pattern that changed how the world communicates.
Friendster Clone
Social Network
Profile page, friends list, friend requests, status updates, search. Friendster launched in 2002 and pioneered the social network pattern.
MySpace Clone
Social + Music
Customizable profile, Top 8 friends, music player, comments, blog. MySpace launched in 2003 and was the most-visited social site from 2005-2008.
Kickstarter Clone
Crowdfunding
Project page, pledge tiers, funding bar, rewards, backer count. Kickstarter launched in 2009 and made crowdfunding a household concept.
2010s — Mobile Era
Hamburger Menu
Responsive Nav
CSS-only toggle, slide-out drawer, overlay backdrop, active state. The mobile nav pattern that replaced desktop navigation on smartphones.
Touch Carousel
Touch Events
Swipe gestures, dot indicators, autoplay, infinite scroll, responsive breakpoints. Touch interaction defined the mobile web.
Drum Machine
Audio + Touch
Sound pads, volume controls, recorder, key bindings, loop patterns. Touch-friendly audio interfaces made music creation mobile.
PWA Checklist
Offline & Install
Service worker registration, offline detection, manifest.json, install prompt, cache-first strategy. How web apps became "installable."
Dashboard
Responsive Data Viz
Widget grid, fetch data, filters, charts, export. The admin panel pattern that had to work on every screen size.
Instagram Clone
Photo Sharing
Photo feed, like/heart, comments, filters, profile grid. Instagram launched in 2010 and defined mobile-first visual social media.
Tinder Clone
Swipe UI
Swipe cards, match animation, profile detail, chat mock. Tinder launched in 2012 and invented the swipe interaction pattern used everywhere today.
TikTok Clone
Short Video
Vertical scroll feed, video card, like/share, profile. TikTok launched in 2016 and reinvented mobile content consumption with full-screen vertical video.
2010s — Social Era
Chat Room
Real-time Messaging
WebSockets, broadcast, rooms, typing indicator, message history. The backbone of every social platform.
Social Feed
Posts & Engagement
Post layout, like/comment UI, share buttons, timestamps, infinite scroll. The pattern that defined social media.
Auth Mock
Sign-up & Identity
Sign-up form, OAuth button styling, session indicator, validation, remember-me. Every social app starts with sign-up.
Pomodoro Clock
State Machine
Work/break intervals, session counter, sound alerts, stats dashboard, customization. Productivity tools exploded in the social era.
Comments Section
Threaded Replies
Nested comments, reply UI, timestamps, vote buttons, pagination. The most reused UI pattern in social platforms.
Twitch Clone
Live Streaming
Stream card grid, category browse, chat overlay, follow system. Twitch launched in 2011 and built the live-streaming economy.
Slack Clone
Team Chat
Channels, threads, direct messages, message reactions, user presence. Slack launched in 2013 and transformed workplace communication.
Discord Clone
Community Chat
Server list, channel tree, chat area, voice channel mock, member list. Discord launched in 2014 and became the home of online communities.
2010s — Browser Extensions
Tab Manager
Extension API
Manifest.json, popup UI, tab querying, storage API, badge text. The foundation of every Chrome/Firefox extension ever built.
Page Highlighter
Content Scripts
DOM injection, CSS overrides, selection highlighting, persist state, toggle on/off. How extensions modify any page you visit.
Link Saver
Context Menus
Right-click menu, sync storage, keyboard shortcuts, export/import, folder organization. The pattern every bookmarking tool uses.
Dark Mode Toggle
CSS Injection
CSS injection, site-specific rules, toggle persistence, per-domain settings, performance. The most-installed extension category on the web.
2020s — AI Era
Linear Regression
Supervised Learning
Gradient descent from scratch, MSE loss, prediction on real data, line of best fit visualization. The foundational algorithm every ML curriculum starts with.
ML vs RL Playground
Learning Paradigms
Same cart-pole environment solved with supervised learning (labeled data) vs Q-learning (reward signals). See the difference in action.
Tokenization Explorer
NLP Fundamentals
BPE, WordPiece, and sentencepiece tokenizers visualized side-by-side. See how "hello world" becomes [15339, 1917] and why tokenization matters for AI.
Neural Network Viz
Deep Learning
Forward pass step-through, weights heatmap, activation function visualization, layer-by-layer propagation. Watch a neural network think.
Transformer Explorer
Modern Architecture
Self-attention heatmap, QKV matrix multiplication, positional encoding visualization, multi-head splitting. The architecture behind every modern LLM.
AI Summarizer
LLM API
Paste text, LLM summarization, bullet points, key terms, length control. Your first real AI-powered product feature.
AI Chatbot
LLM + Memory
Chat UI, streaming responses, conversation memory, personality config, export. The product pattern that changed software forever.
AI Code Reviewer
LLM + Analysis
Paste code, AI review, suggestions, complexity score, markdown export. Practical AI that gives real value on day one.