零基礎入門網頁前端，了解如何持續精進網頁設計能力！

對前端網頁設計有興趣，想成為前端網頁設計師，或是想往前端工程師邁進，但相關的課程百百種，卻不知道學習該從哪裡開始？

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏文章，再也不怕錯過就是一輩子！

對前端網頁設計有興趣，想成為前端網頁設計師，或是想往前端工程師邁進，但相關的課程百百種，卻不知道學習該從哪裡開始？

在《程式新手想入門網頁設計？網頁前端 4 大精選線上課，快速找到自學路！》中，提供了你入門網頁前端設計最基礎的學習路徑及課程介紹，若你想更專精前端網頁設計，希望知道如何擴充你的前端能力，這裡提供了更多相關能力的學習方向！

入門網頁前端設計，你應該具備的基本技能包含：

基本網頁框架及排版
動態的網頁設計
響應式設計

你可以擴充的技能包含：

網頁開發框架
設計觀念培養
協作管理能力

基本技能發展，你可以參考：

🔴 基本網頁框架及排版

【從 HTML 和 CSS 入門】

學習網頁的框架及排版應從 HTML 和 CSS 入門，你可以學會如何在空白的網頁上架構出基本的網頁排版，編排文字及圖片要呈現的位置，調整邊界、行距行高，改變文字的顏色及大小。在這個階段，你可以架設出自己的第一個網站。

▶︎ 學習 HTML、CSS：使用 HTML、CSS 開發一個網站

🔴 動態的網頁設計

【學習 JavaScript 的基礎概念，讓網頁互動有更多可能】

有了網頁架構的基本概念還不夠，你需要學習如何讓網站有動態的效果。動態效果包含了畫面的特效以及使用者與網頁的互動，像是讓網頁圖片能連續播放、讓網頁顯示的內容可以隨著使用者的操作馬上更新。

動態網頁設計最常使用的程式語言為 JavaScript，此為前端網頁工程師必備的技能。除了 JavaScript 外，建議你也可以學習 JavaScript 中非常受歡迎的函式庫 jQuery，熟悉 jQuery 能讓你快速的做出網頁上的動態效果。同時精進 JavaScript 及 jQuery 能協助你加速開發速度喔！

▶︎ 學習 JavaScript：JavaScript 程式設計新手村

▶︎ 學習 jQuery：使用 jQuery 打造互動性網頁動畫效果

▶︎ 學習 HTML、CSS、JavaScript：動畫互動網頁程式入門 (HTML/CSS/JS)

▶︎ 學習 JavaScript：動畫互動網頁特效入門（JS/CANVAS）

▶︎ 不知道該如何選課嗎？你可以參考：

程式新手想入門網頁設計？網頁前端 4 大精選線上課，快速找到自學路！

🔴 響應式設計

【開始使用響應式設計，提升不同裝置間的觀看體驗】

由於網頁的使用並非只發生在電腦裝置上，現在多數人習慣使用手機瀏覽及操作網頁，手機甚至是更普及的瀏覽方式，因此響應式設計也是現在網頁設計必備的技能。響應式設計能讓你用心設計的網頁不只在電腦上觀看有良好的體驗，用手機觀看也能不跑版，可以維持不同裝置間的觀看體驗。學習 RWD 響應式設計，能讓你在設計時的思考更宏觀，同時做出不同螢幕解析度都適用的設計，網頁設計技巧大躍進！

▶︎ 學習響應式設計：一變應萬變：RWD 響應式網頁設計

學習完以上必備的技能，接著來看看有哪些擴充學習的方向吧！

🔴 網頁開發框架

【學習網頁框架，加速開發流程】

拓展網頁設計能力，首先建議你學習網頁框架吧！網頁框架可以讓你提升網頁開發的效率，讓你在前端設計的路上更順手。Bootstrap 為目前前端網頁許多人使用的框架，裡面包含了許多的模組及元件，在學習的過程中，也能對前面所學習的 HTML、CSS、JavaScript、響應式設計等前端網頁概念更融會貫通。透過 Bootstrap 了解網頁框架的概念，未來你可以持續學習更多不同的前端網頁框架喔！

▶︎ 推薦課程：精通 Bootstrap 4 - 開發超強不解釋

🔴 設計觀念培養

【精進 UI，讓你的設計更受使用者喜愛】

學習完了以上課程，相信你已經能掌握前端網頁設計的基本功，並累積了不少網頁作品！

若想要往前端網頁設計師的路邁進，除了學習網頁架構、排版、互動等技術外，具有設計觀念也是相當重要的一環，建議你可以往 UI 的方向精進，學習 UI 的概念，在設計網頁時，納入以使用者為中心的思維，以使用者的角度思考設計的細節，讓你的設計更受使用者喜愛，更貼近使用者，增加網頁設計上的競爭力。

▶︎ 推薦課程：不小心就學會！用 UI 設計方法製作網站

🔴 協作管理能力

【延伸學習推薦 Git，增進開發路上不可或缺的能力】

若你對成為網頁前端工程師有興趣，那麼你也需要學習協作管理的工具。學習 Git 能讓你有版本控管的觀念，讓你的檔案都被妥善管理。你會了解在實際開發的過程中，如何管理不斷更新的檔案，以及如何與其他開發者共同協作，這些都是在成為前端工程師的路上是不可或缺的能力。透過 Git 課程也能學到如何使用 Github 累積自己的作品，讓你求職更有利！