Indie Hackers - 創業駭客 (NoCode, Webflow)

Webflow MasterClass - Webflow 教學 by tenten

Webflow MasterClass。通過免費影片課程學習網頁設計

用Webflow簡單地建立自定義網站

完整的網站開發過程

通過12個小時的分步影片內容,了解如何從頭到尾建構像素完美的網站。

開始你的Webflow組合

作為課程的一部分,建立一個功能齊全的網站,並獲得Tenten學院專家的個性化回饋。

不需要編碼即可以製作網站 (No-Code)

掌握一個視覺化的開發工具,快速建立令人難以置信的網站,而無需學習如何編碼。

掌握一個視覺化的開發流程,將你最好的創作付諸實踐

學習一個簡化的流程,使用Webflow為客戶建立定製的、完全互動的網站。在本課程結束時,你將能夠。

  • 使用一個強大的視覺化開發工具,快速建立像素完美的網站。
  • 實現令人驚嘆的動畫和互動。
  • 在您的工作中重新獲得創意自由,不受模板的限制。
  • 展示一個以你的第一個Webflow網站為特色的作品集。

課程中你將會學到什麼

第一章

Webflow簡介

  • 歡迎
  • 如何更好地利用本課程和社區
  • 你需要什麼樣的Webflow計劃?

第二章

Webflow基礎知識

  • Webflow有什麼不同
  • 基本的HTML/CSS概念
  • 基本網站Demo
  • 掌握布局。顯示設置
  • 掌握布局。網格
  • 掌握布局。Flex
  • 解決的Flexbox遊戲
  • 掌握版式設計。位置
  • 布局工具使用的真實案例
  • 使用圖片和背景
  • 如何建構網站
  • 如何有效地設置樣式
  • 使用自定義字體
  • 使網站具有響應性
  • 響應性的挑戰
  • 響應性挑戰–已解決
  • 基本互動
  • Webflow的本地組件
  • 符號
  • 出錯時的修復

第三章

項目實施一

  • 建立一個真實世界的客戶單頁網站
  • 自定義布局的挑戰
  • 自定義布局的挑戰 - 解決了

第四章

動態網站
  • 了解CMS
  • 使用CMS
  • 高級CMS過濾
  • 導入CMS數據
  • 創建電子商務網站
  • 使用表格並與其他系統整合
  • 內容管理系統的挑戰
  • 內容管理系統的挑戰 - 已解決

第五章

動畫與互動

  • 了解觸發器和動畫
  • 創建彈出式窗口
  • 滑入效果
  • 懸停時的三維旋轉
  • 視差效果
  • 水平滾動部分
  • 小樂蒂動畫
  • 創建一個預載入器

第六章

項目實施 ii

  • 最終挑戰–單頁組合項目

第七章

高級用例

  • 整合一個預訂系統(或任何其他第三方工具)
  • 導出到WordPress或Shopify
  • 雙語言網站
  • 用(複製-粘貼)自定義程式碼創建令人敬畏的效果

第八章

網站開發流程

  • 完整的Webflow網站流程概述
  • 如何正確地導出和導入圖片
  • 使用風格指南工作
  • 隱私和可訪問性的考慮
  • QA - 測試您的網站
  • 客戶是否應該使用Webflow主機?
  • 啟動前的檢查表。搜索引擎和最終設置
  • 上線

第九章

項目管理

  • 如何向客戶推銷Webflow
  • 當客戶不願意購買時
  • 如何將網站交付給客戶
  • 客戶CMS培訓
  • Webflow網站的定價
  • 完美的Webflow網站提案
  • 維護Webflow網站

第10章

案例分析–客戶網站

  • 項目計劃
  • 項目設置與字體
  • 創建風格指南
  • 設置內容管理系統和虛擬內容
  • 建立主頁
  • 移動響應
  • 內容管理系統項目頁面
  • 生物收集頁面
  • 公司簡介
  • 體驗頁面
  • 產品頁面
  • 搜索結果頁面
  • 互動
  • 最後設置

第11章

案例研究 - CyberTruck網站

  • 特斯拉Cybertruck網站在100分鐘內完成

第12章

將這一切結合起來

  • 成為一個真正的大師
  • 結論 - 下一步是什麼?

12個月的我們的社區訪問權

加入專業網頁設計師社群,交流與分享提昇彼此的能力!

每周的現場辦公時間

從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 MasterClass 教學大師班 by tenten

更多資源

Learn More