寫給網頁設計初學者們 — 我的網頁技術之路

仔細想想我的人生,其實大部份時間都有網頁陪伴,這一路走來我覺得很實用、也很有趣,如果你正在思考要不要投資你的時間,開始接觸網頁設計這方面的技術,希望我的經驗中有可以供你參考借鏡的地方。

想學寫網頁?先搞懂前端、後端和全端開發者核心技能!

最早接觸網頁的時間,是在高中的時候。那時候發現網頁不需要太難的語法,就可以做出一些畫面。雖然也不知道要拿來做什麼,但就是覺得很有趣。即使那時候的網頁還很陽春,只有 HTML 沒有 CSS,也只能做出很醜的畫面。

大學的時候誤打誤撞選了資訊系,其實是因為很愛打電動,沒想到進去都在寫程式,但也因此接觸了一些網頁的選修課程。其實網頁不算是程式,雖然讓人摸不著頭緒這點來說很相像,不過我對於寫一寫網頁就能立即有畫面的回饋很感興趣。比起程式寫一堆,卻只能告訴我剛剛那坨程式運算的結果是 25 這樣來的有趣多了。

3分鐘小測驗,找到你的網頁設計程式自學入口

網頁技術和寫程式有何不同?為何好入門?

為了幫助大家有更清楚的概念,我想先跟大家聊聊網頁技術的前/後端是甚麼,有甚麼不同,可能會讓大家比較清楚網頁技術到底是幹嘛用的。

網頁分前端、後端。後端比較偏功能的實作,譬如一個產品要有註冊、登入功能,上傳圖片、讀取照片的功能等等;前端則是在於 UI 的實現、畫面呈現,使用流程等等的實作,產品好不好用就要靠前端的修煉。

當前端與後端合併,變成全端之後,很多東西都能做出來。單單網頁技術,能做到哪些事情呢?

  • 一般網頁:可接案、也可做自己產品的宣傳網站。
  • 網路服務:做自己的產品,可以在網頁上使用、操作,也可以串連 app,做出一款跨平台的應用。
  • 手機 app:只要會網頁技術,就有機會做出在手機上就能使用的 app。

網路服務就是把應用程式寫在網頁上,譬如我們常用的 Google、YouTube、Gmail、Facebook、Pinterest 這些都是。

而把網頁做成 app,只要把網頁做成手機版可以閱讀的尺寸,把他包成一個 app,就可以使用了!有很多人都說網頁做的 app 效能不好,但其實如果知道該怎麼調校的話,效能是很好的。

(了解更多:學會前後端完整網頁開發,打造全端 Web App)

我覺得網頁有一個最主要的特性是「跨平台」。因為網頁的初衷就是希望任何裝置只要裝上瀏覽器,就可以看網頁,所以任何裝置都可以使用。會一個東西就可以在任何地方使用,就能讓我更專心的在實現點子這件事情上。

程式很棒,效能很好、邏輯很好,寫起來很有趣,可以實現很多東西。不過他們不容易跨平台,所以寫了 iOS 的 app,Android 的 app 還是要另外寫。

另外,因為網頁分成前端與後端,所以有可以拆開的特性。如果一開始先接觸前端,也可以接一般網站的案子過生活,或者做做產品的 UI,跟後端工程師作銜接即可。如果單獨學後端,也可以找到不錯的工作,或者開發產品功能面。有時間再接觸另一端的技術,讓自己成為全端的時候,幾乎什麼事都能做了,仔細想想這件事真的很驚人。

最後,我喜歡網頁技術,因為它:「涉及的領域很廣」。這樣說好了,如果我今天學了程式,可以寫 Mac 上的軟體,就只能寫軟體、app。但如果今天學的是網頁,可以去接案、做產品、做行銷、做 app,發揮的空間很大,有無限的可能等你去發掘,這是最吸引我的一點。

全端開發技能樹:JavaScript 全端工程師23周養成攻略

訓練自己接案的能力

繼續說回來,在大學畢業之際,我決定延畢一年,好好思索我的人生與未來到底要做些什麼。其實因為很早就思考過工作這件事,發現自己並不想待在辦公室過下半輩子。所以當我發現網頁技術可以讓我自己在家自由接案工作以後,覺得很開心、躍躍欲試,於是開始訓練自已的能力,接一些案子來做。

我怎麼訓練自己的能力跟接案的呢?主要是從兩個層面來做,第一個是「興趣」。像我很喜歡特效的東西,讓我覺得很酷炫。那時候 jQuery 正夯,他可以讓畫面有很特別的效果。所以我研究了一堆 jQuery 寫的外掛,看一些效果怎麼做出來的,所以特效的處理是因為興趣練起來的。

另一個層面是讓自己很「實用」,什麼意思?其實很簡單,譬如說我那時候想接案,但總沒辦法一開始就接超厲害的網站,所以先看看比較簡單的網站,需要的功能跟技術是哪些,先讓自己能達到最基本的接案能力,就可以開始試試看了。

一開始大家聽到我剛出社會,還是菜鳥的時候就自己去接案嚇了一大跳,不過其實沒這麼難,因為一開始的案子都是朋友、親戚,把你能力所及的、目前能為他們提供最大用途的網站做出來,就開始了。

所以,接下來的人生,就是接案人生。

才怪!如果是這樣也太無聊了(笑)。

大學畢業之後,還是找了一間研究所來念(老師說要念研究所,好吧!)。因緣際會之下,跟了一個很厲害的學長去一間新創公司實習,發現很多新創產業都和網路以及 app 很有密切的關係,也認知到網頁可以達成的事情好多好多,眼界大開之外也更堅定我想繼續往這條路上走的決心。在這裡短短一年的時間,看到很多不同面向的思考、看到很多可能性、學習了很多創業的基礎,也被團隊裡面的高手指導,學了一些後端、RoR、及一些 MVC framework 的東西。在這裡得到最有價值的事情是:我發現我有很多想做的東西,都能透過網頁技術達成,於是我真正開始了我的創業旅程。

這幾年做了幾個專案,像是排班表的系統「班表救星」、禮物 app「myTreat」、餵奶提醒的 app「BabyFeedTimer」、線上書籤「Justag」,以及網頁教學系統「網頁基礎15天」,基本上都是用網頁技術完成的。

學會JavaScript完整前端基礎,運用網頁技術實作小工具

雖然做過好幾個專案,不過最開始的時候依然是一個菜逼八。光是做一個 Google 的分頁(太多筆資料,要分好幾頁的功能)我可以做一個下午,而且還很頭大那種。或是一個網頁的小特效,研究一個下午,隔天才做出來。那時候的老闆還問:「Taker 你是不是不太熟啊?」,他其實也沒說錯。

再來就是學一些比較大的架構,會了這些以後,使用那些架構,除了比較好整理自己的程式碼之外,安全性也會好很多。不過不會的時候真的是一頭霧水,原本要在畫面上加一個按鈕是很單純的事,現在變得好像有點麻煩。而且網頁還有分前/後端,東西很多。光一個前端,要學好把畫面刻出來,刻好刻滿,就已經不簡單了。後期還要會控制畫面效果、套用外掛、驗證表單、接後端資料。然後發現自己的程式碼越來越亂,開始學一些前端的架構,又是新的學習開始。喔說到這裡還只是前端,後端要學資料庫,資料庫的控制真的不是可以直接理解的東西,而且在設計資料庫架構的時候也有很多角度要去思考。

(你可能也想了解:業界開發實務,打造兼具前後端的Web App

真的要仔細說遇到的事情,可能三天三夜也說不完,但過程很痛苦嗎?其實還好。現在你看我把好幾年累積的事情一次寫出來,當然覺得很崩潰,不過這些事情都是分散發生的。當你想做 A 的時候,會遇到 A 衍生的問題,研究它、解決它,做出結果的時候,得到的是滿滿的滿足。然後想加上 B 的功能,再去研究 B,牆撞一撞,撞破了就通了。

網頁技術很棒的地方是,他們是累加的,我們可以專注在這個領域上,學過的東西在未來都是可以用的。而且如果基礎打的好,在學新的東西的時候,會順利許多。

這些年撞破許多道牆,因為自己也收過一些學生,他們都很想知道,上完課之後,接下來該怎麼練習與進修?

答案就是:「來真的」。

一開始只會寫一點網頁,想要變得很會寫網頁,那就去接案!找真的東西來做,才有真實的需求、真實的時間壓力、遇到問題不能逃避只能解決的動力。其實我也是去接了幾個適合當時程度的案子來做之後,撞了幾次牆之後,網頁技術就這樣跳了好幾級。

網頁服務也是直接來,因為有自己想做的東西,所以就動手開始設計 UI、使用流程。這時候因為想完成一些功能,就開始把這些技術能做到的事情都簡略的瞭解一番。大概知道這些技術能做到哪裡之後,就知道該怎麼拼湊出自己想要的產品。

如果都只是做個樣板試試看、或者做個小產品 demo 試試看,會錯過非常多真實世界的問題與挑戰,那些才是學到最多的寶貴課程,想要大幅度的成長,最快的方法就是離開學校直接去戰場,然後想辦法活下來。

新手村萬元挑戰

耐心與企圖心

最後我想澄清一點,並沒有說寫程式不好,網頁跟程式都是很棒的東西。而且通常會寫程式的也都會寫一點網頁、寫網頁的也會寫一些程式,他們都是有關連的。只是想跟大家分享,網頁能做的面相真的很廣這件事。

如果說現在看文章的你,剛進入這個領域,或者正想進入,我有個建議:「不要急」。因為網頁的東西非常多,而且技術更新的速度之快,這輩子都追不完。但也不用因此而害怕,重點是把基礎打穩,就像上面說過的,只要基礎打穩,後面學新東西就很快。慢慢來,不要囫圇吞棗,把基礎打穩最重要。

雖然說不要急,但要有「企圖心」。什麼是企圖心呢?就是要替自己下一些目標。像我剛開始知道自己可以做些什麼的時候,有了目標,就會想辦法讓自己可以達成這些目標。雖然一開始很弱,但因為目標明確,所以會朝著目標走去,最後就會擁有這些能力去完成想做的事情,就像遊戲剛開始你也只能耐心在新手村練習打怪一樣。

最後分享一件事:「網頁技術只是一個工具,重點在你要做的事情」。技術很迷人,但重點是你想用它完成什麼事。尤其網頁技術這麼多、日新月異,能學習是很棒,但如果你真的有想追尋的夢想,別卡在一堆又一堆的技術裡,記得把學到的東西,想辦法學以致用,勇敢去挑戰,去實現自己的夢想,最終,你的目標和夢想將會讓你在學習過程中的撞牆和痛苦不值一提!

最適合網頁設計入門的程式課程,實作用HTML/CSS/JavaScript打造網頁

3分鐘小測驗,找到你的網頁設計程式自學入口