Practise JavaScript with small functions that return values you can test: price and cart calculators, grade reports, task and expense helpers, search and filter, JSON normalisers and password-rule checkers. Write tests first with Vitest or Jest; the tests are the portfolio.
Each project fits in an hour and has an input and an output you can assert. Do three a week for a month.
- 1Specinputs and expected outputs
- 2Testwrite failing tests first
- 3Buildsmallest function that passes
- 4Edge casesempty, null, huge, wrong type
- 5Refactornames and small functions
Strings and numbers
Greeting builder
BeginnerJavaScript
DataNone
Stand-outHandles empty, extra-spaced and mixed-case names
Temperature converter
BeginnerJavaScript
DataNone
Stand-outRounding rules documented and tested
Number checker helpers
BeginnerJavaScript
DataNone
Stand-outProperty-style tests over random inputs
String formatter and slugifier
BeginnerJavaScript
DataNone
Stand-outUnicode and accent handling
Price, discount and tax calculator
BeginnerJavaScript
DataNone
Stand-outFloating-point errors avoided with integer paise
Password rule checker
BeginnerJavaScript
DataNone
Stand-outReturns every failed rule, never the password
Arrays and objects
Cart total calculator
BeginnerJavaScript
DataSample carts
Stand-outCoupons, quantity limits and empty carts
Grade report generator
BeginnerJavaScript
DataSample scores
Stand-outWeighted averages and grade boundaries as data
Expense summary
BeginnerJavaScript
DataSample expenses
Stand-outGroup by category and find the largest item
Product search and filter
IntermediateJavaScript
DataSample catalogue
Stand-outMulti-filter with sort and stable ordering
Task list utilities
BeginnerJavaScript
DataSample tasks
Stand-outPure functions that never mutate the input
User profile formatter
IntermediateJavaScript
DataNested sample users
Stand-outSafe access with optional chaining and defaults
Order status summary
IntermediateJavaScript
DataNested sample orders
Stand-outA support-friendly one-line summary per order
Data from the outside world
JSON response normaliser
IntermediateJavaScript
DataA public API response
Stand-outHandles missing and renamed fields
Quiz score calculator
BeginnerJavaScript
DataSample answers
Stand-outPartial credit and per-topic breakdown
Async API client with retries
Intermediatefetch, async/await
DataAny public API
Stand-outExponential backoff and a timeout, with tests using a mock
Debounce and throttle utilities
IntermediateJavaScript
DataNone
Stand-outTimer tests with fake timers
Simple state store
IntermediateJavaScript
DataNone
Stand-outSubscribe, dispatch and a tested undo
Mini test runner
AdvancedJavaScript
DataNone
Stand-outDescribe, it and a readable failure report
Turn any idea into a portfolio piece
- Pick one idea and write the one-line goal first.
- Build the smallest version that works end to end.
- Add tests for the rules that could silently break.
- Deploy it so there is a live link or a one-command run.
- Write the README: what it does, how to run it, one number, one limit.
Frequently asked questions
What JavaScript projects should beginners build?
Small tested functions first (calculators, formatters, filters), then DOM components, then one app with an API.
How many JavaScript projects do I need?
Twenty small ones for fluency, then two real apps for your portfolio.
Should I use TypeScript for practice projects?
Start with JavaScript for the first month, then rewrite two projects in TypeScript.
Where do I publish small JavaScript projects?
One GitHub repository with a folder per exercise and a README table, or an npm package for the best three.
Learn this with mentors
Programmes for builders and engineers with admissions open: live classes, mentors and project work.
