In this second lesson we will look closer at building layouts using the visual nodes.
You already have a simple page but not much content. At the end of this lesson you will have built a card to display items in your task manager app.
During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the Task label.
If you get stuck you can get a hint by clicking the card in the timeline.
Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.
At the top of the editor you have the Path Dropdown. It's similar to the URL-bar in a browser and is used to jump directly to a specific page of your app while you develop.
In this lesson we will be working on the page called Task Page. Let's jump to it.
At the top of the editor you have the Path Dropdown. It's similar to the URL-bar in a browser and is used to jump directly to a specific page of your app while you develop.
In this lesson we will be working on the page called Task Page. Let's jump to it.
The Group node is the most basic visual element and is used to structure layouts, group content, and create visual shapes.
If you are familiar with HTML code, a Group is similar to a <div>-tag in HTML.
You can nest visual elements as children of a Group node to start creating more advanced layouts.
This is a pattern you will see over and over again, so let's use it to build the card.
Open the Node Picker by clicking the plus icon in the Topbar, or right click on an empty space in the Node Canvas.
You can find the Group node in the UI Elements category.
Select the Group node and change its name by pressing the enter key. You can also double click the node title in the Property Panel, or click the edit icon as shown in the video.
You open the Color Style list by clicking the text in the background color input.
By default Group nodes are set to a dimension mode with an explicit width and height of 100%. This means that they will take up all available space in both directions.
Often we want a Group's height to resize to the height of the children inside of it. We can achieve that with the dimension mode Explicit width & content height.
Select the Group to bring up the Property Panel. Find the Corner Radius property and set it to 4px.
Noodl comes with different nodes for displaying images and video. They have a source property where you set the path to the file you want to show.
Clicking the Source input will show all available images and videos that are uploaded to the project. You can also input an external URL to a media file.
You can add images and videos to the project by simply dragging and dropping them into the editor. In this lesson we already added some images for you to use.
Open the Node Picker by clicking the plus icon in the Topbar, or right click on an empty space in the Node Canvas.
You can search for the Image node in the Node Picker's search field, or find it in the UI Elements category.
Click the source property to see a list of available images in the project.
Click the Image node to open its Property Panel and scroll down to the dimension mode property. Hover over the different options to see what they are called.
Click the Image node to open its Property Panel and scroll to the size property. Set the width and height to 80px.
Open the Node Picker by clicking the plus icon in the Topbar, or right click on an empty space in the Node Canvas.
You can search for the Group node in the Node Picker's search field, or find it in the UI Elements category.
Open the Node Picker by clicking the plus icon in the Topbar, or right click on an empty space in the Node Canvas.
You can search for the Text node in the Node Picker's search field, or find it in the UI Elements category.
Use Ctrl/Cmd + C to copy a selected node, and Ctrl/Cmd + V to paste it.
Select the first Text node and change its name by pressing the enter key. You can also double click the node title in the Property Panel, or click the edit icon.
Select the second or third Text node and change its name by pressing the enter key. You can also double click the node title in the Property Panel, or click the edit icon.
By default all visual nodes are stacked vertically inside of their parent node.
We can change this by changing the parent's layout direction property to Horizontal instead of Vertical
Click the Group node named Card Item to open its Property Panel. Find the layout direction property and set it to Horizontal.
Click the Image node to open its Property Panel. At the top you will find the margin settings. Set the right margin to 24px.
We can create styles for text and colors to quickly reference them and reuse them throughout our app. This can be done in every input property that deals with text or color.
Every Noodl project comes with a set of predefined styles, all of them can be modified.
You've completed this lesson, we hope you liked it!
To take your Noodl skills to the next level we recommend our next lesson on how to create lists from data.
Keep on Noodling!