網頁設計教學:軟體、範例與自學課程 - 張阿道
文章推薦指數: 80 %
程式語言, HTML, CSS, HTML, CSS, JavaScript, Sass ; 框架, Bootstrap, jQuery, Vue.js, React ; 技能, 使用者研究, 資訊架構, Prototyping, 視覺傳達設計, RWD常用斷點/ ...
跳至主要導覽跳至主要內容跳至主要資訊欄跳至頁尾
網頁設計師、軟體和平台
UI、UX設計師前端工程師後端工程師DevOps(Development+Operations)工程師設計軟體Figma,Sketch,AdobeXD,InVisionStudio,MockFlow,AdobePhotoshopVisualStudioCode,Eclipse,IntelliJIDEA,Vim,PyCharm,Chrome開發者工具同左(前端工程師)程式語言HTML,CSSHTML,CSS,JavaScript,SassPHP,Python,Java,SQL,NoSQL[大致了解各種程式語言]框架Bootstrap,jQuery,Vue.js,ReactNode.js,RubyonRails技能使用者研究,資訊架構,Prototyping,視覺傳達設計,RWD常用斷點/尺寸設定,易用性測試RWD寫法,Git指令,WordPress,API串接系統分析與設計,Linux指令,CDN,Redis,Apache,Nginx,MySQL,RESTAPI,JSONAPI伺服器作業系統,網路安全,基礎設施&應用程式監控,Git指令,Ansible指令,JenkinsCI/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
簡單的呈現產品(沒有代言人、鮮豔文字和背景圖案)
品牌名稱(Model3)
產品特色(3.3秒從時速0到100公里、619公里續航里程、雙馬達全輪驅動)
行動呼籲按鈕(立即訂購)
Model3訂購頁面
「所見即所得」產品規格客製化訂單
聊天機器人(Chatbot)輔助售前服務
多國語言
星巴克
新產品上市(可可綿雲瑪奇朵、鹹焦糖風味綿雲瑪奇朵、查看更多新品)
會員行銷(誰是你的完美組合?完成任務領取優惠)
Airbnb
搜尋引擎(位置、入住、退房、人數)
推薦系統/隨機(隨心所欲)
供應商開發(成為房東/體驗達人)
多國語言
Asana
含顧客價值的標題(高效開展重要工作,避免徒勞無功的困局。
)
行動呼籲按鈕(開始使用)
多國語言
iCloud
含品牌名稱的標題(iCloud)
含顧客價值的標題(存放你所有照片、檔案及更多資料的最佳空間)
行動呼籲按鈕(升級至iCloud+)
行動呼籲(升級至iCloud+,享有更多強大的功能與儲存空間,每月NT$30起。
)
MacBookPro訂購頁面
Apple購物車/電商系統
「所見即所得」產品規格客製化訂單
聊天功能(有任何關於購買Mac的問題嗎?和專員聊聊。
)
分期付款(提供零利率分期付款優惠)
Zendesk
含目標客群的標題(全方位客戶服務領航者)
行動呼籲按鈕之體驗行銷(免費試用)
行動呼籲按鈕之客戶名單收集(觀看示範、取得報告、立即註冊、下載報告)
多國語言
Foodpanda
含顧客價值的標題(從美食到生鮮雜貨上萬種商品馬上點馬上到)
搜尋引擎(輸入你欲送達的地址)
招募人才(歡迎加入我們的外送團隊)
供應商開發(與foodpanda合作,讓更多人享受你的餐點跟商品吧!)
GoogleWorkspace
含目標客群的標題(各種規模的團隊如何聯絡溝通、創作內容及協同合作)
行動呼籲按鈕之體驗行銷(開始免費試用)
產品演示(Productdemo)影片
Uber
差異行銷(搭乘、訂購外送、優步企業版)
搜尋引擎(輸入上車地點、輸入目的地)
招募人才(上線開車或外送)
多國語言
以上網站皆有會員系統(右上角的登入/註冊/帳戶),有助顧客關係管理。
網頁設計自學課程
網站架設費用與流程
程式設計(Python、JavaScript、PHP、HTML、Node.js、CSS…)課程推薦:
Hahow好學校
ALPHACamp
六角學院
edX(英語)
Coursera
Udemy
KhanAcademy(英語)
Codecademy(英語)
Pleaseleavethisfieldempty張阿道最新教材
Checkyourinboxorspamfoldertoconfirmyoursubscription.
主要資訊欄
網頁設計師、軟體和平台
網頁設計範例
網頁設計自學課程
延伸文章資訊
- 1撰寫第一個HTML 網頁範例
首先是如何撰寫第一個HTML 網頁出來,透過下面的簡單範例,你可以馬上寫出一個簡單的網頁,請先開啟記事本或是Notepade++ 程式碼編輯器,將以下程式碼複製貼上, ...
- 221 個單頁網頁設計範例
隨著HTML5 與CSS 3 技術的日趨成熟與普及,把網站所有內容都集中在單一頁面的設計也愈來愈受到矚目。今天我們就來欣賞一下21 個單頁網頁設計的精采範例!
- 3網頁設計筆記-作業練習篇-期末作業首頁篇
在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名,第一個區 ... 由於全世界的人都在使用HTML 來設計網頁(WebPage) 構建網站,所以HTML 的語法 ...
- 4HTML 網頁設計- CSS 與JavaScript
</sub> 則可以讓文字變下標,以下範例綜合的呈現了這些格式化標記的結果。 <!DOCTYPE html> <html> <head> <meta charset= ...
- 5網頁設計教學:軟體、範例與自學課程 - 張阿道
程式語言, HTML, CSS, HTML, CSS, JavaScript, Sass ; 框架, Bootstrap, jQuery, Vue.js, React ; 技能, 使用者研究, ...