Webflow Master Class ✌ by tenten™
基礎課程
01 課程介紹
02 Webflow 基礎板塊功能
我們通過使用開發工具對 Webflow 網站進行分解，展示它們是如何建立的。在本課結束時，你將有能力剖析任何網站的CSS和HTML。更重要的是，你將了解到你是否真的有 "關注細節"。
C2-02: Webflow 介面中控制 Class, style 介紹
C2-03: Spacing: 空間與間距
C2-04: Typography: 基礎排版
C2-05: 使用 Symbols: 共用元件
C2-06: Media: 多媒體
C2-07: Form 使用表單
C2-08: Components: 更多組件
C2-09: 佈局工具：Layout: Grid
C2-10: 佈局工具：Layout: Flex/ Div
C2-11: 使網站響應 RWD
03 CMS
- 了解 Webflow 的 CMS 和內容編輯
- 建立 CMS 模板列表頁面
- 排序和過濾項目
- 使用 Webflow 導入和導出內容
- Template 分析：電子商務網站
04 動態網站
透過本章，你將會學到如何替你的網站設立動畫及CMS管理資料，讓你的網站更有互動性。但是製作網頁痛態難的部份不是 Webflow 的操作, 更多的層面是在於設計與創意的背後發想。
- CSS3 的動畫與交互原則
- 基本動畫介紹: Hover/ Fade in, out/ pop up
- Template 動畫製作分享：
- Tesla 的 Landing Parallax 捲動特效
- Apple 的幾個特定較簡單的 Animation patterm.
- Lottie 動畫
05 Template 模板拆解分析
深入研究所有 Webflow 模板，了解它們的主要區別和關鍵功能。我們會帶你拆解別人的模板及設計邏輯，讓你更清自己的設計方向。
- 使用 Cloneables 學習和構建
- 超有用的 Chrome extension 工具
06 Design it 設計你的網站
你將學習如何使用 Figma 設計漂亮的網站，Figma 是 Uber、 Airbnb 和微軟設計師使用的介面設計工具，設計一個靈感網站，以及設計任何你想設計的網站！你將學習大量的CSS，但最重要的是如何發展你的設計風格。你將學習大量的CSS，但最重要的是，如何發展你的設計風格。
- 從 Figma 到 Webflow
- 設計師字體工具
- 找字體靈感的工具
- 響應式排版與行動設計排版
- WebFont 設定
進階課程
SEO 優化 → 如何用 Webflow 打造高排名且自然流量增長的網站?
Webflow 不只能拿來做 Landing Page, 電商或官方網站嗎? 其時它還可以透過跟其他 No Code 工具整合打造會員網站, 資料庫, SaaS…等產品
什麼是 No Code
其他無代碼工具串接
多語系網站製作
JS Hack : Code Pen: 如何使用自定義代碼進行各種客製化開發
如何開始你的專案 → Client First Library
永遠從 UI Library 開始 → Why?
主流 Bootstraped kit 介紹 → Relume, Finsweet, Flowbase, Tenten
會員網站 （Webflow、MemberStack、Airtable 和 Zapirer）
導出到 WordPress 或 Shopify（Udesly + WP 插件）
Bonus
Freelancing 創業分享
我們將與你分享業界Freelancer 每小時費率、成本、合約、如何尋找客戶，以及如何追蹤你的現金流，讓你不會感到無所適從。這就是我們把所有的東西聯繫在一起的地方，以便真正地做這件事。
- 如何開始 Freelance 及平台介紹
- 報價該報多少才合理 by hour/ fixed rate
- 如何賣 Webflow 給客戶
免費利用 GitHub Pages 寄存你的 Webflow 網站
Webflow 實作: 用 30 分鐘重新打造 Tesla 首頁!??
Webflow 實作: 用 30 分鐘重新打造 Solana Mobile 首頁
個人網站或履歷網站: 用 15 分鐘做出能夠讓你從眾多履歷中脫穎而出個人網站!?
CMS + Airtable 自動化: 如何用 Webflow 規劃一個大型的 Directory 網站? (Part 1)
CMS + Airtable 自動化: 如何用 Webflow 規劃一個大型的 Directory 網站? (Part 2)
