# Table of contents

## Basics

* [👋 Welcome](README.md)
* [🔥 Intro](basics/intro.md)
* [🎓 Building your first site](basics/building-your-first-site.md)
* [🤓 Courses](basics/courses.md)
* [🔗 Roadmap & Links](basics/roadmap-and-links.md)
* [❓ FAQs](basics/FAQ.md)

## university

* [⚛️ Foundations](university/foundations/README.md)
  * [🏠 Dashboard](university/foundations/dashboard.md)
  * [🛠️ Anatomy of the Webstudio builder](university/foundations/anatomy-of-the-webstudio-builder.md)
  * [🗺️ Navigator](university/foundations/navigator.md)
  * [📐 Layout & Flexbox](university/foundations/layout-and-flexbox.md)
  * [📐 Layout & Grid](university/foundations/css-grid.md)
  * [📱 Responsive design](university/foundations/responsive-design.md)
  * [📱 Breakpoints](university/foundations/breakpoints.md)
  * [🧱 CSS variables](university/foundations/css-variables.md)
  * [🖌️ Design tokens](university/foundations/design-tokens.md)
  * [🎨 Style panel](university/foundations/style-panel.md)
  * [🎯 States and selectors](university/foundations/states-and-selectors.md)
  * [🔡 Data variables](university/foundations/variables.md)
  * [➕ Expression editor](university/foundations/expression-editor.md)
  * [🎨 Custom classes & attributes](university/foundations/custom-classes-and-attributes.md)
  * [🔄 Transforms](university/foundations/transforms.md)
  * [🎬 Animations](university/foundations/animations.md)
  * [💾 CMS](university/foundations/cms.md)
  * [♻️ Reusability & maintainability](university/foundations/reusability.md)
  * [↔️ Copy-Paste](university/foundations/copy-paste/README.md)
    * [↔️ CSS](university/foundations/copy-paste/css.md)
    * [↔️ HTML with CSS](university/foundations/copy-paste/html-with-css.md)
    * [↔️ HTML with Tailwind](university/foundations/copy-paste/html-with-tailwind.md)
    * [↔️ Markdown](university/foundations/copy-paste/markdown.md)
    * [↔️ Webflow](university/foundations/copy-paste/webflow.md)
    * [↔️ SVG](university/foundations/copy-paste/svg.md)
    * [↔️ Referenced Images](university/foundations/copy-paste/images.md)
  * [🔍 Commands & search](university/foundations/commands-and-search.md)
  * [🗂️ Assets](university/foundations/assets.md)
  * [📚 Content Engine](university/foundations/content-engine.md)
    * [Content Engine reference](university/foundations/content-engine-reference.md)
  * [🎯 SEO settings](university/foundations/seo-settings.md)
  * [⚡ Performance](university/foundations/performance.md)
  * [⌨️ Shortcuts](university/foundations/shortcuts.md)
  * [📄 Page settings](university/foundations/page-settings.md)
  * [📄 Page templates](university/foundations/page-templates.md)
  * [⚙️ Project settings](university/foundations/project-settings.md)
  * [🌐 HTTP response headers](university/foundations/response-headers.md)
  * [🔀 Path patterns](university/foundations/path-patterns.md)
  * [🎭 Modes](university/foundations/modes.md)
  * [🔗 Share links](university/foundations/share-links.md)
  * [🌐 Publishing & custom domains](university/foundations/publishing-and-custom-domains.md)
* [🧩 Core Components](university/core-components/README.md)
  * [📦 Element](university/core-components/element.md)
  * [🔗 Link](university/core-components/link.md)
  * [🔲 Slot](university/core-components/slot.md)
  * [➖ Separator](university/core-components/separator.md)
  * [📝 Text](university/core-components/text.md)
  * [🔤 Heading](university/core-components/heading.md)
  * [📄 Paragraph](university/core-components/paragraph.md)
  * [✏️ Inline Text](university/core-components/inline-text.md)
  * [💬 Blockquote](university/core-components/blockquote.md)
  * [⚠️ Alert](university/core-components/alert.md)
  * [📄 Code Text](university/core-components/code-text.md)
  * [✍️ Form](university/core-components/form.md)
  * [✍️ Webhook Form](university/core-components/webhook-form.md)
  * [🔘 Button](university/core-components/button.md)
  * [🏷️ Label](university/core-components/label.md)
  * [📝 Input](university/core-components/input.md)
  * [📝 Text Area](university/core-components/textarea.md)
  * [📋 Select](university/core-components/select.md)
  * [☑️ Checkbox](university/core-components/checkbox.md)
  * [🔘 Radio Button](university/core-components/radio-button.md)
  * [🖼️ Image](university/core-components/image.md)
  * [🎬 Video](university/core-components/video.md)
  * [⏯️ Vimeo](university/core-components/vimeo.md)
  * [▶️ Vimeo Background Video](university/core-components/vimeo-background-video.md)
  * [▶️ YouTube](university/core-components/youtube.md)
  * [💾 Collection](university/core-components/collection.md)
  * [🪜 Content Embed](university/core-components/content-embed.md)
  * [🪜 Markdown Embed](university/core-components/markdown-embed.md)
  * [📝 Content Block](university/core-components/content-block.md)
  * [📃 List](university/core-components/list.md)
  * [⌨️ HTML Embed](university/core-components/html-embed.md)
  * [🎬 Animation Group](university/core-components/animation-group.md)
  * [Text Animation](university/core-components/text-animation.md)
  * [🎥 Video Animation](university/core-components/video-animation.md)
  * [👨‍👨‍👦‍👦 Stagger Animation](university/core-components/stagger-animation.md)
  * [🗂️ Head Slot](university/core-components/head-slot.md)
  * [🏷️ JSON-LD](university/core-components/json-ld.md)
  * [📘 XML Node](university/core-components/xml-node.md)
  * [🕐 XML Time](university/core-components/xml-time.md)
  * [🕐 Time](university/core-components/time.md)
  * [📛 Built with Webstudio](university/core-components/built-with-webstudio.md)
* [⬛ CLI](university/cli.md)
* [🤖 MCP](university/mcp.md)
* [✨ Inception](university/inception.md)
* [▫️ Radix UI Components](university/radix/README.md)
  * [Accordion](university/radix/accordion.md)
  * [Checkbox](university/radix/checkbox.md)
  * [Collapsible](university/radix/collapsible.md)
  * [Dialog](university/radix/dialog.md)
  * [Label](university/radix/label.md)
  * [Navigation Menu](university/radix/navigation-menu.md)
  * [Popover](university/radix/popover.md)
  * [Radio Group](university/radix/radio-group.md)
  * [Select](university/radix/select.md)
  * [Sheet](university/radix/sheet.md)
  * [Switch](university/radix/switch.md)
  * [Tabs](university/radix/tabs.md)
  * [Tooltip](university/radix/tooltip.md)
* [Marketplace](university/marketplace.md)
* [🤖 Webstudio AI](university/webstudio-ai.md)
* [📤 Self-Hosting](university/self-hosting/README.md)
  * [▶️ Download](university/self-hosting/download.md)
  * [▶️ Cloudflare Pages](university/self-hosting/cloudflare-pages.md)
  * [▶️ GitHub Pages](university/self-hosting/github-pages.md)
  * [▶️ Netlify](university/self-hosting/netlify.md)
  * [▶️ Vercel](university/self-hosting/vercel.md)
  * [▶️ AWS with Flightcontrol (Docker)](university/self-hosting/flightcontrol.md)
  * [▶️ Digital Ocean with Coolify (Docker)](university/self-hosting/digital-ocean-coolify.md)
  * [▶️ Hetzner with Coolify (Docker)](university/self-hosting/hetzner-coolify.md)
  * [▶️ VPS with Docker](university/self-hosting/vps-with-docker.md)
* [🧑‍🏫 How-Tos](university/how-tos/README.md)
  * [▶️ How to add icons](university/how-tos/how-to-add-icons.md)
  * [▶️ How to use custom fonts](university/how-tos/how-to-use-custom-fonts.md)
  * [▶️ How to create fluid video backgrounds with Vimeo](university/how-tos/how-to-create-fluid-video-backgrounds-with-vimeo.md)
  * [▶️ How to crop an image without cropping the original](university/how-tos/how-to-crop-an-image-with-out-cropping-the-original-image.md)
  * [▶️ How to create responsive navigation](university/how-tos/how-to-create-responsive-navigation.md)
  * [🍀 How to add a GSAP animation](university/how-tos/how-to-add-a-gsap-animation.md)
  * [▶️ How to make a custom 404 page](university/how-tos/how-to-make-a-custom-404-page.md)
  * [▶️ Build Your Own Directory Website with Airtable](university/how-tos/build-your-own-directory-website-with-airtable.md)
  * [▶️ Using filters to dynamically display content](university/how-tos/using-filters-to-dynamically-display-content.md)
* [🔗 Integrations](university/integrations/README.md)
  * [How to build a frontend for Supabase using Webstudio](university/integrations/supabase.md)
  * [How to build a frontend for Airtable using Webstudio](university/integrations/airtable-frontend.md)
  * [How to integrate a Webhook Form with Airtable](university/integrations/airtable-form-webhook.md)
  * [How to build a frontend for Baserow using Webstudio](university/integrations/baserow.md)
  * [How to build a frontend for Hygraph using Webstudio](university/integrations/hygraph.md)
  * [How to build a WordPress frontend using Webstudio (no-code builder)](university/integrations/wordpress.md)
  * [How to integrate a Notion database with Webstudio](university/integrations/notion.md)
  * [How to integrate Webhook Form with Pabbly](university/integrations/pabbly.md)
  * [How to integrate Webhook Form with Zapier](university/integrations/zapier.md)
  * [How to integrate Webhook Form with N8N](university/integrations/n8n.md)
  * [How to integrate Flotiq with Webstudio](university/integrations/flotiq.md)
* [Craft](university/craft.md)
  * [Use Craft](university/craft-guide.md)
  * [Craft changelog](university/craft-changelog.md)

## Contributing

* [Contributions](contributing/contributions.md)
* [Contributing to the Marketplace](contributing/marketplace.md)

***

* [⚠️ Errors](errors/README.md)
  * [▶️ Connecting your Hostinger Domain to Webstudio](errors/connecting-your-hostinger-domain-to-webstudio.md)
  * [🔌 Worker not found](errors/worker-not-found.md)
* [Misc](misc/README.md)
  * [📊 Account Limits](misc/account-limits.md)
  * [🆘 Webstudio Support Process](misc/webstudio-support-process.md)
  * [Fixing overflow issues](misc/fixing-overflow-issues.md)