1
HTML, CSS, and vanilla JavaScript. Learn to build things that look and behave exactly how you intend. No frameworks yet — just fundamentals.
HTML5
CSS3
Flexbox/Grid
JavaScript ES6+
DOM Manipulation
Git & GitHub
▸ Build These Projects
Personal Portfolio Site
Static Site · HTML/CSS
▶
Your first real project — a personal site with an about section, project gallery, and contact form. Focus on clean semantic HTML and responsive layout with CSS Grid.
Responsive layout
CSS variables
Dark/light mode
Smooth scroll
GitHub Pages deploy
JavaScript Calculator
Interactive App · Vanilla JS
▶
A fully functional calculator. Teaches event listeners, DOM manipulation, state management, and keyboard support. Sounds basic — the edge cases will surprise you.
Keyboard events
State tracking
Error handling
CSS animations
Weather Dashboard
API Integration · Fetch/Async
▶
Fetch live weather data from a public API (OpenWeatherMap). Your first taste of async/await, JSON parsing, and rendering dynamic content. Add a 5-day forecast view.
Fetch API
async/await
JSON parsing
Local storage
Search history
2
Pick React (most in-demand) or Vue. Learn component thinking, state management, routing, and how modern frontend apps are structured.
React
useState / useEffect
React Router
Context API
Tailwind CSS
Vite
▸ Build These Projects
Task Manager App
SPA · React + Local Storage
▶
A Trello-style kanban board with drag-and-drop columns. Teaches component architecture, lifting state, and how to think in React. Persist data with localStorage.
Drag & drop
CRUD operations
Filter/sort
LocalStorage persist
Responsive
Movie/Book Discovery App
Multi-page SPA · React Router
▶
Search movies or books via a public API (TMDB or Google Books). Multiple pages with React Router, detail views, and a personal watchlist. Introduces client-side routing patterns.
Multi-route SPA
API pagination
Favorites list
URL search params
Loading skeletons
Budget Tracker
Data Viz · React + Chart.js
▶
Track income and expenses with category tags, monthly summaries, and charts. Great for practicing computed state, data transformation, and visualizing data with Chart.js or Recharts.
Chart.js / Recharts
Category filtering
Date range views
CSV export
3
Build the server side. Learn Node.js and Express (or Python/FastAPI), design REST APIs, and connect to a real database. This is where full stack begins.
Node.js
Express
REST APIs
PostgreSQL
Prisma / Sequelize
JWT Auth
Postman
▸ Build These Projects
REST API with Auth
Backend Only · Node/Express/PostgreSQL
▶
Build a full CRUD REST API — something like a recipe or blog system — with user registration, JWT-based login, and protected routes. Document it with Swagger or Postman collections.
JWT auth
Password hashing
CRUD endpoints
Input validation
Error middleware
Full Stack Blog Platform
Full Stack · React + Express + PostgreSQL
▶
Connect your React frontend to your own Express backend. Users can sign up, write posts, add comments. Your first true full stack app — manage CORS, environment variables, and deployment.
User auth flow
Rich text editor
Image uploads
Comments system
Pagination
Real-Time Chat App
WebSockets · Socket.io
▶
Move beyond request/response. Build a multi-room chat app with Socket.io. Teaches WebSocket fundamentals, broadcasting events, and managing real-time state on both client and server.
Socket.io
Chat rooms
Online presence
Message history
Typing indicators
4
Shipping code is a skill. Learn to containerize apps, set up CI/CD pipelines, manage cloud infrastructure, and monitor what you deploy.
Docker
GitHub Actions
AWS / GCP basics
Nginx
Linux CLI
Env management
▸ Build These Projects
Dockerize Your Stack
DevOps · Docker Compose
▶
Take your Phase 3 blog app and containerize everything — frontend, backend, and database — with Docker Compose. One command spins up the entire stack, any machine, no "works on my machine."
Dockerfile
docker-compose.yml
Volume mounts
Env variables
Networking
CI/CD Pipeline
Automation · GitHub Actions
▶
Build a full pipeline: on push to main, run tests, build Docker image, push to a registry, and auto-deploy to a VPS or cloud service. Teaches the automation loop every professional uses.
GitHub Actions YAML
Secrets management
Automated tests
Zero-downtime deploy
5
Build something real. Apply everything you've learned in one ambitious project. Then pick a specialization — Next.js, mobile, ML APIs, or go deep on one part of the stack.
Next.js / Remix
TypeScript
Testing (Jest/Vitest)
Redis / Caching
System Design
Performance
▸ Build These Projects
SaaS Starter App
Capstone · Next.js + Stripe + Auth
▶
Build a multi-tenant SaaS app — something like a link-in-bio tool, invoice generator, or habit tracker — with paid plans via Stripe, email auth, user dashboards, and a landing page. This is portfolio gold.
Next.js App Router
Stripe subscriptions
Email auth (Clerk/Auth.js)
Org / team accounts
Admin dashboard
Full test suite
AI-Powered Tool
Modern Stack · LLM API Integration
▶
Integrate an LLM API (OpenAI, Anthropic, etc.) into a useful tool — resume reviewer, code explainer, writing assistant. Teaches streaming responses, prompt engineering, and cost management.
Streaming UI
Prompt templates
Token limits
Rate limiting
Usage tracking
Open Source Contribution
Community · Real Codebase
▶
Find a project you use and fix a bug or add a small feature. Reading unfamiliar codebases, writing good PRs, and working with maintainers is a skill in itself — and it shows employers you can.
Read large codebases
Write good PRs
Follow conventions
Review feedback