網頁設計教學：軟體、範例與自學課程

網頁設計師、軟體和平台

	UI、UX設計師	前端工程師	後端工程師	DevOps (Development + Operations) 工程師
設計軟體	Figma, Adobe XD, Sketch, Balsamiq, Moqups, MockFlow, Framer, Justinmind, proto.io, UXPin	Visual Studio Code, Eclipse, IntelliJ IDEA, Vim, PyCharm, Chrome開發者工具	同左（前端工程師）
程式語言	HTML, CSS	HTML, CSS, JavaScript, Sass	PHP, Python, Java, SQL, NoSQL	[大致了解各種程式語言]
框架		Bootstrap, jQuery, Vue.js, React	Node.js, Ruby on Rails
技能	使用者研究, 資訊架構分析, Wireflow & UI prototype設計, RWD常用斷點/尺寸設定, 視覺設計, UAT	RWD寫法, Git指令, WordPress, API串接	系統分析與設計, Linux指令, CDN, Redis, Apache, Nginx, MySQL, REST API, JSON API	伺服器作業系統, 網路安全, 基礎設施＆應用程式監控, Git指令, Ansible指令, Jenkins CI/CD, Docker指令, Kubernetes, AWS, Azure, GCP

網頁製作/架站平台：

• WordPress
• Wix.com
• Google協作平台
• Squarespace
• Weebly
• Strikingly

電商平台：

• WordPress架站軟體 + WooCommerce外掛
• Shopify
• Magento
• Ecwid
• BigCommerce
• 91APP
• SHOPLINE
• B2B、B2C、C2C、B2B2C平台

網頁設計範例

Tesla

• 簡單的呈現產品（沒有代言人、鮮豔文字和背景圖案）
• 品牌名稱（Model 3）
• 產品特色（ 3.3 秒從時速 0 到 100 公里、 619 公里續航里程、雙馬達全輪驅動）
• 行動呼籲按鈕（立即訂購）

Model 3 訂購頁面

• 「所見即所得」產品規格客製化訂單
• 聊天機器人 (Chatbot) 輔助售前服務
• 多國語言

星巴克

• 新產品上市（可可綿雲瑪奇朵、鹹焦糖風味綿雲瑪奇朵、查看更多新品）
• 會員行銷（誰是你的完美組合？完成任務領取優惠）

Airbnb

• 搜尋引擎（位置、入住、退房、人數）
• 推薦系統/隨機（隨心所欲）
• 供應商開發（成為房東／體驗達人）
• 多國語言

Asana

• 含顧客價值的標題（高效開展重要工作，避免徒勞無功的困局。）
• 行動呼籲按鈕（開始使用）
• 多國語言

iCloud

• 含品牌名稱的標題（iCloud）
• 含顧客價值的標題（存放你所有照片、檔案及更多資料的最佳空間）
• 行動呼籲按鈕（升級至 iCloud+）
• 行動呼籲（升級至 iCloud+，享有更多強大的功能與儲存空間，每月 NT$30 起。）

MacBook Pro 訂購頁面

• 「所見即所得」產品規格客製化訂單
• 聊天功能（有任何關於購買 Mac 的問題嗎？和專員聊聊。）
• 分期付款（提供零利率分期付款優惠）

Zendesk

• 含目標客群的標題（全方位客戶服務領航者）
• 行動呼籲按鈕之體驗行銷（免費試用）
• 行動呼籲按鈕之客戶名單收集（觀看示範、取得報告、立即註冊、下載報告）
• 多國語言

Foodpanda

• 含顧客價值的標題（從美食到生鮮雜貨 上萬種商品 馬上點馬上到）
• 搜尋引擎（輸入你欲送達的地址）
• 招募人才（歡迎加入我們的外送團隊）
• 供應商開發（與foodpanda合作，讓更多人享受你的餐點跟商品吧！）

Google Workspace

• 含目標客群的標題（各種規模的團隊如何聯絡溝通、創作內容及協同合作）
• 行動呼籲按鈕之體驗行銷（開始免費試用）
• 產品演示 (Product demo) 影片

Uber

• 差異行銷（搭乘、訂購外送、優步企業版）
• 搜尋引擎（輸入上車地點、輸入目的地）
• 招募人才（上線開車或外送）
• 多國語言

網頁設計自學課程

網站架設流程：

1. 購買網域（申請一個路標）
2. 設定DNS（把路標指向租來的那塊地）
3. 租用虛擬主機（租一塊地）
4. 安裝架站軟體（來蓋房子），以WordPress最常見

程式設計 (Python、JavaScript、PHP、HTML、Node.js、CSS…) 課程推薦：

• Hahow 好學校
• ALPHA Camp
• 六角學院
• edX （英語）
• Coursera
• Udemy
• Khan Academy （英語）
• Codecademy （英語）