有系統的交付 UI 設計 在設計師們 UI 時,我們能夠隨時、直接的在 Figma 上看到,UI 的各種 width、padding 數值。雖然自動產生的方便歸...
什麼是跑版?跑版,簡單來說,畫面不是你預期,東西待在它不該待的地方,畫面不忍直視,有興趣可自行查詢關鍵字。事情是這樣得,隨著每次Code Review做調整後,...
我們要來談談切分元件了,我學習切分元件的概念,是到用SASS才出現Component這個詞,但其實在簡單切版的時候就會有初步概念了。記得那時候,跑去問問題,學姊...
看不懂啊 起初,跑去問問題,得到一則W3C官方規範網址,我試圖集中注意力,想要看透它,每個單字都懂意思,合在一起就看不懂了。是天書無誤,心想,規範有夠難看懂,...
初入CSS,會被他豐富的屬性嚇到以為要玩記憶力大考驗,我曾經就把MDN的側欄屬性給他一個個看過(佩服自己的刻苦耐勞),後來隔天就忘了。經過幾番無功、探索與混亂...
切版與CSS:打造工具箱與切版施工流程! 轉往前端的第一大關便是切版,這工藝主要由HTML5、CSS3作為底層技術,搭配切版心法,並在各家瀏覽器上呈現畫面,切版...
其實體驗營已經結束一陣子了 最近才有空回來補齊每日作業,這邊寫的感覺都算是很基礎的東西,就給像我一樣的純新手看看,有興趣想報名六角的體驗營可以參考(對新手來說...
專案開發技巧篇(六) : 推薦實用套件 每日一談 嗨,大家好 ! 我是阿蘇今天是Day28 ,今天分享的是實用套件分享,我們可以在網路找到很多好用的套件,有很...
專案開發技巧篇(五) : Bootstrap 元件客製化 每日一談 嗨,大家好 ! 我是阿蘇今天是Day27 ,今天分享的是 Bootstrap 元件客製化教...
專案開發技巧篇(四) : Bootstrap 元件 每日一談 嗨,大家好 ! 我是阿蘇今天是Day26 , 剩下最後倒數幾天,快要完結篇啦 !!今天分享的是...
專案開發技巧篇(三) : Variable、Utilities 每日一談 嗨,大家好 ! 我是阿蘇今天是Day25 ,在這篇會詳細說明 Variable、Ut...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨,大家好 ! 我是阿蘇今天是Day24 ,今天分享的是 以 Boostrap 為核...
開發環境架設(三) : Bootstrap 自訂基礎樣式 每日一談 嗨,大家好 ! 我是阿蘇今天是day22 ,今天分享開發環境架設 第三篇,我們來教大家如何...
開發環境架設(二) : ejs版型管理、layout 每日一談 嗨,大家好 ! 我是阿蘇今天是Day21 ,今天分享開發環境架設 第二篇,我們來分享架設時使用...
昨天架構完 HTML (附上連結 切版實作 HTML 篇),今天要加上 CSS 樣式做排版~ 會補充說明 偽類別 ,以及 CSS 變數 的使用方法。 首先建立一...
開發環境架設(一) : Bootstrap 核心、SCSS架構 每日一談 嗨,大家好 ! 我是阿蘇到了第20天啦 ,剩下的天數都會來分享關於正式開發 Side...
鐵人賽將近尾聲了~時間在不知不覺間也過得很快。 我們來切一個簡單的網頁吧! Wireframe 配置 方框中間有叉叉 : 表示 圖片 方框 : 表示...
Day 18 - 開發小知識(二) : 切版學習之路、實作精進切版 每日一談 嗨,大家好 ! 我是阿蘇今天是 Day17 , 前面的切版實作技巧分享差不多了,...
Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素 每日一談 嗨,大家好 ! 我是阿蘇今天是Day15 , 不知不覺寫到了15天,不曉得...
Day 14 - 切版排版技巧(二) : Width、格線系統(Bs) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day14, 今天繼續談切版排版技巧,除了fl...
Day 13 - 切版排版技巧(一) : Flex排版、Box模型 每日一談 嗨,大家好 ! 我是阿蘇今天是Day13 ,我們前面分享了HTML / CSS...
Day 12 - 切版基礎打底(二) : 必學CSS運用 每日一談 嗨,大家好 ! 我是阿蘇今天是Day12,我們一樣繼續談談CSS的實作運用,有哪些是必學、...
感人時刻 今天是鐵人賽30天的最後一天了,有種「嗯?30天了喔?」的奇妙感覺!畢竟已經習慣每天上來發文,也習慣隊友們每天互相提(恐)醒(嚇)發文!!! 突然有點...
前面完成了「CTA」區塊,今天來完成「Footer」的區塊。 數據收集 Footer的樣式 Background-color:$Secondary...
前面完成了「Plans」區塊,今天來完成「CTA」的區塊。 數據收集 CTA的樣式 Background-color:$Primary Pad...
前面完成了「Reviews」區塊,今天來完成「Plans」的區塊。 數據收集 標題的樣式 Font-weight:Bold Font-size:3...
前面完成了「Carousel」區塊,今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight:Regular F...
前面完成了「Steps」區塊,今天來完成「Carousel」的區塊。 數據收集 margin-top : 96px Carousel底下Backg...
前面完成了「Pros」區塊,今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight:Medium Font-size:24p...
前面完成了小廣告區塊,今天來完成「平台好處 - pros」的區塊。 數據收集 card標題的樣式 Font-weight:Bold Font-siz...