# Building your first site {% embed url="" %} Webstudio 101 Playlist {% endembed %} 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](https://webstudio.is/) 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](/university/foundations/anatomy-of-the-webstudio-builder.md). ### 🎨 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](/university/foundations/design-tokens.md). ### πŸ”§ 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](/university/foundations/publishing-and-custom-domains.md). ### πŸ’¬ 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](https://wstd.us/community) for support and inspiration. ## Related * [Courses](/basics/courses.md) – In-depth community-made courses * [Intro](/basics/intro.md) – Overview of Webstudio for designers and developers * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder.md) – Deep dive into the builder interface * [Core Components](/university/core-components.md) – Learn about all available components * [Craft](/university/craft.md) – The standard for building with Webstudio --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.webstudio.is/basics/building-your-first-site.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.