Learn Frontity with the New Step-by-Step Tutorial

We’re delighted to announce Frontity's new step-by-step tutorial, a learning resource designed to guide you through the creation of a Frontity project from start to finish.

The goal of the tutorial is to provide you with a deep and solid understanding of web development with Frontity.

It can be found at tutorial.frontity.org.

What is the step-by-step tutorial?

The Frontity step-by-step tutorial is a progressive sequence of lessons that takes you from the absolute basics to a solid understanding of Frontity, how it works, and how to develop themes and other functionality with Frontity.

The tutorial is designed for those developers who are newcomers to Frontity. However, it will also be extremely useful for those who may have been developing with Frontity for a while but who feel that they lack a complete and wholistic understanding of working with Frontity, who feel that their knowledge is instead fragmented and incomplete.

Each lesson in the tutorial builds on what was learned before and so it is intended that you should work through the course in the order in which it is presented.

Upon completion of the tutorial you will have gained a comprehensive understanding of working with Frontity, thereby enabling you to approach the development of a Frontity project with confidence.

Why are we launching this tutorial?

There are many third party blog posts introducing Frontity available on the web, such as this one, this one, or this one.

Although these are great introductory posts, they usually cover little more than installing Frontity and configuring it to connect to a WordPress site as its data source.

We also have the Getting Started guide and the documentation, which help you jump straight into code and configure Frontity to your needs, but there was a need for a more comprehensive guide to learn and understand Frontity in a structured and progressive way.

The lack of such of a comprehensive guide meant that developers learned to work with Frontity in a piecemeal kind of way, checking the documentation in one situation, consulting a code sample in another, or asking in the community forum when they got stuck.

Developers therefore frequently felt a bit lost, or as though they were figuring things out as they went along rather than coding confidently with the feeling that they knew what they were doing.

The goal of this tutorial is to help developers who are working with Frontity to have that confidence and to be self-sufficient as they work on their projects, by providing them with a solid understanding of what they are doing, and why.

What can you expect from it?

You will learn to work with Frontity by building a fully working Frontity theme, starting from scratch.

While pre-built themes are available, such as the bundled mars-theme and twentytwenty-theme, or a variety of third party themes, the best way to develop a solid understanding of Frontity is by building a theme from the ground up.

Many developers have learned to work with Frontity in an ad-hoc and experimental way by hacking one of these pre-built themes.

The tutorial teaches and reinforces best practice by showing you how to build a theme from scratch.

Starting from the very basics by installing Frontity and creating a theme package, the tutorial goes on to create a fully-featured and functional theme, that is also pleasingly styled.

Along the way a number of different topics are covered, from listing posts, to displaying posts and pages, to styling the project and adding interactivity. The tutorial even shows how to make a Frontity project SEO friendly, refines the theme with some finishing touches, and demonstrates how to use Custom Post Types.

As you work through the course you can compare your code at each stage with the corresponding commit in this repo, so you'll always be sure that you're on the right track.

Theoretical topics are also covered, so that you will develop an understanding of the structure of Frontity's "state" and the prescribed method of accessing data in that state.

The finished project is then deployed to a live server so that you can not only show off your achievement to the world, but also use it as the basis for your own project. Yes indeed, the project developed during the tutorial can be considered a "starter theme" that you can go on to build upon and make your own.

A preview of the finished site and the final version of the code can be seen in this CodeSandbox.

Ready to get started? Great! Check out the new tutorial at tutorial.frontity.org and do let us know what you think of it.

Frontity's step-by-step tutorial docs is housed on GitHub - you can suggest changes and improvements at any time by following these contributing guidelines.