12 參考資料

• RWD 相關主題文章(Responsive Web Design Is…)

• 假圖產生

• CSS hamburger menu icon

• W3C viewport

• W3C @media Rule

• Bootstrap Grid Options

• PRACTICAL TYPOGRAPHY

• interneting is hard

• SASS 官網

• Bootstrap 付費版型：WrapBootstrap

• Bootstrap 免費版型：StartBootstrap

• WAI-ARIA

• 無障礙網頁

• NCC - 無障礙網路空間服務網

• HTML - Microdata

• schema.org

• 隨機整數

• 固定式版型滿版的注意事項

書籍

深入淺出HTML&CSS(第二版) http://www.books.com.tw/products/0010596057

深入淺出行動網站開發 http://www.books.com.tw/products/0010552906

深入淺出網站設計 http://www.books.com.tw/products/0010432289

如何設計好網站：Don't make me think http://www.books.com.tw/products/0010651534

CSS Secrets 中文版：解決網頁設計問題的有效秘訣 http://www.books.com.tw/products/0010702536

你所不知道的 JS | 導讀，型別與文法 (You Don't Know JS: Up & Going)

你所不知道的 JS｜範疇與Closures，this與物件原型

HTML

所有標籤：https://www.w3schools.com/tags/

更多 Meta Data：https://www.w3schools.com/tags/tag_meta.asp

更多的 HTML Entities：https://www.w3schools.com/html/html_entities.asp

事件列表 https://www.w3schools.com/tags/ref_eventattributes.asp

htmlreference https://htmlreference.io/

CSS

Can I Use：https://caniuse.com/

JavaScript

w3schools JS https://www.w3schools.com/js/

jQuery 官網 http://jquery.com/

jQuery 的 Ajax 完整官網資源 http://api.jquery.com/jQuery.ajax/

外掛

• Lazy Loading：Lozad.js

• 所見即所得編輯器：CKEditor

• Animate on scroll：AOS

• 圖表工具：Chart.js

• 輪播：slick

• ScrollMagic

• Sprite 效果：jQuery Sprite

• 視差滾動：Skrollr

• 預載圖片：jPreLoader

• CSS3 FullScreen SlideShow

• jQuerySwitch Button

• FullPage

• PageFlip

其它連結

JSON Parser http://json.parser.online.fr/

XML Viewer https://codebeautify.org/xmlviewer

課外讀物，命名方法論：OOCSS、SMACSS、SUITCSS、BEM、rscss(這個比較簡單)。

網站技術

• 網站前端：HTML、CSS、JavaScript

  • ​SASS

  • 做 RWD 前端框架：Bootstrap

  • 做元件框架：Vue、React、Angular

  • 編譯相關：Gulp、Webpack

  • 測試：Jest、Mocha

  • 使用 JS 做 APP：React Native

• 網站後端：PHP ( 框架： Laravel )、Node.js ( 框架： Express )

• 作業系統：MacOS、CentOS

• 資料庫：MySQL、MariaDB、Redis、MongoDB

• 版本控管：Git (介面工具：Sourcetree)

• 使用容器技術佈署：Docker

• 雲端伺服器平台服務：AWS、DigitalOcean、Google Cloud