fr0ntend-br2dge 零時前端教學松 # 1Lesson 1Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F報名：http://g0v-mini.kktix.cc/events/fr0ntend-br2dge時間：7/26 18:00~
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2016-05-11 13:56 | r2027 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:56 – 13:56 | r2025 – r2026 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2024 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2023 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2022 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2021 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2020 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2019 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2018 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2017 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2016 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2015 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2014 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2013 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2012 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:55 | r2011 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2010 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2009 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2008 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2007 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2006 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 – 13:54 | r2004 – r2005 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2003 | |
顯示 diff（2 行未修改）
|
||
| 2016-05-11 13:54 | r2002 | |
顯示 diff- fr0ntend-br2dge 零時前端教學松 # 1
- Lesson 1
- *Lesson 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-F
- slides: http://bit.ly/fr2ntend-slide
- project: 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 repo
- *https://github.com/orgs/g0v/teams/leaners/repositories
-
- *坑
-
- hackfoldr‧改
- 內容移至 Hackfoldr 2.0
-
- *參考資料
- Slides
- https://www.icloud.com/iw/#keynote/BAILBahrZ5aqJr5bUv2BMCWK0QG81pwGI7mF/fr2ntend
- http://specificity.keegan.st/
-
- *CSS+JS 基礎題
- http://bit.ly/fr2ntend
- *JS 基礎題
- http://codepen.io/collection/fisHo/
- http://codepen.io/yhsiang/pen/ueKBb
- *計算機
- http://codepen.io/joshsmith01/pen/viotJ
- *codepen basic: http://codepen.io/Funsella/pen/mtKGo
- *html+css+js 邊做邊玩邊學的好玩網站
- *CSS 選擇器、選取器（Selector）種類簡介
- *學習 CSS 版面配置
- *漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
- CSS延伸
- *米奧的CSS教學 及教材
- *CCSP http://ccsp.ntumobile.org/webdev/css.html
-
- 作品題
- *slideshow
- *小時鐘
- *progress bar
-
- Twitter Bootstrap
- Bootstrap 雖然大部分是 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分鐘的展示時間。
-
- *當天文字轉播
- selector
- *
- *type selector
- *對應到 html 的 tag name
- *eg:
- *<p>..</p>, <h1>..</h1> ...etc
- *class selector
- *用 . 號當開頭
- *整份 html 裡面同一個 class 的可以有好幾個
- *eg:
- *<p class='a'> ...</p>
- *.a { ....} // select it.
- *id selector
- *用 # 號當開頭
- *整份 html 裡面同一個 id 只會有一個
- *eg:
- *<p id='b'> .... </p>
- *#b { .... }
- *attribute
- *用 [] 框起來
- *通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性
-
- combinator
- selector 的組合技 www
- 參考網頁結構的樹狀圖，
- *中間空一個空白的話代表所有直系卑親屬
- *中間一個 > 代表直系卑親屬中的一等親
- *+ 代表下一個弟妹
- *~ 代表任何弟妹
- *用 , 分隔代表社團... (group)
- *pseudo class
- *:first-child 代表長子
- *:nth-child(k) 代表第k個孩子(k從1開始)
- *:hover
- *:link
- *pseudo element
- *雖然 css2 的一個冒號 : 也可以，但 css3 以後用兩個 ::，請大家盡量用兩個冒號
- *::after
- *::before
- *這兩個常用來顯示 icon
- *::first-letter
- *::first-line
-
- css specificity
- *同時符合很多條 css 規則的時候，到底要聽誰的呢？
- *有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator
-
- box model
- *margin, border, padding, content
-
- float
-
- clear:both
- 在上層寫 overflow: auto 會自動幫 clear，跨 browser
- 不用多寫一個 element 來負責 clear！
- by hannah++
-
- css naming
- *oocss
- *smacss
- *bem
- *參考作法：layout 用的 div 命名也可以考慮用 id，跟 class 區隔，不會不小心選到 by hannah++
-
- JavaScript
-
- *var //宣告變數
- 變數像是一個盒子，可以把東西放進去又拿出來
-
- js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)
- *應該說js會自動去判斷並且轉換型別?
- *
-
- *operator
- * +, - , * , / , % (取餘數)
- * 一
- * &&(and) , ||(or), ! (not)
- *(condition) ? (true) : (false)
- *== vs === ( == 會強制轉型 ex: '1' == 1 為 true) 參考: http://zero.milosz.ca/
-
- *Control Flow
- if跟switch中選一個來用，建議用if ，因為在大型專案中，效能會好很多
+ 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 ，因為在大型專案中，效能會好很多
|
||
| 2014-08-16 07:12 – 07:15 | r1977 – r2001 | |
顯示 diff（5 行未修改）
地點：優仕資訊光華旗艦店2F (台北市八德路一段15號2F，交通地圖）
費用：100元
+ 錄影：https://www.youtube.com/playlist?list=PLdwQWxpS513A976FGNRwf1XOT-7tr2o-F
+ slides: http://bit.ly/fr2ntend-slide
+ project: http://bit.ly/fr2ntend
+
徵延長線:
*能帶延長線人的幫忙留下名字跟數量在上面
（78 行未修改）
*當天文字轉播
-
- slides: bit.ly/fr2ntend-slide
- project: bit.ly/fr2ntend
-
selector
*
（79 行未修改）
|
||
| 2014-07-29 07:19 – 07:20 | r1968 – r1976 | |
顯示 diff（136 行未修改）
css specificity
*同時符合很多條 css 規則的時候，到底要聽誰的呢？
- *有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
+ *有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator
box model
（33 行未修改）
|
||
| 2014-07-29 02:51 | r1967 | |
顯示 diff（174 行未修改）
|
||
| 2014-07-28 18:10 – 18:10 | r1960 – r1966 | |
顯示 diff- fr0ntend-br2dge 零時前端教學松
+ fr0ntend-br2dge 零時前端教學松 # 1
Lesson 1
*Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F
（171 行未修改）
|
||
| 2014-07-28 10:54 – 10:54 | r1952 – r1959 | |
顯示 diff（31 行未修改）
hackfoldr‧改
- *repo https://github.com/hackfoldr/maker.moztw.org
- *mockup http://hack.etblue.tw/ js part by tkalu++, au++
- *to-dos
- *while kktix, facebook, github... etc.
- *auto target: _blank
- *auto new window icon
- *make edit button link to correct ethercalc sheet
- *dynamic html head title
- *when a menu link is selected, apply active class
- *when a level 2 menu link is selected, expand parent folder
- *complete nav bar menu
- *g0v version
- *moztw version
- *setup default folder
- *add about.html or welcome page
- *redirect homepage to about.html or welcome page or sandbox
- *easy white label setup for ngo / other communities
- *responsive design
+ 內容移至 Hackfoldr 2.0
*參考資料
（138 行未修改）
|
||
| 2014-07-28 06:51 – 06:52 | r1882 – r1951 | |
顯示 diff（34 行未修改）
*mockup http://hack.etblue.tw/ js part by tkalu++, au++
*to-dos
+ *while kktix, facebook, github... etc.
+ *auto target: _blank
+ *auto new window icon
*make edit button link to correct ethercalc sheet
*dynamic html head title
（150 行未修改）
|
||
| 2014-07-27 17:31 – 17:44 | r1603 – r1881 | |
顯示 diff（18 行未修改）
20:00 - 20:30 填坑時間
20:30 - 21:00 成果報告及心得回饋
+
+ 活動照片
+ *
+
+ 活動錄影
+ *https://www.youtube.com/playlist?action_edit=1&list=PLdwQWxpS513A976FGNRwf1XOT-7tr2o-F by macpaul++
+
+ github repo
+ *https://github.com/orgs/g0v/teams/leaners/repositories
*坑
（3 行未修改）
*mockup http://hack.etblue.tw/ js part by tkalu++, au++
*to-dos
+ *make edit button link to correct ethercalc sheet
+ *dynamic html head title
+ *when a menu link is selected, apply active class
+ *when a level 2 menu link is selected, expand parent folder
+ *complete nav bar menu
+ *g0v version
+ *moztw version
+ *setup default folder
*add about.html or welcome page
- *homepage redirect to about.html
+ *redirect homepage to about.html or welcome page or sandbox
+ *easy white label setup for ngo / other communities
*responsive design
- *complete nav bar menu
*參考資料
（138 行未修改）
|
||
| 2014-07-26 16:53 – 16:55 | r1594 – r1602 | |
顯示 diff（158 行未修改）
js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)
*應該說js會自動去判斷並且轉換型別?
+ *
*operator
（8 行未修改）
|
||
| 2014-07-26 12:35 – 12:35 | r1585 – r1593 | |
顯示 diff（157 行未修改）
js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)
+ *應該說js會自動去判斷並且轉換型別?
*operator
（8 行未修改）
|
||
| 2014-07-26 12:32 – 12:32 | r1583 – r1584 | |
顯示 diff（169 行未修改）
|
||
| 2014-07-26 12:18 – 12:21 | r1519 – r1582 | |
顯示 diff（164 行未修改）
*(condition) ? (true) : (false)
*== vs === ( == 會強制轉型 ex: '1' == 1 為 true) 參考: http://zero.milosz.ca/
+
+ *Control Flow
+ if跟switch中選一個來用，建議用if ，因為在大型專案中，效能會好很多
|
||
| 2014-07-26 12:08 – 12:11 | r1482 – r1518 | |
顯示 diff（162 行未修改）
* 一
* &&(and) , ||(or), ! (not)
- *? :
- *== vs === ( == 會強致轉型 ex '1' == 1)
+ *(condition) ? (true) : (false)
+ *== vs === ( == 會強制轉型 ex: '1' == 1 為 true) 參考: http://zero.milosz.ca/
|
||
| 2014-07-26 12:06 – 12:06 | r1476 – r1481 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , % mod(取餘數)
+ * +, - , * , / , % (取餘數)
+ * 一
* &&(and) , ||(or), ! (not)
*? :
（1 行未修改）
|
||
| 2014-07-26 12:05 – 12:06 | r1450 – r1475 | |
顯示 diff（162 行未修改）
* &&(and) , ||(or), ! (not)
*? :
- *== vs ===
+ *== vs === ( == 會強致轉型 ex '1' == 1)
|
||
| 2014-07-26 12:05 – 12:05 | r1444 – r1449 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * &&(and) , ||(or)
+ * &&(and) , ||(or), ! (not)
*? :
*== vs ===
|
||
| 2014-07-26 12:05 – 12:05 | r1441 – r1443 | |
顯示 diff（162 行未修改）
* &&(and) , ||(or)
*? :
- *==
+ *== vs ===
|
||
| 2014-07-26 12:05 | r1440 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * &&(and) , ||(or
+ * &&(and) , ||(or)
*? :
*==
|
||
| 2014-07-26 12:05 | r1439 | |
顯示 diff（162 行未修改）
* &&(and) , ||(or
*? :
- *=
+ *==
|
||
| 2014-07-26 12:05 – 12:05 | r1437 – r1438 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * &&(and) , ||
+ * &&(and) , ||(or
*? :
*=
|
||
| 2014-07-26 12:05 | r1436 | |
顯示 diff（162 行未修改）
* &&(and) , ||
*? :
- *
+ *=
|
||
| 2014-07-26 12:05 – 12:05 | r1434 – r1435 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * &&(a , ||
+ * &&(and) , ||
*? :
*
|
||
| 2014-07-26 12:05 | r1433 | |
顯示 diff（162 行未修改）
* &&(a , ||
*? :
+ *
|
||
| 2014-07-26 12:05 | r1432 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * &&( , ||
+ * &&(a , ||
*? :
|
||
| 2014-07-26 12:05 | r1431 | |
顯示 diff（162 行未修改）
* &&( , ||
*? :
- -
|
||
| 2014-07-26 12:05 | r1430 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * && , ||
+ * &&( , ||
*? :
-
|
||
| 2014-07-26 12:04 – 12:05 | r1421 – r1429 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- *&& && , ||
- *
+ * && , ||
+ *? :
+ -
|
||
| 2014-07-26 12:04 | r1420 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- *&& && ,
+ *&& && , ||
*
|
||
| 2014-07-26 12:04 | r1419 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- *& && ,
+ *&& && ,
*
|
||
| 2014-07-26 12:04 | r1418 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- *& && , \\
+ *& && ,
*
|
||
| 2014-07-26 12:04 | r1417 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- * && , \\
+ *& && , \\
*
|
||
| 2014-07-26 12:04 – 12:04 | r1411 – r1416 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , % mod(取餘數)
- *
+ * && , \\
*
|
||
| 2014-07-26 12:04 | r1410 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , %mod(取餘數)
+ * +, - , * , / , % mod(取餘數)
*
*
|
||
| 2014-07-26 12:04 | r1409 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , %mod(取餘數)
- *
+ *
*
|
||
| 2014-07-26 12:04 | r1408 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod(取餘數)
+ * +, - , * , / , %mod(取餘數)
*
*
|
||
| 2014-07-26 12:04 – 12:04 | r1406 – r1407 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , mod(取餘數)
+ *
*
|
||
| 2014-07-26 12:04 | r1405 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod(取餘數
+ * +, - , * , / , mod(取餘數)
*
|
||
| 2014-07-26 12:04 | r1404 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , mod(取餘數
- -
+ *
|
||
| 2014-07-26 12:04 | r1403 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod(取餘
+ * +, - , * , / , mod(取餘數
-
|
||
| 2014-07-26 12:04 | r1402 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , mod(取餘
+ -
|
||
| 2014-07-26 12:04 – 12:04 | r1399 – r1401 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod(取鄰
+ * +, - , * , / , mod(取餘
|
||
| 2014-07-26 12:04 | r1398 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , mod(取鄰
- *
|
||
| 2014-07-26 12:04 | r1397 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod(取
+ * +, - , * , / , mod(取鄰
*
|
||
| 2014-07-26 12:04 – 12:04 | r1395 – r1396 | |
顯示 diff（160 行未修改）
*operator
* +, - , * , / , mod(取
+ *
|
||
| 2014-07-26 12:04 | r1394 | |
顯示 diff（162 行未修改）
|
||
| 2014-07-26 12:04 – 12:04 | r1391 – r1393 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mod
+ * +, - , * , / , mod(取
|
||
| 2014-07-26 12:04 | r1390 | |
顯示 diff（162 行未修改）
|
||
| 2014-07-26 12:04 | r1389 | |
顯示 diff（159 行未修改）
*operator
- * +, - , * , / , mo
+ * +, - , * , / , mod
|
||
| 2014-07-26 12:04 | r1388 | |
顯示 diff（162 行未修改）
|
||
| 2014-07-26 12:04 – 12:04 | r1370 – r1387 | |
顯示 diff（159 行未修改）
*operator
+ * +, - , * , / , mo
|
||
| 2014-07-26 12:04 – 12:04 | r1365 – r1369 | |
顯示 diff（157 行未修改）
js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)
+
+ *operator
|
||
| 2014-07-26 12:04 – 12:04 | r1359 – r1364 | |
顯示 diff（153 行未修改）
JavaScript
- *var
+ *var //宣告變數
變數像是一個盒子，可以把東西放進去又拿出來
（1 行未修改）
|
||
| 2014-07-26 12:04 | r1358 | |
顯示 diff（159 行未修改）
|
||
| 2014-07-26 12:04 | r1357 | |
顯示 diff（153 行未修改）
JavaScript
- *var
+ *var
變數像是一個盒子，可以把東西放進去又拿出來
（1 行未修改）
|
||
| 2014-07-26 12:04 – 12:04 | r1353 – r1356 | |
顯示 diff（156 行未修改）
變數像是一個盒子，可以把東西放進去又拿出來
- js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是
+ js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)
|
||
| 2014-07-26 12:03 – 12:03 | r1350 – r1352 | |
顯示 diff（159 行未修改）
|
||
| 2014-07-26 12:01 – 12:03 | r1313 – r1349 | |
顯示 diff（150 行未修改）
*bem
*參考作法：layout 用的 div 命名也可以考慮用 id，跟 class 區隔，不會不小心選到 by hannah++
+
+ JavaScript
+
+ *var
+ 變數像是一個盒子，可以把東西放進去又拿出來
+
+ js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是
|
||
| 2014-07-26 12:01 – 12:01 | r1311 – r1312 | |
顯示 diff（152 行未修改）
|
||
| 2014-07-26 12:00 – 12:01 | r1306 – r1310 | |
顯示 diff（120 行未修改）
*pseudo class
*:first-child 代表長子
- *:nth-child(k) 代表第k個孩子
+ *:nth-child(k) 代表第k個孩子(k從1開始)
*:hover
*:link
（27 行未修改）
|
||
| 2014-07-26 11:52 – 11:52 | r1297 – r1305 | |
顯示 diff（47 行未修改）
*學習 CSS 版面配置
*漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
-
+ CSS延伸
+ *米奧的CSS教學 及教材
+ *CCSP http://ccsp.ntumobile.org/webdev/css.html
作品題
（98 行未修改）
|
||
| 2014-07-26 11:49 – 11:50 | r1265 – r1296 | |
顯示 diff（147 行未修改）
*smacss
*bem
+ *參考作法：layout 用的 div 命名也可以考慮用 id，跟 class 區隔，不會不小心選到 by hannah++
|
||
| 2014-07-26 11:41 – 11:43 | r1226 – r1264 | |
顯示 diff（35 行未修改）
http://specificity.keegan.st/
- CSS+JS 基礎題
+ *CSS+JS 基礎題
http://bit.ly/fr2ntend
- JS 基礎題
+ *JS 基礎題
http://codepen.io/collection/fisHo/
http://codepen.io/yhsiang/pen/ueKBb
- - 計算機http://codepen.io/joshsmith01/pen/viotJ
+ *計算機
+ http://codepen.io/joshsmith01/pen/viotJ
*codepen basic: http://codepen.io/Funsella/pen/mtKGo
- *html+css+js 邊做邊玩邊學的好玩網站
- *https://dash.generalassemb.ly/projects
+ *html+css+js 邊做邊玩邊學的好玩網站
*CSS 選擇器、選取器（Selector）種類簡介
+ *學習 CSS 版面配置
+ *漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
（98 行未修改）
|
||
| 2014-07-26 11:41 | r1225 | |
顯示 diff（147 行未修改）
|
||
| 2014-07-26 11:40 – 11:41 | r1210 – r1224 | |
顯示 diff（40 行未修改）
http://codepen.io/collection/fisHo/
http://codepen.io/yhsiang/pen/ueKBb
- 計算機http://codepen.io/joshsmith01/pen/viotJ
- codepen basic:
- http://codepen.io/Funsella/pen/mtKGo
- html+css+js 邊做邊玩邊學的好玩網站
- https://dash.generalassemb.ly/projects
- CSS 選擇器、選取器（Selector）種類簡介
+ - 計算機http://codepen.io/joshsmith01/pen/viotJ
+ *codepen basic: http://codepen.io/Funsella/pen/mtKGo
+ *html+css+js 邊做邊玩邊學的好玩網站
+ *https://dash.generalassemb.ly/projects
+ *CSS 選擇器、選取器（Selector）種類簡介
（98 行未修改）
|
||
| 2014-07-26 11:36 – 11:38 | r1192 – r1209 | |
顯示 diff（141 行未修改）
不用多寫一個 element 來負責 clear！
by hannah++
+
+ css naming
+ *oocss
+ *smacss
+ *bem
|
||
| 2014-07-26 11:35 | r1191 | |
顯示 diff（143 行未修改）
|
||
| 2014-07-26 11:29 – 11:29 | r1182 – r1190 | |
顯示 diff（112 行未修改）
*中間空一個空白的話代表所有直系卑親屬
*中間一個 > 代表直系卑親屬中的一等親
- *+ 代表手足
- *~ 代表?
+ *+ 代表下一個弟妹
+ *~ 代表任何弟妹
*用 , 分隔代表社團... (group)
*pseudo class
（25 行未修改）
|
||
| 2014-07-26 11:26 – 11:27 | r1175 – r1181 | |
顯示 diff（117 行未修改）
*pseudo class
*:first-child 代表長子
- *:nth-child 代表?
+ *:nth-child(k) 代表第k個孩子
*:hover
*:link
（21 行未修改）
|
||
| 2014-07-26 11:18 – 11:23 | r1108 – r1174 | |
顯示 diff（134 行未修改）
box model
*margin, border, padding, content
+
+ float
+
+ clear:both
+ 在上層寫 overflow: auto 會自動幫 clear，跨 browser
+ 不用多寫一個 element 來負責 clear！
+ by hannah++
|
||
| 2014-07-26 11:11 – 11:12 | r1096 – r1107 | |
顯示 diff（133 行未修改）
box model
- -
+ *margin, border, padding, content
|
||
| 2014-07-26 11:11 | r1095 | |
顯示 diff（136 行未修改）
|
||
| 2014-07-26 11:11 | r1094 | |
顯示 diff（133 行未修改）
box model
+ -
|
||
| 2014-07-26 11:10 – 11:10 | r1091 – r1093 | |
顯示 diff（132 行未修改）
*有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
- b
+ box model
|
||
| 2014-07-26 11:10 | r1090 | |
顯示 diff（135 行未修改）
|
||
| 2014-07-26 11:10 – 11:10 | r1087 – r1089 | |
顯示 diff（131 行未修改）
*同時符合很多條 css 規則的時候，到底要聽誰的呢？
*有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
- hhdgghjgdjfhkhjhdahlfhjdfhjfhfdjfffajkhhlkjhajlhfhfhjddjhsksjdhfjdjlafhjdlahfjdhfjdlafdjjjjjj
+
+ b
|
||
| 2014-07-26 11:06 – 11:07 | r1049 – r1086 | |
顯示 diff（90 行未修改）
*對應到 html 的 tag name
*eg:
- p, h1, h2, h3....
+ *<p>..</p>, <h1>..</h1> ...etc
*class selector
*用 . 號當開頭
（39 行未修改）
|
||
| 2014-07-26 11:06 – 11:06 | r1047 – r1048 | |
顯示 diff（45 行未修改）
html+css+js 邊做邊玩邊學的好玩網站
https://dash.generalassemb.ly/projects
+ CSS 選擇器、選取器（Selector）種類簡介
（84 行未修改）
|
||
| 2014-07-26 11:04 – 11:06 | r1030 – r1046 | |
顯示 diff（88 行未修改）
*type selector
*對應到 html 的 tag name
- *eg. p, h1, h2, h3....
+ *eg:
+ p, h1, h2, h3....
*class selector
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *eg. <p class='a'> ...</p>
+ *eg:
+ *<p class='a'> ...</p>
*.a { ....} // select it.
*id selector
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *
+ *eg:
*<p id='b'> .... </p>
*#b { .... }
（29 行未修改）
|
||
| 2014-07-26 10:56 – 10:58 | r1017 – r1029 | |
顯示 diff（43 行未修改）
codepen basic:
http://codepen.io/Funsella/pen/mtKGo
+ html+css+js 邊做邊玩邊學的好玩網站
+ https://dash.generalassemb.ly/projects
+
作品題
（81 行未修改）
|
||
| 2014-07-26 10:52 – 10:53 | r990 – r1016 | |
顯示 diff（125 行未修改）
*同時符合很多條 css 規則的時候，到底要聽誰的呢？
*有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
- h
+ hhdgghjgdjfhkhjhdahlfhjdfhjfhfdjfffajkhhlkjhajlhfhfhjddjhsksjdhfjdjlafhjdlahfjdhfjdlafdjjjjjj
|
||
| 2014-07-26 10:52 | r989 | |
顯示 diff（128 行未修改）
|
||
| 2014-07-26 10:52 | r988 | |
顯示 diff（125 行未修改）
*同時符合很多條 css 規則的時候，到底要聽誰的呢？
*有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
+ h
|
||
| 2014-07-26 10:49 – 10:49 | r986 – r987 | |
顯示 diff（33 行未修改）
Slides
https://www.icloud.com/iw/#keynote/BAILBahrZ5aqJr5bUv2BMCWK0QG81pwGI7mF/fr2ntend
+ http://specificity.keegan.st/
CSS+JS 基礎題
（89 行未修改）
|
||
| 2014-07-26 10:46 – 10:49 | r951 – r985 | |
顯示 diff（122 行未修改）
css specificity
- -
+ *同時符合很多條 css 規則的時候，到底要聽誰的呢？
+ *有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculator:
|
||
| 2014-07-26 10:46 | r950 | |
顯示 diff（125 行未修改）
|
||
| 2014-07-26 10:46 – 10:46 | r941 – r949 | |
顯示 diff（121 行未修改）
*::first-line
- c
+ css specificity
+ -
|
||
| 2014-07-26 10:46 | r940 | |
顯示 diff（124 行未修改）
|
||
| 2014-07-26 10:43 – 10:46 | r862 – r939 | |
顯示 diff（113 行未修改）
*:hover
*:link
- -
+ *pseudo element
+ *雖然 css2 的一個冒號 : 也可以，但 css3 以後用兩個 ::，請大家盡量用兩個冒號
+ *::after
+ *::before
+ *這兩個常用來顯示 icon
+ *::first-letter
+ *::first-line
+
+ c
|
||
| 2014-07-26 10:43 | r861 | |
顯示 diff（116 行未修改）
|
||
| 2014-07-26 10:41 – 10:43 | r798 – r860 | |
顯示 diff（103 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
- *中間一個 > 代表直系卑親屬
- *+
+ *中間空一個空白的話代表所有直系卑親屬
+ *中間一個 > 代表直系卑親屬中的一等親
+ *+ 代表手足
+ *~ 代表?
+ *用 , 分隔代表社團... (group)
+ *pseudo class
+ *:first-child 代表長子
+ *:nth-child 代表?
+ *:hover
+ *:link
+ -
|
||
| 2014-07-26 10:41 – 10:41 | r793 – r797 | |
顯示 diff（93 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg.
+ *
*<p id='b'> .... </p>
*#b { .... }
（10 行未修改）
|
||
| 2014-07-26 10:41 – 10:41 | r790 – r792 | |
顯示 diff（105 行未修改）
*中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
*中間一個 > 代表直系卑親屬
+ *+
|
||
| 2014-07-26 10:41 | r789 | |
顯示 diff（94 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg.
- <p id='b'> .... </p>
- #b { .... }
+ *<p id='b'> .... </p>
+ *#b { .... }
*attribute
*用 [] 框起來
（7 行未修改）
|
||
| 2014-07-26 10:41 | r788 | |
顯示 diff（104 行未修改）
參考網頁結構的樹狀圖，
*中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
- *中間一個 >
+ *中間一個 > 代表直系卑親屬
|
||
| 2014-07-26 10:40 | r787 | |
顯示 diff（94 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg.
- *<p id='b'> .... </p>
- *#b { .... }
+ <p id='b'> .... </p>
+ #b { .... }
*attribute
*用 [] 框起來
（7 行未修改）
|
||
| 2014-07-26 10:40 – 10:40 | r785 – r786 | |
顯示 diff（104 行未修改）
參考網頁結構的樹狀圖，
*中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
- *中間一個 > 大表
+ *中間一個 >
|
||
| 2014-07-26 10:40 | r784 | |
顯示 diff（107 行未修改）
|
||
| 2014-07-26 10:40 – 10:40 | r778 – r783 | |
顯示 diff（104 行未修改）
參考網頁結構的樹狀圖，
*中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
+ *中間一個 > 大表
|
||
| 2014-07-26 10:40 – 10:40 | r770 – r777 | |
顯示 diff（94 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg.
- */co<p id='b'> .... </p>
+ *<p id='b'> .... </p>
*#b { .... }
*attribute
（7 行未修改）
|
||
| 2014-07-26 10:40 | r769 | |
顯示 diff（103 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空一個空白會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
+ *中間空一個空白的話，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
|
||
| 2014-07-26 10:40 – 10:40 | r765 – r768 | |
顯示 diff（94 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg.
- *<p id='b'> .... </p>
+ */co<p id='b'> .... </p>
*#b { .... }
*attribute
（7 行未修改）
|
||
| 2014-07-26 10:40 | r764 | |
顯示 diff（103 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空一個空白，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
+ *中間空一個空白會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
|
||
| 2014-07-26 10:40 | r763 | |
顯示 diff（93 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'> .... </p>
+ *eg.
+ *<p id='b'> .... </p>
*#b { .... }
*attribute
（7 行未修改）
|
||
| 2014-07-26 10:40 | r762 | |
顯示 diff（102 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空一個空白，會選到它的後代，也就是在網頁樹狀圖裡面的
+ *中間空一個空白，會選到它的後代，也就是在網頁樹狀圖裡面的它的下層的東西
|
||
| 2014-07-26 10:40 – 10:40 | r750 – r761 | |
顯示 diff（94 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg. <p id='b'> .... </p>
- *#b
+ *#b { .... }
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:40 | r749 | |
顯示 diff（31 行未修改）
*參考資料
-
Slides
https://www.icloud.com/iw/#keynote/BAILBahrZ5aqJr5bUv2BMCWK0QG81pwGI7mF/fr2ntend
（70 行未修改）
|
||
| 2014-07-26 10:40 – 10:40 | r745 – r748 | |
顯示 diff（95 行未修改）
*整份 html 裡面同一個 id 只會有一個
*eg. <p id='b'> .... </p>
- *
+ *#b
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:40 – 10:40 | r743 – r744 | |
顯示 diff（48 行未修改）
*小時鐘
*progress bar
+
+ Twitter Bootstrap
+ Bootstrap 雖然大部分是 CSS 的工夫，但是有 11 支元件是有用到 js 來控制的。這些元件的 js 部分都不算太複雜，在認識了 jQuery 的基礎之後值得觀摩。
+ Bootstrap doc/demo: http://getbootstrap.com/javascript/
+ source code: https://github.com/twbs/bootstrap/tree/master/js
（49 行未修改）
|
||
| 2014-07-26 10:40 – 10:40 | r737 – r742 | |
顯示 diff（89 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'> .... <
+ *eg. <p id='b'> .... </p>
+ *
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r736 | |
顯示 diff（97 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空一
+ *中間空一個空白，會選到它的後代，也就是在網頁樹狀圖裡面的
|
||
| 2014-07-26 10:39 | r735 | |
顯示 diff（31 行未修改）
*參考資料
- Twitter Bootstrap
- Bootstrap 雖然大部分是 CSS 的工夫，但是有 11 支元件是有用到 js 來控制的。這些元件的 js 部分都不算太複雜，在認識了 jQuery 的基礎之後值得觀摩。
- Bootstrap doc/demo: http://getbootstrap.com/javascript/
- source code: https://github.com/twbs/bootstrap/tree/master/js
Slides
（65 行未修改）
|
||
| 2014-07-26 10:39 – 10:39 | r732 – r734 | |
顯示 diff（104 行未修改）
|
||
| 2014-07-26 10:39 – 10:39 | r730 – r731 | |
顯示 diff（37 行未修改）
Slides
+ https://www.icloud.com/iw/#keynote/BAILBahrZ5aqJr5bUv2BMCWK0QG81pwGI7mF/fr2ntend
CSS+JS 基礎題
（62 行未修改）
|
||
| 2014-07-26 10:39 – 10:39 | r728 – r729 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'> .... >
+ *eg. <p id='b'> .... <
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r727 | |
顯示 diff（103 行未修改）
|
||
| 2014-07-26 10:39 – 10:39 | r725 – r726 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'> ..
+ *eg. <p id='b'> .... >
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r724 | |
顯示 diff（36 行未修改）
source code: https://github.com/twbs/bootstrap/tree/master/js
- Sl
+ Slides
CSS+JS 基礎題
（62 行未修改）
|
||
| 2014-07-26 10:39 | r723 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'>
+ *eg. <p id='b'> ..
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r722 | |
顯示 diff（36 行未修改）
source code: https://github.com/twbs/bootstrap/tree/master/js
- S
+ Sl
CSS+JS 基礎題
（62 行未修改）
|
||
| 2014-07-26 10:39 – 10:39 | r720 – r721 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'
+ *eg. <p id='b'>
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r719 | |
顯示 diff（36 行未修改）
source code: https://github.com/twbs/bootstrap/tree/master/js
- S
+ S
CSS+JS 基礎題
（62 行未修改）
|
||
| 2014-07-26 10:39 | r718 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'
+ *eg. <p id='b'
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r717 | |
顯示 diff（100 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間空
+ *中間空一
|
||
| 2014-07-26 10:39 | r716 | |
顯示 diff（35 行未修改）
Bootstrap doc/demo: http://getbootstrap.com/javascript/
source code: https://github.com/twbs/bootstrap/tree/master/js
-
+ S
CSS+JS 基礎題
（62 行未修改）
|
||
| 2014-07-26 10:39 | r715 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b'
+ *eg. <p id='b'
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r714 | |
顯示 diff（100 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *中間
+ *中間空
|
||
| 2014-07-26 10:39 | r713 | |
顯示 diff（92 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
- *eg. <p id='b
+ *eg. <p id='b'
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:39 | r712 | |
顯示 diff（35 行未修改）
Bootstrap doc/demo: http://getbootstrap.com/javascript/
source code: https://github.com/twbs/bootstrap/tree/master/js
+
（63 行未修改）
|
||
| 2014-07-26 10:39 | r711 | |
顯示 diff（99 行未修改）
selector 的組合技 www
參考網頁結構的樹狀圖，
- *
+ *中間
|
||
| 2014-07-26 10:39 – 10:39 | r699 – r710 | |
顯示 diff（91 行未修改）
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
+ *eg. <p id='b
*attribute
*用 [] 框起來
（6 行未修改）
|
||
| 2014-07-26 10:38 – 10:39 | r676 – r698 | |
顯示 diff（95 行未修改）
*通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性
- 網頁結構的樹狀圖
- -
+ combinator
+ selector 的組合技 www
+ 參考網頁結構的樹狀圖，
+ *
|
||
| 2014-07-26 10:38 | r675 | |
顯示 diff（99 行未修改）
|
||
| 2014-07-26 10:38 – 10:38 | r667 – r674 | |
顯示 diff（95 行未修改）
*通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性
- #
+ 網頁結構的樹狀圖
+ -
|
||
| 2014-07-26 10:37 | r666 | |
顯示 diff（98 行未修改）
|
||
| 2014-07-26 10:37 | r665 | |
顯示 diff（94 行未修改）
*用 [] 框起來
*通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性
+
+ #
|
||
| 2014-07-26 10:37 – 10:37 | r657 – r664 | |
顯示 diff（37 行未修改）
- CSS+JS 基
+ CSS+JS 基礎題
+ http://bit.ly/fr2ntend
JS 基礎題
http://codepen.io/collection/fisHo/
（53 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r652 – r656 | |
顯示 diff（86 行未修改）
*整份 html 裡面同一個 class 的可以有好幾個
*eg. <p class='a'> ...</p>
- *.a { ....} // se
+ *.a { ....} // select it.
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 | r651 | |
顯示 diff（37 行未修改）
- CSS+JS
+ CSS+JS 基
JS 基礎題
http://codepen.io/collection/fisHo/
（53 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r648 – r650 | |
顯示 diff（86 行未修改）
*整份 html 裡面同一個 class 的可以有好幾個
*eg. <p class='a'> ...</p>
- *.a { ....}
+ *.a { ....} // se
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 | r647 | |
顯示 diff（37 行未修改）
- CSS+JS
+ CSS+JS
JS 基礎題
http://codepen.io/collection/fisHo/
（53 行未修改）
|
||
| 2014-07-26 10:37 | r646 | |
顯示 diff（86 行未修改）
*整份 html 裡面同一個 class 的可以有好幾個
*eg. <p class='a'> ...</p>
- *.a { ....}
+ *.a { ....}
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r644 – r645 | |
顯示 diff（37 行未修改）
+ CSS+JS
JS 基礎題
http://codepen.io/collection/fisHo/
（53 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r626 – r643 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *eg. <p class='a'>
+ *eg. <p class='a'> ...</p>
+ *.a { ....}
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r624 – r625 | |
顯示 diff（90 行未修改）
*attribute
*用 [] 框起來
- *通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的
+ *通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性
|
||
| 2014-07-26 10:37 | r623 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *eg. <p class='a'
+ *eg. <p class='a'>
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 | r622 | |
顯示 diff（90 行未修改）
*attribute
*用 [] 框起來
- *通常用在 input 裡面，因為表單的輸入欄位會有
+ *通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的
|
||
| 2014-07-26 10:37 | r621 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *eg. <p class='a
+ *eg. <p class='a'
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 | r620 | |
顯示 diff（90 行未修改）
*attribute
*用 [] 框起來
- *通常用在 input 裡面，
+ *通常用在 input 裡面，因為表單的輸入欄位會有
|
||
| 2014-07-26 10:37 – 10:37 | r613 – r619 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *eg.
+ *eg. <p class='a
*id selector
*用 # 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:37 – 10:37 | r605 – r612 | |
顯示 diff（90 行未修改）
*attribute
*用 [] 框起來
+ *通常用在 input 裡面，
|
||
| 2014-07-26 10:37 – 10:37 | r603 – r604 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *
+ *eg.
*id selector
*用 # 號當開頭
（3 行未修改）
|
||
| 2014-07-26 10:37 | r602 | |
顯示 diff（89 行未修改）
*整份 html 裡面同一個 id 只會有一個
*attribute
- *用 []
+ *用 [] 框起來
|
||
| 2014-07-26 10:37 – 10:37 | r599 – r601 | |
顯示 diff（92 行未修改）
|
||
| 2014-07-26 10:37 | r598 | |
顯示 diff（89 行未修改）
*整份 html 裡面同一個 id 只會有一個
*attribute
- *用 []
+ *用 []
|
||
| 2014-07-26 10:36 | r597 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *l
+ *
*id selector
*用 # 號當開頭
（3 行未修改）
|
||
| 2014-07-26 10:36 | r596 | |
顯示 diff（89 行未修改）
*整份 html 裡面同一個 id 只會有一個
*attribute
- *用
+ *用 []
|
||
| 2014-07-26 10:36 | r595 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
- *
+ *l
*id selector
*用 # 號當開頭
（3 行未修改）
|
||
| 2014-07-26 10:36 – 10:36 | r593 – r594 | |
顯示 diff（89 行未修改）
*整份 html 裡面同一個 id 只會有一個
*attribute
- *
+ *用
|
||
| 2014-07-26 10:36 | r592 | |
顯示 diff（84 行未修改）
*用 . 號當開頭
*整份 html 裡面同一個 class 的可以有好幾個
+ *
*id selector
*用 # 號當開頭
（3 行未修改）
|
||
| 2014-07-26 10:36 – 10:36 | r582 – r591 | |
顯示 diff（83 行未修改）
*class selector
*用 . 號當開頭
- *整份 html 裡面同一個 class
+ *整份 html 裡面同一個 class 的可以有好幾個
*id selector
*用 # 號當開頭
*整份 html 裡面同一個 id 只會有一個
+ *attribute
+ *
|
||
| 2014-07-26 10:36 – 10:36 | r576 – r581 | |
顯示 diff（80 行未修改）
*type selector
*對應到 html 的 tag name
- *eg. p, h1,
+ *eg. p, h1, h2, h3....
*class selector
*用 . 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:36 | r575 | |
顯示 diff（83 行未修改）
*class selector
*用 . 號當開頭
- *整份 html 裡面同一個 cla
+ *整份 html 裡面同一個 class
*id selector
*用 # 號當開頭
（1 行未修改）
|
||
| 2014-07-26 10:36 | r574 | |
顯示 diff（80 行未修改）
*type selector
*對應到 html 的 tag name
- *eg. p, h
+ *eg. p, h1,
*class selector
*用 . 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:36 | r573 | |
顯示 diff（83 行未修改）
*class selector
*用 . 號當開頭
- *整份 html 裡面同一個
+ *整份 html 裡面同一個 cla
*id selector
*用 # 號當開頭
（1 行未修改）
|
||
| 2014-07-26 10:36 – 10:36 | r571 – r572 | |
顯示 diff（80 行未修改）
*type selector
*對應到 html 的 tag name
- *eg. p
+ *eg. p, h
*class selector
*用 . 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:36 | r570 | |
顯示 diff（83 行未修改）
*class selector
*用 . 號當開頭
- *整份 html
+ *整份 html 裡面同一個
*id selector
*用 # 號當開頭
（1 行未修改）
|
||
| 2014-07-26 10:36 – 10:36 | r565 – r569 | |
顯示 diff（80 行未修改）
*type selector
*對應到 html 的 tag name
- *
+ *eg. p
*class selector
*用 . 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:36 | r564 | |
顯示 diff（83 行未修改）
*class selector
*用 . 號當開頭
- *整份 h
+ *整份 html
*id selector
*用 # 號當開頭
（1 行未修改）
|
||
| 2014-07-26 10:36 – 10:36 | r562 – r563 | |
顯示 diff（80 行未修改）
*type selector
*對應到 html 的 tag name
+ *
*class selector
*用 . 號當開頭
（4 行未修改）
|
||
| 2014-07-26 10:35 – 10:36 | r526 – r561 | |
顯示 diff（77 行未修改）
selector
-
+ *
*type selector
*對應到 html 的 tag name
- *
+ *class selector
+ *用 . 號當開頭
+ *整份 h
+ *id selector
+ *用 # 號當開頭
+ *整份 html 裡面同一個 id 只會有一個
|
||
| 2014-07-26 10:35 | r525 | |
顯示 diff（83 行未修改）
|
||
| 2014-07-26 10:35 – 10:35 | r521 – r524 | |
顯示 diff（79 行未修改）
*type selector
- *對應到 html 的 ta
+ *對應到 html 的 tag name
+ *
|
||
| 2014-07-26 10:35 | r520 | |
顯示 diff（82 行未修改）
|
||
| 2014-07-26 10:35 – 10:35 | r514 – r519 | |
顯示 diff（79 行未修改）
*type selector
- *對應到 ht
+ *對應到 html 的 ta
|
||
| 2014-07-26 10:35 | r513 | |
顯示 diff（82 行未修改）
|
||
| 2014-07-26 10:35 – 10:35 | r510 – r512 | |
顯示 diff（79 行未修改）
*type selector
- *
+ *對應到 ht
|
||
| 2014-07-26 10:35 – 10:35 | r508 – r509 | |
顯示 diff（82 行未修改）
|
||
| 2014-07-26 10:35 – 10:35 | r499 – r507 | |
顯示 diff（77 行未修改）
selector
+
+ *type selector
+ *
|
||
| 2014-07-26 10:35 | r498 | |
顯示 diff（74 行未修改）
slides: bit.ly/fr2ntend-slide
- project:
+ project: bit.ly/fr2ntend
selector
|
||
| 2014-07-26 10:34 – 10:35 | r495 – r497 | |
顯示 diff（75 行未修改）
slides: bit.ly/fr2ntend-slide
project:
+
selector
|
||
| 2014-07-26 10:34 – 10:34 | r493 – r494 | |
顯示 diff（74 行未修改）
slides: bit.ly/fr2ntend-slide
- proje
+ project:
selector
|
||
| 2014-07-26 10:34 | r492 | |
顯示 diff（75 行未修改）
slides: bit.ly/fr2ntend-slide
proje
- selec
+ selector
|
||
| 2014-07-26 10:34 | r491 | |
顯示 diff（74 行未修改）
slides: bit.ly/fr2ntend-slide
- p
+ proje
selec
|
||
| 2014-07-26 10:34 | r490 | |
顯示 diff（75 行未修改）
slides: bit.ly/fr2ntend-slide
p
- s
+ selec
|
||
| 2014-07-26 10:34 | r489 | |
顯示 diff（74 行未修改）
slides: bit.ly/fr2ntend-slide
-
+ p
s
|
||
| 2014-07-26 10:34 | r488 | |
顯示 diff（74 行未修改）
slides: bit.ly/fr2ntend-slide
+
+ s
|
||
| 2014-07-26 10:34 – 10:34 | r477 – r487 | |
顯示 diff（73 行未修改）
*當天文字轉播
- slides:
+ slides: bit.ly/fr2ntend-slide
|
||
| 2014-07-26 10:34 – 10:34 | r474 – r476 | |
顯示 diff（73 行未修改）
*當天文字轉播
- s
+ slides:
|
||
| 2014-07-26 10:34 | r473 | |
顯示 diff（76 行未修改）
|
||
| 2014-07-26 10:34 – 10:34 | r466 – r472 | |
顯示 diff（71 行未修改）
最後一個小時，則是希望助教能夠引導學生完成一個小的作品，會保留5-10分鐘的展示時間。
- @
+ *當天文字轉播
+
+ s
|
||
| 2014-07-26 10:34 | r465 | |
顯示 diff（74 行未修改）
|
||
| 2014-07-26 10:34 – 10:34 | r463 – r464 | |
顯示 diff（70 行未修改）
css和js希望都將時間控制在30分鐘之內，給大家30分鐘的練習時間，屆時要靠助教們補充。
最後一個小時，則是希望助教能夠引導學生完成一個小的作品，會保留5-10分鐘的展示時間。
+
+ @
|
||
| 2014-07-26 10:27 – 10:27 | r461 – r462 | |
顯示 diff（41 行未修改）
http://codepen.io/yhsiang/pen/ueKBb
計算機http://codepen.io/joshsmith01/pen/viotJ
- codepan basic:
+ codepen basic:
http://codepen.io/Funsella/pen/mtKGo
（26 行未修改）
|
||
| 2014-07-26 08:33 – 08:37 | r388 – r460 | |
顯示 diff（19 行未修改）
20:30 - 21:00 成果報告及心得回饋
- 坑
+ *坑
+ hackfoldr‧改
+ *repo https://github.com/hackfoldr/maker.moztw.org
+ *mockup http://hack.etblue.tw/ js part by tkalu++, au++
+ *to-dos
+ *add about.html or welcome page
+ *homepage redirect to about.html
+ *responsive design
+ *complete nav bar menu
*參考資料
（39 行未修改）
|
||
| 2014-07-26 06:25 – 06:31 | r371 – r387 | |
顯示 diff（27 行未修改）
Bootstrap doc/demo: http://getbootstrap.com/javascript/
source code: https://github.com/twbs/bootstrap/tree/master/js
+
JS 基礎題
http://codepen.io/collection/fisHo/
http://codepen.io/yhsiang/pen/ueKBb
+ 計算機http://codepen.io/joshsmith01/pen/viotJ
+ codepan basic:
+ http://codepen.io/Funsella/pen/mtKGo
作品題
（25 行未修改）
|
||
| 2014-07-25 12:13 – 12:13 | r369 – r370 | |
顯示 diff（30 行未修改）
JS 基礎題
http://codepen.io/collection/fisHo/
+ http://codepen.io/yhsiang/pen/ueKBb
作品題
（25 行未修改）
|
||
| 2014-07-25 06:12 – 07:44 | r328 – r368 | |
顯示 diff（28 行未修改）
source code: https://github.com/twbs/bootstrap/tree/master/js
- 行前通知
+ JS 基礎題
+ http://codepen.io/collection/fisHo/
+
+ 作品題
+ *slideshow
+ *小時鐘
+ *progress bar
+
+
+
+ *行前通知
學生
明天(7/26)，晚上6點在Youth舉行第二次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。
（16 行未修改）
|
||
| 2014-07-25 05:20 – 05:41 | r323 – r327 | |
顯示 diff（34 行未修改）
要記得攜帶一台筆電，為了增進大家肌肉記憶力，所以安排了不少實作時間，要是沒有筆電可能會無法度過愉快的時光。
- 可以的話，事先構想一個網站介面圖。可以找已經有網站構想的g0v專案，也可以自己發想，希望透過課程和助教的幫忙，能順利轉成html + css的架構。
+ 可以的話，事先構想一個網頁介面圖。可以找已有網站構想的g0v專案，也可以自己發想，希望透過課程和助教的幫忙，能順利轉成html + css的架構。
助教
+ 明天(7/26)，晚上6點在Youth舉行第二次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。
+
+ 很感謝各位報名助教，屆時會分配一個學生給每個人，希望大家能不吝分享自己的前端經驗。
+
+ 這次課程主要分成兩大塊，css切版和javascript入門。
+ css會分成三部分：css 選擇器複習、css 元素位置概念、經典的版型
+ javascript則分成兩部分：變數到流程控制、簡單的網頁互動(換背景顏色的按鈕)
+
+ css和js希望都將時間控制在30分鐘之內，給大家30分鐘的練習時間，屆時要靠助教們補充。
+ 最後一個小時，則是希望助教能夠引導學生完成一個小的作品，會保留5-10分鐘的展示時間。
|
||
| 2014-07-25 05:20 | r322 | |
顯示 diff（39 行未修改）
|
||
| 2014-07-25 05:20 – 05:20 | r316 – r321 | |
顯示 diff（27 行未修改）
Bootstrap doc/demo: http://getbootstrap.com/javascript/
source code: https://github.com/twbs/bootstrap/tree/master/js
+
+ 行前通知
+ 學生
+ 明天(7/26)，晚上6點在Youth舉行第二次的零時前端教學松，大家不要忘記來喔，活動會準時開始也請記得盡量不要遲到，一起把握短暫的學習時光。以下有幾點注意事項，請大家務必仔細閱讀。
+
+ 要記得攜帶一台筆電，為了增進大家肌肉記憶力，所以安排了不少實作時間，要是沒有筆電可能會無法度過愉快的時光。
+
+ 可以的話，事先構想一個網站介面圖。可以找已經有網站構想的g0v專案，也可以自己發想，希望透過課程和助教的幫忙，能順利轉成html + css的架構。
+
+ 助教
|
||
| 2014-07-22 01:08 – 01:10 | r295 – r315 | |
顯示 diff（2 行未修改）
*Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F
報名：http://g0v-mini.kktix.cc/events/fr0ntend-br2dge
- 時間：7/26 18:00~21:00
+ 時間：7/26 18:00~21:00（下午沒事的人可以來 萌典迷你松 偷跑）
地點：優仕資訊光華旗艦店2F (台北市八德路一段15號2F，交通地圖）
費用：100元
（11 行未修改）
20:00 - 20:30 填坑時間
20:30 - 21:00 成果報告及心得回饋
+
+ 坑
+
*參考資料
（4 行未修改）
|
||
| 2014-07-20 16:21 – 16:21 | r284 – r294 | |
顯示 diff（22 行未修改）
Twitter Bootstrap
Bootstrap 雖然大部分是 CSS 的工夫，但是有 11 支元件是有用到 js 來控制的。這些元件的 js 部分都不算太複雜，在認識了 jQuery 的基礎之後值得觀摩。
- Bootstrap doc/demo: http://getbootstrap.com/javascript/
+ Bootstrap doc/demo: http://getbootstrap.com/javascript/
source code: https://github.com/twbs/bootstrap/tree/master/js
|
||
| 2014-07-13 14:09 – 14:10 | r270 – r283 | |
顯示 diff（5 行未修改）
地點：優仕資訊光華旗艦店2F (台北市八德路一段15號2F，交通地圖）
費用：100元
-
+ 徵延長線:
+ *能帶延長線人的幫忙留下名字跟數量在上面
+ *
第二堂課目標，教大家網頁切板的概念，幾種常見版型，搭配javascript入門，變數型別和流程控制。這次利用codepen設計一些簡單的任務讓大家完成，有興趣的助教們也可以先寫一些codepen貼上來。範圍在css 選擇器、css 盒子模型、css 元素位置、js型別認識、js流程控制。
（14 行未修改）
|
||
| 2014-07-12 13:52 – 13:57 | r162 – r269 | |
顯示 diff（16 行未修改）
20:00 - 20:30 填坑時間
20:30 - 21:00 成果報告及心得回饋
+
+ *參考資料
+ Twitter Bootstrap
+ Bootstrap 雖然大部分是 CSS 的工夫，但是有 11 支元件是有用到 js 來控制的。這些元件的 js 部分都不算太複雜，在認識了 jQuery 的基礎之後值得觀摩。
+ Bootstrap doc/demo: http://getbootstrap.com/javascript/
+ source code: https://github.com/twbs/bootstrap/tree/master/js
|
||
| 2014-07-12 07:26 | r161 | |
顯示 diff（18 行未修改）
|
||
| 2014-07-12 03:54 – 04:11 | r1 – r160 | |
顯示 diff- Untitled
+ fr0ntend-br2dge 零時前端教學松
+ Lesson 1
+ *Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F
+ 報名：http://g0v-mini.kktix.cc/events/fr0ntend-br2dge
+ 時間：7/26 18:00~21:00
+ 地點：優仕資訊光華旗艦店2F (台北市八德路一段15號2F，交通地圖）
+ 費用：100元
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ 第二堂課目標，教大家網頁切板的概念，幾種常見版型，搭配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 成果報告及心得回饋
|
||
| 2014-07-12 03:53 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||