🎓Building your first site
This video series is a quick overview of the most important parts of the builder to get you up to speed.
🚀 Signup to Webstudio
Visit Webstudio and click on the "start building" or "sign in" button.
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.
Related
Courses – In-depth community-made courses
Intro – Overview of Webstudio for designers and developers
Anatomy of the Webstudio Builder – Deep dive into the builder interface
Core Components – Learn about all available components
Craft – The standard for building with Webstudio
Last updated
Was this helpful?