Web Foundations
Build a complete mental model of structure, styling, and browser behavior.
- HTML and accessibility
- CSS layout and responsive design
- JavaScript fundamentals
Learning direction
Frontend Development
Start with semantic pages and interaction fundamentals, then ship fast, usable product interfaces.
Skill map
From foundations to real delivery
Engineering
Use types, components, and data flow to maintain complex interfaces.
- TypeScript
- React and state management
- Requests, caching, and error states
Product Quality
Go beyond making it work: make it good on real devices.
- Performance and Core Web Vitals
- Testing and debugging
- Design systems
Delivery and Portfolio
Explain the requirement, implementation, and iteration clearly.
- Deployment and domains
- Project storytelling
- Open-source issues and PRs
Put the skills to work
Recommended learning and practice items
View all in this direction →Open sourceFrontendBeginnerReady to start
Incorrect/unhelpful error message for non-module jsx file
non-module, script, jsx, jsxImportSource - This is the behavior in every version I tried, and I reviewed the FAQ for entries about jsx I do have that package installed. The error message should give the real issue which is that scripts can't import modules. workaround: export {}
microsoft/TypeScriptAbout 4 hr
CompetitionAI · Frontend · BackendIntermediateDue Oct 15, 2026
2026 AIC AI + Open Source Challenge
A global student challenge for runnable AI applications, developer tools, or verifiable contributions built with open-source software, models, and data.
Global Campus AI Algorithm Elite Competition Organizing CommitteeCN¥500.00Global
Open sourceFrontendIntermediate
Astro
A content-focused web framework whose maintainers respond unusually quickly to new contributors.
AstroAbout 2 hrtypescript
Open sourceFrontendIntermediate
Excalidraw
A hand-drawn style whiteboard where every change is visible — a satisfying first contribution.
ExcalidrawAbout 2 hrreacttypescript
Open sourceFrontendIntermediate
MUI
A React component library that keeps a steady queue of well-scoped good first issues.
MUIAbout 2 hrreacttypescript
Open sourceFrontendIntermediate
Next.js
Official repository for the React full-stack framework, with documentation, tests, and contribution issues.
VercelAbout 2 hrreacttypescript
Open sourceFrontendIntermediate
React
Official React repository for learning modern UI internals through docs, tests, and issue discussions.
MetaAbout 2 hrjavascriptreact
Open sourceFrontendIntermediate
Storybook
Component workshop tooling with small-grained tasks — a gentle way to get a dev environment running.
StorybookAbout 2 hrtypescript