Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions

View File

@@ -0,0 +1,10 @@
---
hide_title: true
title: Horizontal List with Snapping
---
# Horizontal List with Snapping
This short build along shows how to create a Horizontal list with Cards. It will show you how to work with advanced **Scrolling** in lists.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/x0nWHv2uCHI" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

View File

@@ -0,0 +1,11 @@
---
hide_title: true
title: Build Alongs
---
# Build Alongs
One relaxed way of learning Noodl is to watch and learn from the experts. Here are a list of 'build-along' type of movies that shows in detail how to build something in Noodl. Enjoy!

View File

@@ -0,0 +1,12 @@
---
hide_title: true
title: Star Rating Component
---
# Star Rating Component
This short build along shows how to work with _animations_, _visual states_ and _component logic_ to build a visually rich star rating component.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VwgcIsclVpE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
You can import the full project [here](/library/examples/star-rating-component).

View File

@@ -0,0 +1,22 @@
---
hide_title: true
title: Custom Survey App Build Along
---
# Custom Survey App Build Along
In this three parts video series, Johan walks your through the creation of a simple Survey App. This build along mainly covers **Navigation**, **styling of components** and how to create more advanced **custom components**.
You can import the full project [here](/library/examples/survey-app).
## Part 1 - Navigation & Components
<iframe width="560" height="315" src="https://www.youtube.com/embed/ntKTCC7eEk0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Part 2 - Styling Interaction States
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/720U1pZqWJg" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Part 3 - Advanced Custom Components
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZiEddnfPrx8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

View File

@@ -0,0 +1,18 @@
---
hide_title: true
title: Task List App Build Along
---
# Task List App Build Along
In this two parts video series, Johan will walk you through how he builds a task list app. This Build Along is excellent for beginners since it will take you through all of the basic functionality of Noodl.
You can import the full project [here](/library/examples/task-list-app).
## Part 1 - UI Controls and Layout
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/TNnn0Gzj-H4" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Part 2 - Connecting to the Noodl Backend
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/HCqlSUyguiE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>