網頁設計/架設網站要學些什麼？
網頁設計通常用來描述網頁前端（用戶端）設計相關的設計過程。比較廣泛的網頁設計定義，涵蓋許多不同的Web開發技能、包含介面設計、網路工程、網路應用程式設計等，這篇講的是以網頁前端開發 Web App 網路應用程式的角度出發。從畫wireframe 開始，用 HTML/CSS 與 JavaScript 呈現網站體驗，並套用 Bootstrap 框架，做出RWD響應式網頁、DOM操作與事件，你做出一個網路應用程式要學會的前端網頁設計技能。
零基礎高效自學網頁設計，用HTML/CSS/JavaScript打造第一個網頁
Web App 網路應用程式是什麼?
能夠直接在網路上執行的軟體被稱為「網路應用程式」(Web application)。我們常聽到的前端 (front-end) 與後端 (back-end)，是開發網路應用程式的分工方式。
前端開發者專注在建立一個流暢、友善的使用者介面，他們更重視視覺化。
後端開發人員負責應用程式的資料管理，以及商務邏輯，這會讓他們投資更多時間在設計與實作抽象的概念，例如演算法 (algorithm) 與資料結構 (data structure)。
不同性質的工作，可能會需要由不同的語言來完成，例如：
- 前端的語言：HTML/CSS/JavaScript
- 後端的語言：PHP、Python、JavaScript、Ruby、Perl
全端開發技能樹：JavaScript 全端工程師23周養成攻略
設計網路應用程式
Persona & User Story 人物誌與使用者故事：Persona 是根據使用族群的行為以及喜好所虛構出的角色。通常一個 Persona 會包含個人資訊與生物數據，像是個人與專業特徵、人口統計資料、教育、購買習慣與動機、偏好和行為。User Story「使用者故事」是根據使用者的需求，對網路應用程式功能的一個簡短描述。每個需求對應為一則故事。可以幫助你思考使用者所想要與需要的，並協助你聰明地設計出更好的產品。
Wireframe ：線匡搞會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁的排版架構。目的是確認內容、排版、功能等等所有的頁面元素符合你的整體設計，根據線框稿，你可以在實際開發產品之前釐清關鍵行動並適當的配置資源。
User Flow 顯示使用者在我們的網路應用程式中執行操作的路徑。通過設計使用者流程，你可以為你的網路應用程式 (或是行動應用程式)，規劃更好的使用者體驗。
HTML
超文字標示語言（Hypertext markup language，HTML），指的是透過各種標籤，為網頁訂出整體的元件、區塊與框架。
大多的 HTML 標籤是語義元件（semantic element）。也就是說，這些標籤帶有意義，而目的是為了讓瀏覽器在讀取時，從字面上就能理解它的用途（如此一來，就可以讓搜尋引擎透過閱讀標籤，大致判定網頁內容。更多請閱讀：HTML 語法教學，快速攻略網頁HTML 標籤的基本元素
CSS
CSS（階層樣式表，Cascading Style Sheets）可以將網頁上各個元素定義精確的位置與樣式。而所謂的「階層式 (cascading)」，指的是我們可以在同一個元件上套用不同樣式，樣式與樣式之間則存在相對的階層關係。
Flexbox
Flexbox 是一種新的佈局系統，鑑於舊有的 float 或 positioning 等排版技術太曲折，而且常常對開發者帶來限制，flexbox 的發明極度適合用於一維排版，對單行或單列內的元件微調間距或對齊方式。
CSS 教學語法入門：認識階層樣式表與Box model 介紹
Bootstrap 是一個免費且開源的CSS前端開發框架 (framework)，也就是它已經預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。這套框架由 HTML、CSS 和 JavaScript 寫成的，核心的設計目標是達成響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。
Bootstrap 最重要的貢獻是它的響應式佈局系統大幅加速了開發速度，另外，它做好了一整套可重覆使用的元件樣式，你只要套用它的 CSS 類別，就能立即使用，省去你調整校對 CSS 的時間。
延伸閱讀：Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學
RWD
Responsive Web Design 簡稱 RWD，RWD 的核心是透過 CSS 的控制，讓同一份網頁能「回應不同的裝置尺寸，呈現出適當的佈局」，讓網站在不同裝置上都有流暢的排版以及良好的使用者體驗。
（程式設計入門課程，從用HTML/CSS/JavaScript 實作架設網頁開始）
JavaScript
JavaScript 是在瀏覽器中執行的程式語言，可以用它來增進網站或網路程式的互動性、及其他動態功能。
jQuery 是 JavaScript 的函式庫，這個函式庫最大的貢獻是統合了各種校調 JavaScript 的重覆性作業，讓開發者在操作 DOM 元素減少麻煩，且較不容易發生錯誤。遭遇跨瀏覽器問題時，前端開發者會需要在程式碼裡寫入 if / else 來解決瀏覽器差異，因此前端開發者會依賴 jQuery 函式庫，jQuery 對 JavaScript 做了另一層函式封裝，除了簡化語法，更重要的封裝了處理瀏覽器相容性的枯燥工作，讓開發者可以使用一套統一的作法，專心寫功能。
延伸閱讀：什麼是 jQuery？前端框架盛行還需要JavaScript函式庫嗎？
DOM
DOM 的全名為 文件物件模型 (Document Object Model)，他是一個由瀏覽器提供的 應用程式介面 (application programming interface)，目的是讓 JavaScript 能存取網頁元素。
API
API 全名：Application Programming Interface，譯為「應用程式介面」，也就是「應用程式對外開放的介面」，API 的使用者是「能夠寫程式的開發者」，開發者可以透過 API 去使用其他人撰寫的應用程式。API是什麼？認識Web API、HTTP 和JSON 資料交換格式
例如：Facebook 圖形API、Google map API、Line API
JSON是JavaScript Object Notation 的縮寫，是一種輕量級的資料交換語言，它參考了 JavaScript 中物件結構的表示方式。該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。幾乎所有網頁開發相關的語言都有解析 JSON 資料的函式庫。
AJAX
Ajax 是 Asynchronous JavaScript and XML 的縮寫，Ajax 並不是單一的技術，而是一套綜合性的瀏覽器端網頁開發技術。Ajax 技術的出現，讓瀏覽器可以向 Server 請求資料而不需費時等待。當瀏覽器接收到 response 之後，新的內容就會即時地添入原本網頁。
什麼是Ajax？ 搞懂非同步請求(Asynchronous request)概念
管理程式碼版本控制
Git 是一套免費、開源、且有許多人使用的版本控制軟體，普遍適合各種開發流程；
GitHub 是一個以 Git 為基礎的服務平台，為開發者提供雲端版本控制服務（Repository Hosting）的平台
框架Framework
一些大型的工具包會被稱為框架，框架會幫忙把最多人用、最常見、最穩定的套件整合在一起，涵蓋到各個可能需要解決的問題，讓開發者得到一個比較完整的解決方案。現今的「框架」其實就是一種提升開發效率、降低維護難度的開發架構。下面是一些主流的JavaScript框架，各自有自己的優缺點，而學習的路徑
自學Web學習資源
進一步學習用JavaScript從事網頁後端開發
為了讓 JavaScript 除了能在瀏覽器（前端）執行，還可以在伺服器（後端) 上做不同的功能，於是出現了Node.js。Node.js 是一個 JavaScript 執行環境 (run-time environment)。有了 Node.js，JavaScript 可以直接建立、讀取、修改和刪除電腦內的檔案，並且能和資料庫連通。
Express 是一套可以在 Node.js 上使用，讓開發者能更方便地建立網頁應用程式的網路框架（web framework）。
Node.js 的套件管理器 – Node Package Manager (npm)
NPM 上放了各式各樣用 JavaScript 撰寫的工具包，在這裡你幾乎可以找到所有你需要使用到的工具，像是 jQuery, Express, Vue 或 React
（後端開發實務，學會用Node.js開發兼具前後端的Web App）
網頁設計工具大補帖：
文字編輯器
Visual Studio Code
Sublime
Brackets
Atom
Web開發和調試工具
Chrome Developer Tools
Build Tools 構建工具與自動化系統
Gulp
Grunt
模組打包工具
Webpack
測試沙盒
Codepen
開發文件
DevDocs
色彩搭配
Coolors
分析網站
Wappalyzer
WhatFont：查詢網站字體
JSON Viewer
