Lex: Academy
Learn frontend engineering inside VS Code by building one real product from the ground up.
Lex: Academy is an interactive 18-module frontend engineering course delivered as a VS Code sidebar. Each lesson gives you a carefully structured prompt to paste into any AI assistant, turning ChatGPT, Claude, Gemini, or another model into a patient tutor while you build a real embroidery e-commerce store.
The course is not a collection of disconnected exercises. You start with a blank HTML file and grow the same product into a typed, tested, full-stack Next.js application with authentication, a database, admin tooling, accessibility, CI/CD, deployment, AI-assisted engineering workflows, and portfolio preparation.
Who It Is For
- New frontend developers who want a complete path from fundamentals to job-ready projects.
- Self-taught engineers who learn best by building, not passively watching videos.
- Bootcamp graduates who want deeper practice with TypeScript, React, Next.js, testing, accessibility, and deployment.
- Engineers who want to learn how to pair with AI without losing ownership of the code.
How It Works
- Open the Lex: Academy icon in the VS Code Activity Bar.
- Choose a module and lesson.
- Click Copy prompt.
- Paste the prompt into your AI assistant of choice.
- Build the lesson step by step, check off progress, and keep going at your pace.
Your checklist progress is saved by VS Code and is not tied to the currently opened workspace, so progress stays with you as you move between project folders.
What You Build
You build one continuous project: an embroidery e-commerce store.
- Start with semantic HTML, CSS, and browser fundamentals.
- Add JavaScript interactivity, forms, async data, persistence, and modular architecture.
- Migrate the store through TypeScript and React.
- Rebuild it as a full-stack Next.js application.
- Add auth, database-backed data, admin workflows, tests, accessibility, and deployment polish.
- Finish with AI-assisted engineering practice, portfolio prep, and mock interviews.
Curriculum
| Phase |
Modules |
Topics |
| Web Foundations |
1-3 |
HTML, CSS, JavaScript, DOM, async JS, accessibility |
| TypeScript |
4-5 |
Types, generics, narrowing, typed APIs, migration |
| React |
6-9 |
Components, hooks, state, routing, forms, testing |
| Next.js |
10-14 |
App Router, Server Components, Server Actions, auth, database, CI/CD |
| Tailwind & UI |
15-16 |
Tailwind CSS, shadcn/ui, Playwright, accessibility, design systems |
| AI-Assisted Engineering |
17 |
AI pairing, context packets, debugging, code review, supervised agent work |
| Portfolio & Interviews |
18 |
Deployment, README polish, system design, mock interviews, job readiness |
108 lessons total: 5 lessons plus 1 review day per module.
Features
- AI-assistant agnostic: use the AI tool you prefer; the extension does not call any AI API.
- One product journey: every module builds on the same embroidery store.
- Persistent progress: checklists survive VS Code restarts and workspace changes.
- Student support rails: each lesson includes starting state, expected outcome, acceptance criteria, stuck prompts, glossary practice, and portfolio evidence.
- Go deeper mode: optional deep dives for students who want advanced patterns, edge cases, and interview-level practice.
- Real engineering habits: git, PR descriptions, testing, accessibility audits, CI/CD, review workflows, and deployment.
Privacy
Lex: Academy does not collect telemetry, call external services, or send your course progress anywhere. Lesson prompts are bundled locally with the extension. When you paste a prompt into an AI assistant, that interaction is governed by the tool you choose.
Installation
Install from the VS Code Marketplace once published, or install a packaged .vsix from GitHub Releases:
code --install-extension lex-academy-frontend-1.0.5.vsix
Marketplace installs receive normal VS Code extension updates when new versions are published.
Requirements
- VS Code 1.85 or newer.
- An AI assistant of your choice for the guided lesson experience.
- Node.js, pnpm, and other project tools are introduced during the course as needed.
Source
Source code and course content live at github.com/Lex-Organization/lex-academy.
License
MIT
| |
