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

CMoney精選

CMoney精選

  • 2017-06-15 15:53
  • 更新:2019-11-13 08:45

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

(圖/shutterstock)

 

圖片來源:Shutterstock

作者:TAKER

 

仔細想想我的人生,

其實大部份時間都有網頁陪伴,

這一路走來我覺得很實用、也很有趣,

如果你正在思考要不要投資你的時間

開始接觸這方面的技術,

希望我的經驗中

有可以供你參考借鏡的地方。

 

 

最早接觸網頁的時間,是在高中的時候。

那時候發現網頁不需要太難的語法,

就可以做出一些畫面。

雖然也不知道要拿來做什麼,

但就是覺得很有趣。

即使那時候的網頁還很陽春,

只有 HTML 沒有 CSS,也只能做出很醜的畫面。

 

大學的時候誤打誤撞選了資訊系,

其實是因為很愛打電動,

沒想到進去都在寫程式,

但也因此接觸了一些網頁的選修課程。

其實網頁不算是程式,

雖然讓人摸不著頭緒這點來說很相像,

不過我對於寫一寫

網頁就能立即有畫面的回饋很感興趣。

比起程式寫一堆,

卻只能告訴我剛剛那坨程式

運算的結果是 25 這樣來的有趣多了。

 

 

網頁技術和寫程式有何不同?

為何好入門?

為了幫助大家有更清楚的概念,

我想先跟大家聊聊

網頁技術的前/後端是甚麼,

有甚麼不同,可能會讓大家

比較清楚網頁技術到底是幹嘛用的。

 

網頁分前端、後端。

後端比較偏功能的實作,

譬如一個產品要有註冊、登入功能,

上傳圖片、讀取照片的功能等等;

前端則是在於 UI 的實現、畫面呈現,

使用流程等等的實作,

產品好不好用就要靠前端的修煉。

 

當前端與後端合併,

變成全端之後,很多東西都能做出來。

單單網頁技術,能做到哪些事情呢?

 

●一般網頁:

可接案、也可做自己產品的宣傳網站。

●網路服務:

做自己的產品,可以在網頁上使用、操作,

也可以串連 app,做出一款跨平台的應用。

●手機 app:

只要會網頁技術,

就有機會做出在手機上就能使用的 app。

網路服務就是把應用程式寫在網頁上,

譬如我們常用的 Google、YouTube、

Gmail、Facebook、Pinterest 這些都是。

 

而把網頁做成 app,

只要把網頁做成手機版可以閱讀的尺寸,

把他包成一個 app,就可以使用了!

有很多人都說網頁做的 app 效能不好,

但其實如果知道該怎麼調校的話,

效能是很好的。

 

 

我覺得網頁有一個

最主要的特性是「跨平台」。

因為網頁的初衷

就是希望任何裝置只要裝上瀏覽器,

就可以看網頁,

所以任何裝置都可以使用。

會一個東西就可以在任何地方使用,

就能讓我更專心的在實現點子這件事情上。

 

程式很棒,效能很好、邏輯很好,

寫起來很有趣,可以實現很多東西。

不過他們不容易跨平台,

所以寫了 iOS 的 app,

Android 的 app 還是要另外寫。

 

另外,因為網頁分成前端與後端,

所以有可以拆開的特性。

如果一開始先接觸前端,

也可以接一般網站的案子過生活,

或者做做產品的 UI,

跟後端工程師作銜接即可。

如果單獨學後端,

也可以找到不錯的工作,

或者開發產品功能面。

有時間再接觸另一端的技術,

讓自己成為全端的時候,

幾乎什麼事都能做了,

仔細想想這件事真的很驚人。

 

最後,我喜歡網頁技術,因為它:

「涉及的領域很廣」。

這樣說好了,如果我今天學了程式,

可以寫 Mac 上的軟體,

就只能寫軟體、app。

但如果今天學的是網頁,

可以去接案、做產品、做行銷、做 app,

發揮的空間很大,

有無限的可能等你去發掘,

是最吸引我的一點。

 

訓練自己接案的能力

繼續說回來,在大學畢業之際,

我決定延畢一年,

好好思索我的人生與未來到底要做些什麼。

其實因為很早就思考過工作這件事,

發現自己並不想待在辦公室過下半輩子。

所以當我發現網頁技術

可以讓我自己在家自由接案工作以後,

覺得很開心、躍躍欲試,

於是開始訓練自已的能力,

接一些案子來做。

 

我怎麼訓練自己的能力跟接案的呢?

主要是從兩個層面來做,

第一個是「興趣」。

像我很喜歡特效的東西,

讓我覺得很酷炫。

那時候 jQuery 正夯,

他可以讓畫面有很特別的效果。

所以我研究了一堆 jQuery 寫的外掛,

看一些效果怎麼做出來的,

所以特效的處理是因為興趣練起來的。

 

另一個層面是讓自己很「實用」,

什麼意思?其實很簡單,

譬如說我那時候想接案,

但總沒辦法一開始就接超厲害的網站,

所以先看看比較簡單的網站,

需要的功能跟技術是哪些,

先讓自己能達到最基本的接案能力,

就可以開始試試看了。

 

一開始大家聽到我剛出社會,

還是菜鳥的時候就自己去接案嚇了一大跳,

不過其實沒這麼難,

因為一開始的案子都是朋友、親戚,

把你能力所及的、

目前能為他們提供最大用途的網站做出來,就開始了。

 

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

 

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

 

大學畢業之後,還是找了一間研究所來念

(老師說要念研究所,好吧!)。

因緣際會之下,

跟了一個很厲害的學長

去一間新創公司實習,

發現很多新創產業

都和網路以及 app 很有密切的關係,

也認知到網頁可以達成的事情好多好多,

眼界大開之外

也更堅定我想繼續往這條路上走的決心。

在這裡短短一年的時間,

看到很多不同面向的思考、

看到很多可能性、學習了很多創業的基礎,

也被團隊裡面的高手指導,

學了一些後端、RoR、

及一些 MVC framework 的東西。

在這裡得到最有價值的事情是:

我發現我有很多想做的東西,

都能透過網頁技術達成,

於是我真正開始了我的創業旅程。

 

 

不斷用專案來練功,

在戰場上活下來

這幾年做了幾個專案,

像是排班表的系統「班表救星」、

禮物 app「myTreat」、

餵奶提醒的 app「BabyFeedTimer」、

線上書籤「Justag」,

以及網頁教學系統「網頁基礎15天」,

基本上都是用網頁技術完成的。

 

雖然做過好幾個專案,

不過最開始的時候依然是一個菜逼八。

光是做一個 Google 的分頁

(太多筆資料,要分好幾頁的功能)

我可以做一個下午,而且還很頭大那種。

或是一個網頁的小特效,

研究一個下午,隔天才做出來。

那時候的老闆還問:

「Taker 你是不是不太熟啊?」,

他其實也沒說錯。

 

再來就是學一些比較大的架構,

會了這些以後,使用那些架構,

除了比較好整理自己的程式碼之外,

安全性也會好很多。

不過不會的時候真的是一頭霧水,

原本要在畫面上加一個按鈕是很單純的事,

現在變得好像有點麻煩。

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

光一個前端,要學好把畫面刻出來,

刻好刻滿,就已經不簡單了。

後期還要會控制畫面效果、

套用外掛、驗證表單、接後端資料。

然後發現自己的程式碼越來越亂,

開始學一些前端的架構,

又是新的學習開始。

喔說到這裡還只是前端,

後端要學資料庫,

資料庫的控制真的不是可以直接理解的東西,

而且在設計資料庫架構的時候

也有很多角度要去思考。

 

真的要仔細說遇到的事情,

可能三天三夜也說不完,

但過程很痛苦嗎?其實還好。

現在你看我把好幾年累積的事情一次寫出來,

當然覺得很崩潰,

不過這些事情都是分散發生的。

當你想做 A 的時候,會遇到 A 衍生的問題,

研究它、解決它,

做出結果的時候,得到的是滿滿的滿足。

然後想加上 B 的功能,再去研究 B,

牆撞一撞,撞破了就通了。

 

網頁技術很棒的地方是,

他們是累加的,

我們可以專注在這個領域上,

學過的東西在未來都是可以用的。

而且如果基礎打的好,

在學新的東西的時候,會順利許多。

 

這些年撞破許多道牆,

因為自己也收過一些學生,

他們都很想知道,

上完課之後,接下來該怎麼練習與進修?

 

 

答案就是:「來真的」。

 

一開始只會寫一點網頁,

想要變得很會寫網頁,那就去接案!

找真的東西來做,

才有真實的需求、真實的時間壓力、

遇到問題不能逃避只能解決的動力。

其實我也是去接了幾個

適合當時程度的案子來做之後,

撞了幾次牆之後,

網頁技術就這樣跳了好幾級。

 

網頁服務也是直接來,

因為有自己想做的東西,

所以就動手開始設計 UI、使用流程。

這時候因為想完成一些功能,

就開始把這些技術

能做到的事情都簡略的瞭解一番。

大概知道這些技術能做到哪裡之後,

就知道該怎麼拼湊出自己想要的產品。

 

如果都只是做個樣板試試看、

或者做個小產品 demo 試試看,

會錯過非常多真實世界的問題與挑戰,

那些才是學到最多的寶貴課程,

想要大幅度的成長,

最快的方法就是離開學校直接去戰場,

然後想辦法活下來。

 

 

耐心與企圖心

最後我想澄清一點,

並沒有說寫程式不好,

網頁跟程式都是很棒的東西。

而且通常會寫程式的也都會寫一點網頁、

寫網頁的也會寫一些程式,

他們都是有關連的。

只是想跟大家分享,

網頁能做的面相真的很廣這件事。

 

如果說現在看文章的你,

剛進入這個領域,或者正想進入,

我有個建議:「不要急」。

因為網頁的東西非常多,

而且技術更新的速度之快,

這輩子都追不完。

但也不用因此而害怕,

重點是把基礎打穩,

就像上面說過的,只要基礎打穩,

後面學新東西就很快。

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

 

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

什麼是企圖心呢?

就是要替自己下一些目標。

像我剛開始知道自己可以做些什麼的時候,

有了目標,就會想辦法

讓自己可以達成這些目標。

雖然一開始很弱,但因為目標明確,

所以會朝著目標走去,

最後就會擁有這些能力去完成想做的事情,

就像遊戲剛開始

你也只能耐心在新手村練習打怪一樣。

 

 

最後分享一件事:

「網頁技術只是一個工具,

重點在你要做的事情」。

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

尤其網頁技術這麼多、日新月異,

能學習是很棒,

但如果你真的有想追尋的夢想,

別卡在一堆又一堆的技術裡,

記得把學到的東西,

想辦法學以致用,勇敢去挑戰,

去實現自己的夢想,最終,

你的目標和夢想

將會讓你在學習過程中的撞牆和痛苦不值一提!

 

如果你對網頁技術有興趣,

我最近也會在 Startup Rookies 新創人才預備營 的課程中

更深度的和大家分享基本網絡概論&

網頁設計 (Web flow & Web Design),

有甚麼問題或想法也歡迎在下面留言!

 

本文由 alphacamp  taker 授權轉載, 原文 於此

原文刊登於 ALPHA Camp Blog

未經授權,請勿轉載侵權!

(責任編輯:CMoney編輯 / Alodia)

菁英軟體工程師戰鬥營

熱烈招生中!

想學程式、成為工程師

卻怕自己沒基礎、學不好嗎?

這裡有史上最專業的魔鬼訓練課程,

讓你有機會 朝夢想前進

全程免費、不用基礎從頭開始、培養就業競爭力!

填寫報名表,將有專人與您聯絡

名額有限>>馬上報名

詳細活動介紹>>點我查看!

有問題歡迎私訊粉專:從0開始學程式!

 

CMoney精選

CMoney精選

CMoney 自出版社、各大報章雜誌精選好文 網路上的各家觀點,通通網羅呈現 !

CMoney 自出版社、各大報章雜誌精選好文 網路上的各家觀點,通通網羅呈現 !