Skip to content
WebDev Path

Six projects, one portfolio

Each module ends with a project, with a step-by-step build plan, hints when you're stuck and a free starter kit. Warm up with two quick practice builds first. Finish all six and you can show every skill a junior full-stack role asks for.

  1. Project 1, end of FoundationsResponsive landing pageBuild a landing page for a real or made-up product: a hero, features, pricing, testimonials and a contact form.HTMLCSSGitBeginner, about 12 h
  2. Project 2, end of JavaScriptWeather or movie search appLet users search a public API (weather, movies or books) and see results with loading and error states.JavaScriptFetch APICSSBeginner, about 15 h
  3. Project 3, end of ReactAdmin dashboardBuild an admin dashboard with a sidebar, stats cards, a searchable table and a detail page, using data from a mock API.ReactTailwind CSSReact RouterIntermediate, about 20 h
  4. Project 4, end of TypeScript and Next.jsDeveloper portfolioYour personal site: who you are, your projects with case studies, and a way to contact you.Next.jsTypeScriptTailwind CSSIntermediate, about 16 h
  5. Project 5, end of Backend and databasesFull-stack app with accountsA task manager, booking app or job board where users sign up and manage their own data.Next.jsPostgreSQLDrizzle or PrismaAuth.jsAdvanced, about 30 h
  6. Project 6, end of AI features, deployment and jobsAI chatbot or document assistantA streaming chatbot that answers from a business's facts or a set of documents, with cost and safety limits.Next.jsVercel AI SDKOpenAI or AnthropicAdvanced, about 20 h

Quick practice builds

12 small builds of 1 to 2 hours, two per module. Do them before each project: they practise one skill at a time, so the big project feels like putting known pieces together.

Module 1: Foundations

Profile card

1 h

Build a card with your photo, name, short bio and 3 social links.

  1. Write the HTML with an img, h2, p and a list of links
  2. Center the card on the page with Flexbox
  3. Add a border radius, shadow and hover state on the links
  4. Make it fit a 360 px screen

Done when: The card looks right on a phone and every link has a visible keyboard focus.

  • HTML
  • Flexbox
  • Focus styles

Pricing table

1.5 h

Build three pricing plans side by side, with the middle one highlighted.

  1. Write each plan as an article with a heading, price, feature list and button
  2. Lay the plans out with CSS Grid
  3. Highlight the recommended plan with a badge and a border
  4. Stack the plans in one column on phones

Done when: The layout switches from 3 columns to 1 without any sideways scrolling.

  • CSS Grid
  • Responsive design
  • Visual hierarchy

Module 2: JavaScript

Tip calculator

1 h

Enter a bill, a tip percent and the number of people, and see what each person pays.

  1. Build a form with three number inputs
  2. Recalculate on every input event
  3. Round money to 2 decimals and format it with Intl.NumberFormat
  4. Show a message for empty or negative values

Done when: The total updates as you type and never shows NaN.

  • Events
  • Numbers
  • Input validation

To-do list that remembers

2 h

Add, complete, delete and filter tasks, and keep them after a refresh.

  1. Keep tasks in an array of objects with id, text and done
  2. Render the list from the array every time it changes
  3. Save the array to localStorage after each change
  4. Add All, Active and Done filters

Done when: Refreshing the page keeps every task and its state.

  • Arrays
  • DOM rendering
  • localStorage

Module 3: React

Product filter

1.5 h

Show products from DummyJSON and filter them by category and price.

  1. Fetch products in a useEffect with a loading state
  2. Add a category select and a max-price slider
  3. Work out the filtered list from state instead of storing it twice
  4. Show a message when nothing matches

Done when: Changing either filter updates the list instantly with no extra requests.

  • useState
  • useEffect
  • Derived state

Multi-step sign-up form

2 h

A 3-step form (account, profile, review) that keeps answers between steps.

  1. Keep all answers in one state object in the parent
  2. Show one step component at a time with Back and Next
  3. Validate each step before moving on
  4. Show a review step with every answer and a Submit button

Done when: Going back never loses an answer, and Next is blocked until the step is valid.

  • Lifting state up
  • Controlled inputs
  • Validation

Module 4: TypeScript and Next.js

Typed blog with dynamic routes

2 h

A blog with a list page and a page per post, built from a typed array.

  1. Define a Post type and an array of 3 posts
  2. List posts on /blog with links
  3. Build /blog/[slug] with generateStaticParams
  4. Return notFound() for unknown slugs and add metadata per post

Done when: Each post has its own URL and title, and a wrong URL shows a 404.

  • TypeScript types
  • Dynamic routes
  • Metadata

Contact form with a Server Action

1.5 h

A contact form that validates on the server and shows a success or error message.

  1. Write a Server Action that reads the form data
  2. Validate name, email and message with Zod
  3. Return field errors and show them next to the inputs with useActionState
  4. Disable the button while sending

Done when: Bad input shows clear errors without a page reload, and good input shows a thank-you message.

  • Server Actions
  • Zod
  • Form states

Module 5: Backend and databases

Notes REST API

2 h

Create, read, update and delete notes through API routes, tested with curl or Postman.

  1. Build GET and POST on /api/notes and GET, PATCH and DELETE on /api/notes/[id]
  2. Validate every request body with Zod
  3. Return the right status codes: 201, 400, 404
  4. Test each route and save the requests in a file

Done when: Every route returns the right status code for both good and bad requests.

  • Route handlers
  • HTTP status codes
  • Validation

Database for a booking app

1.5 h

Design and create the tables for a booking app: users, services and bookings.

  1. Draw the 3 tables and their relations
  2. Write the schema in Drizzle with foreign keys
  3. Add a unique rule so one time slot can't be booked twice
  4. Write a script that inserts sample data and lists one user's bookings

Done when: Trying to book a taken slot fails with a database error you handle.

  • Relations
  • Constraints
  • Migrations

Module 6: AI features, deployment and jobs

Safe streaming AI endpoint

2 h

One API route that streams an AI answer, with input and cost limits.

  1. Read the API key only on the server
  2. Limit the question to 500 characters with Zod
  3. Set max_tokens and stream the reply
  4. Return a friendly error if the AI service fails

Done when: The key never reaches the browser, and long or empty questions are rejected.

  • AI APIs
  • Streaming
  • Cost control

README and 2-minute demo

1.5 h

Turn your best project into something a recruiter or client understands in 2 minutes.

  1. Write a README with a screenshot, live link, features, stack and setup steps
  2. Add a short Security or Decisions section
  3. Record a 2-minute screen video: problem, demo, one technical choice
  4. Pin the repo on your GitHub profile

Done when: A non-developer friend can explain what your project does after watching.

  • Writing
  • Presenting
  • Personal brand