2019/07/04

還在考慮轉職工程師要上哪間學校? 這裡推薦你免費的學習資源、書籍與素材

在考慮轉職前建議你先看看這篇文章 為什麼我說不要轉職成工程師的七大原因


--
如果你有以下困擾,歡迎參考此篇文章 :

1.  我是初學者,有沒有推薦的學習資源
2.  有沒有推薦的書籍
3.  想去實體店面翻書,有沒有推薦的店家
4.  原文書很貴,想買又不確定適不適合自己
5.  有沒有論壇可以和大家互相交流
6.  我想要問問題,是要直接把程式碼貼上去問嗎
7.  切版很需要素材,有沒有推薦的網站


而網路上已經有很多為什麼要轉職前端工程師如何轉職成前端工程師的文章,這邊也有一篇 2021 年成為 Web 開發人員的路線圖 可以參考來決定方向 (每年會更新可以自己查閱),這邊就不複述了

這篇主要是寫給對於前端有興趣的「初學者」、「非本科想轉前端」的人,可以利用哪些網站來幫助自己學習;因為我個人是非本科轉前端,到現在差不多兩年多了,想分享些自己當初到現在用過覺得不錯的學習資源、書籍與素材



一、學程式網站

MDN
提供了許多關於網站相關技術的說明和學習文件,雖然有些區塊還沒翻譯,但講解清晰有範例,比起底下的 w3schools 更推薦看這個,正確性比較高。


w3schools
大名鼎鼎的 w3schools,初學者入門款,我用過 freeCodeCampcode Schoolcodecademy 等,但還是覺得 w3schools 最好用。有 HTMLCSSJavaScript 等課程。

優點是版面乾淨清楚,且每個章節都有範例可以讓你參考,如果在學習過程中有些概念想實現看看,或是還不熟悉如何使用編輯器,可直接在範例上修改程式碼來驗證自己的想法。





RemoveW3Schools plugin
這是個題外話,據我所知有些人不喜歡搜尋時看到 w3schools 的資料,覺得上面太多錯誤資訊,所以還專門寫了一個套件,裝了之後可以在 google 搜尋中移除顯示 w3schools 的相關資訊。

不過我覺得不管是上網查資料、看書或是聽他人教學或多或少都有可能聽取到錯誤的資訊,所以不管資訊來源是哪,都不能完全盡信,還是要依靠邏輯、經驗等去做判斷。

再說回來這網站就初學者前期來說是值得使用的。

然後還記得當時會有個迷思是,是不是要把全部的 HTMLCSS 內容都看熟才開始切版,結果會記了很多標籤、屬性、屬性值等卻沒辦法活用,建議可以看大概 3/5 就可以試著切版,一邊切一邊學,比較可以知道自己觀念哪裡沒弄清楚,不然很容易看過就忘了,或是以為自己已經會了。


freeCodeCamp
使用關卡方式一步步教你觀念,但實際用起來會覺得已經有基礎觀念的人,再用這網站會學的比較紮實


詳細解釋每個 api 用法,底下也有效果範例教學。


有時候只是看文字解說不夠清楚,這網站就有提供影音教學影片,除了程式相關,也有如設計、市場行銷等課程,國內國外的講者都有;常常特價,有很多內容實在還附上程式碼可供下載的英文課程才台幣 300 多元,經濟實惠,大推!


有時候也會提供免費課程,可以加入這個FB社團 : Soft & Share 軟體開發資訊分享,就能隨時收到免費課程提醒,像是這樣 :



這些課程都是我免費拿到的


但說實在的,若需花大量時間去找免費資源,所花的時間都可以學更多東西了,有些必需的軟體、書和課程之類,在經濟可負荷下就直接買了,不需要省這些錢。



udemy 無限制時間提供的 100 個免費課程



詳細的 CSS 用法,常會分享一些樣式的小 tip。



圖文並茂,相當詳細易懂的教學。



列出常用的git指令,後面都會簡略敘述功能,快速查詢指令時很方便


Chrome DevTools
開發者務必不能不會的 debug tool,花點時間好好閱讀怎麼使用吧!






二、論壇




程式人必用網站,任何可以想得到的問題上面 99% 都有解答,只是是英文且搜尋時要下對關鍵字;剛開始時不會下關鍵字時可以試著打幾個重點描述,然後在一邊找的時候,可以一邊看別人是怎麼下關鍵字的


包括前端後端的技術討論,從基礎到鑽研都有;喜歡的文章可收藏很方便



牛客網
有各種程式試題可刷,除了有 CSSJSPHP,還有JAVAGO 等等能選題目類型、調難度,還能記錄題目,註冊後可以看到答案解析也有人會在底下分析、討論。

有線上編程可以線上刷題,還能看到其他人的解法

還有各種筆試題、面試題可以刷也有蒐集公司實際的試題、前端校招面試題目合集、JS面試經典題目合集之類


這個超棒的,有各種神人挑戰 30 天寫技術文章,版面乾淨清楚好上手,文章內容也是很詳細





三、書籍

如果覺得單看網站不夠,希望能更有系統性的學習,可以考慮搭配以下書籍;這幾本是我去過好幾家書店翻過後,覺得講的最清楚的,圖文並茂,且很不會一下就用很艱澀的名詞去解釋,對於不習慣工程師語言的人來說平宜進人。

但不管別人再怎麼推薦,最好還是自己去翻翻看,挑選自己容易理解的,畢竟最後還是要自己能夠看得下去。


HTML5CSS3 最強圖解實戰講座


HTML&CSS:網站設計建置優化之道




JavaScript & JQuery:網站互動設計程式進化之道



jQuery 最強圖解實戰講座


四、線上編譯

當遇到有問題想問人時千千萬萬不要直接貼一串程式碼上去啊 QAQ,這樣不但對方難以閱讀,也難以幫忙 debug,這時候可以利用線上編輯器,而且也不用考慮建環境問題。


PlayCode
最近發現好用的 javascript 線上編輯器,及時運算不 lag,非常推薦使用
    
      
CodeSandbox
國外現在流行用來 Demo 的網站


JSFiddle
如果常上 Stack Overflow 的人,一定常常可以看到回答問題的人用這個 Demo;但我覺得沒有到非常好用



保哥 這有詳細的解說如何操作



版面簡潔乾淨,但功能強大。







五、書局


地址 : 台北市中正區重慶南路一段107



有超多電腦書,號稱全台電腦書最齊的一家。有簡體、繁體、原文書,價格比較便宜;感覺店員也受過相關訓練,在購買時還會跟你確定版本或附件,之前還聽到店員跟外國人解釋兩本程式書的差異。



六、實用網路小工具


Can I use
可以查詢你所要用的 HTML 標籤和 CSS 樣式各家瀏覽器是否支援、支援到哪一個版本。


Crontab guru
有時候會忘記 cron job 的格式或是時間計算錯誤,這時候這網站就非常好用,不僅清楚告訴你格式怎麼寫,還會幫算出你的設定什麼時候會執行。


Downdetector
比如你在用 stackoverflow、Github 時突然連不上網站,不確定是不是自己電腦或網路問題時,就可以用這個網站查詢,且有時上面還會有人回報說是什麼問題。


WHOIS
除了可查詢 IP,還可以查詢網域的註冊時間、到期日期、DNS 紀錄和網域名稱註冊商相關資訊。

舉例使用方式 : 
  • 想要的網址是否被購買
  • 若無法連上某網站時,可以先以 WHOIS 查詢看看是否是網址到期
  • 查詢某網域是否為詐騙網站,比如 registration date 看起來起才申請沒多久,但 expiration date 卻很短,宣稱是國外店家註冊地點卻在台灣,反之亦然
  • ...






七、Plugin

可以偵測該網站的配色,並顯示色號;也可以顯示使用的圖片,並可以打包下載,很適合切版練習用 (不是讓你去盜別人圖片啊 XD)


可以偵測你選取地方的色號,很方便抓在網站上看到喜歡顏色的色號。




八、素材網站

在搜尋框旁有教學如何下關鍵字,可以搜尋到不少好照片。


充滿各式豐富的照片。


大推!! 功能強大可以選擇篩選條件為 Free、直向橫向照片、照片主要顏色、照片哪些地方需要留白、照片是否為單一人物照片作者名稱


這網站很適合找有質感很有意境的照片,解析度也很高。特色是每隔 10 天會上傳 10 張新的高解析度攝影照片作品
跟前一個很像,有很多有質感、意境的照片。這網站提供願意免費分享攝影作品的攝影師上傳高解析照片,可以在這裡找到對於世界上不同景物的不同攝影角度照片


也是很有質感、以食物為主題的照片分享網站,可以打包下載漢堡、水果等等的美食主題照片。


充滿各式豐富的照片。


偏向網站底圖。


提供 Psd 檔可以直接下載修改。


很多免費的 Psd 檔可以下載,如果要你分享按讚,隨便點一下再取消就可以下載了。


也是有免費的 Psd 檔可以下載,但資源沒那麼多。




有豐富的 Icon 可以下載


和 Flation 一樣能下載 icon,但能線上編輯選擇的 Icon,並能下載不同 size


Icon 都以文字型式呈現,切版時常會用到。




九、配色

可以隨機幫你產生一組色號,省下配色的時間


以日式配色為基調的網站選色後背景顏色會跟著變讓你可以看整體顏色





十、靈感

不管是配色、網站設計、圖案設計等,都可以在上面搜尋,相信這網站會給你帶來不少靈感。


上面有很多精采的前端作品,還可以看到別人的程式碼,也可以將自己作品放上去。


也是有很多精采的前端作品,有教學並供程式碼下載


這個網站定期蒐集優秀的網站設計案例,是追蹤最新網頁設計趨勢的重要平台。


有很多日常想不到的小巧思,找不到靈感時可以上去看看。



如果還有什麼推薦資源,歡迎留言跟我說 : D





5 則留言:

  1. w3schools 是 w3c 的?
    應該是 「W3Schools由位於挪威提供軟體開發、諮詢的Refsnes Data公司所成立」
    參考自: https://zh.wikipedia.org/wiki/W3Schools

    回覆刪除
    回覆
    1. 啊啊非常感謝你的指正m(_ _)m
      是我打錯了

      刪除
  2. 感謝大大的分享OWO!!
    您真的太佛了! ^W^!!
    感謝您。

    回覆刪除
    回覆
    1. 不客氣~希望有幫助到你
      之後也會寫相關的技術文章,歡迎再來看看

      刪除
  3. 網誌管理員已經移除這則留言。

    回覆刪除

注意:只有此網誌的成員可以留言。