Intro to WeWeb

Welcome to WeWeb. 0:00 WeWeb is a web application builder that lets you build data-driven, 0:01 interactive websites Like CRMs, 0:05 booking portals, and much, much more. 0:08 So, WeWeb AI is now generating the page based on your prompt, 0:11 and once generated, it's easy to edit the generations. 0:16 To do so, you can simply prompt the AI exactly what it is you want to change, 0:19 and if there's a particular element you want the AI to focus 0:23 on, then you can click on the element to pass it in as context. 0:25 Then simply submit your prompt and the AI will make the changes. 0:29 Or if you want to make manual adjustments at any point you can switch to edit mode. 0:33 Here you have access to the properties of any element on your page 0:38 and you can change whatever styling you'd like So you could do things like changing 0:42 the color of icons, 0:46 changing the 0:49 content of text or reordering elements in the layout tree. 0:49 And if you wish you can manually add new elements to the page at any time. 0:53 To do so, simply open the Add panel, and from here, 0:58 drag and drop any element you'd like onto the page. 1:01 And then, customize the element however you'd like 1:05 When you're ready 1:11 to test your site, you can enter Preview mode. 1:12 Here, you'll see a live preview of your app, 1:15 where you can test your app as if you were a real user. 1:18 Now, in order to cater for the logic of the page, the AI will 1:23 have created variables to store data, like this list of marketing tasks. 1:26 This data can then be bound to elements in the interface, and the interface will 1:31 then automatically display the data stored in that variable. 1:35 For example, in this case, our list is bound to the marketing 1:39 tasks variable, meaning whenever we add a new task to the variable, an element 1:42 will automatically be created displaying the respective data of that new task. 1:46 And then also to cater for the logic of the page 1:52 the AI will have created workflows for when a user interacts with 1:54 the interface when they click on a button or submit a form. Here 1:57 the AI has created a workflow on the add task button so that when the user clicks 2:01 the button, the pop-up to add a new task will first appear. 2:06 And then when a new task has been created, we add it to our marketing 2:09 tasks variable so it's displayed in our interface. 2:13 And we can test all of this in preview mode to make sure it works as expected. 2:16 So when I click the new task button, I'm presented with the task creation pop-up. 2:20 And so when I now create a new task, it gets added to our 2:26 marketing tasks variable and is thus displayed in the interface. 2:28 Now to turn your project into a production 2:33 ready full stack application, you need a backend. 2:35 So far, the AI will have used variables to store information, 2:39 in this example, the marketing tasks and events. 2:43 But there's a limitation. 2:46 These variables only exist while the app is running 2:48 and they're usually tied to a single user's session or device, 2:51 meaning if we refresh the page, we'll lose 2:54 any changes made to the data in our variables. 2:57 A backend is different. 3:01 It allows you to securely store information permanently on a server. 3:02 This means the data stays safe even if the user closes their browser, 3:07 refreshes the page, or accesses your app from a different device. 3:11 To help with this, we offer a range of back-end service 3:15 integrations, all available in the plugins menu. 3:18 Finally, if you ever get stuck while you're building, check out the help 3:22 menu in the top bar. 3:25 It has a link to our documentation with extensive resources on all 3:26 of the features and elements of WeWeb, and also a link to our community, 3:30 where you can ask members of the community for tips and solutions. 3:33 If you're looking for some more guided learning, I highly recommend 3:37 checking out the WeWeb 101 section of our documentation. 3:40 There you'll find a walkthrough of all of the key features of WeWeb. 3:44 And with that said, welcome to WeWeb. 3:48 We can't wait to see what you build. 3:50

You need to sign up for Treehouse in order to set up Workspace

Sign up