Ai Coding Tools

How to Build a Basic Web App with Cursor in Under 2 Hours

By BTW Team4 min read

How to Build a Basic Web App with Cursor in Under 2 Hours

Building a web app can feel daunting, especially for indie hackers and solo founders with limited time. But what if I told you that you could create a basic web app in under 2 hours using Cursor? The AI coding assistant has evolved significantly, and as of June 2026, it's more accessible than ever. In this guide, I’ll walk you through the steps to get your web app up and running quickly, leveraging Cursor's capabilities.

Prerequisites

Before diving in, make sure you have the following:

  1. Cursor Account: Sign up for a free account at Cursor.
  2. Basic HTML/CSS Knowledge: Familiarity with HTML and CSS will help, but Cursor will handle most of the heavy lifting.
  3. A Code Editor: Use something simple like Visual Studio Code or even the built-in editor in Cursor.
  4. Node.js Installed: You’ll need this for running your app locally.

Step 1: Setting Up Your Project

  1. Create a New Project: Open Cursor and select "Create New Project." Choose a template that fits your needs (I recommend the "Basic Web App" template).
  2. Configure Your Project: Give your project a name and select the tech stack (e.g., HTML, CSS, and JavaScript).

Expected Output: A new project folder with basic files created (index.html, styles.css, script.js).

Step 2: Designing Your Web App

  1. Use Cursor for Layout: Type a command like "Create a responsive landing page layout" in Cursor. It will generate a basic HTML structure for you.
  2. Customize the HTML: Modify the generated HTML to fit your app's purpose. Add sections for a header, main content, and footer.

Expected Output: A skeleton of your web app's layout.

Step 3: Styling Your App

  1. Add CSS: Command Cursor to "Add styles for a responsive layout" and it will generate CSS rules. You can customize colors and fonts per your brand.
  2. Preview Your Changes: Use the preview feature in Cursor to see how your styles look in real-time.

Expected Output: A styled web app layout that looks good on both desktop and mobile.

Step 4: Adding Functionality

  1. Implement Features: For example, if you want a contact form, type "Create a contact form with validation" in Cursor. It’ll generate the necessary JavaScript.
  2. Test Your Code: Run your app locally and make sure all features work as expected.

Expected Output: A functional web app with interactive features.

Troubleshooting

  • Common Issues: If your app isn’t displaying correctly, check for missing closing tags in your HTML or incorrect CSS selectors.
  • Cursor Limitations: While Cursor is powerful, it may not always generate optimized code. Always review and refine the generated code.

What’s Next?

Once your web app is live, consider deploying it using platforms like Vercel or Netlify, which offer free tiers perfect for indie projects.

Tools We Actually Use

Here’s a summary of tools that are useful alongside Cursor when building web apps:

| Tool | What it does | Pricing | Best for | Limitations | Our take | |--------------|-----------------------------------------|-----------------------------------|-------------------------------|-----------------------------------|--------------------------------| | Cursor | AI coding assistant for web apps | Free, Pro at $20/mo | Rapid prototyping | Can generate inefficient code | We use it for quick layouts | | Visual Studio Code | Code editor with extensions | Free | General coding | Requires setup of extensions | Essential for editing code | | Vercel | Deployment platform | Free tier available | Hosting front-end apps | Limited server-side capabilities | Good for static sites | | Netlify | Continuous deployment for web apps | Free tier available | Hosting and CI/CD | Can get complex for larger apps | Easy to use for static sites | | Postman | API testing tool | Free, Pro at $12/mo | Testing APIs | Limited to API focus | Great for backend integration | | Figma | Design tool for mockups | Free tier available | UI/UX design | Can be overwhelming for beginners | Useful for design prototypes |

Conclusion

Building a basic web app with Cursor is not only possible but also efficient. If you follow the steps outlined here, you can have a functional app in under 2 hours. Start with a simple project and iterate from there.

Now that you have this guide, it’s time to jump in and start building.

Follow Our Building Journey

Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.

Subscribe

Never miss an episode

Subscribe to Built This Week for weekly insights on AI tools, product building, and startup lessons from Ryz Labs.

Subscribe
Ai Coding Tools

Best AI Coding Tools for Non-Technical Founders in 2026

Best AI Coding Tools for NonTechnical Founders in 2026 As a nontechnical founder, diving into the world of coding can feel daunting. You have an incredible idea, but the thought of

Jun 11, 20265 min read
Ai Coding Tools

How to Improve Your Coding Speed Using AI in Just 1 Hour

How to Improve Your Coding Speed Using AI in Just 1 Hour As a solo founder or indie hacker, you know that time is your most valuable resource. Increasing your coding speed can be a

Jun 11, 20264 min read
Ai Coding Tools

The 3 Most Common Mistakes New Users Make with AI Coding Tools

The 3 Most Common Mistakes New Users Make with AI Coding Tools in 2026 When diving into the world of AI coding tools, it’s easy to feel overwhelmed. These tools promise to streamli

Jun 11, 20264 min read
Ai Coding Tools

How to Use AI Code Assistants to Cut Your Development Time in Half

How to Use AI Code Assistants to Cut Your Development Time in Half (2026) If you’re a solo founder or indie hacker, you know that time is your most precious resource. Every minute

Jun 11, 20265 min read
Ai Coding Tools

Best 7 AI Coding Tools to Skyrocket Your Productivity in 2026

Best 7 AI Coding Tools to Skyrocket Your Productivity in 2026 As a solo founder or indie hacker, you’re probably juggling multiple responsibilities while trying to ship your next b

Jun 11, 20264 min read
Ai Coding Tools

GitHub Copilot vs. Codeium: Which AI Tool is Better for Developers in 2026?

GitHub Copilot vs. Codeium: Which AI Tool is Better for Developers in 2026? As a developer, you know that coding can often feel like a solitary and timeconsuming task. The rise of

Jun 11, 20264 min read