創業必備：前端網頁設計入門

點擊進入傳送門：Laravel 後端網頁設計

即日起到 7/16，結帳時輸入【WAVE2019】即可兌換 100 元 Coupon 作為優惠，coupon 使用期限到 2019/07/16 23:59，Hahow 活動詳情

完全針對初學者的前端網頁課程！

後端要處理的技術已經夠多了，為什麼還要學習前端呢？

本課程注重以「程式設計邏輯」講解前端網頁。幫助後端網頁工程師快速掌握前端技術，充分配合後端的需要（如 AJAX 及網頁 CSS 微調）設計前端網站。

好的設計師難找，後端工作中常常遇到前後端需同時處理的情況。此時，掌握基本前端技術是一大助力！

為什麼要學習前端網頁設計？

奇怪，架設網站明明就不難，Blogger、wix、weebly 點一點就架好了，為什麼要學習前端網頁設計呢？

請試著想想看，Hahow（您現在上的這個網站）到底是用 Blogger 還是用 wix 架設的呢？如果您單純只是要一個網站，而不在意網站是如何撰寫、如何運作的，那可以參考課程「自己的個人網站自己架」。如果您有意願成為網頁前後端工程師、甚至希望在未來進入網頁相關產業工作的人，那本課程絕對是您不可錯過的一堂基礎課。

前端網頁？那有沒有後端網頁？

當然有，不過後端通常稱為「後端網頁程式設計」。如果我們想像一個網站是一個人，則前端網頁的 HTML 就是人的骨架、肌肉，CSS 和 JavaScript 則是人的皮膚、衣服等。後端網頁則是一個人的大腦，擁有儲存、運算的能力，可以根據前端接收的資訊作相應的反應。

執行後端網頁程式需要伺服器及安裝相應套件，例如 PHP、Python、Ruby on Rails、Node.JS 甚至微軟系列的 ASP.NET 皆是後端網頁程式。相較後端，前端網頁只是單純純文字檔案，只要將文字檔存成 .html 檔後，在自己的電腦上就可以開啟瀏覽了。詳細有關前後端網頁之介紹及區別請參考本課程第一節課。

網頁設計跟創業有什麼關係？

相較於在大企業中工作，面對的是維護複雜的既有系統或網站。創業則大多是從零開始，使用有限的資源實際做出一個產品原型(Prototype)。而本課程的重點，正是希望同學能從零開始撰寫網頁，同時學習發布(Publish)網站，瞭解並熟悉網站運作的概念。

網頁不是拉一拉元件就好了嗎？

錯！現代網頁發展飛速，早已淘汰十年前 Dreamweaver、Frontpage 等所見即所得的編輯模式（ Word 的概念）。現代前端網頁工程師偏好使用純文字編輯器，撰寫下列三種程式語言：

• HTML: 負責網頁的骨架、標記式語言 (Markup language)
• CSS : 負責網頁的裝飾、樣式表語言 (Style sheet language)
• JavaScript: 負責網頁的互動、擁有邏輯判斷及運算能力的一般程式語言

您可以發現，以上三種「程式語言」只是一種泛稱，實際擁有程式語言特性的只有 JavaScript 一項，撰寫其他兩項只要經過充分的練習和參考即可達成。

手寫程式碼會很累嗎？

只要輔以適當工具，大多數程式碼都可以輕鬆自動完成，如本課程將使用的 Emmet。

純前端網頁可以做出什麼作品？

在不搭配任何後端語言的狀況下，純前端網頁可以完成一個登入介面，但無法做到儲存及驗證會員資料等功能。不過基本的運算及互動並沒有任何問題。本堂課將示範使用前端網頁撰寫一個 BMI 計算器和網站後台儀表板(包含 AJAX 及 Highchart)

(網站管理儀表板範例展示，以 SBAdmin 為例，課程作品將從零開始帶領大家實作)

我還想學更多！

我會寫網頁了！但我想知道更多有關網站/網路的相關知識，請參考「創業必備」系列合作課程：初心者的計概與 coding 火球術

關於 Jeremy 及上課方式

1994 年生，從小對程式設計有極大興趣

高二時擔任資訊研究社社長，為了建構社團網站而開始學習前後端網頁設計。同時帶領社團教學團隊編印講義，教授高一學弟妹 VB, C++, HTML 等基礎程式設計，擁有豐富初學者教學經驗，清楚了解初學的學習程式的盲點。

大學時曾承包學校資訊系統外包案，與系所和行政單位持續合作。深入瞭解其需求並將系統盡善盡美。大三時在中小企業實習十個月，負責產品前後端網頁的開發、部署、維護，曾開發售價百萬的內部企業資訊安全系統前後端介面。

Jeremy 的作品集：http://patricks.tw