From your first site to a pro: a learning path

This TeleportHQ learning path takes you from your first published site to building data-driven sites, web apps and online stores with a team. It has eight stages. Each stage has a goal, three to six articles to read in order, and a sign that you're ready for the next stage. Go in order, or jump to the stage you need.

How to use this TeleportHQ learning path#

• Start with the map. How TeleportHQ fits together shows where everything is, so the articles in this path make sense.
• Learn while you build. Quests, in the editor's bottom toolbar, walk you through real tasks, such as adding a form or publishing, and earn your workspace AI tokens. See What are Quests, and how do they earn you AI tokens?.
• Ask as you go. Ask the AI Assistant in the editor a question such as "How do I connect a custom domain?" and it answers from this help center. See How to ask the AI Assistant how to do something.
• Know which stages change your project. Stages 1, 2, 3 and 5 keep a website a website. Stages 4, 6 and 7 add features that turn a website into a web app. See What's the difference between a website and a web app?.

Stage 1: Your first TeleportHQ site in an afternoon#

Goal: a real site online, made with AI or a template, with your own texts and pictures.

1. How to create a TeleportHQ account
2. How to create your first website in TeleportHQ (with AI)
3. How to start a project from a template (instead of AI)
4. How to add and format text
5. How to add and replace images
6. How to publish your site

You're ready for the next stage when your site is online at its TeleportHQ address, and you can change a text, publish again and see the change on the live site.

Stage 2: Make your TeleportHQ site yours#

Goal: a site with your own colors, fonts and layout, that looks right on a phone and moves the way you like.

1. What is the Design Language panel?
2. How the style panel works (and where values come from)
3. How layout works: rows, columns and grids
4. How to make your site look good on phones and tablets
5. How to add ready-made sections
6. Which animation options does TeleportHQ have?

You're ready for the next stage when you change a color once and every element that uses it follows, you add a ready-made section and restyle it, and every page looks right in the Mobile view.

Stage 3: Grow your TeleportHQ site#

Goal: a site people can find, write to and reach on your own address, and a way to see who visits.

1. How to set a page's title and description for Google
2. How to set up your sitemap, robots.txt and llms.txt
3. How to create a form
4. How to see who visits your site (Analytics)
5. How to connect your own domain
6. How to make your site available in several languages

You're ready for the next stage when every page has its own title and description, a form sends you messages, Analytics shows your visits, and your site opens on your own domain.

Each extra language needs a language slot, which a Pro or Premium workspace can buy.

Stage 4: Publish content with the TeleportHQ Blog and Help Center#

Goal: posts or help articles that you write, organize and import without rebuilding pages.

1. How to add a blog to your site
2. How to write and publish a blog post
3. How to design the blog list and post pages
4. How to add a help center to your site
5. How to import Markdown files into your blog or help center

You're ready for the next stage when a new post shows on your live site without another publish, and you can bring in a folder of Markdown files as articles.

The Blog and the Help Center turn a website into a web app. TeleportHQ asks you first.

Stage 5: Show data on your TeleportHQ pages#

Goal: pages that fill themselves from a table, with a page for each item.

1. What are data sources, and which ones can I connect?
2. How to set up the built-in TeleportHQ database
3. How to show a list of items (List / Array Mapper)
4. How to create a page for each item (details pages)
5. How to show or hide elements based on a condition
6. How to store and use values with States

You're ready for the next stage when a list on your page fills itself from a table, each item opens its own page, and an element shows or hides when a value changes.

Everything in this stage keeps a website a website, the TeleportHQ database included.

Stage 6: Build a TeleportHQ web app#

Goal: a site where visitors sign in, buttons and forms do real work, and you manage the data from a back office.

1. What is a web app in TeleportHQ?
2. How to add sign-up and login to your site
3. What are workflows?
4. How to run a workflow when a button is clicked
5. What is the admin panel?
6. How to add an AI chatbot to your web app

You're ready for the next stage when visitors can sign up and log in, a button runs a workflow, and someone with the admin role manages your data at /admin/dashboard on the live site.

A web app needs a Web App slot to stay online after 7 days. Trial and Premium workspaces include 1. See Why does my web app need a slot, and what is the 7-day window?.

Stage 7: Open a TeleportHQ online store#

Goal: a store that takes real payments, with products, a checkout and orders you can ship.

1. How to create an online store with TeleportHQ
2. How to accept payments with Stripe or PayPal
3. How to add a product
4. How to test payments before going live
5. What shoppers see: cart, favorites and checkout
6. How to find and manage orders

You're ready for the next stage when a test order goes through checkout, shows up in Orders, and you can mark it shipped.

Stage 8: Work as a team and ship like a pro#

Goal: teammates with the right roles, changes tested before they go live, a clean site and your code in your hands.

1. How to invite people to your workspace (and pick each person's role)
2. How to test changes on a staging site before going live
3. How to see and manage your deployments
4. How to find and fix broken links on your site
5. How to add code to every page (head and body)
6. How to download your site as code (React, Next.js, Vue, HTML and more)

You've finished the path when your teammates edit with the right roles, you try every change on Staging before it goes live, the Issues window has nothing to fix, and you know how to put an earlier version of your site back.

Good to know#

• A trial workspace holds 1 project. Pro and Premium hold as many as you like. To try stages 4, 6 and 7 without changing your first website, use a second project on a paid plan. See How many projects can I have?.
• Code download needs Pro or Premium, and works for websites only. See Can I download my site's code?.
• Words you don't know are explained in the TeleportHQ glossary.