wenshyansu/gist:7494985

## gistfile1.txt
輕輕鬆鬆就養成一位前端工程師  課程資料

課程綱要：

Web 題目雖然廣泛，但有些基礎與實作，
如果能夠先知道將能有效的事半功倍。

我們將介紹基礎的應用與進階的應用知識，
融合成許多小型的實作練習。

gist https://gist.github.com/tony1223/7494586
-----------------

基礎系列課程內容

* 基本網頁介紹 HTML

** web sever 介紹,cookie,session,server side(and html)

** DocType 解析網頁的標準
  html5 Doctype <!DOCTYPE HTML>

** 常用 Tag 介紹與示範

*** 頁面元素：html,head,body,meta,title,link,script,style

*** 顯示用元素：div,p,span , h1,h2,  hr,br, ul, ol, li, table,tr,td, iframe, noscript

*** 表單元素：form,input,textarea,label

*** 何謂標籤語意：每個標籤有其意含，應該在正確的地方使用標籤，標籤語意應優先於其外觀。

*** 基礎頁面構成

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
  		<title>網頁標題</title>
  		<link href="css/mycss.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="navbar">
		    <div class="container">
		        <div class="navbar-header">
		          <a class="navbar-brand" href="#">Project name</a>
		        </div>
		    </div>
	    </div>
	    <div class="content">
			<div class="container">
	          <h1>Heading</h1>
	          <p>這是內文這是內文這是內文</p>
	          <p><a class="btn btn-default" href="#" >View details »</a></p>
	        </div>
        </div>

		<div class="footer">
			<p>© Company 2013</p>
		</div>

		<script src="js/jquery.js"></script>
		<script src="js/lib.js"></script>
		<script src="js/page.js"></script>
	</body>
</html>

*** 進階的延伸思考：

table 相關的 tbody,thead,th，為什麼需要 tbody/thead/th 等欄位?


html5 後引入的 header,nav,aside,article,section,
語意為:
<header> 位於HTML5文件頁面頂部，通常放置網站的Logo、大標題或是主要資訊
<nav> 通常放置代表網站的連結或選單
<aside>  定義文章區塊以外的內容，通常使用於內容相關的邊欄
<article> 一個文件內可以有很多的<article>，通常在文件內容很多時，可以作為區分內容之用
<section> 文件內容可以有很多個<section>，通常用於章節或標題的段落區分
<footer> 位於HTML5文件頁面底部，大多用於顯示著作權、作者或相關資訊等

為什麼 html 5 要定義這些 tag？


02. 簡易 CSS 設計與應用技巧

* 在同樣的標準上工作 normalize/reset
* 基本框架設計
** bootstrap 介紹
** (width/height)
** display & float 應用原則
** display,visilibity(visible,hidden )
** background
** layer 觀念(container)
** position:relatie,absolute,static
** z-index

* pseduo selector (LoVe HAte 原則)
 :link , :visited,:hover,:active


03. 網頁事件處理原則 (JavaScript event)

* what's dom , 簡論 JS 基礎物件
* JavaScript 主要用途
** 改變 dom style
** 接收/傳遞資料

* 基礎 JS 語法
  (variable,number,string, array,object,function)

* JS 除錯介紹

* 基礎 UI 事件處理介紹
  click(mousedown,mouseup),keypress(keydown,keyup),
  focus,blur

04. 動態網頁 html 異動技巧 (jQuery Based)

* AJAX , what's AJAX
* what's JSON

* dialog(helper/faker)
** jquery datepicker
** 如何使用第三方 plugin

* delegated event
* hidden input 使用技巧

05. 網頁前端程式碼管理實踐 (RequireJS)

* scope protected
* pop-sub 觀念
* modulized
* (以手刻一個 stopwatch )
	輕輕鬆鬆就養成一位前端工程師課程資料

	課程綱要：

	Web 題目雖然廣泛，但有些基礎與實作，
	如果能夠先知道將能有效的事半功倍。

	我們將介紹基礎的應用與進階的應用知識，
	融合成許多小型的實作練習。

	gist https://gist.github.com/tony1223/7494586
	-----------------

	基礎系列課程內容

	* 基本網頁介紹 HTML

	** web sever 介紹,cookie,session,server side(and html)

	** DocType 解析網頁的標準
	html5 Doctype <!DOCTYPE HTML>

	** 常用 Tag 介紹與示範

	*** 頁面元素：html,head,body,meta,title,link,script,style

	*** 顯示用元素：div,p,span , h1,h2, hr,br, ul, ol, li, table,tr,td, iframe, noscript

	*** 表單元素：form,input,textarea,label

	*** 何謂標籤語意：每個標籤有其意含，應該在正確的地方使用標籤，標籤語意應優先於其外觀。

	*** 基礎頁面構成

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>網頁標題</title>
	<link href="css/mycss.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div class="navbar">
	<div class="container">
	<div class="navbar-header">
	<a class="navbar-brand" href="#">Project name</a>
	</div>
	</div>
	</div>
	<div class="content">
	<div class="container">
	<h1>Heading</h1>
	<p>這是內文這是內文這是內文</p>
	<p><a class="btn btn-default" href="#" >View details »</a></p>
	</div>
	</div>

	<div class="footer">
	<p>© Company 2013</p>
	</div>

	<script src="js/jquery.js"></script>
	<script src="js/lib.js"></script>
	<script src="js/page.js"></script>
	</body>
	</html>

	*** 進階的延伸思考：

	table 相關的 tbody,thead,th，為什麼需要 tbody/thead/th 等欄位?


	html5 後引入的 header,nav,aside,article,section,
	語意為:
	<header> 位於HTML5文件頁面頂部，通常放置網站的Logo、大標題或是主要資訊
	<nav> 通常放置代表網站的連結或選單
	<aside> 定義文章區塊以外的內容，通常使用於內容相關的邊欄
	<article> 一個文件內可以有很多的<article>，通常在文件內容很多時，可以作為區分內容之用
	<section> 文件內容可以有很多個<section>，通常用於章節或標題的段落區分
	<footer> 位於HTML5文件頁面底部，大多用於顯示著作權、作者或相關資訊等

	為什麼 html 5 要定義這些 tag？


	02. 簡易 CSS 設計與應用技巧

	* 在同樣的標準上工作 normalize/reset
	* 基本框架設計
	** bootstrap 介紹
	** (width/height)
	** display & float 應用原則
	** display,visilibity(visible,hidden )
	** background
	** layer 觀念(container)
	** position:relatie,absolute,static
	** z-index

	* pseduo selector (LoVe HAte 原則)
	:link , :visited,:hover,:active


	03. 網頁事件處理原則 (JavaScript event)

	* what's dom , 簡論 JS 基礎物件
	* JavaScript 主要用途
	** 改變 dom style
	** 接收/傳遞資料

	* 基礎 JS 語法
	(variable,number,string, array,object,function)

	* JS 除錯介紹

	* 基礎 UI 事件處理介紹
	click(mousedown,mouseup),keypress(keydown,keyup),
	focus,blur

	04. 動態網頁 html 異動技巧 (jQuery Based)

	* AJAX , what's AJAX
	* what's JSON

	* dialog(helper/faker)
	** jquery datepicker
	** 如何使用第三方 plugin

	* delegated event
	* hidden input 使用技巧

	05. 網頁前端程式碼管理實踐 (RequireJS)

	* scope protected
	* pop-sub 觀念
	* modulized
	* (以手刻一個 stopwatch )