注意: 這是一個變相的填坑教學松，若你不想被推坑請慎入 :smiley_cat:
最早是想辦jsgirls，另外也有人想弄cssgirls，還有muan也有辦實驗室松鼠。加上g0v蠻多人想要學習前端技術，於是有了front-bridge。主要目的就是自己的下線自己教，希望讓更多人學習網頁設計的技術，進而幫助專案填坑的速度。有鑑於有許多前端社群，還有許多的rails教學團隊，所以課程目的會著重於填坑技術。若是希望能快速學前端技術成為一技之長者，可以建議參加前端或rails社群所發起的課程，也可以嘗試innovatist。
Lesson 1 @ BOOKSHNOW 已規劃直播
除高畫質直播外，由講師 Yuan Hsiang Cheng 考慮，打算用哪種方式跟遠端觀眾互動，再選擇適合的通訊工具配合。
報名：http://g0v-mini.kktix.cc/events/fr0ntend-bridge
時間：6/14 14:00~17:00
地點：BOOKSHOW 說書會（台北市信義區基隆路一段141號6樓之7，交通地圖）
費用：附飲料、點心，請自由贊助，量力而捐，如有剩餘，歸入小松基金，下次小松繼續用
直播：https://www.youtube.com/watch?v=qDW-RqKDn1c
第一堂課的目標在教大家網頁設計的入門，如何撰寫正確的 html、css 和 javascript，還有如何簡單的使用 chrome 瀏覽器所提供的網頁開發者工具。
這堂課我會著重在 chrome 開發者工具的使用技巧上面。
因為 html、css 或 javascript 基本上網路上都可以找到教材來看，但是很少人再分享如何操作開發者模式(其實 html5rocks 也有影片教學)。
時間表 (2pm - 5pm)
開場
入門導覽
練習
填坑
成果報告
鑑別問題
開發環境
請參與者一定要準備自己的筆電，因為會有「很多」練習時間，尤其最後有所謂的實際填坑時間，請務必自備筆電。
會教大家設定 類似於 g0v.tw 的網頁開發環境。
教材參考
這邊包含新手入門、線上互動教材，參與者若是事先有空也可以先行練習。
自學自幹工具參考, for airos
報名 (上限27人)
報名者請記得要準備填坑的項目來參與，若是沒有準備的話，請接受主辦方的推坑 :smile_cat:
報名前往: http://g0v-mini.kktix.cc/events/fr0ntend-bridge
待填的坑
行前通知
各位助教、同學大家好，
明天(6/14)，下午2點在BOOKSHOW舉行第零次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。
共同要記得的是攜帶一台筆電，為了增進大家肌肉記憶力，所以安排了不少實作時間，要是沒有筆電可能會無法度過愉快的時光。
報名學生票的朋友，可以的話，先將環境準備好，需求環境如下。
若是不會安裝的朋友也不用擔心，到現場會有助教幫忙，但是會請大家一起協作安裝說明文件，以利後面的人學習參考。
報名助教票的朋友，請準備最愉快的心情，面對分配給各位的前端初心者。
當天投影片
https://www.icloud.com/iw/#keynote/BAJK-EYT33f5Gy-NKoeB7bLG8mumVvmtwoGF/fr0ntend-bridge
當天文字轉播
14:14 (自我介紹)
ly: 怎麼稱呼你、你是學生或助教、你的背景，讓你的助教 / 學員找到你
可以看一下高二生寫的「攝理生活記」部落格 http://blog.cgmlife.net/
14:16
pipi
14:12
stella 使用者體驗設計，學生
mimi，台大新聞所學生，想用在 E 論壇
justin 阿平的朋友，插畫漫畫，學生
rick 學生，節能，幾乎不會，一點 c html css
科比，零傳媒
lee，= jessy，韌體工程師，g0v 公報組，現在去帶學弟張家興
SUMMIT，在中研院統計所研究助理，專長統計分析，想學資料分析跟前端，準備被推坑 >_^
venev：小馬學生，場地主人，飲食可自由取用，電梯卡不足…要不要把卡交出來，場地有問題可找我
alice，助教，可是我會不好意思……原本想報學生但是額滿了…現職前端互動工程師
貝裘，沃草行銷，學生
mrorz，ccsp 助教
Rene，設計師，會一點 html ，愛用（複製貼上XD） bootstrap
brecht，在 ithome 工作，前端，助教
poga，稍微碰前端，助教
acechen，學生，推坑 summit，
tka，github 按綠色按鈕
etblue: 插畫，助教，p.s. 今天文播輸入法亂打，請大家幫改錯字
airos，summit 視覺，平面設計師
ipa：文字影像，學前端
simonpai，前端，做動民主跟超濃郁
pm5，沃草工程師
米奧，助教，網頁設計師
張加薪，交大機械工程碩士，學生（lee 學弟）
http://first-launch.com/images/girl-animation.png
14:28
因為 rails girls 讓我們有點眼紅，就想辦 js girls、css girls，慕安帶實驗室松鼠教大家寫網頁，所以我們也想說來弄…有很多專案提案畫 mockup，一直有人想學網頁，因為自己的下線自己教，有次萌典松不知道為什麼這個責任就默默的落到我身上…默默決定了日期……
純粹學前端技術的話前端跟 rails 社群都有，想投入產業的話有很多其他管道，為了展現 g0v 特色，除了教學外主要實際填坑。
#29
網頁到底怎麼運作？以前要跟長輩敘述瀏覽器就是桌面上有個藍色的 e，但是從輸入網址到呈現發生了哪些事情呢？
#3
大家都有去餐廳過，麥當勞的話會有服務生或點餐的人，點完以後他會把訂單（上面的字你可能看不太懂）送到廚房，廚師做完後才給外場。
對應到網頁開發，網址就是告訴 browser 你要什麼菜，瀏覽器跟後端廚師之間有個 http 協定，然後會回傳一些西，200 ok，404 找不到，500……這個過程是跟你上餐廳點菜類似的。
#5
在廚房裡有冰箱，存放東西，這就是資料庫。知名的 database： blah。程式語言就是像廚師，只是有不同的流派，有 ruby php，但處理的都是一樣的食材。最後透過機器（server）幫我們做食材處理，server有linux，windows。這是後端。
前端有 html css javascript，對應的概念是，html 像是擺盤、css 像是裝飾。那為什麼用 ps 做版的前端設計師要學 js 呢？js 像是調味，如果每道菜一樣的擺盤跟裝飾，調味可以讓他變得更好。
瀏覽器網址有 domain name，電腦則是看 ip。在瀏覽器輸入網址時，電腦會去找伺服器在哪，抓 code 回來，然後瀏覽器會把這些東西變成你看到的網頁。
他爸爸叫 sgml，是標準的規範語言的表示方法，原本的概念是…像作文，我們會用破折號、引號標註文字，html 就是在文字上做標示，包括斜體標籤。後來有人說，可以更進一步表示，最早的網頁只是用來放論文等，html 能力不是很強…html 的開頭就是開始的標籤、結束的標籤，合格的 html 包括：
head 宣告，告訴瀏覽器怎麼處理這些內容
body 就是網頁內容
head 頁面上看不到
#10
doctype：html 當初是一個很簡單的概念，早期提出時東西不豐富，常碰到的問題是每家瀏覽器實作的方式都不太一樣，後來有人提出要標示文件的型別，就是 doctype。4.0 版 html 後面有更長一串的宣告，現在到 html 5 就不用那麼長，單純寫 doctype html 就好了。
#11, 12, 13, 14
head 裡面常常用到這些標籤，title 是瀏覽器分頁上顯示的標題，script js，link 是外連的 css 檔案… blah。常用的就這些。
比較特別的是 meta，是沒有 close tag 的 tag，比方說 charset utf8，中文網頁沒有宣告這一行的話，編碼… blah。tag 裡面一個空白接一個英文字，這就是這個 tag 的屬性 attribute，寫法是(名稱)="(值)"。
head 還可以做 seo，像是 facebook 的 open graph，就是從裡面拉資料出來。
body 裡面常用的標籤是這些，他們的命名其實都是有意思的，h1 是 header 1，p 是 paragraph，最有爭議的是 img 是 image，當初有人提出用 img 代表圖片時，很多人吵很久，說為什麼不用 pic、photo…吵很久以後，網頁圈跟 g0v 一樣先做先贏，所以最後就… XD
a 連結，原本意思是 anchor，錨點。本來的作用是可以跳到一頁裡面的特定地方，最當初是這個用意。後來被廣泛應用在超連結。
ul 跟 ol 是 unordered list, ordered list。table 是表格。
早期的概念其實沒有 css，但 html 本身並不豐富，要怎麼排版呢？就有人想出用 table 排版的方法，可以做出在構圖上很複雜的東西。現在覺得是惡夢，但當初只有這種作法。
後來的 div 跟 span 是有 css 以後才有人提出的。
後面幾個是最近 html 5 以後才有的標籤。
到底可以用哪些標籤？可以去 mdn (mozilla dev network) 查。
(為了連 mdn )
直接進入練習時間。
有網路的話可以去這幾個不同的網站，可以線上直接寫 html / css / js
plunker, codepen, jsfiddle, jsbin
15:35 成功打開 mdn～
html element ref, attribute ref
常用的attr簡介
打開 codepen -
解釋 haml 跟 jade，因為 html 要一直寫開關標籤很煩，所以……但大家可以不用那麼早知道。
15:39
學網頁的過程跟學習語言類似…早期要記一些東西
html 比較單調，直接標籤上去會變成黑白的單調文字頁，但是大家現在看到很多變化的網頁，要怎麼做到呢？就是用 css。css 中英文就這樣寫…是一個描述性語言。
html 也是描述性，兩者不同在於，css 每個都是一個 rule，代表顏色大小輕重等，
解釋 css 語法，冒號分號… balh
光這樣寫不會對 html 產生影響，你要用 selector 指定他影響的 element，裡面寫的規則就是在說要對這個元素做什麼事情。至於這個 selector 怎麼選擇呢？
（打開 mdn css reference）常用的有 background color、border…
每個原素有兩個重要屬性，一個是 id，一個是 class，id identity 是唯一的，一個 html 裡面只有一個人元素能叫這個 id。class 是類別，一群相同 group 的元素都會套用到這個 class 裡的 css，一個元素可以有很多個 class，用空白分開就好。class 在 css 裡面是 . 開頭，id 是 # 開頭。
css rule 後面的會蓋掉前面的。
html 之所以要有 < > 這些語法，適用來標註結構化…
attribute 屬性，（mdn attr ref)
(chrome debug tool)
:hover pseudo selector
可以在 cdt 裡面直接改東西
可以在 cdt 的 network 裡面看那些檔案是怎麼載入進來的，還有每個檔案的花費時間。
如果 10 秒內沒有回應，表示網頁真的太慢，loading 時間是分秒必爭的。這裡可以看哪些檔案拖慢 loading 速度。
cookie 是存一些資料在本地端…
有些網頁鎖右鍵，但在 cdt 裡面這是沒有用的，可以直接存圖跟找影片串流的原始連結 *grin
timeline 做 performance 研究
profiling... blah
resources > cookies，可以看在本地端存了哪些資料
console：原本只知道會噴錯誤，後來在 Y! hack 才知道可以在這裡呼叫一些既定的 js obj，或者會自動完成 blah，例如 window.document 可以看到整份的 source，window.location 可以看這個網址的 func 跟 list ...
element
by tuiry++ (CC By 4.0) 下載 .psd 檔
設計概念：被推坑教學松隕石坑的臉紅紅 ly，帶著挖坑鏟和教材歡樂飛舞～～～（好像還有透明發光的小鼠？）
pipi：很謝謝ly老師的講解把我好幾年前的回憶給找了回來，希望下次能繼續參與！
NewCliCker： 今天超感謝 ly 老師的 HTML + CSS 教學，精闢入理，深入淺出，讓不是資訊背景的人也能輕鬆上手，而且還提供了完整的 Reference 給需要深入查閱的學生參考 :thumbsup:
ipa: 感謝助教 jimmy 協助我卡關一陣子的基礎問題。上課氣氛比較容易把卡關問題解決！ly 準備的教材也讓我重新複習一下基本觀念 :100:
moon: 謝謝ly老師還有我細心強大的米奧助教，抱病一直為我講解真的是太敬業了（哭，感覺在大家的協助下真的可以無痛獲得新技能！！教材也好棒好容易懂！
Summit: 感謝 ly老師 & brecht 助教大大～說實話國中玩過一陣 Dreamweaver跟flash之後就沒碰過網頁了xDD 希望把 HTML/CSS 摸熟之後朝 jQuery & D3.js 出發！
本次報名未到
可能的解決方式
組隊方式