你可以在https://webflow-authentication.webflow.io/sign-up 找到一個Demo。
登錄到Firebase控制台。創建一個新的應用 程式，從左邊的菜單，在開發'下，導航到認證'。啟用電子信箱/密碼'登錄提供者。之後，在當前的Firebase項目下創建一個Web應用 程式，並複製給定的firebaseConfig對象。
進入項目設置和自定義程式碼標籤。將webflow-custom-code-before-body.htmlgist文件中的內容添加到Footer Code輸入中。將webflowAuth.firebaseConfig替換為你在上一步複製的內容。之後，進入設計器，創建3個新頁面。
``/user````頁面，用於登錄的用戶。
/log-in頁面，用於登錄。
/sign-up頁面，用於註冊。
在/sign-up頁面，創建一個表單，在裡面添加一個提交按鈕和兩個輸入欄位--電子信箱和密碼。然後做以下調整。
給予表單元素（表單內的表單元素，表單>表單）自定義數據屬性，稱為data-signup-form。
2.給電子信箱欄位自定義數據屬性，稱為 "data-signup-email"。
給予密碼欄位自定義數據屬性，稱為`data-signup-password'。
給予表單錯誤元素自定義數據屬性，稱為`data-signup-error'。
5.在body元素中添加自定義數據屬性，稱為data-user-unauth。
在/log-in頁面，創建一個表單，在裡面添加一個提交按鈕和兩個輸入欄位--電子信箱和密碼。然後做以下調整。
給予表單元素（表單內的表單元素，表單>表單）自定義數據屬性，稱為data-login-form。
2.給電子信箱欄位自定義數據屬性，稱為`data-login-email'。
給予密碼欄位自定義數據屬性，稱為 "data-login-password"。
給予表單錯誤元素自定義數據屬性，稱為 "data-login-error"。
在body元素中添加自定義數據屬性，稱為data-user-unauth。
在/user頁面中，在body元素中添加自定義數據屬性，稱為data-user-auth。除此之外，你可以通過給元素添加自定義數據屬性data-user來顯示從Firebase返回的任何用戶屬性。在這之後，你可以使用帶有大括弧的用戶屬性，例如：你的電子信箱是{{email}}。
如果你有一個導航元素，你可以從那裡導航到/登錄，/註冊等頁面，你可以通過使用自定義數據屬性data-user-auth`和data-user-unauth來調整其可見性。你也可以將這些數據屬性中的任何一個添加到body元素中，這將調整指定頁面的可見性。註銷按鈕可以通過給連結元素一個自定義數據屬性data-logout`來創建。
一些想法取自Jason Dark的YouTube影片系列，你可以在https://www.youtube.com/watch?v=30AIpEnsEaQ&list=PL4TuDUnZkkhzSwfbFj6EJjxim6218ORc0。
通過12個小時的分步影片內容，了解如何從頭到尾建構像素完美的網站。
作為課程的一部分，建立一個功能齊全的網站，並獲得Tenten學院專家的個性化回饋。
掌握一個視覺化的開發工具，快速建立令人難以置信的網站，而無需學習如何編碼。
學習一個簡化的流程，使用Webflow為客戶建立定製的、完全互動的網站。在本課程結束時，你將能夠。
使用一個強大的視覺化開發工具，快速建立像素完美的網站。
實現令人驚嘆的動畫和互動。
在您的工作中重新獲得創意自由，不受模板的限制。
展示一個以你的第一個Webflow網站為特色的作品集。
歡迎
如何更好地利用本課程和社區
你需要什麼樣的Webflow計劃？
Webflow有什麼不同
基本的HTML/CSS概念
基本網站Demo
掌握布局。顯示設置
掌握布局。網格
掌握布局。Flex
解決的Flexbox遊戲
掌握版式設計。位置
布局工具使用的真實案例
使用圖片和背景
如何建構網站
如何有效地設置樣式
使用自定義字體
使網站具有響應性
響應性的挑戰
響應性挑戰--已解決
基本互動
Webflow的本地組件
符號
出錯時的修復
建立一個真實世界的客戶單頁網站
自定義布局的挑戰
自定義布局的挑戰 - 解決了
動態網站
了解CMS
使用CMS
高級CMS過濾
導入CMS數據
創建電子商務網站
使用表格並與其他系統整合
內容管理系統的挑戰
內容管理系統的挑戰 - 已解決
了解觸發器和動畫
創建彈出式窗口
滑入效果
懸停時的三維旋轉
視差效果
水平滾動部分
小樂蒂動畫
創建一個預載入器
最終挑戰--單頁組合項目
整合一個預訂系統（或任何其他第三方工具）
導出到WordPress或Shopify
雙語言網站
用（複製-粘貼）自定義程式碼創建令人敬畏的效果
完整的Webflow網站流程概述
如何正確地導出和導入圖片
使用風格指南工作
隱私和可訪問性的考慮
QA - 測試您的網站
客戶是否應該使用Webflow主機？
啟動前的檢查表。搜索引擎和最終設置
上線
如何向客戶推銷Webflow
當客戶不願意購買時
如何將網站交付給客戶
客戶CMS培訓
Webflow網站的定價
完美的Webflow網站提案
維護Webflow網站
項目計劃
項目設置與字體
創建風格指南
設置內容管理系統和虛擬內容
建立主頁
移動響應
內容管理系統項目頁面
生物收集頁面
公司簡介
體驗頁面
產品頁面
搜索結果頁面
互動
最後設置
特斯拉Cybertruck網站在100分鐘內完成
成為一個真正的大師
結論 - 下一步是什麼？
加入專業網頁設計師社群，交流與分享提昇彼此的能力!
從Tenten Academy的專家那裡獲得個性化的、無障礙的支持和回饋。
建立聯繫，發現商業機會，並與世界各地的網頁設計師進行合作。
從現實生活中活躍的專業人士的社區中學習經驗和教訓。 從志同道合的設計師那裡獲得回饋、工作機會和技巧。
三個月的付款計劃(278美元/月)
分三期付清你的課程費用。你將獲得終身使用權，以及所有未來的更新。
單次付款695美元
預先支付，節省139美元! 享受終身使用該課程和所有未來的更新。
每個課程都包括一個無問題的30天退款保證。
為什麼Webflow比其他網站建設 程式更好？
Webflow是一個非常強大的視覺開發工具，它允許您創建高度定製的、真正優質的作品--當然，也可以相應地調整您的價格。Webflow還能為您處理網站開發的所有技術重任，因此您可以專注於您最擅長的工作：為您的客戶創造令人驚嘆的高價值作品。
我已經知道如何編碼，為什麼還要學習Webflow？
Webflow提供了一種超快速的網站建設方式--我們所說的是幾個小時，而不是幾天或幾周。如果您是一名設計師，您也會喜歡在Webflow中工作的視覺效果，看到您所建構的網站即時成型。
Webflow是免費的嗎？
Webflow提供了一個免費的計劃，許多學生在學習這個課程時都會使用。然而，對於您未來的客戶項目，我們建議投資於他們的付費層級。
在本課程結束時，我是否能夠為我的客戶建立網站？
是的，你會學到一個逐步的過程，你可以在任何未來的項目中使用。除此之外，在本課程結束時，您將擁有您的第一個Webflow網站，我們的團隊將給您提供個性化的回饋。我們希望您有充分的信心在您的投資組合中展示您的Webflow技能。
我的付款方式有哪些？
您可以分三個月付款，也可以一次性付款，以節省更多費用。我們通過PayPal和Stripe安全地處理所有付款，購買后您將立即收到電子信箱收據。如果你需要一張更詳細的發票作為記錄，請告訴我們，我們將很樂意幫助你。
我可以使用該課程多長時間？
您可以終身使用該課程，並可在12個月內進入 Tenten 社區。不僅如此，今後所有未來的內容更新都可以瀏覽。
我可以使用Webflow建立一個電子商務網站嗎？
可以的。Webflow最酷的地方之一就是它的靈活性。你的工作不受模板內置功能的約束，所以你可以真正創造出你的客戶所需要的東西。在Webflow大師班的第四章中，您將了解到所有關於電子商務和其他動態網站建設的功能。
我需要知道如何編碼嗎？
不需要。這就是使用Webflow這種強大的視覺化開發工具的神奇之處。你不需要知道如何編碼，就可以創建一個像素完美的、高度定製的網站。視覺介面將引導你完成這一切。
Webflow大師班和Webflow大學之間有什麼區別？
Webflow大學有一些很好的教程和快速課程，但並不是要帶你完成作為自由職業者建立和銷售Webflow項目的整個過程--就像我們在Webflow大師班中所做的那樣。不僅如此，大師班是唯一一門讓你建立整個網站，並作為課程的一部分接受個性化的教師回饋的課程。
本課程與《網頁設計》有什麼不同？成為專業人士課程的差異再哪？
MasterClass 課程是關於設計過程的。我們確實涵蓋了你在開發方面的選擇，但不包括實際實施中的細枝末節--這就是 Webflow 大師班的意義所在 你將學習到一個循序漸進的過程，使用 Webflow 將你的設計變成功能齊全、像素完美的網站。
想要找尋 Webflow 的接案 或是 Webflow 設計師工作?
Discord (規劃中)