🎓Building your first site

Webstudio 101 Playlist

This video series is a quick overview of the most important parts of the builder to get you up to speed.

🚀 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.