查看所有課程 / 活動

網頁前端開發

基礎與應用
謝宜峯

培養職業能力,深入淺出地了解網頁前端基礎。本課程同時包含網站實作,從做中學,手刻出自己的第一個網站。

條件需求
  • 零基礎可
  • 需自備 Mac 筆電
適合對象
  • 對網站開發有興趣的設計師
  • 想進入網頁開發領域的新手
  • 有相關經驗或在職,但缺乏紮實觀念者
長度
  • 每週一天6小時,共7週

教學內容

網頁前端的發展日新月異,隨時掌握最新的標準及開發趨勢至關緊要。本課程的講師迄今仍在業界有密集的實務經驗,確保你與國外資訊零落差,並能夠立即應用在職業中,取得優秀成果。

課程中將提及的內容重質也重量,選擇下方的標籤,看看這些你將學到的知識,分屬於前端工程中的哪個知識範疇:

HTML
了解網頁呈現原理及製作流程,HTML 常用元素的及其使用時機、開發者工具操作及除錯方法。
CSS
CSS 樣式表定義了網頁的視覺呈現方式,教學內容包含外觀屬性、選擇器的使用、定位方法、CSS3 動畫,響應式網頁 (RWD) 的教學應用,以及 flex 與 grid 兩個時下火熱的排版屬性。
CSS 框架
學習 Bootstrap 以減少每次開發所需撰寫的代碼,並探索原始碼客製化自己的 Bootstrap,引導學生學習使用第三方資源。
Sass
Sass 提供各種方便的功能來撰寫 CSS,利用 Sass 將 CSS 的代碼化繁為簡。
實作
整合課程所學內容,帶領學生開發出自己的網站,並將網站發佈到網路上。

課程中:高效學習
相較於傳統上課的生硬內容,課程中的每個主題觀念,都會透過經驗分享與實戰練習,內化為能夠立刻應用在職業上的精華技能,同時幫助記憶。

課程後:確實上手
每堂課後皆有難易適中的作業,將該課堂所學立即應用在實際問題上;並有課程專屬 Slack 頻道,回答並協助解決作業相關問題。

完成課程後,你將能夠
  • 掌握工程原理與開發技巧
  • 落實工程師的思維到每個細節
  • 了解別人不知道的的實務經驗
  • 寫出優良規範的代碼
  • 立刻擁有一個自己純手工做出的網站
  • 與設計師溝通的技巧,將設計稿轉為實體網頁
  • 擁有前端扎實的基礎,對於往後學習能夠事半功倍
  • 取得求職的必備能力

關於講師

宜峯

年僅 24 歲,但經驗與技術皆屬頂尖的開發者宜峯,國小便開始接觸 HTML,高中時獲數網頁相關競賽的首獎,就讀臺灣科技大學資工系、台灣大學網媒所;曾參與國內外許多新創團隊、電商平台,也曾是學生計算機年會之講者、全球第 20 位取得 Google 行動網站專家認證的開發者,是個同時精通前端與後端技術的全端 (Full Stack) 開發者。

不僅工程技術精湛,曾和許多優秀設計師共事的他,也善於和設計師溝通,並根據開發可行性與使用者體驗,提出設計建議。

在大學宿舍內的期間,便領先開發出第一個跨校選課系統,定義了許多產品的樣貌。他同時也是個極端注重「看不到的細節」的人,能夠樂於接受新技術,但同時也顧及實際開發需求。

10
以上職業經歷
Binary
Freelancer
UXabc
Full Stack Developer
Roam & Wander
Full Stack Developer
5xRuby
Web Developer
SpoonRocket
Rails Developer

優惠
報名參加本課程者,將可在一年內享所有工作坊 6 折優惠。


Q & A
為什麼這門課沒有教授 JavaScript?

HTML、CSS 內容已相當充實且現學現用;相較下 JavaScript 是一門更龐大的主題,初學者需要大量練習熟能生巧後,才能做出簡單的應用,在有限的時間與課程品質的兼顧情況下,我們希望同學能把 HTML、CSS 學得更精實。

「前端」是什麼?

簡單來說,前端是指我們在瀏覽網頁時,那些「看得到、操作得到」的部分;也就是「資料的呈現」。例如網頁的排版、互動效果⋯⋯等等,主要的知識包含 HTML、CSS、JavaScript、框架與函式庫的使用。

「後端」又會是什麼?

後端則是指我們瀏覽或進行操作時,網路另一頭的機器「暗地裡」所處理的事情;也就是「資料的準備」。例如資料庫的存取與操作、平台的準備、一些演算⋯⋯等等。

我有做功課,我發現前端好像還有額外涵蓋其他技術耶?

是的,為了讓同學能漸進、彈性地學習,我們很快也會有工作坊來補充更多進階的內容;但這些進階的技術比較多是在改進維護性、效率與架構,不見得是每個專案都需要的。因此如果你剛入門,其實光目前這個課程你就已經會學得相當充實了。

我需要前端後端都懂才能找到工作嗎?

如果你能把西餐做得好吃,那麼你能找到工作。
如果你能把中餐做得好吃,你也是能找到工作。
如果你中西餐都精通,那工作會自動找上門。  

既然這樣,為什麼這個課程不把前後端都包進去一起教完?

精通西餐需要很多時間。
精通中餐也要很多時間。
兩樣都精通,那除了花更多時間外,上輩子還要燒好香。
表面上兩樣好像都會,但都只有略懂,那⋯⋯你懂的。

我們的策略是先讓你精通一項,達到可以靠它工作的水準,而不是以全包為賣點,但都馬虎帶過。

許多課程的教法是帶著你「複製貼上」,你會做,但你並未理解它,如果沒有理解,那麼對職業能力的幫助其實是相當有限。也因為沒有摸透,將來一旦有新的技術出現,你也無法利用已知來幫助學習、類推到新知識上。

為什麼這門課值得你選擇?

實際課程當中,我們經常發現許多學生會卡在一些細小的問題上。
這些細小的問題往往造成學生學習的挫折與時間上的浪費。
透過講師的主動觀察或是學生的發問,給予學生即時的解答,使學生豁然開朗,亦能確保學生還在學習的熱度上,以致學習路上會比起其他方式來得更順利。

每堂課的一開始就是作業的觀摩與講解。
對於每一份作業的成果,我們也會給予相對的講解。這也是我們小班制能做到的特色。
對於本身有經驗的同學,我們也會給予「如何做可能更好的建議」。
透過這種作業觀摩與講解,學生除了可以看到彼此所遇到的問題,也能加深對於學習內容的印象。

我們所接觸過的學生當中,有不少是先前已自學過才報名的, 在他們用了過去所學的知識在作業上,發現了學生們對於過去所學的知識有「知其然不知其所以然」的問題, 以致於作業的代碼過於繁瑣,甚至自己也不知道怎麼改下去了。 講師從代碼的刪減、說明,並加上課堂紮實的基礎知識,讓學生了解「方法對,就不難」。

您也可以參考 第四期學員的課後回饋第三期學員的課後回饋第二期學員的課後回饋第一期學員的課後回饋

我打算報名這門課,有什麼需要注意?

若您是忙碌的上班族,僅有上課時間,無其它時間可做課後作業,可能不適合這一門課。

相較於設計課程,本門課程質量較重且為期時間長,若缺席任何一堂課將會有明顯的進度落差, 報名前先確保日後每一堂上課日期沒有額外的安排為佳。



聽聽其同學怎麼說
個人學習檔案

註冊帳號,我們將建立一份屬於你的學習檔案,隨時查詢可用的優惠、管理你的上課時間,我們也將在你持續進步的同時,建議適合你的下一步。

掌握最新資訊

追蹤我們的 Facebook 專頁,當有任何新課程或活動推出時,立即得知。有任何問題也可透過即時訊息詢問我們。

前往追蹤
有問題嗎?

隨時都歡迎你透過我們的 Facebook 專頁傳送訊息詢問,可獲得最快的回覆;或者也可 email 至 [email protected]

UXabc