[點點滴滴] 寫網頁，很難嗎？

回想起來，從開始寫網頁到現在，已經過了一年了。在這一年內，不敢說網頁寫得很好，但至少體驗過這個過程。加上很多人一直詢問我寫網頁的相關知識，所以我決定寫一篇文章，讓大家知道，也順便記錄一下，這一年來寫網頁的困難、辛酸和樂趣。

網頁 vs app，誰難？

我想懂app又懂網頁的人，87%會說網頁，不能再高了。

我最開始接觸程式，是在高一的時候。但直到高二升高三的暑假，我才知道迴圈，以及物件導向的一些基本概念。而開發一支可以動的軟體，則是在高三升大一的暑假。那個暑假，我買了三本書，自學Android，一個月後，我上架了第一支app。

開學後，我幫社團寫了一支簡單藍芽傳輸的app，又加入了另一個團隊，幫忙寫前端排版和一些邏輯。而大一升二的暑假，我跑去竹科打工，做的是 android 的開發。又一年後的今天，我已不再寫app了，但我發現身邊很多人，都能在課堂的project，做出一支簡單的app來demo。至於網頁demo呢？少之又少。

在這一年內，我沒有每天都泡在 Android 上面，只有需要的時候，我才去查才去看。即便如此，我還是能獨立弄出一個完整的app，然後拿著這些app去面試，跑去竹科打工。

此外，為什麼我要特別標亮「一個月後」？那是因為比起網頁，app真的特別的簡單。寫完app，放在手機上操作即可，不需要考慮很多複雜的情況。普遍較為麻煩的點， Android 要考慮的頂多只是螢幕大小不同，而在Ios上，這個可能性又大幅降低。網頁呢？瀏覽器不同要考慮，螢幕大小，甚至手機上網也要考慮。當然還有其它的點，但我不打算在這裡細講。

為什麼你會想要寫網頁？

大部分的人包括我，都會說：「因為很酷很炫！」

因為網頁是最貼近我們的生活的，當我們滑到一個很有設計感的網頁，我們會不自覺得想多玩一下。接著就會思考，如果這個炫泡的網站的作者是我，別人一定會覺得我很酷，然後我就可以⋯⋯，還可以⋯⋯。於是，便抱著興奮的心情，開了codecademy練功，接著不到一個月後，就放棄了。

為什麼這麼快就放棄？

事實上，在我寫網頁的這一年中，已經聽過不少人跟我說過想學網頁，但是真正有成功做出個什麼的，不到1/3。如果把時間再拉長，我想這個比例只會更低。

跟 app 的 java 和 swift 比起來，寫網頁至少要懂3種程式語言，html、css、javascript。當然你也可以反駁我，說 html 不是一個語言，但不可否認的是，學寫網頁，你一定得懂這三樣東西。html 和 css 負責排版，javascript負責邏輯。

大多數人的第一支網頁，應該都是沒有 js 的。不過 html 和 css 就足夠消磨大多數人的意志。為什麼？我想要加一個底圖，怎麼加？查！我想要按鈕擺這裡，然後不會隨著滾輪動而不見，怎麼加？查！我想要這些東西都整齊排列，怎麼加？查！

以上這些動作來來回回個十次，大多數的人就會選擇離開了，更何況要寫好一個網頁的話，這動作得來來回回上百次，上千次。比起 app 的小螢幕，網頁有更大的揮灑空間，當然也就增加複雜度。做完一頁的排版，可能就兩三天過去了，剩下的人，算是特別有毅力的人。

javascript大魔王

js 是一個很好上手的語言，但也因為它富有彈性，使得新手常會對於 error，不知所措。最慘的是，因為 js 太有彈性了，有時甚至不跳出 error，網頁不動就是不動，直接死給你看，留著給有緣人去猜測錯的地方在哪裡。這時有什麼辦法？一樣，查！在查個上百次後，又有一部分的人離開了。

被 framework 踹了一腳

大多數的人最初所接觸的 js，並不是 js 的最本質，而是 jquery。jquery 把所有的東西都包好好，只要照著 call 就好，對於新手的 debug 能力，幾乎沒有幫助。有時必須寫 native js 時，各種哀嚎就來了。closure、call、apply、asynchrounous、this，都是其它語言所沒有的概念，此時又有一票人走了。

而css的部分也是。bootstrap 很好用，但要在 bootstrap 上客製化，就會遇到很多莫名奇妙的問題。是bootstrap的問題嗎？不是，是因為它本身就是設計成這樣。除非你得加各種 !important 蓋過去，不然就是自己寫純css。然而，自己刻純css的時候，便會變得不知所措。該從哪邊開始？id class該怎麼設定？該如何重複使用？尤其 css 又是一個不小心就會寫很多行的程式語言，面對1000行的css，該怎麼管理？此時又有一部分的人離開了。

還需要懂什麼？

可以到達這一步的人，應該自學能力也應該沒問題。但除了程式碼的部分，還是有很多東西是要懂的。例如：怎麼架一個server，怎麼用 github 和 git，怎麼用 terminal，怎麼設定編輯器，怎麼使用ftp⋯⋯。對於自學的人而言，每一件事都不是一件簡單速成的事。甚至一堆資工系的學生，對於上述這些事情，都不甚了解，遑論一般人。

此外，網頁不是只有前端的部分，還包括後端資料庫架設、API串接。這些包含 mysql、mongodb⋯等資料庫語法以及後端程式語言包含php, ruby on rails, nodejs⋯⋯，對學習而言，又是另一個負擔。

時間？

大多數的人，平常都是有外務在身的，有些要上課，有些要上班。即便是最閒的學生，可能每天也只有 5 6小時可以運用，還不包括得要寫其它作業，或陪男女朋友，還要幹麻幹麻的⋯⋯。對於磨練寫網頁的技能，時間根本不夠。1 2個月做不出炫泡的東西，得不到別人的稱讚，索性就放棄了。

資料爆炸性多，也爆炸性雜

這年頭，關於寫網頁的資料，可以說是像海一樣多，但是內容也一樣繁雜。搜一個bootstrap，會跑出各種 bootstrap 教程，這倒還好，至少是教程。但若不幸的點到 bootstrap vs semantic 這類比來比去的資料，那就會有麻煩了XD。這時大多數的人包括我，會迷茫於該選擇哪個來用，而不知所措。同樣的，其它問題也是一樣。在網頁的世界裡，從來都沒有最好的解法，只有最適合的解法，面對多種解法，大多數人會不知所措，進而原地踏步。

再來，選書的時候，看到架上琳琅滿目的書，再度眼花撩亂，不知道該怎麼辦。於是又無奈的走出書店。

我的打怪心路歷程

我的第一步，是開 codecademy 的範例，直接 trace 幾百行的 code。對於一般新手而言，這可能不是好的辦法，但當時的我是這麼做的。雖然我沒有完全看懂，但至少對於 javascript 有初步的認識。

接著，拿現成的東西下去改。改完現成的後，試著從0到100弄出一個類似的來，在這個過程會學到很多。然後便重複以下步驟，不斷的累積實力。

第一個專案，我改了上面 codecademy 的範例，做成了一張卡片。接著1個半月後，我做出了一個類似小畫家的東西。連結

半個月後，我開啟了另一個專案，做了一個酷炫的煙火，4個月後，這個專案被我中斷，包成了一個jquery plugin 釋出。現在回頭看，會發現 coding style 很爛，完全不想動。但唯有先爛過一次，才會知道好在哪裡。連結

這4個月的專案乍看冗長，但卻學了不少東西。包括 coding style、reactjs、自動化工具⋯⋯，都在這個專案一次弄懂。之後去面試的時候，有面試官問我：「你的第二個專案就用reactjs囉？」我笑笑的點了頭。

接著我又去接了案子，然後和案主合作到現在。又寫了自己的履歷，和幫學校諮商中心做了網頁投影片。

此外，也開始寫部落格和粉專（工商一下XD），跟網友和友人交換想法和意見。

還有一些大大小小的嘗試和小專案，而這些事全部都在一年之內發生。

所以關於寫網頁，我可以做些什麼？

雖然寫網頁不是很簡單。但是還是有些方法可以照著做，對學習會有幫助。

1. 挑一本「喜歡的書」就好，不必再乎它是不是最好，因為從來都不會有一本最好的書，只有最適合自己的書。
2. 不用把書看完，實作最重要！
3. 需要再學，不用想著一次全部學完，按部就班就好。事實上，網頁的世界太廣，也不可能全部學完。
4. 開個部落格，寫一些自己的筆記。當有人來看的時候，彼此就可以交換些想法。
5. 加入臉書相關社群，包括 f2e，javascript.tw、台中、高雄前端社群⋯⋯，和大家一起討論，然後提出一些問題。
6. 找些案子或工作來做
7. 幫系上寫個網頁
8. 做一份自己的履歷
9. 問問前輩的意見，虛心請教，多半會回答你
10. 投幾間公司的面試
11. 參加比賽
12. 參加 conference
13. 找到寫網頁的熱忱和動力

最後一點，也是最重要的一點，就是

Never give up!

共勉。

廣告