回想起來,從開始寫網頁到現在,已經過了一年了。在這一年內,不敢說網頁寫得很好,但至少體驗過這個過程。加上很多人一直詢問我寫網頁的相關知識,所以我決定寫一篇文章,讓大家知道,也順便記錄一下,這一年來寫網頁的困難、辛酸和樂趣。
網頁 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),跟網友和友人交換想法和意見。
還有一些大大小小的嘗試和小專案,而這些事全部都在一年之內發生。
所以關於寫網頁,我可以做些什麼?
雖然寫網頁不是很簡單。但是還是有些方法可以照著做,對學習會有幫助。
- 挑一本「喜歡的書」就好,不必再乎它是不是最好,因為從來都不會有一本最好的書,只有最適合自己的書。
- 不用把書看完,實作最重要!
- 需要再學,不用想著一次全部學完,按部就班就好。事實上,網頁的世界太廣,也不可能全部學完。
- 開個部落格,寫一些自己的筆記。當有人來看的時候,彼此就可以交換些想法。
- 加入臉書相關社群,包括 f2e,javascript.tw、台中、高雄前端社群⋯⋯,和大家一起討論,然後提出一些問題。
- 找些案子或工作來做
- 幫系上寫個網頁
- 做一份自己的履歷
- 問問前輩的意見,虛心請教,多半會回答你
- 投幾間公司的面試
- 參加比賽
- 參加 conference
- 找到寫網頁的熱忱和動力
最後一點,也是最重要的一點,就是
Never give up!
共勉。
身為一個半路出家的前端工程師,真的看了心有戚戚焉!!前端連載我全部看完了,寫得很好耶~~給你一點鼓勵!!
讚Liked by 1 person
謝謝你的喜愛:)
讚讚
跪惹
讚讚
心有戚戚焉
雖然我程式還是寫不出任何東西QQ
只會看code稍微修改一下
讚讚
覺得超酷XD!!!
感謝一村大大的分享~
(慢慢點開裡面的連結範例)
讚讚
我過30才轉行前端 剛開始是自學 後來去上課 才開始寫網頁 現在在公司作專案 還在跟JavaScript奮戰中 我覺得全部自學不簡單欸 你很厲害👍 謝謝你的文章
讚Liked by 1 person
加油
祝你好運!
讚讚
搞錯了吧,沒有人會反駁你,說html不是一個語言,要反駁的是…他不是「程式」語言,而是「標記」語言。
讚Liked by 1 person
但我覺得有心就不會放棄!!!
像剛開始我做網也,我css根本排不了版…
google了上千遍,才會知道怎麼做(真的XD
現在我轉寫php,做了簡單的計算機,留言板,資料機… 但是這些都要用MySQL啦(除了計算機OuO
反正做了就知道了!!!
p.s. Javascript真的好難…
———————————————–我是分隔線—————————————————–
上面那個lionel823,HTML是一個語言歐!!!
你去查他的全文,HyperText Makeup Lauguage,其中Lauguage就是語言啊XD
讚讚
1000 行的CSS,JS 原始碼 的困難,CSS 跟 JS 也一堆框架,還有 Nodejs 出來亂……
作者大大提到的幾個點都講到我們心坎裡了QQQQ
自學點前端東西,跨了 BS , Semantic-ui , jQuery , React ,然後跑去搞後端,學了點SQL,搞了點 Laravel , ASP.Net ,算一算又幾個月過去了,網頁之路真是漫長Q
讚讚
最近想開始接觸網頁設計這一塊,現在都只有在codecademy碰過一些html和css,想請問買一本書參考會比較有幫助?目前只有在網路上看教學或其他人的作品,很想跟大大一樣能自學有成果。
讚讚
身為半路出家的網頁設計,我非常認同你的看法…
我目前也還在跟javascript奮鬥…
但多虧了各種專案,html、css算有點上手。
一起Never give up!
讚讚
剛轉行學習中,你能自學真得很厲害!
想問問當初你學app是買了哪三本書,有推薦給初學的人看嗎?
讚讚
66666
後來還有在更新或是新的project嗎?
讚讚
我覺得, 真正讓工程師一波一波離開"寫網頁"崗位的原因, 是薪水太少, 寫網頁的進入門檻太低了, 不必有什麼資訊背景的人自學都可以上手, 雖然偶爾有些大師級的高手, 但絕大部分都是普普, 而且網頁的原始碼是開放的, 好看的排板或架構大家抄來抄去.
網頁和App不是一個層次的, 你會覺得App簡單, 是因為你只寫簡單的App. 舉個例子, 讀取兩個解析度不相同的鏡頭的影像, 做疊合, 這種對硬體和OpenGLES的操控, 就不是網頁可以做的了, 去年我還被 React-Native 荼毒了三個月之後放棄.
真正有實力的工程師, 會往底層或後端鑽研, 人少的路, 風景最美, 寫網頁除非自己創業或接案, 不然很快就被新一代工程師所取代, 我今天會來逛"寫網頁"的網站, 不是我自己想學, 而是想教我兒子寫網頁, 而他才小學六年級, 他在小學一年級就會寫C語言控製單晶片, 讓七段顯示器秀出自己的身分證字號, 小學四年級寫出用紅外線追踪黑色膠帶的循跡自走車, 剛剛結束的寒假, 他用Python寫了結合語音辨識,語意分析,網路爬蟲,文字轉語音的AI對話機器人, 過去10年來, 高中生會寫網頁已經比比皆是, 在職場上會寫網頁有什麼競爭力呢? 玩玩就好.
讚讚