即日起到 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


