๐ŸŽ“Building your first site

In this video overview, we cover the basics of getting started with your first Webstudio project.

๐Ÿš€ Signup to Webstudio

  1. Visit Webstudio and click on the "start building" or "sign in" button.

  2. Create an account using either Google or Github.

๐ŸŒŸ Create a New Project or Import a Template

Once logged in, you'll be taken to your dashboard. Here, you can view your existing projects and have the option to create a new blank project or start with a premade template.

๐Ÿ–ฅ Understand the Builder Interface

Understanding the interface is key to effectively using any new tool. Familiarize yourself with Webstudio's builder โ€“ the heart of your website creation. The Components panel houses elements like text, images, links, and more, which you can drag onto your canvas. For an in-depth guide, read our Intro to the Anatomy of the Webstudio Builder.

๐ŸŽจ Use Design Tokens

Webstudio utilizes Design Tokens for styling, offering consistency across platforms. These reusable styles help avoid naming conflicts and dependency issues common in large projects. Learn more about Design Tokens in WebStudio.

๐Ÿ”ง Experiment With Components

Components are the building blocks of your website. Experiment with basic ones like Text and Image, or delve into advanced components like HTML Embeds or Radix. Customize each componentโ€™s properties under "Settings."

๐ŸŒ Preview & Publish

Once you're satisfied with your creation, use the 'Preview' button at the top right corner before publishing it live on the internet! For more details, check our Publishing and Custom Domains Guide.

๐Ÿ’ฌ Join the Community

Learning a new tool takes time, so don't be discouraged by initial challenges. Keep exploring, experimenting, and join the Webstudio community for support and inspiration.

Last updated