Want to try fastn for your company's website?
Book a Demo

Basic UI

In this video, I will first show you how to utilize the `fastn packages` that are there for use. Then, we will continue our learning and understand what are `Properties` and how to use them. Later, we will use `container components`and start creating the layout of our Expander project.

Featured Components - How to use?

This Crash Course is for everyone, for the one's who want to learn how to create a components like the one we are going to create in this Crash Course. And we also respect the choice of those wanting to know **how to use** the `Featured Components` directly and rather focus on building their websites or blog-posts or create exciting UIs.
If you check the [`featured page`](https://fastn.com/featured) you will come across some amazing components. We are going to use few of them to show. For our convenience I am going to use these components in a new file `demo.ftd` and leave `index.ftd` file as it is, so that we can continue our learning there. As we did earlier, we will add a new file in our project. I have saved the file as `demo.ftd`. Now, I will apply some of the `featured components`. Here is the list of packages I have used:
You can include any such component of your own. For example, I will include the box component I created earlier.
Using a component is easier than making a sandwich. It can be done in two steps: - Add the package as a dependency in `FASTN.ftd`
In FASTN.ftd file
-- fastn.dependency: <package-name>
- Import the package in your file. Here, I am importing it in `demo.ftd`
In .ftd file
-- import: <package-name>
In the `package-name`, anything that is after the `/` is a default alias. But sometimes, the alias can be a long one, and if you want to use a component of that package, you will have to use the long name. Instead, you can give a new and shorter alias using `as` command. For example:
New alias for `doc-site`
-- import:fifthtry.github.io/doc-site as ds
Using the default alias or a new alias, you can use the `components` of the packages you have imported. These simple steps need to be done everytime you want to use a new package in your project. For example: For `doc-site` package, we have used following components: - page - h1 For `admonitions` package, we have used `info` component.
With just two steps, just like we did earlier, we can use any `fastn package` in our project.

Let's keep learning

Let's continue our learning in the `index.ftd` file and build our project step-by-step. Following is the list of the `properties` we will apply to the `container components`.


Root ftd.column
-- ftd.column:
padding.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center
Child ftd.column
-- ftd.column:
border-width.px: 4
spacing.fixed.px: 10
width: fill-container
ftd.row for Header
-- ftd.row:
width: fill-container
spacing: space-between
border-bottom-width.px: 1
padding.px: 10

UI design of webpage

Container Components

Column (top to bottom):
Column Syntax
-- ftd.column:

;; content of column goes here

-- end: ftd.column
`ftd.column` documentation: [read more](/column/)
Row (left to right):
Row Syntax
-- ftd.row:

;; content of row goes here

-- end: ftd.row
`ftd.row` documentation: [read more](/row/)
Continue with the [part 3 now](/expander/components/).