網頁設計教學：課程學習攻略與工具大補帖 - ALPHA Camp

... 響應式網頁、DOM操作與事件，你做出一個網路應用程式要學會的前端網頁設計技能。

零基礎高效自學網頁設計，用HTML/CSS/JavaScript打造第一個網頁 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息限時3000元獎金New非本科跨領域學程式最新課程資料人才種子計畫數位職涯RPG學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們數位職涯推手計畫📣課程說明會馬上報名程式學習網頁設計教學：課程學習攻略與工具大補帖Posted on 2019-10-21  by    by網頁設計/架設網站要學些什麼？網頁設計通常用來描述網頁前端（用戶端）設計相關的設計過程。

比較廣泛的網頁設計定義，涵蓋許多不同的Web開發技能、包含介面設計、網路工程、網路應用程式設計等，這篇講的是以網頁前端開發WebApp網路應用程式的角度出發。

從畫wireframe開始，用HTML/CSS與JavaScript呈現網站體驗，並套用Bootstrap框架，做出RWD響應式網頁、DOM操作與事件，你做出一個網路應用程式要學會的前端網頁設計技能。

零基礎高效自學網頁設計，用HTML/CSS/JavaScript打造第一個網頁WebApp網路應用程式是什麼?能夠直接在網路上執行的軟體被稱為「網路應用程式」(Webapplication)。

我們常聽到的前端(front-end)與後端(back-end)，是開發網路應用程式的分工方式。

前端開發者專注在建立一個流暢、友善的使用者介面，他們更重視視覺化。

後端開發人員負責應用程式的資料管理，以及商務邏輯，這會讓他們投資更多時間在設計與實作抽象的概念，例如演算法(algorithm)與資料結構(datastructure)。

不同性質的工作，可能會需要由不同的語言來完成，例如：前端的語言：HTML/CSS/JavaScript後端的語言：PHP、Python、JavaScript、Ruby、Perl全端開發技能樹：JavaScript全端工程師23周養成攻略設計網路應用程式Persona&UserStory人物誌與使用者故事：Persona是根據使用族群的行為以及喜好所虛構出的角色。

通常一個Persona會包含個人資訊與生物數據，像是個人與專業特徵、人口統計資料、教育、購買習慣與動機、偏好和行為。

UserStory「使用者故事」是根據使用者的需求，對網路應用程式功能的一個簡短描述。

每個需求對應為一則故事。

可以幫助你思考使用者所想要與需要的，並協助你聰明地設計出更好的產品。

工具：StoriesOnBoardWireframe：線匡搞會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁的排版架構。

目的是確認內容、排版、功能等等所有的頁面元素符合你的整體設計，根據線框稿，你可以在實際開發產品之前釐清關鍵行動並適當的配置資源。

工具：Balsamiq、JUSTINMINDUserFlow顯示使用者在我們的網路應用程式中執行操作的路徑。

通過設計使用者流程，你可以為你的網路應用程式(或是行動應用程式)，規劃更好的使用者體驗。

工具：overflow、Lucidchart前端工程師要會什麼？工作上會遇到什麼挑戰HTML超文字標示語言（Hypertextmarkuplanguage，HTML），指的是透過各種標籤，為網頁訂出整體的元件、區塊與框架。

大多的HTML標籤是語義元件（semanticelement）。

也就是說，這些標籤帶有意義，而目的是為了讓瀏覽器在讀取時，從字面上就能理解它的用途（如此一來，就可以讓搜尋引擎透過閱讀標籤，大致判定網頁內容。

更多請閱讀：HTML語法教學，快速攻略網頁HTML標籤的基本元素網頁設計入門，一文讀懂HTML、CSSCSSCSS（階層樣式表，CascadingStyleSheets）可以將網頁上各個元素定義精確的位置與樣式。

而所謂的「階層式(cascading)」，指的是我們可以在同一個元件上套用不同樣式，樣式與樣式之間則存在相對的階層關係。

Flexbox‍Flexbox是一種新的佈局系統，鑑於舊有的float或positioning等排版技術太曲折，而且常常對開發者帶來限制，flexbox的發明極度適合用於一維排版，對單行或單列內的元件微調間距或對齊方式。

CSS教學語法入門：認識階層樣式表與Boxmodel介紹Bootstrap‍Bootstrap是一個免費且開源的CSS前端開發框架(framework)，也就是它已經預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。

這套框架由HTML、CSS和JavaScript寫成的，核心的設計目標是達成響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。

Bootstrap最重要的貢獻是它的響應式佈局系統大幅加速了開發速度，另外，它做好了一整套可重覆使用的元件樣式，你只要套用它的CSS類別，就能立即使用，省去你調整校對CSS的時間。

延伸閱讀：Bootstrap是什麼？給網頁設計新手的Bootstrap4入門教學‍RWDResponsiveWebDesign簡稱RWD，RWD的核心是透過CSS的控制，讓同一份網頁能「回應不同的裝置尺寸，呈現出適當的佈局」，讓網站在不同裝置上都有流暢的排版以及良好的使用者體驗。

（程式設計入門課程，從用HTML/CSS/JavaScript實作架設網頁開始）JavaScriptJavaScript是在瀏覽器中執行的程式語言，可以用它來增進網站或網路程式的互動性、及其他動態功能。

jQueryjQuery是JavaScript的函式庫，這個函式庫最大的貢獻是統合了各種校調JavaScript的重覆性作業，讓開發者在操作DOM元素減少麻煩，且較不容易發生錯誤。

遭遇跨瀏覽器問題時，前端開發者會需要在程式碼裡寫入if/else來解決瀏覽器差異，因此前端開發者會依賴jQuery函式庫，jQuery對JavaScript做了另一層函式封裝，除了簡化語法，更重要的封裝了處理瀏覽器相容性的枯燥工作，讓開發者可以使用一套統一的作法，專心寫功能。

延伸閱讀：什麼是jQuery？前端框架盛行還需要JavaScript函式庫嗎？DOMDOM的全名為文件物件模型(DocumentObjectModel)，他是一個由瀏覽器提供的應用程式介面(applicationprogramminginterface)，目的是讓JavaScript能存取網頁元素。

APIAPI全名：ApplicationProgrammingInterface，譯為「應用程式介面」，也就是「應用程式對外開放的介面」，API的使用者是「能夠寫程式的開發者」，開發者可以透過API去使用其他人撰寫的應用程式。

API是什麼？認識WebAPI、HTTP和JSON資料交換格式例如：Facebook圖形API、GooglemapAPI、LineAPIJSONJSON是JavaScriptObjectNotation的縮寫，是一種輕量級的資料交換語言，它參考了JavaScript中物件結構的表示方式。

該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。

幾乎所有網頁開發相關的語言都有解析JSON資料的函式庫。

AJAXAjax是AsynchronousJavaScriptandXML的縮寫，Ajax並不是單一的技術，而是一套綜合性的瀏覽器端網頁開發技術。

Ajax技術的出現，讓瀏覽器可以向Server請求資料而不需費時等待。

當瀏覽器接收到response之後，新的內容就會即時地添入原本網頁。

什麼是Ajax？搞懂非同步請求(Asynchronousrequest)概念管理程式碼版本控制‍Git 是一套免費、開源、且有許多人使用的版本控制軟體，普遍適合各種開發流程；GitHub是一個以Git為基礎的服務平台，為開發者提供雲端版本控制服務（RepositoryHosting）的平台延伸閱讀：Git與GitHub介紹，軟體版本控制基本教學框架Framework‍一些大型的工具包會被稱為框架，框架會幫忙把最多人用、最常見、最穩定的套件整合在一起，涵蓋到各個可能需要解決的問題，讓開發者得到一個比較完整的解決方案。

現今的「框架」其實就是一種提升開發效率、降低維護難度的開發架構。

下面是一些主流的JavaScript框架，各自有自己的優缺點，而學習的路徑‍Vue.js‍React.js‍Angular‍Meteor自學Web學習資源W3CSchoolMDNwebdocs菜鳥教程進一步學習用JavaScript從事網頁後端開發Node.js為了讓JavaScript除了能在瀏覽器（前端）執行，還可以在伺服器（後端)上做不同的功能，於是出現了Node.js。

Node.js是一個JavaScript執行環境(run-timeenvironment)。

有了Node.js，JavaScript可以直接建立、讀取、修改和刪除電腦內的檔案，並且能和資料庫連通。

Express.jsExpress是一套可以在Node.js上使用，讓開發者能更方便地建立網頁應用程式的網路框架（webframework）。

Node.js的套件管理器-NodePackageManager(npm)NPM上放了各式各樣用JavaScript撰寫的工具包，在這裡你幾乎可以找到所有你需要使用到的工具，像是jQuery,Express,Vue或React（後端開發實務，學會用Node.js開發兼具前後端的WebApp）網頁設計工具大補帖：文字編輯器VisualStudioCodeSublimeBracketsAtom‍延伸閱讀：VSCode快速安裝教學，推薦常用外掛擴充套件‍Web開發和調試工具ChromeDeveloperToolsBuildTools構建工具與自動化系統GulpGrunt模組打包工具Webpack單元測試框架MochaChai‍‍前端開發與設計工具ZeplinAvocode‍測試沙盒Codepen‍開發文件DevDocs‍UI設計工具SketchAdobeXD‍‍色彩搭配CoolorsGRIDGUIDE‍分析網站WappalyzerWhatFont：查詢網站字體JSONViewer三分鐘小測驗，了解你該從哪開始自學網頁設計SeeAllPost學習方法Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！程式學習2022熱門程式語言，JavaScript、Python哪個語言職缺最多？程式學習ALPHACamp紅綠燈學習法X工程師助教，帶你寫出專業的程式碼程式學習什麼是程式設計(Programming)？認識程式與程式語言程式學習新手學程式，英文、數學能力重要嗎？優秀軟體工程師應具備的4大能力程式學習資料結構和演算法對一個工程師的意義？如何提升實力？程式學習如何挑選適合你的線上課程平台：Udemy、Coursera、Hahow比較與推薦程式學習演算法面試準備與LeetCode刷題重點心法-新手工程師職涯升級密技程式學習學程式能做什麼？培養第二專長成為T型人才，你應該要丟掉的三大迷思ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPG資料人才種子計畫LeetCode訓練營2.0LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們校長給大家庭的信2020歲末年終感謝ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved