寫給網頁設計初學者們--- 我的網頁技術之路｜ALPHA Camp Blog

即使那時候的網頁還很陽春，只有HTML 沒有CSS，也只能做出很醜的畫面。

大學的時候誤打誤撞選了資訊系，其實是因為很愛打電動，沒想到進去都在寫程式，但 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們舊生專屬福利📣8/11課程說名會馬上報名程式學習寫給網頁設計初學者們---我的網頁技術之路Posted on 2016-06-03  by    by仔細想想我的人生，其實大部份時間都有網頁陪伴，這一路走來我覺得很實用、也很有趣，如果你正在思考要不要投資你的時間，開始接觸網頁設計這方面的技術，希望我的經驗中有可以供你參考借鏡的地方。

想學寫網頁？先搞懂前端、後端和全端開發者核心技能！最早接觸網頁的時間，是在高中的時候。

那時候發現網頁不需要太難的語法，就可以做出一些畫面。

雖然也不知道要拿來做什麼，但就是覺得很有趣。

即使那時候的網頁還很陽春，只有HTML沒有CSS，也只能做出很醜的畫面。

大學的時候誤打誤撞選了資訊系，其實是因為很愛打電動，沒想到進去都在寫程式，但也因此接觸了一些網頁的選修課程。

其實網頁不算是程式，雖然讓人摸不著頭緒這點來說很相像，不過我對於寫一寫網頁就能立即有畫面的回饋很感興趣。

比起程式寫一堆，卻只能告訴我剛剛那坨程式運算的結果是25這樣來的有趣多了。

（3分鐘小測驗，找到你的網頁設計程式自學入口）網頁技術和寫程式有何不同？為何好入門？為了幫助大家有更清楚的概念，我想先跟大家聊聊網頁技術的前/後端是甚麼，有甚麼不同，可能會讓大家比較清楚網頁技術到底是幹嘛用的。

網頁分前端、後端。

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

當前端與後端合併，變成全端之後，很多東西都能做出來。

單單網頁技術，能做到哪些事情呢？一般網頁：可接案、也可做自己產品的宣傳網站。

網路服務：做自己的產品，可以在網頁上使用、操作，也可以串連app，做出一款跨平台的應用。

手機app：只要會網頁技術，就有機會做出在手機上就能使用的app。

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

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

(了解更多：學會前後端完整網頁開發，打造全端WebApp)我覺得網頁有一個最主要的特性是「跨平台」。

因為網頁的初衷就是希望任何裝置只要裝上瀏覽器，就可以看網頁，所以任何裝置都可以使用。

會一個東西就可以在任何地方使用，就能讓我更專心的在實現點子這件事情上。

程式很棒，效能很好、邏輯很好，寫起來很有趣，可以實現很多東西。

不過他們不容易跨平台，所以寫了iOS的app，Android的app還是要另外寫。

另外，因為網頁分成前端與後端，所以有可以拆開的特性。

如果一開始先接觸前端，也可以接一般網站的案子過生活，或者做做產品的UI，跟後端工程師作銜接即可。

如果單獨學後端，也可以找到不錯的工作，或者開發產品功能面。

有時間再接觸另一端的技術，讓自己成為全端的時候，幾乎什麼事都能做了，仔細想想這件事真的很驚人。

最後，我喜歡網頁技術，因為它：「涉及的領域很廣」。

這樣說好了，如果我今天學了程式，可以寫Mac上的軟體，就只能寫軟體、app。

但如果今天學的是網頁，可以去接案、做產品、做行銷、做app，發揮的空間很大，有無限的可能等你去發掘，這是最吸引我的一點。

全端開發技能樹：JavaScript全端工程師23周養成攻略訓練自己接案的能力繼續說回來，在大學畢業之際，我決定延畢一年，好好思索我的人生與未來到底要做些什麼。

其實因為很早就思考過工作這件事，發現自己並不想待在辦公室過下半輩子。

所以當我發現網頁技術可以讓我自己在家自由接案工作以後，覺得很開心、躍躍欲試，於是開始訓練自已的能力，接一些案子來做。

我怎麼訓練自己的能力跟接案的呢？主要是從兩個層面來做，第一個是「興趣」。

像我很喜歡特效的東西，讓我覺得很酷炫。

那時候jQuery正夯，他可以讓畫面有很特別的效果。

所以我研究了一堆jQuery寫的外掛，看一些效果怎麼做出來的，所以特效的處理是因為興趣練起來的。

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

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

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

才怪！如果是這樣也太無聊了（笑）。

大學畢業之後，還是找了一間研究所來念（老師說要念研究所，好吧！）。

因緣際會之下，跟了一個很厲害的學長去一間新創公司實習，發現很多新創產業都和網路以及app很有密切的關係，也認知到網頁可以達成的事情好多好多，眼界大開之外也更堅定我想繼續往這條路上走的決心。

在這裡短短一年的時間，看到很多不同面向的思考、看到很多可能性、學習了很多創業的基礎，也被團隊裡面的高手指導，學了一些後端、RoR、及一些MVCframework的東西。

在這裡得到最有價值的事情是：我發現我有很多想做的東西，都能透過網頁技術達成，於是我真正開始了我的創業旅程。

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

（學會JavaScript完整前端基礎，運用網頁技術實作小工具）雖然做過好幾個專案，不過最開始的時候依然是一個菜逼八。

光是做一個Google的分頁（太多筆資料，要分好幾頁的功能）我可以做一個下午，而且還很頭大那種。

或是一個網頁的小特效，研究一個下午，隔天才做出來。

那時候的老闆還問：「Taker你是不是不太熟啊？」，他其實也沒說錯。

再來就是學一些比較大的架構，會了這些以後，使用那些架構，除了比較好整理自己的程式碼之外，安全性也會好很多。

不過不會的時候真的是一頭霧水，原本要在畫面上加一個按鈕是很單純的事，現在變得好像有點麻煩。

而且網頁還有分前/後端，東西很多。

光一個前端，要學好把畫面刻出來，刻好刻滿，就已經不簡單了。

後期還要會控制畫面效果、套用外掛、驗證表單、接後端資料。

然後發現自己的程式碼越來越亂，開始學一些前端的架構，又是新的學習開始。

喔說到這裡還只是前端，後端要學資料庫，資料庫的控制真的不是可以直接理解的東西，而且在設計資料庫架構的時候也有很多角度要去思考。

（你可能也想了解：業界開發實務，打造兼具前後端的WebApp）真的要仔細說遇到的事情，可能三天三夜也說不完，但過程很痛苦嗎？其實還好。

現在你看我把好幾年累積的事情一次寫出來，當然覺得很崩潰，不過這些事情都是分散發生的。

當你想做A的時候，會遇到A衍生的問題，研究它、解決它，做出結果的時候，得到的是滿滿的滿足。

然後想加上B的功能，再去研究B，牆撞一撞，撞破了就通了。

網頁技術很棒的地方是，他們是累加的，我們可以專注在這個領域上，學過的東西在未來都是可以用的。

而且如果基礎打的好，在學新的東西的時候，會順利許多。

這些年撞破許多道牆，因為自己也收過一些學生，他們都很想知道，上完課之後，接下來該怎麼練習與進修？答案就是：「來真的」。

一開始只會寫一點網頁，想要變得很會寫網頁，那就去接案！找真的東西來做，才有真實的需求、真實的時間壓力、遇到問題不能逃避只能解決的動力。

其實我也是去接了幾個適合當時程度的案子來做之後，撞了幾次牆之後，網頁技術就這樣跳了好幾級。

網頁服務也是直接來，因為有自己想做的東西，所以就動手開始設計UI、使用流程。

這時候因為想完成一些功能，就開始把這些技術能做到的事情都簡略的瞭解一番。

大概知道這些技術能做到哪裡之後，就知道該怎麼拼湊出自己想要的產品。

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

耐心與企圖心‍最後我想澄清一點，並沒有說寫程式不好，網頁跟程式都是很棒的東西。

而且通常會寫程式的也都會寫一點網頁、寫網頁的也會寫一些程式，他們都是有關連的。

只是想跟大家分享，網頁能做的面相真的很廣這件事。

如果說現在看文章的你，剛進入這個領域，或者正想進入，我有個建議：「不要急」。

因為網頁的東西非常多，而且技術更新的速度之快，這輩子都追不完。

但也不用因此而害怕，重點是把基礎打穩，就像上面說過的，只要基礎打穩，後面學新東西就很快。

慢慢來，不要囫圇吞棗，把基礎打穩最重要。

雖然說不要急，但要有「企圖心」。

什麼是企圖心呢？就是要替自己下一些目標。

像我剛開始知道自己可以做些什麼的時候，有了目標，就會想辦法讓自己可以達成這些目標。

雖然一開始很弱，但因為目標明確，所以會朝著目標走去，最後就會擁有這些能力去完成想做的事情，就像遊戲剛開始你也只能耐心在新手村練習打怪一樣。

最後分享一件事：「網頁技術只是一個工具，重點在你要做的事情」。

技術很迷人，但重點是你想用它完成什麼事。

尤其網頁技術這麼多、日新月異，能學習是很棒，但如果你真的有想追尋的夢想，別卡在一堆又一堆的技術裡，記得把學到的東西，想辦法學以致用，勇敢去挑戰，去實現自己的夢想，最終，你的目標和夢想將會讓你在學習過程中的撞牆和痛苦不值一提！最適合網頁設計入門的程式課程，實作用HTML/CSS/JavaScript打造網頁3分鐘小測驗，找到你的網頁設計程式自學入口SeeAllPostSearch熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！程式學習App開發流程簡介，認識軟體開發5階段程式學習程式新手怎麼做SideProject？從想要解決的生活問題開始程式學習累積多人協作經驗、接軌業界網頁開發，你需要scrum模擬專案！程式學習2022熱門程式語言，JavaScript、Python哪個語言職缺最多？程式學習ALPHACamp紅綠燈學習法X工程師助教，帶你寫出專業的程式碼程式學習什麼是程式設計(Programming)？認識程式與程式語言程式學習新手學程式，英文、數學能力重要嗎？優秀軟體工程師應具備的4大能力程式學習資料結構和演算法對一個工程師的意義？如何提升實力？ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved