AgentDock
1.7k
Prompt LibraryEducationCodingBeginner Web Project Idea Generator

Beginner Web Project Idea Generator

Generate a scoped HTML, CSS, and JavaScript project idea sized to a stated skill level, with an ordered feature list and a clear stopping point.

Used 93 times

Prompt Template

You are a project-scoping mentor who has watched too many beginners quit halfway through a project that was three skill levels too ambitious, so you size every idea to what the person can actually finish.

My skill level is [SKILL_LEVEL:select:just learned HTML and CSS,know HTML CSS and basic JavaScript,comfortable with JavaScript and want a bigger challenge]. My interests are [INTERESTS], described in plain language, such as music, cooking, basketball, or a specific game or show, since a project built around a real interest gets finished more often than a generic to-do list clone. If I left interests blank, ask me for at least one instead of defaulting to the most common tutorial project.

Generate one project idea that fits both [SKILL_LEVEL] and [INTERESTS], not three options to choose between, since choosing between options is its own form of procrastination. Name the project, then list the exact features it needs in the order they should be built, starting with the single feature that makes the project functional at its most minimal, then the two or three features that make it actually useful, then one stretch feature clearly marked as optional for after the core project works.

For each feature, name which specific HTML elements, CSS concepts, or JavaScript concepts it requires, tied to what [SKILL_LEVEL] should already know or is ready to learn next, and flag any concept the project needs that sits above the stated skill level as a specific thing to look up before starting that feature, not a vague instruction to research more.

State a rough scope boundary, the point at which the project is done and shipping it is the right call instead of adding one more feature indefinitely, since knowing when to stop matters as much as knowing how to start.

If I ask for a different idea because the first one doesn't interest me, generate a new one built around the same [SKILL_LEVEL] and [INTERESTS] instead of drifting toward a more generic idea on the second try.

If I report back that I finished the project, ask what I'd want to add next, then scope one added feature at the same rigor as the original list instead of proposing an entirely new project.

Variables
2

select
text

Use this prompt anywhere

10,000+ expert prompts for ChatGPT, Claude, Gemini, and wherever you use AI.

Get Early Access

About Beginner Web Project Idea Generator

Most beginner project lists hand you three generic ideas, a to-do list, a calculator, a weather app, sized for nobody in particular. This tool builds exactly one project around what you're actually into and what you actually know, with a feature list ordered so you always know what to build next.

Set [SKILL_LEVEL] and describe [INTERESTS] in plain language, music, a specific game, basketball, and the output names one project, then lists its features in build order: the single feature that makes it minimally functional, the handful that make it useful, and one optional stretch feature clearly marked as extra credit. Every feature names the exact HTML, CSS, or JavaScript concept it needs, flagged against your stated skill level so you know what to look up before you hit it, and the output states a real stopping point instead of leaving the scope open-ended.

Don't like the first idea, ask for another built around the same interests instead of a generic swap. Finish the project, come back and scope the next feature with the same rigor. Once you've got the concepts down, style the pieces with the CSS layout practice generator, or wire up real inputs with the HTML form input practice generator.

Build it in the Dock Editor and keep your feature list next to you as you go.

How to Use Beginner Web Project Idea Generator

1

Set Your Skill Level

After pasting this into the Dock Editor, ChatGPT, Claude, or Gemini, choose [SKILL_LEVEL] honestly, from just learned HTML and CSS up to comfortable with JavaScript, so the project actually matches what you can build.

2

Name What You're Into

Fill in [INTERESTS] with anything real, a hobby, a game, a show, a sport, since a project tied to something you like gets finished more often.

3

Get One Scoped Project, Not a List

You'll get a single named project with features ordered from minimal-functional through useful to one optional stretch feature.

4

Check the Concepts Against Your Level

Each feature names the HTML, CSS, or JavaScript concept it needs, and anything above your stated level gets flagged as something specific to look up first.

5

Build to the Stated Stopping Point

Ship the project once you hit the scope boundary instead of endlessly adding features, then come back to scope the next addition when you're ready.

Who Uses Beginner Web Project Idea Generator

Total Beginners Finishing Their First Project

Get one project sized to just-learned-HTML-and-CSS skill, with a clear stopping point so the first project actually gets shipped instead of abandoned.

Self-Taught Coders Building a Portfolio

Turn a real interest into a small, finished project worth linking on a resume instead of another unfinished clone of a tutorial app.

Coding Bootcamp Students Between Modules

Get extra practice scoped to exactly what's been covered so far, without accidentally reaching for concepts the course hasn't taught yet.

Parents and Teachers Picking Student Projects

Generate a project idea matched to a specific student's interests and current skill level instead of assigning the same generic project to everyone.

Frequently Asked Questions

You Might Also Like

Discover more prompts that could help with your workflow.

Skip the copy-paste

10,000+ expert-curated prompts for ChatGPT, Claude, Gemini, and wherever you use AI. Our extension helps any prompt deliver better results.

Join the waitlist for exclusive early access to the AgentDock Platform