傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

Intro

我在 2012 年寫過一篇 CSS Media Queries 介紹與基礎應用,後來也陸續開了一些 RWD 相關課程,也有在一些研討會分享過 RWD 技術,因為資源散落各地,所以決定利用部落格將我分享過的 RWD 資訊做個整合,讓大家可以快速上手。

另外我也會將自己的「RWD 入門與實戰」這個付費課程講義公開,讓大家可以在部落格內閱讀。為什麼要把付費內容免費化呢?其實我覺得, RWD 已經存在一段時間了,相信很多人都已經會了,就算不會,網路上也有許多分享文章可參考,「觀念」也沒什麼好藏私的,愈多人會 RWD,我們之後的進階課程才會輕鬆啊(笑)。

其實想要把內容公開化已經想很久了,突然如此積極還有另外一個原因,就是我在網路上看到有人盜用了我的講義內容,然後把他公開在網站上,好像還用這些內容去開課(這種行為真是令人不齒)。更扯的是,他盜用我的內容後還有附上一些課後補充,就是沒附上我的連結,是心虛嗎?哼~總之,我歡迎大家分享我公開的資料,但與其我的東西被盜用,還不如我自己公開分享啊啊~~

如果各位之後在其他地方看到這些內容,請不用懷疑,我以我的人格保證,他們絕對非原創絕對是盜用,因為這些東西都是我一個字一個字打出來的。也歡迎大家用力檢舉或是告訴我唷 ^___^

以上癈話到此結束,接下來開始進入正題吧。

RWD 相關簡報分享

我的 RWD 簡報都發在 slides.com 裡,大家可以直接點進去看,或是在部落格裡閱讀:

RWD 入門與實戰課程簡報

這份簡報是「RWD 入門與實戰」的上課簡報,裡面有很基礎的 RWD 觀念,適合還沒碰過 RWD 卻有興趣想了解的朋友。跟練習有關的簡報我都已經拿掉了,我這堂課的兩大重點:(1)RWD 是由什麼組成的 (2)如何實作 RWD。

這份講義重點在「(1)RWD 是由什麼組成的」,另外上了幾次課之後,我改為使用 gitbook 做線上講義,所以這份簡報就沒再更新了。

2015 廣州前端分享會

這份是最早釋出的 RWD 簡報,是我去廣州的一場分享。這份簡報內容很多,到最後也沒講完,裡面列出了做 RWD 會碰到的一些問題,適合已經有 RWD 實作經驗的朋友閱讀。

簡報後面的「那些年我硬幹的事情」,是在分享已經上線的網站如何硬幹成 RWD 網站。

2015 高雄 MOPCON

2015 年底參加了高雄的 MOPCON,一樣是在講 RWD XDDD,這份簡報可以看作是融合的「RWD 入門與實戰」以及「廣州前端分享」的精華,也是適合給有 RWD 實作經驗的朋友閱讀。


簡報比較偏「秀」,為了演好這場秀,裡面會帶上很多插圖,思緒也比較跳躍,所以後來我上課才改用講義,講義就比較像我的寫文風格,系統化 + 平鋪直敘 (自己說 XDDD)。

我會把講義整個搬到文章內,為了怕頁面拖太長,所以請點擊下一篇閱讀「RWD 入門與實戰」講義唷。