Frontend Web Development
A starting point, not a fixed track. This plan lays out where we begin and how the path grows — from how the web works and HTML & CSS foundations toward real, professional full-stack apps — understanding the whole cycle, with a project to show at every stage.
How the Web Works
Before building anything, he gets the full picture — how the internet actually moves data, what a browser does behind the scenes, and how a website travels from a server all the way to his screen. So no part of the cycle stays magic.
What He'll Learn
- How the internet works (clients & servers)
- What a browser does behind the scenes
- DNS — how domain names find servers
- HTTP requests & responses (the web's language)
- What happens when you type a URL & hit Enter
Skills Gained
- Seeing the web as a system, not magic
- A clear request/response mental model
- Reading network activity in dev tools
- Talking about the web with the right words
A visual, annotated breakdown of the full journey of a request — from typing a URL to the page appearing on screen. Built as a simple page he can host and explain in his own words.
CSS Layout & First Website
Master the core layout skills that make building websites feel natural instead of frustrating. Along the way, he'll ship a responsive, polished website live on the internet — built entirely by him.
What He'll Learn
- HTML structure & semantic markup
- CSS Box Model & spacing
- Flexbox layout system
- Responsive design (mobile-friendly)
- Web deployment & hosting
Skills Gained
- Planning before coding
- Reading & fixing errors
- Using developer tools
- Building from scratch
- Publishing work online
A multi-section responsive website on a topic he chooses — with a navigation bar, hero section, content cards, and footer. Deployed live on a real URL he can share with anyone.
JavaScript & Interactivity
Move from static pages to websites that actually do things. He'll learn JavaScript — the programming language of the web — and start building interactive features, working with real data, and using Git & GitHub like a professional developer.
What He'll Learn
- JavaScript fundamentals
- DOM manipulation (making pages interactive)
- Working with APIs & real data
- Git & GitHub (version control)
Skills Gained
- Problem-solving with code
- Debugging & troubleshooting
- Collaborating with other developers
- Reading documentation independently
An interactive web application that fetches real data from the internet and displays it dynamically — such as a weather app, a movie browser, or a quiz game. Published on GitHub with proper version history.
Backend & the Full Cycle
Demystify the other half of every app. He'll learn what a backend actually is, how the frontend he's been building talks to it, and how data gets stored and sent back — so the whole cycle, from a button click to saved data, is something he understands end to end.
What He'll Learn
- What a backend is & what servers do
- Databases — how apps remember data
- Designing & calling REST APIs (both sides)
- The request/response cycle, end to end
- Authentication basics (how login works)
Skills Gained
- Seeing the full frontend ↔ backend cycle
- Connecting a frontend to data he controls
- Thinking about data, not just screens
- Debugging across the whole stack
Connect one of his apps to a real backend with a database — saving and loading data that persists. A small full-stack app (like a notes board or a guestbook) where he owns every step, from button click to stored data.
React & Portfolio Project
Learn React — the most in-demand frontend framework used by companies worldwide — and build a complete, portfolio-ready web application. Everything so far comes together into professional-grade work.
What He'll Learn
- React framework & components
- State management
- Multi-page applications & routing
- Modern development tooling
Skills Gained
- Building professional applications
- Code organization & architecture
- Independent learning & research
- Industry-standard workflow
A complete, multi-page React application — a real product he designs and builds from scratch. This becomes the centerpiece of his developer portfolio, ready to show to future employers or university programs.
...and it keeps going
Once these stages are underway, the plan grows with him — TypeScript, testing, deeper backend & databases, performance, accessibility, and whatever sparks his curiosity next. This roadmap is reviewed and updated regularly, not a fixed finish line.
Project-Based Learning
Every concept is taught through building real projects — not abstract theory. He learns because the project needs it, so knowledge sticks.
Weekly Sessions
One session per week (45–60 minutes) with homework between sessions. Consistent progress without being overwhelming.
Ongoing Support
He can reach out anytime with questions between sessions. Responses within 24 hours — so he's never stuck for long.
Engineering Mindset
Beyond code syntax — he'll learn how professional developers think: planning, debugging, breaking problems down, and building things that work.
A Growing Portfolio of Real Projects
Multiple websites and applications deployed on the internet — not just code on a screen, but real products anyone can visit.
Professional GitHub Profile
A GitHub account with organized code repositories showing his growth — the standard way developers showcase their work worldwide.
Job-Ready Foundation
The skills and portfolio to pursue freelance work, internships, or junior developer positions — with real projects to back it up, not just certificates.
Independent Learning Ability
The confidence and skills to learn new technologies on his own — the most valuable outcome of this whole plan.