容器 我們先來看 Grid 的容器，他包含了 一張試算表 像是 Table 一樣的東西，為何會說他 像是 Table，我直接舉例給大家看就知道了， .grid...
概述 我們再重新複習一下， Grid for layout, Flex for component. 格線系統的發展從 2011 年開始，一直到 2016...
當一個新的案子進來洽談時，我們通常會在評估階段，先按照客戶的「產業」和「需求」找一些相應或適合的視覺風格網站。 除了公司本身的作品案例外，也會蒐集一些客戶 /...
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 justify-content 水平方向的對...
你所不知道的「補白」 首先，你必須要知道這幾個常用屬性的可用值， 屬性 預設值 可用值 justify-content normal flex-s...
流 當我們定義好一個 flex 的容器時，昨天有說過了，預設會使用 row 這個設定來定義容器的流向。所以，在容器定義好的當下，我們把基本的容器設定展開來看，另...
簡單介紹 雖然說 Flexbox 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程，一定比看我在這邊...
很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式， <table> <tr>...
內容為王 如果以現在的趨勢來看，應該叫「廣告為王」。 當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些...
區塊 我們在開天闢地的時候，網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...
回到未來 網頁在很久很久以前，是使用 HTML 來製作的，約莫過了 20 幾個年頭，現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢，目前來到 HT...
網頁有什麼 粗略上來看，目前市面上瀏覽器打開的那個「畫面」，就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站，最常見的大概就是廣告。上方廣告橫...
說在最前面 網頁這種萬年老埂應該是沒什麼人會看，會想要撰寫這種偏冷門的東西，純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門，真的會想手...
禁止顯示x軸法則 在開發響應式網頁時最切記的就是不能出現x軸，為什麼呢？當使用者瀏覽時，若畫面有x軸也有y軸時，使用者必須上下左右滑動去瀏覽，這樣對於使用者體驗...
基本環境建立 因為各個不同的手機有不同的寬度，如下圖如果要符合每個不同的解析度去做開發，會導致開發上非常困難，所以需要加入以下這段語法 <meta nam...
又過了一週啦~一樣是超忙的一週~~下班回家努力練習切版直播的作業，不過這次的版型比較複雜所以卡關了QQ真的是燒腦燒到一個極點這次的作業除了 PC 版之外，還需練...
大家好!我是Steven，現在是一位下班時用閒暇時間自學前端技術的上班族，今天想分享一些我在學習過程中所領悟到的事，並且分享給你們，首先今天想聊聊如何開啟前端自...
**我們需要您具備以下能力： 1、從事前端開發2年及以上，熟悉各種前端技術，包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...
這次來練習一個比較進階的練習，是 RWD + off-canvas 側邊選單練習 這次練習會使用到 jQuery 的 addClass 跟 removeClas...
這次的漢堡選單練習，是要讓選單在手機頁面時加上 JS，讓選單有互動的效果， 所以需要了解一點 jQuery 的運作方式，可以去找一下相關資料，或許可以也可以來這...
★ 首先這篇文章適合以下背景的人閱讀： 1.大概了解什麼是格線系統，甚至有用過2.有使用過 Sass 管理及撰寫 CSS，並且對基礎 Sass 語法 (SCS...
鐵人賽結束了，但說過了寫文章是 to be continued 的，今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。 回歸正常學習進度，檢視了一下作業與...
這次來練習響應式網站很常見到的漢堡選單 但漢堡選單要寫的內容有點長，就分段來記錄一下這個過程。 這次要顯示的內容如下圖 如果在 pad 尺寸顯示會如下 要注意如...
簡述 列表中經常會遇到的問題大約幾下幾種： 當後台需要RWD，但欄位太多了，縮起來實在是太難看。 使用materia提供的MatPaginatorMod...
一、何謂RWD響應式網頁設計(Responsive web design,RWD)是一種網頁設計的概念，由Ethan Marcotte於2010年時提出此，透過...
這禮拜因為小孩公托有腸病毒，加上工作繁忙，這兩天真是超級累，除了把握時間來看一下技術社團與看書外，已無暇寫程式，這幾天太太跟我說她上班的地方所製作的網頁很不好用...
政府與公家機關的網站能提供民眾許多便民資訊，因此時常被使用，但因應現在多數人都習慣直接使用行動裝置閱覽，這時便容易出現問題：不適應手機規格的網頁常常需要民眾自行...
教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 媒體查詢設定方式 選單控制方式 CSS選取器使用方式 行動優先還是桌機...
教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 從手機先設定還是桌機先設定 如何設定HTML結構 如何設定CSS 圖片...
教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 各種裝置的網頁寬度要怎麼設定 製做RWD時會遇到的問題 媒體查詢的設定...
閃光洽
GG
Alec
Yating Chang
鴻勳
Tim Hsu
CSScoke
iThome鐵人賽
看影片追技術