鐵人檔案
這次的實作將會是50%記錄如何根據Bootstrap去用Adobe XD設計，50%記錄用Bootstrap在VSCode切版。
整個主軸會以Bootstrap作為框架，例如設計時所參考的參數，以及切版時的框架。
設計大綱 在上一篇設計「Reviews」這個區塊時，有提到切版時可能會有「切不出來」的情況發生，所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是！...
設計大綱 今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用...
設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形＋背景顏色＋陰影。今天想來做點不一樣的，所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...
設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然，另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...
設計大綱 Landing Page的主要色都偏深色，另外CTA也有用主要色作為背景顏色了，所以這邊的Footer就決定用淺色的Secondary-color來作...
大綱 前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷...
大綱 要切版前當然是要先來建立環境，所以我們下一篇再來做客製化！那環境要怎麼建立？其實還蠻簡單的！只要跟著下面的步驟去做，很快就會上手啦！不過先說明一下，這篇文...
大綱 上一篇把環境都建立完成後，今天要來做客製化，但在這之前，先來說明一下為什麼要客製化，以及為什麼會把客製化放在前面。 由於這一次的挑戰是以設計師角度去做，因...
大綱 前半段都在設計，今天開始就要進行切版了！(緊張!!!)那我們header的部分分成heroheader和navbar，今天的任務是切「Heroheader...
大綱 昨天完成了header的下半部分，今天的任務就要來完成header的上半部分 —— Navigation bar！廢話不多說，馬上開始吧！ 數據收集 n...
