Skip to content

Instantly share code, notes, and snippets.

@wenshyansu
Forked from tony1223/gist:7494586
Created November 16, 2013 02:12
Show Gist options
  • Save wenshyansu/7494985 to your computer and use it in GitHub Desktop.
Save wenshyansu/7494985 to your computer and use it in GitHub Desktop.
輕輕鬆鬆就養成一位前端工程師 課程資料
課程綱要:
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 )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment