基礎課程

01 課程介紹
  • 什麼是 Webflow
  • 課程概述以及如何充分利用它
  • 你需哪一種 Webflow 付費計劃
講師介紹
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 設定
為什麼要用 UI Library: Webflow 使用 Class, style 介紹
 

進階課程

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)
 
 
 
 
Webflow 實作: 用 30 分鐘重新打造 Solana Mobile 首頁
 
badge