Best tools for building a startup without code: Carrd vs Webflow vs Bubble

[Music] if you want to be a start-up founder then your ultimate goal is to get here which is the front page of producthunt this is a site if you haven't heard of it that really is where most of the cool exciting software gets launched on the internet today and so we're gonna take a look at what you need to do to end up here if you are a founder with an idea that you want to test out but you're not exactly sure how to build it and let's say you don't know how to code either so we're gonna look today at three of the best in my opinion and some of the most popular tools to build startups and we're going to talk about when to use which because we have three candidates here that are all really great at doing one particular thing there is card which is a great drag-and-drop builder for static web pages with some dynamic functionality we have web flow which can actually function as a makeshift database and input and accept two different data and then bubble which is the most powerful of the three but does not have as great of design capabilities but before we get through all these different tools and talk about which use case makes the most sense depending on what your idea is let's go back to the beginning and start back at product ton so the first thing that you're going to notice if you scroll through the front page of producthunt is that startups here especially if their software can be put into about three different categories so we're gonna start out with the most basic which is just an upcoming landing page if you click on one of these tools you'll see here that essentially you're just getting a landing page with some copy and a form and the whole goal here is if you're a really early-stage company you just put some text here you're trying to get someone to subscribe and learn more about your idea to test it out and then all you want to do is get some info now these pages can look a little bit different depending on what your goal is this could be a pre-order page for example if it's a product or service or it could just be asking for your email so let's go back now because that is just one example the second example that you're going to see is something that's a little bit more complex we can classify this second category even though it's a little bit more loose as content or curation websites so here's a good example here this one called Phantom buster so it calls itself a marketplace and if you scroll through some of the screen shots you can see here that it's essentially giving you a list a curated list of some of the best no code api's let's click into a related product also about api's you'll see here that this is essentially just taking content and curating it now everything from a blog to a stack website which have been pretty popular recently use this really basic framework which is we take collects data potentially from our users or just from a set of curators and we display them on a website and so that is what we're going to be looking into as our second category curation websites and then third you have your full fledge software so you know for example this software here called slides is a full-fledged SAS software platform meaning it's software as-a-service you go ahead and you create an account and the actual software here is helping you create a new kind of PowerPoint for a pitch deck and it's very different than a landing page or a Content site because you're actually interacting with a lot of different dated materials this is displaying data in a really cool way and that's its whole value prop there with that said we really just have a good idea of really the broad category that can fit into this anything that requires something like a user to log in and some really complex functionality that's usually a full-fledged software product so we have something like slides we have something like fandom Buster and we have something like lifetime deals all three different versions of product from the most early stage to the most advanced so those are really three loose categories and we're going to go through why each of these tools can really fall into one of those categories but there will be some crossover and so a lot of what is really helpful here looking at this chart I just spun up is what you need to display to a user and what your main goal of testing this idea is so let's start out with card card-- is really a great tool for displaying static content and by that I mean just anything that's on a website that you can see click on interact with lightly but you can't login you can't really play around with you can't customize because the data is mostly static but what a card site is great for is that you can submit dynamic data so dynamic is something that changes static something that does not and what we're trying to get out here is that your idea if it needs to really just collect feedback collect signups even collect payments as its main functionality as its main goal card is perfect for this use case now if you need something that's a little bit more dynamic you can move toward web flow and bubble which we'll talk about in a bit but the most important concept to realize this early on is if you have a startup idea you don't necessarily need to pick just one of these categories ideally you would go through all three or maybe two where you'd start out with a landing page to collect some information and then build it out to something a little bit more complex maybe even a separate project that is displaying content related to the software that you eventually want to build the whole idea here is that you should gradually be building an audience around your idea so that you can get support to get ideas get feedback so that your idea ends up being actually successful instead of the thousands of startup ideas that end up in the graveyard that being said let's dive into card a little bit so you can really see what I'm talking about here so we're inside a new project on card Co remember it's with two R's and all I did was I used one of their templates to create a very very basic site so if you ever use something like square space or Wix you should be fairly familiar with how this type of drag-and-drop editor works where all you really do is you have a tab here where you can update and edit what gets displayed here on the website and then you can drag things around if you want to display them in different ways one of the reasons I really love card is that the sites look great they have really nicely designs templates and if you look at this element panel here you can find almost everything you need to display a wide variety of data to folks and you can get some dynamic data back from them so if we look at the form element I believe there is already one in this page right here get notified so for this example we're just going to go through and figure out something that's an idea that's related to the restaurant industry so we're gonna start out by just gathering folks together in the restaurant industry by getting a restaurant insider newsletter together let's call it something like that so ideally when someone would click learn more it would navigate them down to this form over here or we could just get rid of all these different sections but the main point of this website is to collect the data from a user one of the things I really like about card is that right out of the box you have some great integrations so this is just a signup form that was generated as part of this form and already you can see that it is ready to go connected to MailChimp or one of these other options and if you aren't going to create a newsletter list and you just want something a little bit more simple like if you contact or put your name on this form I will get it then you can just create a contact form and specify your email address and then whoever fills out the form that will just go right to you and then you can reach out to them saying hey you know it looks like you signed up for this newsletter list I'm about to launch it we'd love to hop on a brief call to figure out what you really need so I can build the product for you so that's what I really like about Carden and if we go back to this comparison chart that I spun up you can see that the main feature is that a displays static content the dynamic data and the things that change on the page all come from actually submitting information so if you use a more advanced version of card you can set up story or another payment processor to collect payments and credit card info right on the site great for maybe a pre-order page but at the end of the day you're not able to get dynamic data on the website what does that mean so let's say someone submits their signup information and their profile let's say they're adding the URL of a great website that URL cannot then get pushed to be displayed on card versus a site like Twitter where you write that same information you put the URL you click post and then it's on that website to do something like that and to build a curation or content focused website we're gonna need to level up a bit and that's where a tool like web flow comes in really handy because you're able to display dynamic content and you can set up the site so that it acts more like an application a web application is really just a website that has a database a database where data is stored and then can be pulled and displayed back to the user so let's take a look at web flow and how it's able to level up and create one of these content sites using dynamic data all right so now we're in web flow and you can already see that web flows layout is a little bit more complex than cart and you'll notice that as we get tools that are more powerful there's going to be a little bit of a steeper learning curve now web flow and bubble both have really good tutorial sites out there and you can mostly play around and figure out some of the most basic stuff without having to dive into more of the advanced tools like this whole layout panel is pretty much designed for professional web designers that use this tool that really need to get everything pixel perfect for websites but using this template that I found for free on web flow we want to spin up something that's a little bit more advanced than just our first restaurant newsletter and that's a job board so let's take a look at what a job board would entail well a job board is a curation website it's taking content it's taking submissions potentially from users and then it's displaying them to everyone that goes on the page and to do this you're gonna need a database and a database can quickly get very complex and add a lot of complexity to your application so to help out with this web flow really just focuses on one type of database which is a content management system so over here you'll see this little hamburger looking stack right here and it comes pre-loaded with a bunch of blog posts and these blog posts are really just database records I can click inside and see the individual fields in the database and edit them here and there's all sorts of different stuff information inside of this one record you also have team members and features and we can create our own database collection here which then could be job postings so for this example I'm just gonna take blog posts and I'm just gonna call it job postings and we don't really have to worry too much about the individual fields but we could add a field like you know the URL to the restaurant its Yelp page the salary the experience all of those different fields because that's something that the user is going to need to interact with when they submit a form that then gets displayed on the page but here's really the major difference if we go back to web flow here in our page we see that if we click around we can get some of the normal containers let's click the Add button here we can get some of the normal containers and elements that card offers like a button your image or your video but now you have the option to actually drag in dynamic data via what's called a collection list so for example I'm gonna go ahead here and I'm going to add a collection list down here and you'll see here that because it's highlighted in purple this means that it's going to be dynamic content so all I need to do is specify that this is going to be all of our job postings and then select a layout and just like that everything that is on my CMS back-end gets displayed on the front-end which is really cool and then you know inside a web flow you can go ahead and specify for example okay this is a text block and this text is going to be inside of this collection and it can get a little bit into the weeds I'm not going to cover it in all the different details but for example I'm gonna go to this settings area here and you'll see that I can get the text itself from the job postings area and now that's all dynamic content so here's the name the date etc so this is going to be the text block here and I'm going to just drag in an image block here get the image from job postings main image and just like that we have a set of different collections and the most important piece here is that this is a dynamic database meaning okay we have all this information inside of web flow but what happens when the page is live we have less control because if we delete one of these listings it gets updated live here if a user post something it gets added here so a really good way to think about this is with dynamic data you can submit data that's then updated dynamically on the site and then display to a user a great thing about web flow as well is that it can integrate with zapier which is really a tool that functions as duct tape between your different applications that holds them together and acts as kind of a back-end database pipe system that can send dynamic data through a form that's submitted on your web flow site to the actual CMS itself so for example there's a really great tool out there called air table so we're gonna go to air table not our table that would be sketchy and what you see with air table is that it's very much like a spreadsheet website similar to Google sheets and with Google sheets and with air table you can create forms and those forms can get embedded right on a website so I don't have time to go through how this would actually work in its implementation but you can imagine a site where you take a form on air table that's hooked up to a database here you put the form on a web flow site let's say on a submit a new posting page that you create here and then you use zapier let's just type in zapier air table to web flow and there we see some integrations perfect so create a CMS item in web flow from new air table record what you do here is you would setup zapier so that when someone submits a new record a new job posting it will automatically take it and then spin it back to the CMS the very limited database that's in web flow and then it would get updated live on your site so that's a lot more functionality than you can get with a tool just like card you can create an entire curation site or even a site with some user functionality so users can submit posts and then they can look at posts they can upvote them there's a lot of things that you can do here beyond just a very poorly designed food restaurant job board all right so we're now getting into complex territory and ideally as I said before you're kind of moving in this direction from simple to more complex as you've validated your idea and really at the upper end here is bubble and bubble is going to be a tool if we click into the dashboard here bubbles a tool that is really your full fledge no code design development workflow editor so there's a full database here that handles everything from user creation to creating new data fields to creating workflows things that happen on the page and I make the distinction here in this chart that there's dynamic data and then there's dynamic app content and the real difference there is that dynamic app content means that you just have a ton more flexibility from just dealing with a database that is individual to let's say a user or to a company again going back to the examples that we saw on product time all of these real software tools involve a ton more complex functionality that you really can't get with just a basic content site so let's just look very briefly at what bubble does and again you're going to get much more of a steep learning curve using a tool like bubble then a tool like card which is why it's really helpful to start out and kind of work your way up so let's say here in our bubble application that we're now building software for restaurants to help them manage different things that need to get done in the restaurant so you know your very basic to-do app but for a restaurant and you know in the concepts this a very basic example that we're walking through here you arrived that this was a software tool that someone was willing to pay for because you created that curation site and you heard from users and your audience members that hey we actually need something like this so you decided to build it that's where bubble would come in so the first thing you see here is there's a sign-up button and just like web flow and card that's just a button element that you drag out and that's way too big of a button but that's a normal sized button and you know just the fact that you're just dragging and dropping things out on a page is one of the disadvantages with bubble you know you're you're not going to get that tight of design you could see the templates that I used in web flow and card look a lot nicer and so you're really just trading off some flexibility for the actual nice high tuned design that you get with us other programs but it's worth it when you see the stuff you can actually do so for example this sign up button here let's say that we want to sign up a user there's a template here a sign up login form that I can drag out and you'll notice that these input fields have a ton of different options on them and when I go to this sign up button there's a option to start edit workflow when I click on this I get taken to the workflow page and there's a lot here because we've just added that signup functionality and this is something that we can't do it's a tool like a web flow this is unique to bubble because we are able to create individual data per user and have users sign in log in and track things based on them so you'll notice that when this button is clicked we're going to sign the user up taking their email and password and then we can create other fields so let's create a new field and we'll just call this restaurant ooh can't type restaurant name field type is text and we can create an input form so the input form will just say here is going to be the value of the reset password value and then we can change it later on but what you're seeing here is that if we actually create this site and go to the preview tab that we have login functionality in our database here under data datatypes with user we're going to have a full fledge user with all these different fields saved to our database so then let's say you have a user logged in again we're really just scratching the surface here there's a ton that you need to learn if you're actually going to use bubble but you'll recognize repeating group because it's really just another way of saying display that CMS content that we saw in web flow the collection list is equal to a repeating group here so what type of content do we want to display well we'll go to the data tab and we'll create a new type of data and we will just call that a restaurant to do all right and that to do is going to have really just a name and text and then done which is just a yes/no question and just like that we can go ahead and display okay all of let's say you know we've signed up a user we've done some basic things well now we can do is we can go ahead and display inside of these repeating groups the dynamic data first we need to specify what type of content in here so this is going to be a restaurant to do and the data source is we're just going to search our entire database for restaurant two dues and we'll just sort by create date descending here and now you can see that we if we actually click into the text we can say okay display very similar to what we did with web flow display the name of the current restaurant to do and over here we can then do a little bit more advanced work which is a check box and under the label I'll just save done and we can make the preset status dynamic and really all we want to know is if it's the restaurant to do's done yes or no and then the user could have the ability later on to click this checkbox and update that data so you're beginning to see the makings of a web application with fully formed workflows so for example let's just call this delete or create I can hit start edit workflow and now have a ton of different options here so in this workflow panel you can do almost everything including connect to third-party api's display toggle reset data install payment actions with stripe here what we're going to want to do is delete a thing so we're just going to delete the current cells restaurant to do now we're just going to go to our data tab really quick and we're just going to go to the app data itself all restaurant to do is obviously have none so we're just gonna create one it's not done and this thing needs to be fixed fridge all right not the most creative but we can work with it so we have something in our database now we can go back to our design field we see all this stuff here we hit preview and you'll notice our site doesn't look great but we see here this thing that needs fixed is the fridge done delete boom just like that we have a web app that is working with a database we go back to our app data and if we refresh here we should see that to do is no longer here because we were actually able to delete it on the front end so going back to this we can see why all these different tools are needed for different purposes and the trade-offs as you move up with more complex applications that can do more complex things so again you're going to get some trade-offs with design you're going to get great design and super easy to use down here and as you move up in complexity and need and because these tools are so different it's really important that you start out at the right place so I see way too many startup founders that dive directly into bubble or directly into web flow when really they should have started out with the card site I've also seen the inverse where someone starts out with just a card site and then you know they're maybe about 80% done ready to launch and they realize you know I really needed that dynamic content so it's super important as a start-up founder to take a look at your idea figure out you know what's the goal where where can you put this stuff online these ideas and get them tested out accurately do you need something that actually functions like an application like web flow do you need a full-fledged software tool to test this out or can you start out with just a very basic static content page and then work your way up but all three tools are awesome so no matter where you start I would recommend starting with one of these three and please let me know in the comments if you find any other really cool tools out there for building apps without code it's something I'm super interested in and thanks for watching [Music]

Channel: Brent Summers

Views: 58,198

Rating: 4.9304667 out of 5

Keywords: startup, bubble, webflow, carrd, no code, code free, build app, build site

Id: 8di3DqM8MP8

Length: 26min 35sec (1595 seconds)

Published: Tue May 21 2019