This guide is for people who are new to the idea of building a web application. We’re going to help get you started using Bubble’s no-code web app builder. If you have coding experience or you’ve worked with other no-code tools, you might find yourself ready to develop apps even faster than 10 days – and that’s great! Either way, if you have amazing ideas for tech products and want to learn how to develop an app yourself, we're here to help you start your journey.
Day 0: Sign up for Bubble for free.
Time required: <1 minute. Do it before bed and wake up to a new no-code world!
Join and register your Bubble account, no credit card and no code required. If you’ve been wondering how to make an app for free, this is the perfect starting spot.
Day 1: Get familiar with the Bubble editor & create your first app.
Time required: ~20 minutes, instead of another rerun of The Office
Watch our Introduction series over at Bubble Academy!
This video series will walk you through the basics if you are new to Bubble. Follow along and create your first new web application by clicking “My apps” and clicking “New application.” Fill out the name and any other details for your app.
Need inspiration for what to build? See examples of What You Can Build in Bubble.
You don’t need to start building just yet, but we recommend starting on a blank page and brainstorming what features you will want to create in your app’s minimum viable product (MVP). A list of 3-4 key features is a good place to start. Write those down and begin thinking about the kind of data you will need to collect in order to make your web app work.
Day 2: Take the interactive lessons & wireframe your app idea.
Time required: ~50 minutes or how long it takes for your bread dough to rise.
Our interactive lessons show you how to harness basic tools in the Bubble editor that you'll need to build any web application.
Between lessons, you can also create what are called wireframes of your application’s pages, either on paper or using a prototyping tool. Wireframes are low-resolution mockups of your page design. This is where you should also consider how many pages you want in your web app. The answer can be: one or more than one. Your desired number of pages will help guide your design process once you start to develop apps in Bubble on Day 5.
Day 3: Revisit the lessons in hard mode & go over the fundamentals.
Time required: ~50 minutes + 5 minutes for video watching, less than the time it takes to complete an escape room.
If you breezed through the lessons, try them again in hard mode (without the arrow helping you navigate).
Bonus: Review Bubble fundamentals video course, and ask yourself a few more question about your app's design: Do I want my app to be mobile-friendly? If yes, get familiar with the Responsive editor. Am I going to be creating a multilingual app? If yes, the Settings tab > Languages section will be your friend.
Bubble has the capability to offer responsive layout editing and allows anyone to develop apps in multiple languages; just remember to give yourself some time to get comfortable with these features during your web app development process.
Day 4: Build your database.
Time required: 1-2+ hours—less if you’ve been thinking like a programmer.
In your new application, use your past few days of brainstorming to create your data types in the Data tab. This is a key step in making your Bubble app and sets Bubble apart from other simple website builders or no-code tools. Database creation normally requires engineering skills, but with Bubble, all you need to develop apps is the logical mindset to set up your app's data organization. These data types will allow you to build dynamic pages, set up workflows, collect inputs from your users, and more.
- Identify your main data types besides Users. This depends on your application. Your marketplace might have a type of “Product” for sale, your internal management tool might have a “Task,” and your community site might have a “Post.” Your app is yours, so you create the data you need.
- Add some relevant fields under each data type – common fields might include Name (text), Price (number), Content (text), Date (date), etc. You can add more fields than you need, but it’s easier to collect info for the things most relevant to your app’s functioning.
- Advanced data tip: Do any of your data types relate to each other? When two types of data need to connect to one another, there are a few ways to join them. For example, you can add them as fields under each respective data type (and check the box that indicates it is a list if you expect many of them). Read more about this in our manual.
If you forget something or want to add a new field or data type to your database, you can easily add the entry in your Data tab whenever you need it. Be careful if you’re deleting or modifying your data types after you've built workflows and check them to ensure they run correctly.
Bonus: Populate your database with some real data by manually adding a "new entry" in your Data tab, or upload a set of existing data from a .csv or Excel file. In the next few days, you can create input elements so your users can generate that data, or connect workflows to create data from actions or events around your app.
Day 5: Create your web app's pages & customize your styles.
Time required: An afternoon, depending on how much you like to fiddle with things.
Now it’s time to begin building the basic pages and reusable elements you will need, starting in the top left corner of the editor. Reusable elements are for any visuals you want on multiple pages (headers, footers, site-wide popups).
If you are creating a one-page app, you should focus on grouping your elements on Day 6, and learn how to hide/show groups of elements of your app based on where the user navigates.
Examples for pages many apps might need include:
- A homepage (where most users will land whether logged in or out)
- Pages your different users might see (marketplace, search, dashboards, etc.)
- Special pages displaying information entirely for one data type (user profile, articles of content, individual items in a marketplace.)*
- Admin portals or pages for users with particular permissions
- Reusable pages/pop-ups (logins, places to enter data into inputs)
Don't forget to visit the Styles tab to begin adjusting your app-wide style setting for elements that you will be creating soon.
*Did you know? You can set a page’s "Type of Content" to be a data type. You use this when you want to generate dynamic content on that page based on your database. Examples of pages that use this include: a Restaurant profile in a food review app, User profiles on a social networking site, and an individual Item page in a marketplace. We’ll touch on element content tomorrow.
Day 6: Design your elements & set up your integrations.
Time required: A morning, afternoon, and evening, but less for every repeating group you have.
In the Design tab, you can create buttons, links, images, text input elements and more on your pages. In the Responsive editor, you can check to see how your app appears on various screen sizes, and create "hiding rules" to determine which elements appear on smaller screens.
Three other key things you should know about elements are:
- Dynamic Content: When you click “Insert dynamic data,” you can pull content from your database to display when the app is live. This is essential when building complex web apps like marketplaces and internal tools.
- Conditionals: You can create conditional rules to change individual elements (for instance, hiding the login/signup button on your site when a user is logged in).
- Groups and Repeating Groups: For any app that makes use of lists of things (movies, marketplace store items, comment threads, etc.), Bubble's repeating group element is the most important and easiest way to generate dynamic content on your pages.
RELATED: Learn how to build web apps like Facebook, Airbnb, and Twitter on Bubble.
You can design in Bubble from scratch, import a template, or try our design import from Figma feature. With Figma, you can transfer your mockup into Bubble with corresponding elements that are ready to be connected to workflows.
Now’s also the time to explore additional plugins and integrations if you need custom elements like a Zoom video or to connect to external APIs, like a Stripe API to do payment workflows (in tomorrow’s steps). Find what you need and install them with a click in Bubble’s Plugin tab, then set them up with any necessary key information.
Day 7: Link it all together with workflows.
Time required: 3+ hours depending on how many pages, elements, and actions you have, so get into the flow.
Workflows are powerful ways to turn your app from a basic design to a working product. Building workflows will help you connect your data to your design and make your app fully functional!
Click on individual elements to “Start/edit workflow” or navigate to the Workflow tab and build out what you want your elements to do. You can, for example:
- Make your buttons clickable and specify what they do (e.g. sign a user up, log them in, log out, go to a page, etc.)
- Navigate to internal pages or change how groups of elements appear on your page (hiding, showing, changing colors).
- Send users emails based on their actions
- Set up and receive payments from users
- Create new entries in your database from input elements around your app
- Run any APIs or integrations you've set up
This step can take a bit of time and care as you are connecting your design to your data. But once you're done, you're almost done building a web app with no code!
Day 8: Add privacy rules.
Time required: ~30 minutes, around the time it takes to set up a VPN.
Web apps need custom permissions because you may want different users to see different things. By default, anyone (logged in or out) can see all data types and pages of your app, so go to the Data tab and click Privacy to set up some privacy rules in your app for your various data types.
Day 9: Test your app & debug any issues.
Time required: <90 minutes, hopefully; ask a friend to help!
Test mode allows you to preview your app before you publish it. Try out your app in run mode and see if it behaves as you expect. If you noticed something wrong, Bubble comes with a handy debug mode and issue checker in the editor. You should also go back to the editor to see if your elements, workflows, and privacy rules are working as intended.
If you need help, visit our Support Center or ask on our forums.
Day 10: Launch your app!
Time required: <5 seconds in one click.
When you are ready to deploy your app in Bubble, you can upgrade to one of our paid plans. Paid plans come with the ability to connect with any domain buying service to give yourself a nice custom domain, more analytics and more capacity. If you just wanted to learn how to create an app,
There you have it! You have now created a web app without code.
Day 11: What’s next?
Now that you’ve jumped into the world of web app development, there’s a lot you can do. Adjusting to user feedback and iterating after your app is live is easy in Bubble. You can update your live version at any point and create saved versions to rollback to if needed (Bubble also automatically saves versions of your app). You know how to develop an app now, but user feedback is always a valuable learning tool.
Bubble is designed to help you build web apps faster and more affordably, without relying on expensive engineering resources. Getting your idea out into the world with no code is no problem, if you're building on Bubble.
About Bubble
Bubble is a leader in the no-code movement. Bubble offers a powerful point-and-click web editor and cloud hosting platform that allows users to build fully customizable web applications and workflows, ranging from simple prototypes to complex marketplaces, SaaS products, and more. Millions of users are building and launching businesses on Bubble - many have gone on to participate in top accelerator programs, such as Y Combinator, or raise $365M in venture funding. Bubble is more than just a product. We are a strong community of builders and entrepreneurs that are united by the belief that everyone should be able to create technology.
