How to build a website with Webstudio | Webstudio Tutorial

This Webstudio tutorial that will walk you through building a landing page in Webstudio using best practices. The Webstudio tutorial starts with a blank project, uses Craft (the standard starting place), and continues to build a full landing page complete with dropdown menus, animations, accordions, and even perfect Lighthouse scores on desktop.

🧠 Prerequisite!
Watch the 101 series
https://wstd.us/101

🎨 Figma design
Credit @wblekhoa
https://www.figma.com/community/file/...

▶️ Video Chapters:
00:00:00 Intro
00:03:28 Craft
00:04:37 Global library (Colors and fonts)
00:13:00 Components (Buttons, cards, more)
00:52:07 Home page sections
01:12:43 Home page tabs
01:25:33 Home page sections continued
01:42:36 Home page accordion and animations
01:57:25 Footer
02:05:13 Nav
02:18:29 Mobile
02:32:45 Dark mode
02:35:58 Lighthouse to 100
02:45:14 Outro

📄 Craft doc
https://wstd.us/craft

▶️ Parent/child interactions tutorial
   • How to create micro-interactions with...  

▶️ Ani Motion tutorial
   • Animate Webstudio! (UNOFFICIAL)  

🖱️ CSS for keeping dropdown links styled
button[data-state="open"].nav-dropdown-parent {
--navigation-menu-trigger-icon-transform: 180deg;
color: var(--foreground-accent);
}

🔗 Project in Webstudio
Here you can reference the final Project in Webstudio (I made some small tweaks after the video).
https://p-5b33acf4-53cf-4f03-8973-d56...

Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web