14 weeks
About 12 focused hours each week, including reading, practice, debugging and projects.
Frontend developer notebook · beginner to shipped portfolio
Learn the browser.
Build for people.
Start with how a page reaches a browser, then learn the core languages, a modern React toolchain, testing, accessibility and deployment. Every stage ends with something you can explain, test and show.
Starting levelNo coding experience required
Focused workAbout 140–180 hours including practice
Recommended pace14–16 weeks · about 10–12 hours weekly
Proof of progressProjects, automated checks and a capstone
Choose a pace
Same finish line. Different weeks.
Hours are estimates, not deadlines. Slow down where a concept is new; do not skip the small builds just to finish a module number.
16 weeks
About 10 focused hours each week. This gives new ideas time to settle before the next module.
3–4 months
Keep a steady weekly routine around work, school or family. Build before rushing forward.
Ordered syllabus
Learn only what the next step needs.
The order is deliberate: understand the web, learn the browser languages, add team tools, then move into React, quality, shipping and finding real users.
Orientation: what frontend means
Define websites, web apps, frontend and backend; see what the role builds and how the course works.
Set up Windows, macOS or Ubuntu
VS Code, Git, Node.js LTS, npm, a browser, GitHub and the verification commands that prove each tool works.
How the web reaches you
Browsers, requests, HTTP, DNS, domains, hosting, files, DevTools and a first request trace.
HTML foundations
Semantic structure, accessible forms, media, metadata and a page that still makes sense without styling.
CSS that makes sense
The cascade, box model, layout, responsive design, states, motion and maintainable visual systems.
JavaScript essentials
Values, functions, collections, the DOM, events, modules, async requests, errors and debugging.
Git and GitHub
Commits, branches, pull requests, merge conflicts, issues, useful READMEs and a safe release workflow. This path teaches the 4 h 30 min frontend workflow; the 18 h 15 min Git + GitHub course adds recovery, account security, Actions and six graded builds.
npm, Vite and code quality
Packages, scripts, dependency safety, environment files, Vite projects, ESLint and Prettier.
Tailwind CSS
Utility-first styling, responsive variants, reusable components and when plain CSS is the clearer choice.
React fundamentals
Modern function components, JSX, props, state, events, lists, forms and effects—with Vite, not outdated Create React App steps.
React application patterns
Component boundaries, routing, data fetching, loading/error/empty states and predictable state ownership.
TypeScript for safer changes
Types, unions, interfaces, narrowing, generics and typing component props and API data.
APIs and web security
HTTP methods, JSON, CORS, authentication boundaries, HTTPS, CSP and common OWASP risks.
Testing with Jest
Unit tests, DOM behaviour, React Testing Library, useful test cases and tests that survive refactors.
Accessibility, performance and SEO
Keyboard use, names and labels, contrast, responsive checks, Lighthouse, Core Web Vitals and useful page metadata.
Claude Code as a careful assistant
Scope tasks, protect secrets, review diffs, run checks and keep responsibility for the result.
Deploy with Vercel
Production builds, preview deployments, environment variables, domains, rollback thinking and release checks.
Market your work honestly
A focused portfolio, useful social profiles, project stories, respectful outreach, discovery calls and follow-up.
Capstone: Client Brief Studio
Plan, build, test, audit, deploy and present a useful React app that turns a client request into a clear project brief.
HTMLCSSJavaScriptGitGitHubnpmViteTailwind CSSReactTypeScriptJestTesting LibraryClaude CodeVercel
Build ladder
Small proof before a big promise.
Each project has a time box, starter instructions, automated checks and a mastery checklist. A green check proves the coded requirements passed; you still review how it feels to use.
Toolchain Release Check
Prepare a Git-ready npm and Vite project with repeatable scripts, useful release notes and safe Claude Code boundaries.
- Git
- npm
- Vite
Tailwind Service Page
Build a semantic, responsive and keyboard-friendly service page with a usable form.
- HTML
- Tailwind CSS
- Accessibility
React Opportunity Board
Create search, filters, saved items and honest empty states from predictable derived state.
- React
- State
- Forms
Resilient API Directory
Handle loading, empty, error, cancellation, validation and retry states around a real fetch boundary.
- React
- Fetch
- Security
Jest Pricing Lab
Implement integer-money rules and prove valid, boundary and invalid cases with focused unit tests.
- JavaScript
- Jest
- Testing
Production Readiness and Marketing
Harden a case study for accessibility, security, performance and SEO, then document its Vercel release and truthful outreach.
- Lighthouse
- Vercel
- Portfolio
Client Brief Studio
A responsive React product that filters services, captures a useful client brief, estimates work, saves a local draft and produces tested release evidence. Finish with an accessible Vercel deployment and a short case study you can show to a real client.
- React
- Tailwind CSS
- Local storage
- Jest
- Accessibility
- Vercel
How the GitHub grade works
Work on an attempt/... branch and push. GitHub Actions runs the checks automatically and shows PASS or REVISE; no repository owner has to start or grade the run.
Marketing module
Make good work easy to understand.
This is not about pretending to be an expert. It is about showing the problem, your decisions, the result and how someone can contact you.
Profiles that agree
Use the same name, role and short promise across GitHub, LinkedIn and the platforms you can maintain.
- One clear headline: role + people you help + result.
- A recognisable photo or consistent brand mark.
- Two or three pinned projects with live links.
- A short case study for each: problem, choices, proof, next improvement.
- One professional contact route—never publish private documents or secrets.
Outreach without spam
Research one person or organisation, then make a small relevant offer. Cold calling is a conversation, not a script-reading contest.
- Choose a business you genuinely understand.
- Find one specific website or workflow problem you can explain respectfully.
- Ask permission: “May I share a 30-second observation?”
- Describe the impact in plain language, not technical jargon.
- Suggest one next step: a short audit, demo or discovery call.
- Send one useful follow-up. Stop if they say no.
Useful tools: a simple spreadsheet or privacy-respecting CRM, calendar booking, screen recording, analytics you have permission to use, and email templates you still personalise.
Primary references
Go deeper at the source.
The notes translate the ideas; these official references remain the authority when a tool changes.
MDN Learn Web Development · Git documentation · GitHub Get Started · npm documentation · Vite guide · Tailwind with Vite · React Learn · TypeScript Handbook · Jest · React Testing Library · W3C accessibility introduction · web.dev performance · OWASP Top 10 · Claude Code documentation · Vercel documentation. Sources and vendor instructions were checked on 13 August 2026; follow the linked official page when a command changes.
Start by understanding the job.
The first four preview pages define frontend development, explain the web request, show the tools for each operating system and give you a realistic first-week plan.