# Welcome

⚠️ **Frontity Framework** [**is not under active development anymore.**](https://frontity.org/blog/frontity-is-joining-automattic/)

**The team is now working on** [**the WordPress Interactivity API**](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)**. This unblocks the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.**

***

## Learn Frontity step-by-step

### Welcome to the Frontity step-by-step tutorial

Hi, and a very warm welcome to the Frontity step-by-step tutorial. We're thrilled that you're interested in learning Frontity.

The tutorial that you're about to embark on is a progressive sequence of lessons that will take you from first steps to mastery.

Via a practical example project it will provide you with a solid foundation in developing websites with Frontity and give you the knowledge you need to work with Frontity on your own projects. It will also arm you with the concepts and knowledge you need to better understand the other documentation resources:

* [**docs.frontity.org**](https://docs.frontity.org) - Introduction, concepts and guides
* [**api.frontity.org**](https://api.frontity.org) - API Reference

Since this is a progressive tutorial we recommend that you follow the lessons in sequence, as each lesson builds on what was learned earlier.

#### Prerequisites

Frontity is built on React. You should therefore feel comfortable working with JavaScript, and have at least some familiarity with React and also with ES6.

{% hint style="info" %}
If you need to get up to speed, or if you need a refresher, there are introductions to the basics of both [**JavaScript**](https://docs.frontity.org/guides/javascript-basics) and [**React**](https://docs.frontity.org/guides/react-basic) in the documentation. If you've worked through those guides, or if you're already comfortable with the concepts explained there, then you're good to go. 👌
{% endhint %}

An understanding of HTML and CSS is also assumed, as is a familiarity with the command line.

You will need to have [node.js](https://nodejs.org/) installed on your development machine. You will, of course, also need a web browser and a code editor/IDE.

No previous knowledge or understanding of Frontity is required. This step-by-step tutorial starts you off with the very basics.

#### The project

Our project for this step-by-step tutorial will be to build a fully working Frontity theme, starting from scratch.

{% hint style="info" %}
Frontity provides two themes to get you started, `mars-theme` and `twentytwenty`, and there are a host of third party themes on [*npmjs.com*](https://www.npmjs.com/search?q=keywords:frontity-theme) that you can install into your Frontity project.

One of these could well fit your needs, but the best way to really gain an understanding of Frontity and how it works is to build your own theme.
{% endhint %}

We'll start at ground level by installing Frontity, then go on to create a theme package which we will then develop into a fully working and functional theme.

Along the way we'll cover a number of different topics, from listing posts, to displaying posts and pages, to styling our project and adding interactivity. We'll even make our project SEO friendly, refine it with some finishing touches, and make it work with Custom Post Types.

We will be there by your side guiding you through every step, right through to ultimately deploying our finished project to a live server.

{% hint style="info" %}
👀 We'd really like you to see the project develop as you progress through the tutorial, so we're certainly not encouraging you to do this, but if you really **do** want to take a sneak peak at the finished project the final version can be seen in [this CodeSandbox](https://codesandbox.io/s/github/frontity-demos/tutorial-hello-frontity).
{% endhint %}

By the end of this tutorial you'll be a Frontity ninja! 🥷

Let's go! 👉


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.