此前端資源區來自於高雄前端社群、六角學院每日來所收集的前端好文，提供大家參考與學習。

前端工程師簡介

  1. 如何自學前端開發
  2. 【六角學院】如何協助你/妳成為前端工程師/前端設計師
  3. 如何應徵前端職缺
  4. 判斷前端職缺內容
  5. 你是前端設計師，還是前端工程師？
  6. 2016前端面試心得
  7. 如何從網路找到適合自己的前端學習資源
  8. 初級前端常用關鍵字
  9. 前端資源懶人包(作者：cashbooktw)
  10. 前端工程師必須學會的現代化前端開發工具
  11. 月影谈：写给想成为前端工程师的同学们
  12. 為什麼我們找不到前端工程師？

前端FAQ

  1. 來看看大家分享自學網頁前端的心路歷程
  2. 感覺我學程式學得很慢，不曉得能否分享自己的學習過程？
  3. 我到補習班學習完，到社會就可以找到好工作嗎？
  4. 前端工程師的價值在哪？
  5. 有什麼好用的瀏覽器插件可以支援前端作業？
  6. 我不是資工背景科系的學生，學前端會很吃力嗎？
  7. 我是即將剛畢業的設計學生，該如何投入前端領域？
  8. 總是不確定自己要學到什麼程度才可以達業界水準該怎麼辦
  9. 持續一百天自學前端

線上前端影音教學網站

  1. 【六角學院】使用 HTML、CSS 開發一個網站
  2. 【六角學院】使用 jQuery 打造互動性網頁動畫效果
  3. 【六角學院】打造一頁式金流商務網頁 
  4. 【六角學院】RWD 響應式手機版網頁設計
  5. 慕課網
  6. codeschool
  7. codecademy

初學者專區

  1. 學css前要準備什麼? 作者：muki wu
  2. 從 HTML + CSS開始學起
  3. HTML、CSS、Javascript基礎教學 作者：josephj
  4. 從軟體工程師角度看CSS
  5. CSS國外觀念教學影片
  6. 前端小字典
  7. 新手在社群上發問時所需注意事項
  8. JavaScript新手必看的上手建議與學習資源大整理

網頁排版教學

  1. 學習 CSS 版面配置
  2. 自學網頁排版流程
  3. CSS基礎技巧
  4. Web Design note with XHTML/CSS 作者：閃光洽
  5. HTML、CSS國外清楚影片教學(code school)
  6. 資策會學習網頁設計評價
  7. 設計圖應該跟Web實作是一致的

心法篇

  1. Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化 作者：飛肯
  2. 給網頁設計師的建議 作者：even wu
  3. 転転愛用的 Mac 前端小工具 2016
  4. 網頁前端設計師的等級表
  5. 提升撰寫HTML、DIV+CSS工作效率的六種方法
  6. 前端廠商職缺面試文心得
  7. 全職前端人員技能參考表
  8. 如何提升網頁效能
  9. 前端工程師面試問題集
  10. 2014前端面試題目
  11. 海外最全前端資源
  12. 如何让你的网页打开速度降低到1s内

HTML、CSS參考書單

  1. HTML&CSS：網站設計建置優化之道

JS參考書單

  1. JavaScript.tw 參考讀物清單
  2. 網路評價推薦書單
  3. 如何挑選 JS Framework

高雄前端社群歷次聚會簡報

  1. 2013-05-11-如何逐步提升CSS的可利用性、模組化
  2. 2013-06-29-現代化網頁基礎排版技術
  3. 2013-08-10-SASS workshop
  4. 2013-09-25-psdtohtml workshop
  5. 2013-10-03-modular-maintainable-css-with-sass-and-compass
  6. 2013-11-03-網頁編輯軟體開發流程交流聚會
  7. 2013-12-08-絕對教會你jQuery動畫效果、DEMO
  8. 2014-01-26-前端小學堂
  9. 2014-04-20-前端圖形再進化、簡報二
  10. 2014-08-30 sketch
  11. 2014-10-05-【媽我當駭客了！】 柯P野生官網API教學workshop
  12. 2014-11-16 Susy2、D3.js
  13. 2015-01-18 Gulp.js
  14. 2015-03-29 Github workshop
  15. 2015-06-21 前端面試大補帖不求人！、簡報
  16. 2015-08-16 coffeescript、Github Service
  17. 2015-09-28 Node.js簡報、範例檔案
  18. 2016012-06 React簡報、範例檔案
  19. 2016-03-27 響應式網站設計實作坊、hackpad
  20. 2016-08-28 前端與 UI 真心合作的不二法門

網頁編輯軟體(Visual Studio Code)

  1. 官網
  2. 官網快速鍵整理
  3. 熱鍵

網頁編輯軟體(sublime text 3)

  1. 一小時上手 Sublime Text 3 網頁編輯器
  2. Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學
  3. sublime text 2 中文教學手冊
  4. mrkt 的程式學習筆記: Sublime Text 2
  5. 國外詳盡教學影片
  6. 快捷鍵分享
  7. Sublime Text 3 Mac 指南
  8. Sublime text 極速應用教學
  9. How To Use SublimeLinter 3

SASS&Compass

  1. 90天掌握Sass
  2. Sass&Compass安裝篇
  3. Sass&Compass投影片教學
  4. 超讚Sass樣式表
  5. Sass國外教學影片
  6. Sass&Compass經典投影片
  7. Button Sass Framework
  8. Sass Conf 2014資源

前端資料總匯

  1. Frontend style guides
  2. 前端書籤
  3. 無障礙網頁規範
  4. Google效能優化建議
  5. 設計師必備資源總匯

Javascript教學

  1. JavaScript - 基礎課程
  2. JavaScript 教學系列整理
  3. JavaScript 标准参考教程
  4. JS判斷式
  5. 閉包觀念、demo
  6. prototype、prototype2
  7. javascript blog
  8. The Right Way
  9. equals signs for JavaScript equality testing
  10. Planning A Front-end JavaScript Application
  11. 理解RESTFul架构

Javascript功能

  1. XML to json
  2. XML to excel
  3. JavaScript Kinetic Scrolling
  4. JSON to CSV/Excel Convert
  5. 如何找到綁定效果的DOM元素
  6. 閉包觀念

Javascript ES6

  1. ECMAScript 6 入门

  2. learn-es2015
  3. JavaScript 模块化七日谈

正規表達式

  1. 線上辭典
  2. 線上學習平台
  3. 圖表化正規表達式
  4. codepen-驗證email
  5. regulex

Angular.js教學

  1. 英文教學影片
  2. ng-animation
  3. angular簡報 - Lion
  4. 有jQuery背景，该如何用AngularJS编程思想？
  5. 60分鐘學習ANGULAR
  6. angular 教學資源

Jquery教學

  1. jQuery 教學 - jQuery Tutorial
  2. 簡體中文API查表
  3. API查詢表1
  4. API查詢表2
  5. 30天學會jquery
  6. jQuery教學大全
  7. codeschool中文翻譯
  8. 你可能不需要 jQuery！使用原生 JavaScript 进行开发

React

  1. React 中文版教學
  2. React 翻譯文件
  3. React 30天教學
  4. 使用 React 和 Webpack 构建静态网站
  5. 初探 React.js：JSX v.s. React.DOM
  6. 從<琅琊榜>學 Redux
  7. redux繁中

Node.js

  1. Node入門
  2. Node.js 學習筆記
  3. IronWorker — Scheduled tasks 好工具

coffeescript

  1. Web Development with CoffeeScript and Sass
  2. CoffeeScript by kvzhuang

CSS觀念

  1. CSS設計原則
  2. CSS: The Good Parts
  3. 前端資源大全
  4. CSS参考手册
  5. CSS分享部落格
  6. 網頁排版之垂直韻律篇(Vertical rhythm)

CSS設計模式

  1. SMACSS
  2. OOCSS
  3. MVCSS

CSS小技巧

  1. CSS垂直置中
  2. CSS垂直置中2
  3. CSS水平垂直置中
  4. CSS文字斷行調整
  5. CSS選擇器
  6. 圖片取代文字
  7. Module 開發 - Adorn Form Elements

CSS3

  1. CSS3 transition、animation介紹
  2. CSS3 transition、漸層animation詳解
  3. CSS3功能與速查表
  4. 各種文字hover過後的效果
  5. CSS3 Hover效果
  6. 迅雷CSS3 動畫設計流程分享
  7. Loading 3D BUTTON

CSS3 web font

  1. 查詢字體網站 (圖搜尋字體)

CSS 電子報版型建置

  1. 電子報網頁版型設計建議
  2. html電子報設計原則整理(edm design rules)
  3. 電子報一次就上手
  4. 電子報的版型越來越難設計了
  5. Responsive eDM 模板製作指南
  6. responsive-email-template

mobile position fixed

  1. Fixed Positioning in Mobile Browsers
  2. CSS: Should we be using fixed position elements in our layouts?
  3. 移动浏览器对CSS之position:fixed支持总结
  4. Super simple off-canvas navigation
  5. http://lifeaustin.com/
  6. http://jsfiddle.net/Sbt75/49/
  7. Easy CSS fix for fixed positioning on Android 2.2 and 2.3
  8. 移动端web页面应用position:fixed题目总结

RWD

  1. 什麼是Responsive Web Design(RWD)？
  2. Responsive Resources
  3. http://www.slideshare.net/irishstu1/responsive-web-design-workshop-23467099
  4. Sass image compiler
  5. 如何在电脑上测试手机网站
  6. A simple guide to responsive design.
  7. fastclick- clear 300ms touched

RWD網站收集

  1. awwwards
  2. mediaquer
  3. Responsive Templates
  4. 日本RWD網站匯集

CSS觀念

  1. CSS設計原則
  2. 前端資源大全
  3. CSS参考手册

Git版本控制系統

  1. 30天精通Git版本控管
  2. 猴子都能懂的Git入門
  3. pro git 教學手冊
  4. 如何將專案上傳至Github
  5. Git远程操作详解
  6. 常用 Git 命令清单
  7. Git教學簡報
  8. Github教學
  9. 开发者日常使用的 Git 命令
  10. 遷移 Git 遠端儲存庫的 3 種方法與注意事項
  11. 線上學習Git操作
  12. git流程教學
  13. 線上學習Git操作2- D3.JS
  14. git - 简易指南
  15. git snippet

前端框架

  1. bootstrap
  2. bootstrap bootsnipp
  3. bootstrap online service
  4. bootstrap中文教學

kendoui hybrid app framework

  1. kendo ui 影片教學
  2. Kendo 开发教程
  3. swipe left

PhoneGap API

  1. Phonegap
  2. localstorage
  3. jqmobile效能調整
  4. jQuery Mobile, PhoneGap, and the Camera Device
  5. mobile framework
  6. 使用 PhoneGap、jQuery Mobile 與台北市政府開放資料
  7. 大陸教學資源
  8. Phonegap InAppBrowser display pdf 2.7.0
  9. PhoneGap ChildBrowser Plugin
  10. Getting Started with PhoneGap Part 3 of 3: ChldBrowser Plugin
  11. josn與jsonp解釋
  12. 推送機制、IOS
  13. phonegap歷史
  14. fileopen
  15. HTML5 ROCK資源大全

PhoneGap 開發輔助工具

  1. Remote Debugging Chrome on Android
  2. android icon location
  3. phonegap application error the connection to the server was unsuccessful

chrome開發人員工具

  1. code school 基礎檢測教學
  2. 詳盡簡報教學
  3. 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
  4. 认识JS（javascript） profile工具
  5. 超詳盡chrome各種技巧
  6. Making a Silky Smooth Web
  7. 60 FPS

gulp.js

  1. Gulp自動化開發流程 簡報
  2. 打造gulp環境
  3. gulp簡報
  4. web server + livereload
  5. Gulp系列文章
  6. gulp cheatsheet

hybrid app設計

  1. Tips & Tricks Learned Releasing an Hybrid App Using Steroids.js

IOS 開發

  1. IOS申請公司開發者帳號

JS conf簡報

  1. JSDC 2014 hackpad

線上服務工具

  1. webpagetest(檢測網站效能)
  2. json線上網路服務

D3.js

  1. D3.js
  2. D3教學資源
  3. D3.js簡報
  4. 國內範例資源
  5. d3.img
  6. d3 json
  7. D3 API
  8. 撈google雲端資料

SVG

  1. SVG Tutorial
  2. SVG 簡報
  3. SVG簡介

有趣網站分享

  1. canvas  zoom in
  2. canvas滾動視差
  3. 滾動視差
  4. 滾動視差2
  5. SUSY RWD
  6. chrome 行動裝置遊戲
  7. webgl game

內容產生器

  1. 圖片產生器

工程師心態分享

  1. 為什麼成為一名工程師這麼難？從程式新手到準工程師的必經之路
  2. 為什麼軟體工程師選擇在半夜工作？Geek 的生產力曲線解密
  3. 五件在我靠程式吃飯之前就該知道的事
  4. 如何養成支撐網路巨量交易的伺服器艦隊
  5. 为什么你有10年经验，但成不了专家？
  6. 有哪些可以應用到每日生活的省時妙招呢？
  7. 學習前端流程心法
  8. 那些在NTUST.CC背後。你所不知道的故事
  9. 為什麽你睡了11個小時仍然覺得疲累？
  10. STARTUP 2.0工程師創業手冊
  11. 免费的编程中文书籍索引

瀏覽器原理

  1. 瀏覽器工作原理

RWD網站分類

  1. 研討會
  2. 作品集
  3. 個人網站
  4. 設計公司網站
  5. 手機APP網站
  6. 產品網站
  7. 行動電子商務網站
  8. 新聞網站
  9. 大學網站
  10. BLOG