# ADF Tutorials

Learn about ADF step-by-step with the tutorials listed below.
You may find it helpful to follow them in sequence because some of the
later tutorials build on knowledge introduced in the earlier ones.

The tutorials are graded as follows:

-   **Beginner:** Suitable for users with no previous knowledge of ADF.
-   **Intermediate:** For users who want to add to their knowledge of the basics.
-   **Advanced:** For experienced users who want to learn about features in depth.

## Tutorials

| Name | Level | Abstract |
| -- | -- | -- |
| [**Preparing the development environment**](preparing-environment.md) | Beginner | This tutorial explains how to get set up to use ADF so you can tackle the other tutorials. It covers the basic development environment with suggested versions for each tool, library and module. |
| [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | Learn how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This task is recommended to get started before developing your ADF application. |
| [**Creating your JavaScript application using alfresco-js-api**](creating-javascript-app-using-alfresco-js-api.md) | Basic | Learn how to create from scratch an application in JavaScript to interact with Alfresco Content Services. This task is recommended to get started before developing your JavaScript application using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. |
| [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
| [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
| [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the Login component. |
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [\`Login\` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [\`DataTable\` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the `NodesApiService` into an Angular application, to interact with your instance of Alfresco Content Services without consuming directly the REST endpoints. |
| [**Working with the Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the `AlfrescoCoreRestApi` into a JavaScript application, to interact with your instance of Alfresco Content Services without consuming directly the REST endpoints. |