A practical, YouTube-first learning system for Computer Science → Software Engineering → AI/ML, with mathematics, systems, security, cloud, mobile and an optional quantitative-finance branch.
The roadmap is no longer just a list of courses. cs-roadmap.html is now a local-first study dashboard with:
- 31 progressive levels covering computer fundamentals, CS, programming, web, Git, algorithms, databases, backend, frontend, software engineering, operating systems, networking, cloud, security, mathematics, Python, ML, deep learning, LLM engineering, AI applications, system design, mobile, advanced mathematics, quant and portfolio engineering.
- YouTube-first learning instructions tailored to the type of subject.
- Curated links to official documentation, university courses, practical labs, interactive exercises and high-quality video resources.
- Checkbox progress saved automatically in browser
localStorage. - Overall progress percentage and completed/remaining topic counts.
- Phase-by-phase progress.
- Search across the roadmap.
- Phone-first / laptop-first filtering.
- Required/core/optional priority filtering.
- Expand-all and collapse-all controls.
- Per-topic notes and question capture.
- Study-session logging with minutes and study-day count.
- JSON export/import so progress can be backed up or moved to another device.
- A daily-focus panel that points to the next incomplete topic.
- Mastery gates that explicitly distinguish watching from understanding and practical ability.
- Responsive mobile layout designed for Android phones as well as larger screens.
- Zero framework dependencies and no build step.
The interface was deliberately rebuilt without the common “AI-generated landing page” treatment: no oversized gradient hero, no decorative blobs, no glassmorphism-heavy cards, no novelty display fonts and no excessive animation. It uses a restrained system font stack, clear hierarchy, compact borders, conventional controls and information-dense dashboard patterns.
The current constraint is treated as a feature rather than a dead end. Use the phone for:
- lectures and YouTube courses
- conceptual understanding
- visual explanations
- reading documentation
- mental tracing of algorithms
- mathematical intuition
- building a question bank
- reviewing notes
When a computer is available, shift aggressively toward:
- implementation
- debugging
- exercises
- projects
- Git workflows
- databases
- deployment
- testing
- system design
- real users
| Subject | Protocol |
|---|---|
| CS theory | Watch → pause → recall → explain |
| Mathematics | Watch → pause → solve |
| Programming | Watch → reproduce → debug |
| Algorithms | Watch → manually trace → implement |
| AI/ML | Watch → explain mechanism → experiment |
| Software engineering | Study case → design → build → review |
The core rule is simple: watching is exposure, not mastery.
- Computer & Internet Foundations
- Computer Science Foundations / CS50
- Algebra
- Discrete Mathematics
- Programming Fundamentals
- HTML & CSS
- JavaScript
- Git & GitHub
- TypeScript
- Data Structures & Algorithms
- SQL & Databases
- Backend & APIs
- React
- Next.js
- Software Engineering
- Operating Systems
- Networking & Distributed Systems
- Cloud & DevOps
- Application Security
- Linear Algebra
- Calculus
- Probability & Statistics
- Python for AI/Data
- Machine Learning
- Deep Learning
- Transformers & LLMs
- AI Application Engineering
- System Design
- Mobile Engineering (optional)
- Advanced Mathematics & Quant (optional)
- Portfolio & Real-World Engineering
- Harvard CS50
- MIT OpenCourseWare
- Harvard STAT 110
- Stanford CS229
- MDN Web Docs
- TypeScript Handbook
- React documentation
- Next.js documentation
- Git and Pro Git
- GitHub Skills
- PostgreSQL documentation
- SQLBolt / SQLZoo
- OSTEP and MIT operating-systems material
- Cloudflare Developers
- Docker documentation
- OWASP
- PortSwigger Web Security Academy
- OverTheWire
- 3Blue1Brown
- Khan Academy
- Google Machine Learning Crash Course
- scikit-learn
- DeepLearning.AI
- fast.ai
- PyTorch
- Hugging Face Learn
- Full Stack Deep Learning
- OpenAI Cookbook
- Google Gemini API documentation
- System Design Primer
- React Native / Expo
- QuantStart and related quantitative-finance learning material
Resources are deliberately mixed: video for intuition, official docs for precision, exercises/labs for verification, and projects for evidence.
- Open
cs-roadmap.html. - Search for a topic or open the current phase.
- Pick one primary resource.
- Study using the protocol shown for that subject.
- Tick a topic only when you meet its mastery gate.
- Write difficult questions in the question bank.
- Log real study minutes instead of estimating.
- Export a JSON backup periodically, especially before changing devices or clearing browser data.
This roadmap is intentionally broad, but do not study every branch at once. The software-engineering path is the spine. AI/ML is the main specialization. Quantitative finance, mobile and advanced mathematics are branches to enter when the prerequisite foundation is strong.
The tracker is a single static HTML file using:
- HTML5
- CSS3
- Vanilla JavaScript
- Browser
localStorage - Native JSON export/import
- External links only for learning resources
No framework, package manager, database or server is required.
MIT. Linked educational materials remain the property of their respective publishers and institutions.
Abdul Anas — abdulanasbuilds
Build the foundation. Then build the systems. Then build things that matter.