You’ve built your first project with AI. Now you’re staring at a blank prompt wondering what to make next.
That’s a good problem to have. The best way to get better at vibe coding is to keep building, and having a list of ideas removes the friction of deciding what to work on. These ten projects are ordered roughly by complexity — start wherever feels right for your skill level.
Beginner Projects
1. Personal Landing Page
A single-page site about you. Your name, a photo, a short bio, links to your profiles or portfolio. Think of it as a digital business card. This is the simplest project you can build and deploy, and it gives you something to link from every online profile you have.
What you’ll practice: HTML structure, CSS layout, responsive design, deployment.
Build a personal landing page in a single HTML file. Dark theme with a #0a0a0f background. Include my name (centered, large), a short bio paragraph, and a row of icon links to GitHub, LinkedIn, and Twitter. Clean sans-serif font, minimal design. Make it look good on both desktop and mobile.
2. Countdown Timer
A page that counts down to a specific date — a product launch, a birthday, a trip. Big numbers, maybe some subtle animation. Simple enough to build in 10 minutes, satisfying to look at.
What you’ll practice: JavaScript dates, DOM manipulation, CSS animation, setInterval.
Build a countdown timer page in a single HTML file. It should count down to March 15, 2026. Display days, hours, minutes, and seconds in large, bold numbers on a dark background. Add a title above the timer that says “Launch Day.” Use a monospace font for the numbers and a subtle pulse animation on the seconds.
3. Quiz App
A multiple-choice quiz on any topic you find interesting. Five to ten questions, a score at the end, a restart button. Quizzes are satisfying to build because the logic is simple but the result feels genuinely interactive.
What you’ll practice: JavaScript arrays and objects, event handling, state management, conditional rendering.
Build a multiple-choice quiz app in a single HTML file. Topic: web development basics. Include 8 questions with 4 answer choices each. Show one question at a time with a progress indicator. Highlight the correct answer in green and wrong answers in red after selection. Show a final score screen with a “Try Again” button. Dark theme, clean design.
Intermediate Projects
4. Expense Tracker
A tool that lets you log expenses, categorize them, and see totals. This is the first project on the list that involves real data management — adding, editing, deleting records, and keeping them across sessions.
What you’ll practice: Form handling, localStorage, data modeling, filtering, basic math on datasets.
Build an expense tracker in a single HTML file. Features: add expenses with amount, category (food, transport, entertainment, bills, other), and date. Display expenses in a table with delete buttons. Show a summary section with total spent and breakdown by category. Save everything to localStorage. Dark theme with a green accent.
5. Markdown Note-Taking App
A note app where you write in Markdown on one side and see the formatted output on the other. This is a genuinely useful tool — plenty of developers use something like this daily.
What you’ll practice: Text processing, split-pane layouts, real-time rendering, localStorage, keyboard shortcuts.
Build a markdown note-taking app in a single HTML file. Split-pane layout: editor on the left, rendered preview on the right. Include basic markdown support (headings, bold, italic, lists, code blocks, links). Let users create multiple notes with a sidebar list. Save all notes to localStorage. Add a keyboard shortcut (Ctrl+S) to save. Dark theme.
6. Weather Dashboard
A dashboard that fetches real weather data and displays it cleanly. This is your first project that talks to an external API, which opens up a whole new set of things to learn.
What you’ll practice: Fetch API, working with JSON data, async/await, error handling, API key management.
Build a weather dashboard in a single HTML file. Use the OpenWeatherMap free API (I’ll add my API key). Search for a city by name and display: current temperature, conditions, humidity, wind speed, and a 5-day forecast. Show weather icons. Handle errors gracefully (city not found, network issues). Dark theme, card-based layout.
7. Habit Tracker
A daily habit tracker where you define habits and check them off each day. Includes streak counting — how many consecutive days you’ve completed a habit. Streaks turn out to be surprisingly motivating.
What you’ll practice: Date handling, complex state management, data visualization, CSS grid, localStorage.
Build a daily habit tracker in a single HTML file. Let me add custom habits (name and optional emoji). Show a weekly grid where I can check off each habit per day. Track and display current streaks for each habit. Show an overall completion percentage for today. Save all data to localStorage. Dark theme with a green accent for completed items.
8. Pomodoro Timer with Task List
A Pomodoro timer (25 minutes work, 5 minutes break) combined with a task list. You assign tasks, start the timer, and track how many sessions you spend on each one. Productivity apps make great projects because you’ll actually use what you build.
What you’ll practice: Timer logic, state machines, audio notifications, task management, localStorage.
Build a Pomodoro timer with a built-in task list. Single HTML file. 25-minute work sessions and 5-minute breaks, with a longer 15-minute break every 4 sessions. Let me add tasks and select which one I’m working on. Track the number of Pomodoro sessions completed per task. Play a notification sound when a session ends. Show a simple daily summary of sessions completed. Dark theme.
Stretch Projects
9. API-Powered Movie Search
A movie search tool that pulls from a real API (like OMDB or TMDB), displays results with posters, and lets you save favorites. This combines API work with a more polished, app-like UI.
What you’ll practice: API integration, search and filtering, image handling, pagination, favorites with localStorage.
Build a movie search app in a single HTML file. Use the OMDB API (I’ll add my API key). Include a search bar that queries movies by title. Display results as a grid of cards with poster image, title, year, and rating. Add a “Save to favorites” button on each card. Include a favorites page that shows saved movies. Handle missing posters with a placeholder. Dark theme, responsive grid.
10. Personal Dashboard
A single-page dashboard that pulls together everything useful in one view: a clock, weather, bookmarks, a to-do list, and a daily quote. This is the most ambitious project on the list, and it draws on skills from several of the earlier ones.
What you’ll practice: Multiple API integrations, component-based thinking, complex layouts, responsive design, data persistence.
Build a personal dashboard in a single HTML file. Include these widgets: a live digital clock with date, a weather widget (use OpenWeatherMap API — I’ll add the key), a quick bookmarks section with add/remove, a to-do list with checkboxes and localStorage, and a motivational quote that changes daily (use a free quotes API). Arrange widgets in a responsive grid that adapts from 1 to 3 columns. Dark theme, card-based layout, subtle hover effects.
Deploy every project you build, even the simple ones. A portfolio with ten live, working projects — each slightly more complex than the last — tells a much stronger story than one ambitious project that’s half-finished. Vercel, Netlify, and GitHub Pages are all free and take about 30 seconds to set up.
What to Do After These
Once you’ve worked through several of these, you’ll notice your prompts getting sharper and your instincts getting better. You’ll make design decisions faster, catch bugs earlier, and develop a feel for when to push AI further versus when to keep things simple.
From there, some good next steps:
- Add a backend to one of your projects (try a serverless function on Vercel or Netlify)
- Rebuild a project using a framework like React or Svelte
- Contributing to an open-source project, using AI to help you understand the codebase
For techniques to improve your prompts as you keep building, check out our guide on writing better AI coding prompts.