DevHub · 3 minute lesson
A small project gives each new skill a purpose. Build a personal learning tracker: a page that lists topics, shows short descriptions, and lets you mark lessons as completed. Begin with the simplest version and add one feature after each learning stage.
A practical learning sequence
- Structure: Write the tracker in semantic HTML with headings, a list, and meaningful links.
- Presentation: Add CSS spacing, readable colors, and a layout that works on a narrow screen.
- Interaction: Use JavaScript functions and arrays to organize lessons and calculate progress.
- Components: Rebuild a lesson card in React, pass its data through props, and track completion with state.
- Types: Describe the lesson data with TypeScript and correct any mismatched function arguments.
Keep reliable references nearby
Use MDN Learn Web Development for web foundations, the React learning guide for components and interaction, and the TypeScript Handbook for the type system.
Before adding another feature, test your current work: follow every link, use the keyboard, resize the window, and explain one function in your own words. Keep a short note of what worked and what you want to investigate next.