🎓Building your first site
In this video overview we cover the basics in getting started with your first video project.
Signup to Webstudio
Visit https://webstudio.is/ and click on the "start building" or "sign in" button.
Create an account with either Google or Github
Create a new project or import a template
Once logged-in, you will be presented with your dashboard. From here you'll see an overview of existing project and the option to create a new blank project or start with a premade template.
Understand the builder Interface
The first step in using any new tool effectively is understanding its interface. Familiarize yourself with Webstudio's builder - this is where your website will come to life. The Components panel houses all available elements like text, images, links and more which you can drag onto your canvas. For an in-depth guide on the anatomy of the Webstudio builder, read our intro here.
Use Design Tokens
Instead of traditional classes, Webstudio uses Design Tokens for styling consistency across different platforms. These tokens are reusable styles that eliminate naming conflicts and external dependencies issues common in large projects using CSS classes. Learn more about Design Tokens as they form an integral part of designing on WebStudio.
Experiment With Components
Components are building blocks for your website – from basic ones like Text and Image to advanced components such as HTML Embeds or Radix components. Drag them onto your canvas and start experimenting! You can customize each component’s properties under "Settings."
Preview & Publish
Once satisfied with what you've built, preview it using the 'Preview' button at top right corner before publishing it live on the internet! We have an in-depth publishing guide here.
Join the Community
Remember that learning a new tool takes time so don't be discouraged if things seem overwhelming initially; keep exploring, experimenting and join the community.
Last updated
Was this helpful?