Frontity Tutorial
  • 👋Welcome
  • ✔️Checking your progress
  • 1️⃣ Creating a custom theme
    • Create a Frontity Project
    • Create a Theme Package
    • Modify the <Root> component
    • Connect the <Root> component to the state
  • 2️⃣ Adding a menu
    • Use the <Link> component
  • 3️⃣ Displaying posts
    • Understanding the Frontity state
    • Display the list of posts
    • Display the post content
    • Display posts and pages separately
    • Formatting the date
  • 4️⃣ Adding styling
    • Global styles
    • Styled components
    • Styling the links
    • Styling the post info
    • Add dynamic styling
  • 5️⃣ Adding behaviour
    • Use 'state' and 'actions'
    • Add pagination
  • 6️⃣ Custom Post Types
    • Add support for Custom Post Types
  • 7️⃣ Finishing touches
    • Add a <Loading> component
    • Add a 404 page
    • Use the <html2react> component
    • SEO and head tags
    • Other things to do
  • 8️⃣ Deploying the project
    • Deploy to Vercel
  • 9️⃣ Next Steps
    • Learning resources
    • Getting help and support
    • Contributing to Frontity
Powered by GitBook
On this page

Checking your progress

PreviousWelcomeNext1️⃣ Creating a custom theme

Last updated 2 years ago

We wanted to make the learning experience as straightforward and frictionless as possible for you, so we've included a way for you to check that your version of the project is correct at each and every stage of the tutorial as you work through it.

We've already drawn your attention to the finished project on CodeSandBox, but the final version of the code is not necessarily the best resource to refer to if at any particular stage your code isn't working as expected, or if you're getting errors in the terminal or in the browser console.

So, for each step in this tutorial we have created a commit in with just the changes made in that step.

If you get stuck at any point then you can compare your code at the relevant stage to .

To view the differences () at that stage you can click the link as highlighted in the screengrab below:

A tagged commit on GitHub

In case you're not familiar with viewing diffs in a repo, you'll see something like this:

Lines with a 🔴 red background marked with a minus sign ➖ are removed at that step.

Lines with a 🟢 green background marked with a plus sign ➕ are added at that step.

Sometimes lines are newly added or totally removed, but quite often an added line is a modified version of the removed line. For example, in the screengrab above, line 2 and line 8 are new but all other added lines are a modified replacement for the removed line above it.

You can also download the code completed up to a particular step by using the zip or tar.gz links for that tagged commit.

If you are on a tag page you can compare the changes between that step and any other arbitrarily selected step by using the 'Compare' button.

At the end of each lesson (and sometimes within a lesson) you will see a box like this one with a link going directly to the commit that has the changes in that lesson (or that part of the lesson):

Viewing the diffs in a commit on GitHub
Download links for a tagged commit on GitHub
The 'Compare' button allows you to compare this step with any other
Check your code at the end of each step.
✔️
this repo
the tagged commits in the repo
diffs