fr0ntend-br2dge 零時前端教學松 # 1Lesson 1Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F報名：http://g0v-mini.kktix.cc/events/fr0ntend-br2dge時間：7/26 18:00~21:00（下午沒事的人可以來 萌典迷你松 偷跑）地點：優仕資訊光華旗艦店2F (台北市八德路一段15號2F，交通地圖）費用：100元錄影：https://www.youtube.com/playlist?list=PLdwQWxpS513A976FGNRwf1XOT-7tr2o-Fslides: http://bit.ly/fr2ntend-slideproject: http://bit.ly/fr2ntend徵延長線: 能帶延長線人的幫忙留下名字跟數量在上面第二堂課目標，教大家網頁切板的概念，幾種常見版型，搭配javascript入門，變數型別和流程控制。這次利用codepen設計一些簡單的任務讓大家完成，有興趣的助教們也可以先寫一些codepen貼上來。範圍在css 選擇器、css 盒子模型、css 元素位置、js型別認識、js流程控制。時間表 (6pm - 9pm)18:00 - 18:05 開場18:05 - 18:30 css 切板教學18:30 - 19:00 css 切板練習19:00 - 19:30 js 入門19:30 - 20:00 js 入門練習20:00 - 20:30 填坑時間20:30 - 21:00 成果報告及心得回饋活動照片活動錄影https://www.youtube.com/playlist?action_edit=1&list=PLdwQWxpS513A976FGNRwf1XOT-7tr2o-F by macpaul++github repohttps://github.com/orgs/g0v/teams/leaners/repositories坑hackfoldr‧改內容移至 Hackfoldr 2.0參考資料Slideshttps://www.icloud.com/iw/#keynote/BAILBahrZ5aqJr5bUv2BMCWK0QG81pwGI7mF/fr2ntendhttp://specificity.keegan.st/CSS+JS 基礎題http://bit.ly/fr2ntendJS 基礎題http://codepen.io/collection/fisHo/http://codepen.io/yhsiang/pen/ueKBb計算機http://codepen.io/joshsmith01/pen/viotJcodepen basic: http://codepen.io/Funsella/pen/mtKGohtml+css+js 邊做邊玩邊學的好玩網站 CSS 選擇器、選取器（Selector）種類簡介學習 CSS 版面配置  漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例 CSS延伸米奧的CSS教學 及教材CCSP http://ccsp.ntumobile.org/webdev/css.html作品題slideshow小時鐘progress barTwitter BootstrapBootstrap 雖然大部分是 CSS 的工夫，但是有 11 支元件是有用到 js 來控制的。這些元件的 js 部分都不算太複雜，在認識了 jQuery 的基礎之後值得觀摩。Bootstrap doc/demo: http://getbootstrap.com/javascript/ source code: https://github.com/twbs/bootstrap/tree/master/js行前通知學生明天(7/26)，晚上6點在Youth舉行第二次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。要記得攜帶一台筆電，為了增進大家肌肉記憶力，所以安排了不少實作時間，要是沒有筆電可能會無法度過愉快的時光。可以的話，事先構想一個網頁介面圖。可以找已有網站構想的g0v專案，也可以自己發想，希望透過課程和助教的幫忙，能順利轉成html + css的架構。助教明天(7/26)，晚上6點在Youth舉行第二次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。很感謝各位報名助教，屆時會分配一個學生給每個人，希望大家能不吝分享自己的前端經驗。這次課程主要分成兩大塊，css切版和javascript入門。css會分成三部分：css 

選擇器複習、css 元素位置概念、經典的版型javascript則分成兩部分：變數到流程控制、簡單的網頁互動(換背景顏色的按鈕)css和js希望都將時間控制在30分鐘之內，給大家30分鐘的練習時間，屆時要靠助教們補充。最後一個小時，則是希望助教能夠引導學生完成一個小的作品，會保留5-10分鐘的展示時間。當天文字轉播selectortype selector對應到 html 的 tag nameeg:<p>..</p>, <h1>..</h1> ...etcclass selector用 . 號當開頭整份 html 裡面同一個 class 的可以有好幾個eg:<p class=’a’> ...</p>.a { ....}   // select it.id selector用 # 號當開頭整份 html 裡面同一個 id 只會有一個eg:<p id=’b’> .... </p>#b { .... } attribute用 [] 框起來通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性combinatorselector 的組合技 www參考網頁結構的樹狀圖，中間空一個空白的話代表所有直系卑親屬中間一個 > 代表直系卑親屬中的一等親+ 代表下一個弟妹~ 代表任何弟妹用 , 分隔代表社團... (group)pseudo class:first-child 代表長子:nth-child(k) 代表第k個孩子(k從1開始):hover:linkpseudo element雖然 css2 的一個冒號 : 也可以，但 css3 以後用兩個 ::，請大家盡量用兩個冒號::after::before這兩個常用來顯示 icon::first-letter::first-linecss specificity同時符合很多條 css 規則的時候，到底要聽誰的呢？有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculatorbox modelmargin, border, padding, contentfloatclear:both在上層寫 overflow: auto 會自動幫 clear，跨 browser不用多寫一個 element 來負責 clear！by hannah++css namingoocsssmacssbem參考作法：layout 用的 div 命名也可以考慮用 id，跟 class 區隔，不會不小心選到 by hannah++JavaScriptvar  //宣告變數變數像是一個盒子，可以把東西放進去又拿出來js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)應該說js會自動去判斷並且轉換型別?operator +, - , * , / , % (取餘數) 一 &&(and) , ||(or), ! (not)(condition) ? (true) : (false) ==  vs ===   ( == 會強制轉型 ex: ’1’ == 1 為 true) 參考: http://zero.milosz.ca/Control Flowif跟switch中選一個來用，建議用if ，因為在大型專案中，效能會好很多