iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
3
Modern Web

前端新手村系列 第 30

前端新手村 系列目錄

系列目錄

初衷是想寫給新手的一些正確觀念,以及這一路以來脫離新手的重要觀念。對我來說的過程,是 30 天的 w3.org 之旅。幾乎一天一篇,很過癮,也很辛苦。希望在新手時,就開始看標準文件,而非只聽江湖傳言就用上不太了解的語法。

透過這將近一個月以來的資料查找,我自己也釐清很多模糊的觀念,而且對於 CSS 的全貌有更好的認識。
我自己寫作的週期是每天寫一篇,隔天早上起床發文。因為每天都會查到新的知識,常常寫完都很期待發文~XD 有一種記者期待自己的報導被刊出來的感覺。到二十篇之後,漸漸的預想的主題不用時,才有一種擠出主題的辛苦感覺,真的像鐵人賽一樣,最後才是靠耐心。

感謝 30 天以前,推坑的 howard
感謝 30 天以來,一路支持我的伙伴
特別感謝 Amos 給我的鼓勵

此系列會同步貼到《Chris 技術筆記》

很感謝,也很高興此系列獲得佳作

概論

這一系列介紹的內容細說從頭,從空白頁、設計載體的改變、現代顯示器和HTML的淺談。

前端新手村 從空白頁開始
前端新手村 從設計載體到RWD顯示原理
前端新手村 HTML的作用
前端新手村 @import 開心的結構化 CSS

都市傳說

都市傳說,為了調查一些奇怪現象又沒有真相的現象。

前端新手村 都市傳說之隱藏元素的手法
前端新手村 都市傳說之body範圍

CSS 運作

學會 CSS 之前,要先知道一些 CSS 的觀念以及運作方式。

前端新手村 CSS 的作用
前端新手村 CSS 的單位
前端新手村 再論 ex, em
前端新手村 CSS Cascade 串接

CSS Selector

CSS Selector 全系列,希望透過正確的分類,學習 Selector 更好記。

前端新手村 CSS 簡單 Selector (上篇) & Groups
前端新手村 CSS 的 簡單 Selector (中篇)
前端新手村 CSS 的 簡單 Selector (下篇)
前端新手村 CSS Selector 的 Combinators
前端新手村 偽元素

排版邏輯

強調在「將東西排到你想排的地方」所以大多數都在介紹 layout 的觀念。希望有助於感覺到切版超容易踩雷的感覺的人。

前端新手村 垂直排列 與 Box Model
前端新手村 橫向排列
前端新手村 橫向排列 & 實現純手工 RWD
前端新手村 Media Query
前端新手村 Block 和 Inline 排版
前端新手村 Position 定位
前端新手村 flex (上)
前端新手村 flex (下)
前端新手村 flex grow & shrink 演算法

動畫效果

過場與動畫效果,其實是 CSS3 裡,容易讓作品吸引人的技術之一。學起來可以讓元素在畫面上正確的飛來飛去。

前端新手村 Transition
前端新手村 Animations (前傳)
前端新手村 Animations (上)
前端新手村 Animations (下)
前端新手村 細說 Timing function

如果這一系列有後續的話,也許會貼在我的部落格 ,有問題想找我討論可以在facebook 上找我,想知道我做過什麼,可以到我的 Github 逛逛,好奇我的經歷可以到我的 LinkedIn 看看


上一篇
前端新手村 Animations (下)
系列文
前端新手村30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
gatesakagi
iT邦新手 3 級 ‧ 2018-01-09 12:10:37

排版邏輯部分,可以再補充一下reset的概念,因為不同家的瀏覽器,都有不同的預設值,所以才會有reset.css或normalize.css這些東西出現,這樣子做到後期才不會出現在chrome正常,在firefox卻有跑版的情況發生。

供參。

Chris iT邦新手 4 級 ‧ 2018-04-28 08:06:38 檢舉

感謝你給我建議。^^
不過...reset 我自己沒有研究 QQ。
使用 Bootstrap 或 SASS 有它自己的reset

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-22 12:19:11

好厲害 \0.0/

我要留言

立即登入留言