Front-End Skill Growth Plan
How I plan to keep growing as a front-end dev in 2026: React and TypeScript depth, design systems, animation, AI integration, and performance.
Phase 1: Modern React, TypeScript & Animation
- Take a current “Complete Intro to React” course (Brian Holt or something similar) to get back up to speed on modern hooks and functional patterns
- Take a React Server Components and Next.js App Router course (Scott Moss or something similar)
- Take a TypeScript 5 Fundamentals course. My TS is “good enough” right now and I want it to be fluent
- Learn a React animation library like Framer Motion or React Spring. I want to get comfortable with:
- Orchestrating animation with component state and lifecycle
- Layout animations and shared element transitions
- Respecting
prefers-reduced-motionfor accessibility
- Project: Rebuild one of my real projects with RSC, streaming, and Suspense, plus a few well-placed micro-interactions and transitions
Phase 2: Design Systems Ownership
- Take a Design Systems or Component Architecture course (I’ll check the FrontendMasters topic pages for what’s top rated right now)
- Learn Storybook for documenting component variants
- Define motion tokens (easing curves, durations) as part of my design system. This is where the Phase 1 animation work pays off
- Project: Build a small token-driven component library with colors, spacing, typography, and motion, with documented variants and accessibility baked in
Phase 3: AI Integration
- Take an applied AI course (something like “Build an AI Agent from Scratch”)
- Learn how streaming chat UIs, tool-calling flows, and agentic UI patterns work
- Project: Ship one small AI-powered feature from start to finish, even a toy one, so I understand the plumbing and not just the prompt
Phase 4: Performance, Accessibility & Testing as a System
- Take a Web Performance course and focus on Core Web Vitals under real load
- Take a Testing course and focus on tests that catch real regressions instead of chasing coverage numbers
- Audit keyboard and focus management and semantic HTML on one of my existing projects
- Check my Phase 1 animations against performance budgets. Animation is often the first thing to hurt Core Web Vitals when it’s done carelessly
Phase 5: Front-End System Design
- Take a Front-End System Design course (Evgenii Ray’s is well regarded)
- Package 2–3 projects from Phases 1–4 into a portfolio
- For each project, write up the problem, the trade-offs I made, and metrics if I have them
- Practice explaining the why behind my choices. That’s what sets someone apart in interviews, not a longer skills list
Notes
- Pacing: I won’t run all the phases in parallel. Phase 1, then Phase 2, then Phases 3–4 can overlap, and Phase 5 comes last to tie everything together