2025 Toddle Beginners Guide - Build apps without code

Описание: In this 2025 edition of the Beginners Guide, you will learn the fundamentals of the Nordcraft (formerly Toddle) visual development platform and gain the knowledge to build your own web apps.

Over 8+ hours, we cover :

1) What Nordcraft is, what it isn't and why you should use it. (2:14)
2) The core fundamentals including laying out an app page design. (31:48)
3) The steps needed to build out a simple CRM app. We also cover the steps to integrate Xano as a back-end database and API. (3:53:48)

Table of Contents

What is Nordcraft?
Nordcraft vs full-stack dev platforms (16:45)
No-code vs visual development (24:00)
Benefits of Nordcraft vs other platforms (26:00)
Nordcraft pricing plans explained (29:23)

Layout fundamentals
Choosing a layout design (31:56)
Creating a new toddle project (32:51)
Deleting elements (33:42)
Div containers (34:39)
Sizing containers (35:03)
Consideration for the main containers (35:47)
Adding elements (37:23)
Positioning elements within their container (38:27)
Intro to Flexbox (40:25)
Setting colors (42:10)
Setting a flex width (43:10)
Running in the editor (45:13)
Previewing in a browser tab (45:42)
Header & main content area (46:17)
Creating space with padding (52:23)
Gap spacing (53:46)
Laying out the header (54:47)
Position containers using space-between (57:03)
Adding a circular avatar image (1:00:10)
Adding text using span (1:03:56)
Adding SVGs for icons (1:07:35)
Wrapping elements in a new container (1:09:00)
Use border to add a separator (1:10:41)
Naming & identifying elements (1:14:02)
Intro to responsive layouts (1:19:53)
Setting minimum width (1:21:41)
Adding a responsive breakpoint (1:24:00)
Navigation sidebar layout (1:26:33)
Navigation menus (1:29:04)
Menu options (1:32:56)
Sidebar responsive breakpoints (1:39:20)
Repeating elements (1:44:08)
Intro to the formula editor (1:45:33)
Version control (1:54:30)
Updating project info (1:55:18)
Branches (1:56:03)
Publishing a branch (1:57:00)
Creating a branch (1:58:12)
Setting the color style (2:00:33)
Style inheritance (2:03:49)
Navigation options (2:06:47)
Creating a variable (2:07:43)
Using array for a list of options (2:08:32)
Using show/hide (2:12:06)
Copying formulas (2:14:52)
Using an array filter (2:18:35)
Dark/light mode toggle (2:23:43)
Style classes (2:30:01)
Intro to events and workflows (2:33:45)
Conditional workflow logic using Switch (2:43:06)
Implementing dark/light mode colors (2:46:14)
Sizing the editor canvas (2:51:22)
Laying out the main content (2:53:16)
Wrapping content (3:09:03)
Building a responsive dashboard layout (3:15:38)
Scrolling overflow content (3:38:39)
Responsive layout using flex columns (3:42:23)

Building a simple CRM
Moving content to a new app page (3:55:11)
Componentising the app (4:00:24)
Extracting the sidebar into a component (4:01:32)
How components work (4:03:21)
Pass data into a component via attributes (4:04:02)
Pass data out of a component via events (4:14:12)
Extracting the header as a component (4:20:45)
Extracting a content manager component (4:20:29)
Separation of concerns with the sidebar component (4:23:21)
Respond to option selection event from the sidebar (4:26:00)
Content Manager component (4:39:30)
Issues with using component attributes (4:37:10)
Introducing Context (4:38:29)
When to use attributes & when to use context (4:45:17)
Using URL paths for internal app navigation (4:51:28)
Optimising the use of variables (4:59:39)
Project formulas (instead of variables for static data) (5:02:16)
Creating our back-end with Xano (5:13:29)
Building our database tables (5:15:55)
APIs for our app back-end (5:24:39)
Create a log-in page for user authentication (5:27:08)
Authentication API in Xano (5:35:14)
Data binding (5:36:04)
Using Services to simplify calling back-end APIs (5:39:55)
Managing authentication tokens (5:45:37)
Calling an API (5:48:32)
Proxied API calls (5:50:43)
Getting logged-in user info (5:53:22)
Setting themes dynamically (6:05:34)
Using tables to display data lists (6:07:43)
Theme editor (6:27:50)
Themed button component (6:34:36)
Theming the table (6:45:10)
Setting a different font (6:53:23)
Building a company input form (6:55:06)
Right-hand floating container for the form (7:01:22)
Calling the Xano API to save a new company (7:08:56)
Refreshing data (7:23:10)
Editing company records (7:34:07)
Lifecycle events (7:45:49)
Conditional logic in formulas (8:01:02)
Calling the Xano API to update a company (8:03:01)
Deleting a company record (8:13:22)
Sorting data in Xano (8:20:19)
Demoing the contacts section (8:22:34)
Introducing packages and installing & utilising a dropdown component (8:24:00)
Outro (8:49:54)