ಠ_ಠ
@anonymous
偷偷說
Fri, Jan 7, 2022 3:42 PM
180
18
自學應徵上前端工程師已經幾個月了，偶爾滑ptt跟噗浪還是常看到有人問怎麼轉職web，想說整理一下自己推薦的學習資源分享給旅人
ಠ_ಠ
Fri, Jan 7, 2022 3:50 PM
感覺能講的好多 我慢慢一點點寫
ಠ_ಠ
Fri, Jan 7, 2022 4:01 PM
首先想講一件事，那些教你上個課做個專案就能找工作的，有一半是騙人的
上完是可以找工作，但實作能力不夠的話，只能找到屎缺(超爛接案 低薪博弈之類)
不要想照課程做個作品就能輕鬆領薪水，反正有些東西終究還是要學的，不如早點把基礎打好
snack2643
Fri, Jan 7, 2022 4:03 PM
博奕低薪？
turkey3136
Fri, Jan 7, 2022 4:04 PM
Fri, Jan 7, 2022 4:04 PM
snack2643: 噗主指的是「明明是博弈，卻給你低薪」的意思吧
ಠ_ಠ
Fri, Jan 7, 2022 4:07 PM
snack2643: 就是那種明明是博弈但給你30K的(?
ಠ_ಠ
Fri, Jan 7, 2022 4:16 PM
以下是我覺得轉職前端一定要會的技術
編輯器 終端機使用
程式基本概念
一點點網路概念
HTML
CSS
Javascript (以下會簡稱JS)
JS框架三大框架(Vue React Angular)的其中一種 git
jquery bootstrap 不推薦學 等入行老闆叫你用再說
最重要的還是HTML CSS Javascript 基本功
ಠ_ಠ
Fri, Jan 7, 2022 4:30 PM
然後是常見的學習資源跟轉職管道
資策會(跟一些實體補習班)
優: 幾個月內把入門的東西全上一次，入行最底線的東西都會學到(畢竟你花了十萬
缺: 貴，而且節奏快如果跟不上會容易陣亡
付費英文線上課程(udemy等)
優:便宜 品質好
缺:懶人會買了不看，英文(但其實問題不大)
ಠ_ಠ
Fri, Jan 7, 2022 4:31 PM
中文實體書
優: 會挑出版社的話翻譯品質好，用得是台灣技術名詞
缺: 技術比較慢(翻譯要時間) 有些純概念的書沒有搭配範例比較難啃
中文線上課
不推 品質比英文低太多
最推薦的方式是上線上英文課程搭配中文實體書，
英文字幕看不懂就用edge瀏覽器翻譯功能，會即時幫你翻譯(感謝微軟拔拔
跟著課程上，遇到不懂的技術名詞或概念就查中文書(下面會有課程跟書的推薦
如果有人怕英文爛學不好，別怕 噗主多益不到400都能靠這方式學到入行了
ಠ_ಠ
Fri, Jan 7, 2022 4:39 PM
HTML
會基本標籤使用就ok
因為最簡單教學最多，不需要買書或課程，免費資源就夠 像這篇
HTML 基礎 - 學習該如何開發 Web | MDN
ಠ_ಠ
Fri, Jan 7, 2022 4:51 PM
CSS
看起來很簡單但水很深的東西，某方面來說比JS還難學
最好的學法還是是多看高手的使用
重要概念
如何精準選到想要的元素
各種 position
flex 排版
media query
ಠ_ಠ
Fri, Jan 7, 2022 5:08 PM
Javascript
首先很重要的一點，現在已經2022，
如果看到教你用 var 建立變數的課最好避開，這課程過時了
ಠ_ಠ
Fri, Jan 7, 2022 5:09 PM
除了基本語法以外一定要熟悉的部分
ES6的語法
型別轉換
陣列處理方法
作用域
環境 this
閉包
非同步運作
API呼叫
這部分難度較高，轉職者面試最容易在這部分陣亡
要注意的是API呼叫，自己練習多串API比看課程重要
ಠ_ಠ
Fri, Jan 7, 2022 5:23 PM
三大框架(Vue React Angular)
找工作挑一個學就行了
Vue
中文圈最常用的框架，中文教學資源最多，職缺最多
因為轉職課程通常教這個，平均薪水比React低一點
ಠ_ಠ
Fri, Jan 7, 2022 5:23 PM
React
國外最常用的框架，中文資源較少，
但有大量英文學習資源，
要注意的是舊版本很吃JS概念，
投104時要看公司用舊版(class)還是新版(hook)
Angular
不熟(? 不太建議轉職者學
ಠ_ಠ
Fri, Jan 7, 2022 5:29 PM
git
工作時一定會用(如果上班發現公司不用git 快逃
推薦在實作專案時一邊練習指令
ಠ_ಠ
Fri, Jan 7, 2022 5:37 PM
——————————————————
學習資源推薦
https://www.udemy.com/...
學程式版的steam:Udemy
以下推薦的課程都常特價，最低約230，建議超過400元時別買
不喜歡30天內可以退錢
不喜歡30天內可以退錢
ಠ_ಠ
Fri, Jan 7, 2022 5:49 PM
前端大禮包類
把前端相關技能全部塞在同一門課，推薦完全沒經驗新手買一門當作學習路線參考
這邊就推個適合新手的講師
https://www.udemy.com/...
ಠ_ಠ
Fri, Jan 7, 2022 6:03 PM
CSS
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
https://www.udemy.com/...
一定要推的神課，這門的技巧學完，就有可以去面試的CSS程度
強烈推薦有CSS知識但不知道如何實作好看網頁的人買
另外課程專案都很漂亮，適合當面試專案的介面參考
ಠ_ಠ
Fri, Jan 7, 2022 6:32 PM
JS跟框架的課目前沒有看到特別神的，從評價4.7顆星以上挑喜歡的就行
或是從以下講師中挑
Stephen Grider
Colt Steele
Jonas Schmedtmann
Maximilian Schwarzmüller
或是如果英文很爛，就挑有英文字幕(非自動生成)的 這樣翻譯會比較準確
ಠ_ಠ
Fri, Jan 7, 2022 6:56 PM
書籍資源
JavaScript大全 第七版
CSS 大全（第四版）
首先是這種歐萊禮的磚頭書，有心學可以買，
遇到不知道某名詞的中文或是英文很難懂的概念就開書來查
或是睡不著時就開來助眠
ಠ_ಠ
Fri, Jan 7, 2022 7:05 PM
GitHub - getify/You-Dont-Know-JS: A book series on J...
你不知道的JS 英文版免費公開 中文版共四本
雖然是很有名的JS進階概念書，但新手讀會很挫責
真的要買的話推型別文法跟this兩本，非同步那本太難
ಠ_ಠ
Fri, Jan 7, 2022 7:11 PM
忍者JavaScript(大推薦
忍者：JavaScript開發技巧探秘 第二版
JS進階概念書中最容易理解的一本，搭配例子跟圖解把概念解釋得很清楚
面試遇到的問題在這本幾乎都有，某方面也算面試參考書(?
ಠ_ಠ
Fri, Jan 7, 2022 7:27 PM
Clean Code學派的風格實踐：開發可靠、可維護又強健的JavaScript
Clean Code學派的風格實踐：開發可靠、可維護又強健的JavaScript
轉職自學很容易忽略的程式碼品質，
就算寫得出來網頁，也可能因程式寫太醜被刷掉．
原版Clean Code範例用得是C#，所以推這本用JS當範例的
ಠ_ಠ
Fri, Jan 7, 2022 7:33 PM
哇都這麼晚了
明天再來講些作品跟面試相關的，
寫得好亂喔
按愛心的大家抱歉了
cow8204
Sat, Jan 8, 2022 12:38 AM
英文網站真的超好用
我是切版很熟的美術
把treehouse js課看到一個階段，進階一點的開始看不懂了
goose9203
Sat, Jan 8, 2022 1:43 AM
以前做過網頁設計，但只是圖拼得很漂亮，網頁語法只會最基礎的那種Xdd
轉行後也忘得差不多了，剛好最近想回來研究前端，您真的太佛心了
vodka6150
Sat, Jan 8, 2022 1:59 AM
Frontend Developer Roadmap: Learn to become a modern...
這是前端開發者的Roadmap 可以照上面的路去安排學習 著噗主給的資源去學 框架選擇上先以 react vue為主 除非妳能忍受學習期很長 或是 特別想去銀行跑 框架學習上 先搞懂期生命週期(react vue) 還有 GitHub是你的好朋友 GitHub Action也是 by路過的全端
ಠ_ಠ
Sat, Jan 8, 2022 7:24 AM
vodka6150: 感謝支援，其實react有hook後生命週期也不太需要知道(?
ಠ_ಠ
Sat, Jan 8, 2022 7:36 AM
回來了 現在來講點作品要怎麼做
底標就是六X學X那樣，比這個差建議別拿去面試
來講一樣是做電商作品，該如何跟補習班出來的拉出差距
ಠ_ಠ
Sat, Jan 8, 2022 7:51 AM
去XX學院看他們課程後的成品集，來挑些問題
沒有註冊登入功能 或是假登入
沒有庫存 沒有搜尋
首頁外的頁面都長87％像
動畫效果看起來都差不多
不管什麼付款方式 都填一樣的表單
付款功能是假的
沒辦法看訂單
恩...跟實際的電商差很多呢
ಠ_ಠ
Sat, Jan 8, 2022 8:02 AM
沒有註冊登入功能 或是假登入
沒有庫存 沒有搜尋
沒辦法看訂單
這三個是同一個問題，因為課程沒有提供資料庫存這些資料
解決方式就是學一點點後端，
不用真的學很多，能夠用API簡單的拿存更新資料就ＯＫ
只要能存資料，作品就會從純展示的玩具變成真的能用的電商(超簡陋版本)
ಠ_ಠ
Sat, Jan 8, 2022 8:12 AM
首頁外的頁面都長87％像
動畫效果看起來都差不多
這部分可以直接參考現實中電商的介面，挑戰自己用CSS切出很像的頁面，
在介紹說介面是參考OO跟XX網站自己切的
或是 直接使用UI library 做樣式
Vue 用 Antd，React 用 material-ui
如果面試時公司剛好就是用這些庫做樣式，錄取率會大幅上升
ಠ_ಠ
Sat, Jan 8, 2022 8:29 AM
不管什麼付款方式 都填一樣的表單
前端有個很重要的能力是複雜表單處理跟欄位驗證，
以防傳格式不對的資料到後端，
做作品時要試著只顯示必要的欄位給使用者輸入，並確認格式的正確
例如付款選擇超商取貨付款時要給選擇寄到哪間超商跟收貨資料的欄位，
台灣手機號碼要是09開頭的10位數字
ಠ_ಠ
Sat, Jan 8, 2022 8:33 AM
付款功能是假的
這個不強求，自己串過一些第三方支付功能，對新手真的有點難
如果會串linePAY，去求junior職缺應該都隨便找
ಠ_ಠ
Sat, Jan 8, 2022 8:35 AM
作品就是記住一點，用的技術越接近實際的產品，越代表有即戰力。
一個完整度高的作品吊打一大堆作業等級玩具
vodka6150
Sat, Jan 8, 2022 8:44 AM
我個人覺得還是要知道喔 我面試只會hook就被洗臉 但我覺得專案還是會有新舊寫法 所以應該還是遲早要學會看 btw 串接可以重基礎的開始 wearher api或是找open API來接到畫面上實作都是不錯的練習方式 ， css library 如果是學angular可以考慮primeng 要潮一點的也可以考慮 Tailwind
ಠ_ಠ
Sat, Jan 8, 2022 8:48 AM
最後講一下我面試的情況，
大部分有面試機會的公司都是不在意學歷，只考慮技能(學經歷:私立工延畢+0經驗)
都有技術問答跟問為什麼想做前端，有些還有現場寫react
最常問的問題:
JS概念、三大框架操作、是否有串過現成API、作品樣式怎麼寫的、會用git嗎
ಠ_ಠ
Sat, Jan 8, 2022 9:01 AM
vodka6150: 我真的超不熟angular
謝謝你的補充。Tailwind雖然很方便很潮，但我還是喜歡自己加css的感覺
ಠ_ಠ
Sat, Jan 8, 2022 9:05 AM
大概就這樣了，有想到什麼再補
希望能幫到有興趣轉職的人，一起來當web前端仔
拉線
----------------------------------
salad1558
Sat, Jan 8, 2022 11:27 AM
感謝噗主分享，目前也是自學中
到JS就整個卡住
而且也不知道怎麼準備履歷跟作品集好
噗主會建議履歷自己做個靜態個人履歷網站嗎這樣會加分嗎
還是其實沒差
vodka6150
Sat, Jan 8, 2022 11:44 AM
非本科的話就寫會的框架 跟 作品 靜態個人網站我覺得可以 推到gitgub上後 用他的github page功能 在面試時直接給對方看 最好順手切RWD(不會改CSS 就用CSS LIB來輔助) 這樣能講的東西稍微比較多一點
ಠ_ಠ
Sat, Jan 8, 2022 3:22 PM
salad1558: 我個人是覺得除非你可以設計的比CakeResume漂亮，否則沒差，這種東西個人偏向給入行1~2年後展示個人品牌用，新手轉職還是寫好履歷跟作品重要。
scone5199
Mon, Jan 10, 2022 3:18 PM
Mon, Jan 10, 2022 3:21 PM
angular 不建議新手學習，本身框架大，功能很多很複雜，學習成本高
除非你公司用這個＆有教，不然應該碰不上
angular通常都是銀行或是專案公司缺多，但銀行最近也有一些改react
唯一的好處可能是……競爭對手少(真的超少)……跟angular自包生態系，所以基本上東西不太會有變動。
Google pixel我記得最近招angular跟react的前端滿多的
之前寫angular, 結果滿多同事下一份都不是angular反而是java或是flutter（有夠跳痛）
wwwww 沒什麼人競爭但缺也不多的框架
scone5199
Mon, Jan 10, 2022 3:20 PM
Mon, Jan 10, 2022 3:23 PM
angular……真的要說入門款就官方範本英雄之旅練練大概這樣，再不然就是上保哥的課
有些專案公司也會開angular培訓職缺……這種……可能真的會的人太少
cheese911
Tue, Jan 11, 2022 8:41 AM
大大好，剛開始學CSS，想請教一下如果flex概念常常搞混，什麼方法可以快速釐清...
scone5199
Tue, Jan 11, 2022 8:49 AM
玩一些flex的教學小遊戲?我記得還蠻多的
或是用Playground 也可以
cow8204
Tue, Jan 11, 2022 9:08 AM
多切幾次就懂了...
cheese911
Tue, Jan 11, 2022 9:17 AM
scone5199: 玩過青蛙跟grid澆花的了 但練習切還是那種用試的看哪個對的狀態
scone5199
Tue, Jan 11, 2022 9:29 AM
那還是多切吧
ಠ_ಠ
Tue, Jan 11, 2022 2:05 PM
cheese911: 新人最快還是看教學範例跟著切(畢竟你懂屬性，不代表會應用)，
自己看的話我認為有幾個重點概念
主副軸走向
Item跟container差異
各類container 屬性(實務上最常用justify-content align-items 這兩個)
item中的xxx-self ,fle
這個最重要 非相同大小的版通常都要靠flex)
搞熟flex90%以上版面能切了(不考慮效能) 加油~
cheese911
Wed, Jan 12, 2022 4:57 AM
ಠ_ಠ: 非常謝謝！！目前計劃是看著金魚切版系列跟著切
載入新的回覆
上完是可以找工作，但實作能力不夠的話，只能找到屎缺(超爛接案 低薪博弈之類)
不要想照課程做個作品就能輕鬆領薪水，反正有些東西終究還是要學的，不如早點把基礎打好
編輯器 終端機使用
程式基本概念
一點點網路概念
HTML
CSS
Javascript (以下會簡稱JS)
JS框架三大框架(Vue React Angular)的其中一種 git
jquery bootstrap 不推薦學 等入行老闆叫你用再說
最重要的還是HTML CSS Javascript 基本功
資策會(跟一些實體補習班)
優: 幾個月內把入門的東西全上一次，入行最底線的東西都會學到(畢竟你花了十萬
缺: 貴，而且節奏快如果跟不上會容易陣亡
付費英文線上課程(udemy等)
優:便宜 品質好
缺:懶人會買了不看，英文(但其實問題不大)
優: 會挑出版社的話翻譯品質好，用得是台灣技術名詞
缺: 技術比較慢(翻譯要時間) 有些純概念的書沒有搭配範例比較難啃
中文線上課
不推 品質比英文低太多
最推薦的方式是上線上英文課程搭配中文實體書，
英文字幕看不懂就用edge瀏覽器翻譯功能，會即時幫你翻譯(感謝微軟拔拔
跟著課程上，遇到不懂的技術名詞或概念就查中文書(下面會有課程跟書的推薦
如果有人怕英文爛學不好，別怕 噗主多益不到400都能靠這方式學到入行了
會基本標籤使用就ok
因為最簡單教學最多，不需要買書或課程，免費資源就夠 像這篇
看起來很簡單但水很深的東西，某方面來說比JS還難學
最好的學法還是是多看高手的使用
重要概念
如何精準選到想要的元素
各種 position
flex 排版
media query
首先很重要的一點，現在已經2022，
如果看到教你用 var 建立變數的課最好避開，這課程過時了
ES6的語法
型別轉換
陣列處理方法
作用域
環境 this
閉包
非同步運作
API呼叫
這部分難度較高，轉職者面試最容易在這部分陣亡
要注意的是API呼叫，自己練習多串API比看課程重要
找工作挑一個學就行了
Vue
中文圈最常用的框架，中文教學資源最多，職缺最多
因為轉職課程通常教這個，平均薪水比React低一點
國外最常用的框架，中文資源較少，
但有大量英文學習資源，
要注意的是舊版本很吃JS概念，
投104時要看公司用舊版(class)還是新版(hook)
Angular
不熟(? 不太建議轉職者學
工作時一定會用(如果上班發現公司不用git 快逃
推薦在實作專案時一邊練習指令
學習資源推薦
https://www.udemy.com/...
學程式版的steam:Udemy
以下推薦的課程都常特價，最低約230，建議超過400元時別買
不喜歡30天內可以退錢
不喜歡30天內可以退錢
把前端相關技能全部塞在同一門課，推薦完全沒經驗新手買一門當作學習路線參考
這邊就推個適合新手的講師
https://www.udemy.com/...
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
https://www.udemy.com/...
一定要推的神課，這門的技巧學完，就有可以去面試的CSS程度
強烈推薦有CSS知識但不知道如何實作好看網頁的人買
另外課程專案都很漂亮，適合當面試專案的介面參考
或是從以下講師中挑
Stephen Grider
Colt Steele
Jonas Schmedtmann
Maximilian Schwarzmüller
或是如果英文很爛，就挑有英文字幕(非自動生成)的 這樣翻譯會比較準確
首先是這種歐萊禮的磚頭書，有心學可以買，
遇到不知道某名詞的中文或是英文很難懂的概念就開書來查
或是睡不著時就開來助眠雖然是很有名的JS進階概念書，但新手讀會很挫責
真的要買的話推型別文法跟this兩本，非同步那本太難
JS進階概念書中最容易理解的一本，搭配例子跟圖解把概念解釋得很清楚
面試遇到的問題在這本幾乎都有，某方面也算面試參考書(?
轉職自學很容易忽略的程式碼品質，
就算寫得出來網頁，也可能因程式寫太醜被刷掉．
原版Clean Code範例用得是C#，所以推這本用JS當範例的
寫得好亂喔
我是切版很熟的美術
把treehouse js課看到一個階段，進階一點的開始看不懂了
轉行後也忘得差不多了，剛好最近想回來研究前端，您真的太佛心了
底標就是六X學X那樣，比這個差建議別拿去面試
來講一樣是做電商作品，該如何跟補習班出來的拉出差距
沒有註冊登入功能 或是假登入
沒有庫存 沒有搜尋
首頁外的頁面都長87％像
動畫效果看起來都差不多
不管什麼付款方式 都填一樣的表單
付款功能是假的
沒辦法看訂單
恩...跟實際的電商差很多呢
沒有庫存 沒有搜尋
沒辦法看訂單
這三個是同一個問題，因為課程沒有提供資料庫存這些資料
解決方式就是學一點點後端，
不用真的學很多，能夠用API簡單的拿存更新資料就ＯＫ
只要能存資料，作品就會從純展示的玩具變成真的能用的電商(超簡陋版本)
動畫效果看起來都差不多
這部分可以直接參考現實中電商的介面，挑戰自己用CSS切出很像的頁面，
在介紹說介面是參考OO跟XX網站自己切的
或是 直接使用UI library 做樣式
Vue 用 Antd，React 用 material-ui
如果面試時公司剛好就是用這些庫做樣式，錄取率會大幅上升
前端有個很重要的能力是複雜表單處理跟欄位驗證，
以防傳格式不對的資料到後端，
做作品時要試著只顯示必要的欄位給使用者輸入，並確認格式的正確
例如付款選擇超商取貨付款時要給選擇寄到哪間超商跟收貨資料的欄位，
台灣手機號碼要是09開頭的10位數字
這個不強求，自己串過一些第三方支付功能，對新手真的有點難
如果會串linePAY，去求junior職缺應該都隨便找
一個完整度高的作品吊打一大堆作業等級玩具
大部分有面試機會的公司都是不在意學歷，只考慮技能(學經歷:私立工延畢+0經驗)
都有技術問答跟問為什麼想做前端，有些還有現場寫react
最常問的問題:
JS概念、三大框架操作、是否有串過現成API、作品樣式怎麼寫的、會用git嗎
希望能幫到有興趣轉職的人，一起來當web前端仔
拉線
----------------------------------
到JS就整個卡住
而且也不知道怎麼準備履歷跟作品集好
噗主會建議履歷自己做個靜態個人履歷網站嗎這樣會加分嗎
除非你公司用這個＆有教，不然應該碰不上
angular通常都是銀行或是專案公司缺多，但銀行最近也有一些改react
唯一的好處可能是……競爭對手少(真的超少)……跟angular自包生態系，所以基本上東西不太會有變動。
Google pixel我記得最近招angular跟react的前端滿多的
之前寫angular, 結果滿多同事下一份都不是angular反而是java或是flutter（有夠跳痛）
wwwww 沒什麼人競爭但缺也不多的框架
有些專案公司也會開angular培訓職缺……這種……可能真的會的人太少
或是用Playground 也可以
自己看的話我認為有幾個重點概念
主副軸走向
Item跟container差異
各類container 屬性(實務上最常用justify-content align-items 這兩個)
item中的xxx-self ,fle
搞熟flex90%以上版面能切了(不考慮效能) 加油~