基礎課程
01 課程介紹
- 什麼是 Webflow
- 課程概述以及如何充分利用它
- 你需哪一種 Webflow 付費計劃
- 講師介紹
02 Webflow 基礎板塊功能
我們通過使用開發工具對 Webflow 網站進行分解，展示它們是如何建立的。在本課結束時，你將有能力剖析任何網站的CSS和HTML。更重要的是，你將了解到你是否真的有 "關注細節"。
- 掌握 Webflow 的關鍵概念 ( CSS/ HTML)
- Class, style 介紹
- 佈局工具：Section → 構建網站的Hero部分
- 佈局工具：Grid
- 佈局工具：Flex/ Div
- 使用 Form
- 使用 Symbols
- 使網站響應
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 設定
07 Freelancing 創業分享
我們將與你分享業界Freelancer 每小時費率、成本、合約、如何尋找客戶，以及如何追蹤你的現金流，讓你不會感到無所適從。這就是我們把所有的東西聯繫在一起的地方，以便真正地做這件事。
- 如何開始 Freelance 及平台介紹
- 報價該報多少才合理 by hour/ fixed rate
- 如何賣 Webflow 給客戶
