技術 【設計+切版30天實作】｜Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形＋背景顏色＋陰影。今天想來做點不一樣的，所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...

技術 【設計+切版30天實作】｜Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱 昨天完成header的部分了，所以接下來就會進入main的部分，今天要完成的是「PainPoints」的區塊。（如下圖） 數據收集 標題的樣式 F...

技術 【設計+切版30天實作】｜Day12 - 怎麼讓使用者選中您想要他選的Plans設計？

設計大綱 今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用...

技術 Day01 系列介紹 切版與CSS：打造工具箱與切版施工流程

切版與CSS：打造工具箱與切版施工流程！ 轉往前端的第一大關便是切版，這工藝主要由HTML5、CSS3作為底層技術，搭配切版心法，並在各家瀏覽器上呈現畫面，切版...

技術 【設計+切版30天實作】｜Day8 - 看起來簡單但不單調的steps設計

設計大綱 稱讚完平台的優點後，接下來的區塊就要向使用者介紹使用的流程，但因為現代人都很懶得看很冗長的「說明書」，所以使用流程會採用簡約的方式去做介紹。 因為上面...

技術 Day6【主題一：Flexbox】＿統整

一、屬性統整： 1-1、作用於彈性容器上： flex-direction（控制子項整體佈局方向） flex-wrap（控制子項整體單行顯示還是換行顯示） fl...

技術 【設計+切版30天實作】｜Day6 - 設計出背景上又有背景的吸睛小廣告

設計大綱 上一個區塊設計了使用者的「痛點」，因此接下來的區塊想要做一個「平台的小廣告」，讓使用者了解到我們這個平台可以幫助他們解決問題。由於上一個區塊並不是滿版...

技術 Day03 學習看文件Ｗ3C，武林秘笈之文件意識

看不懂啊 起初，跑去問問題，得到一則Ｗ3C官方規範網址，我試圖集中注意力，想要看透它，每個單字都懂意思，合在一起就看不懂了。是天書無誤，心想，規範有夠難看懂，...

技術 全端基礎-前端(3). panel 架構(在行事曆上，建立新事件的 UI）

1.標題(1).Event-input版index.php <div id="info-panel"> <div...

技術 【設計+切版30天實作】｜Day7 - 設計出無外框式的三欄式pros區塊

設計大綱 上一個區塊賣完小廣告後，今天馬上就給它塞個平台的優點進來，這樣可以讓使用者有「感同身受」的感覺，同時也能讓他們覺得「哇！好像真的很棒唷！」。 「優點」...

技術 Day18 切切切，如何解構元件(Component)？

我們要來談談切分元件了，我學習切分元件的概念，是到用SASS才出現Component這個詞，但其實在簡單切版的時候就會有初步概念了。記得那時候，跑去問問題，學姊...

技術 Day02 腦容量爆炸！打造你的切版工具箱

初入CSS，會被他豐富的屬性嚇到以為要玩記憶力大考驗，我曾經就把MDN的側欄屬性給他一個個看過(佩服自己的刻苦耐勞)，後來隔天就忘了。經過幾番無功、探索與混亂...