50 Web Dev Projects for Beginners (2026)

Building projects is the fastest way to learn web development. Reading tutorials and watching courses gives you theory — but writing real code, fixing bugs, and shipping something you can show builds actual skill. This list covers 50 web dev projects organized by difficulty, from a simple personal portfolio page to a real-time weather dashboard with charts. Every project includes the skills you’ll practice and exactly what you’ll build.

Beginner Projects (1–20)

1. Personal Portfolio Page — Difficulty: ⭐ Skills: HTML, CSS, responsive design Build a one-page portfolio showcasing your name, bio, skills, and contact links. Features: smooth scrolling navigation, skill bars, hover effects on project cards, mobile-responsive layout with media queries.

2. Tribute Page — Difficulty: ⭐ Skills: HTML, CSS, typography Build a tribute page honoring a historical figure or personal hero. Features: timeline layout with key events, image with caption, blockquote styling, clean typography hierarchy.

3. Landing Page Clone — Difficulty: ⭐ Skills: HTML, CSS, flexbox, grid Build a clone of any popular landing page (Stripe, Notion, or a SaaS product). Features: hero section with CTA button, feature grid, testimonial carousel, footer with links.

4. Survey Form — Difficulty: ⭐ Skills: HTML forms, CSS styling Build a survey form with various input types. Features: text inputs, radio buttons, checkboxes, dropdowns, form validation with HTML5 attributes, submit button with hover state.

5. Technical Documentation Page — Difficulty: ⭐ Skills: HTML, CSS, navigation layout Build a technical documentation page with a sidebar nav. Features: sticky sidebar, smooth scroll to sections, code block styling, responsive hamburger menu on mobile.

6. Product Landing Page — Difficulty: ⭐⭐ Skills: HTML, CSS, flexbox Build a product landing page for a fictional product. Features: video embed section, pricing cards with tiered features, email signup form, sticky navbar on scroll.

7. Parallax Website — Difficulty: ⭐⭐ Skills: CSS, parallax effect, layering Build a single-page site with parallax scrolling backgrounds. Features: fixed background images, layered scroll speed, overlay text on hero sections, fade-in animations.

8. Restaurant Menu Page — Difficulty: ⭐⭐ Skills: HTML, CSS, grid layout Build a restaurant menu with categories and pricing. Features: grid of menu items with images, category filter tabs, price tags, dietary icons (vegan, gluten-free).

9. Photography Gallery — Difficulty: ⭐⭐ Skills: CSS grid, image styling, lightbox Build an image gallery page for a photographer. Features: masonry-style grid, lightbox modal on click, lazy loading images, category filter buttons.

10. Countdown Timer — Difficulty: ⭐⭐ Skills: JavaScript date/time, DOM manipulation Build a countdown timer to a specific date. Features: live countdown in days/hours/minutes/seconds, alert when countdown ends, custom date picker input, localStorage to save target date.

11. Digital Clock — Difficulty: ⭐ Skills: JavaScript date object, setInterval Build a digital clock that displays the current time. Features: 12/24 hour format toggle, AM/PM display, date below the clock, color theme switcher.

12. Calculator — Difficulty: ⭐⭐ Skills: JavaScript logic, event handling Build a basic arithmetic calculator. Features: addition, subtraction, multiplication, division, clear/reset button, decimal point support, keyboard input support.

13. To-Do List — Difficulty: ⭐⭐ Skills: JavaScript, DOM, localStorage Build a task management to-do list. Features: add/delete/edit tasks, mark complete with strikethrough, filter by all/active/completed, persist tasks in localStorage.

14. Sticky Notes — Difficulty: ⭐⭐ Skills: JavaScript, drag-and-drop, localStorage Build a sticky notes board where users can add and arrange notes. Features: create/delete notes, drag to reposition, color picker per note, notes saved in localStorage.

15. Color Picker — Difficulty: ⭐ Skills: JavaScript, color manipulation Build a color picker tool that generates colors and shows their values. Features: click to generate random color, hex/rgb/hsl display, copy to clipboard, list of recently picked colors.

16. Quiz App — Difficulty: ⭐⭐ Skills: JavaScript, arrays, objects, scoring Build a multiple-choice quiz app. Features: question progression, score tracking, timer per question, correct/incorrect feedback, final score screen with retry.

17. Weather App (Free API) — Difficulty: ⭐⭐⭐ Skills: fetch API, async JavaScript, API keys Build a weather app that fetches live data from OpenWeatherMap. Features: city search input, current temperature/humidity/wind, weather icon based on condition, 5-day forecast.

18. Random Quote Generator — Difficulty: ⭐ Skills: JavaScript arrays, DOM updates Build an app that displays random quotes. Features: click to generate new quote, tweet quote button, copy to clipboard, fade-in transition on new quote.

19. Drum Kit — Difficulty: ⭐⭐ Skills: JavaScript keyboard events, audio Build a virtual drum kit playable with keyboard keys. Features: key-to-sound mapping, visual feedback on keypress, responsive layout, record and playback sequence.

20. Memory Card Game — Difficulty: ⭐⭐⭐ Skills: JavaScript logic, CSS animations Build a classic memory matching card game. Features: grid of face-down cards, flip animation on click, match detection, move counter, timer, win screen with score.

Intermediate Projects (21–40)

21. GitHub Profile Viewer — Difficulty: ⭐⭐⭐ Skills: GitHub REST API, fetch, DOM Build an app that fetches and displays GitHub user profiles. Features: username search, avatar, bio, repo list with stars/forks, contribution graph placeholder.

22. Movie Search App — Difficulty: ⭐⭐⭐ Skills: REST API, async, DOM manipulation Build a movie search app using the OMDB or TMDB API. Features: search input with autocomplete, movie poster grid, detail modal with rating/plot, pagination.

23. Recipe App — Difficulty: ⭐⭐⭐ Skills: fetch API, filtering, dynamic content Build a recipe finder using Spoonacular or TheMealDB API. Features: ingredient search, recipe cards with images, cooking time filter, save favorites to localStorage.

24. Markdown Previewer — Difficulty: ⭐⭐⭐ Skills: JavaScript, markdown parsing, split pane Build a markdown editor with live preview. Features: split-pane layout, real-time HTML rendering, toolbar with formatting buttons (bold, italic, heading), download as HTML.

25. Pomodoro Clock — Difficulty: ⭐⭐ Skills: JavaScript timers, state management Build a Pomodoro timer for productivity. Features: 25-min work / 5-min break intervals, start/pause/reset controls, session counter, alarm sound on completion.

26. Drawing App — Difficulty: ⭐⭐⭐ Skills: Canvas API, mouse events Build a web-based drawing pad using the Canvas API. Features: freehand drawing with mouse, color picker, brush size slider, eraser tool, clear canvas button, save as image.

27. Expense Tracker — Difficulty: ⭐⭐⭐ Skills: JavaScript, CRUD operations, localStorage Build an expense tracker to log income and expenses. Features: add/delete transactions, running balance, income vs expense chart (CSS bar chart), filter by date range.

28. Note-Taking App with localStorage — Difficulty: ⭐⭐ Skills: localStorage, CRUD, timestamps Build a note-taking app that saves notes in the browser. Features: create/edit/delete notes, markdown support, search notes by title, auto-save on typing, export as text file.

29. Image Carousel — Difficulty: ⭐⭐ Skills: JavaScript, CSS transitions, DOM Build a responsive image carousel/slider. Features: previous/next navigation, dot indicators, auto-play with pause, swipe support on mobile, fade or slide transition.

30. Form Validator — Difficulty: ⭐⭐ Skills: JavaScript form API, regex Build a client-side form validator with real-time validation. Features: required fields, email format check, password strength meter, matching password confirm, custom error messages.

31. Chat UI — Difficulty: ⭐⭐ Skills: CSS, responsive layout, UI design Build a static chat interface mockup. Features: message bubbles (sent/received styling), timestamp labels, typing indicator animation, contact list sidebar, emoji picker placeholder.

32. CSS Art Project — Difficulty: ⭐⭐ Skills: CSS positioning, shapes, gradients Build a piece of art using only CSS. Features: geometric shapes with border-radius, box-shadow for depth, gradient backgrounds, CSS animation (floating/bouncing), responsive scaling.

33. Typing Speed Test — Difficulty: ⭐⭐⭐ Skills: JavaScript timers, keyboard events Build a typing speed test application. Features: random quote display, timer countdown (60s), live WPM and accuracy tracking, character highlighting (green/red), results screen with statistics.

34. Dice Game — Difficulty: ⭐ Skills: JavaScript random, DOM updates Build a two-player dice rolling game. Features: roll button with random dice face, player score tracking, win condition at target score, reset game, animated dice roll.

35. Tic-Tac-Toe — Difficulty: ⭐⭐ Skills: JavaScript game logic, arrays Build a classic tic-tac-toe game with two-player mode. Features: 3×3 grid with X/O placement, win detection across rows/columns/diagonals, draw detection, score counter, restart button.

36. Rock Paper Scissors (with AI) — Difficulty: ⭐⭐ Skills: JavaScript logic, randomization Build rock paper scissors against a computer opponent. Features: clickable choice buttons, AI random pick, round result display, score tracking, best-of-5 mode, simple AI pattern detection.

37. Dynamic Calendar — Difficulty: ⭐⭐⭐ Skills: JavaScript date manipulation, grid layout Build a dynamic monthly calendar. Features: month/year navigation, correct day-to-date grid, highlight current date, add events to dates, events saved in localStorage.

38. Password Generator — Difficulty: ⭐⭐ Skills: JavaScript logic, string manipulation Build a customizable password generator. Features: adjustable length (8–64), character type toggles (uppercase/lowercase/numbers/symbols), strength indicator, copy to clipboard, regenerate button.

39. Unit Converter — Difficulty: ⭐⭐ Skills: JavaScript math, conversion logic, UI Build a unit converter supporting multiple categories. Features: length, weight, temperature, volume conversion, reverse conversion with swap button, real-time calculation on input, clean card UI per category.

40. BMI Calculator — Difficulty: ⭐ Skills: JavaScript math, conditional logic Build a BMI (Body Mass Index) calculator. Features: height/weight input (metric/imperial toggle), instant BMI calculation, category display (underweight/normal/overweight/obese), color-coded result, BMI scale visualization.

Advanced Projects (41–50)

41. Real-Time Chat (WebSocket) — Difficulty: ⭐⭐⭐⭐⭐ Skills: WebSocket API, Node.js, Socket.IO Build a real-time chat application with multiple rooms. Features: username entry, room creation/joining, live message broadcast, online user list, typing indicators.

42. E-Commerce Product Page with Cart — Difficulty: ⭐⭐⭐⭐ Skills: JavaScript, state management, localStorage Build a full e-commerce product page with shopping cart. Features: product grid with images/prices, add to cart with quantity picker, cart sidebar with total, remove items, coupon code input, cart persisted in localStorage.

43. Social Media Dashboard — Difficulty: ⭐⭐⭐⭐ Skills: CSS grid, charts, data visualization Build an analytics dashboard mockup for social media. Features: overview cards with follower counts, bar/line chart (CSS or Canvas), dark/light mode toggle, filter by time period, responsive grid layout.

44. Kanban Board — Difficulty: ⭐⭐⭐⭐ Skills: JavaScript, drag-and-drop API, state management Build a Kanban-style project management board. Features: columns for To Do/In Progress/Done, drag cards between columns, add/edit/delete cards, card descriptions and tags, localStorage persistence.

45. Real-Time Search/Filter — Difficulty: ⭐⭐⭐ Skills: JavaScript, event handling, DOM Build a real-time search and filter interface for a large dataset. Features: search input with debounce, multi-category filter, sort by relevance/name/date, list/grid view toggle, paginated results.

46. CSS Framework Clone — Difficulty: ⭐⭐⭐⭐ Skills: CSS architecture, design system, documentation Build a mini CSS framework (like a minimal Bootstrap or Tailwind). Features: grid system, button/input/card components, utility classes, responsive breakpoints, documentation page.

47. Browser Extension — Difficulty: ⭐⭐⭐⭐ Skills: Chrome extension API, JavaScript, manifest v3 Build a browser extension (e.g., tab manager, bookmark organizer, or note taker). Features: popup UI with action buttons, background script for persistent tasks, storage API for saving data, content script for page interaction.

48. Single-Page App with Router — Difficulty: ⭐⭐⭐⭐ Skills: JavaScript SPA routing, history API Build a single-page application with a client-side router. Features: hash-based or history API routing, page transitions, dynamic content loading, nested routes, 404 page, back/forward navigation support.

49. Drag-and-Drop Interface — Difficulty: ⭐⭐⭐ Skills: HTML5 drag-and-drop API, JavaScript Build a drag-and-drop interface (e.g., a simple page builder or form builder). Features: drag components from a palette to a canvas, reorder items in a list, drop zones with visual feedback, export layout as JSON.

50. Weather Dashboard with Charts — Difficulty: ⭐⭐⭐⭐ Skills: Chart.js, REST API, async/await Build a weather dashboard with visualized forecast data. Features: city search with geolocation, current conditions with icons, 7-day forecast bar chart, hourly temperature line chart, wind speed/direction visualization.

How to Choose

If you’re brand new to HTML and CSS, start with projects 1–5 to learn the basics of structure and styling. Once you’re comfortable, jump to the JavaScript projects (10–20) to learn programming logic. The intermediate projects (21–40) combine everything and introduce APIs. Save the advanced projects (41–50) for after you’ve built 10–15 smaller ones. Don’t try to do all 50 in a week — pick one that excites you and finish it completely.

FAQ