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/1297441219263679519

▶️ 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
https://www.youtube.com/watch?v=rg49mmDvdlE

▶️ Ani Motion tutorial
https://www.youtube.com/watch?v=gf7jB1-p7kM&

🖱️ 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-d5679772edee.apps.webstudio.is/?authToken=8d5c5e8d-979e-40a9-8f6c-7d91ee0fd5e7&mode=preview

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

Тэги:

#Web_Design #Website_Building #Drag_and_Drop #No-Code_Platform #Responsive_Design #UI/UX_Design #Professional_Websites #Webstudio

Скачать видео