{% embed url="https://www.youtube.com/playlist?list=PL4vVqpngzeT4Bfs_D25xNi_qNMY99R928" %} 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.
- Visit Webstudio and click on the "start building" or "sign in" button.
- Create an account using either Google or Github.
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.
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.
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.
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."
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.
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.
- 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