2021年零基礎邁向前端工程師

六角學院前端工程師學習地圖

這是今年針對自己的前端轉職做的規劃( 參考了六角學院的 前端開發者地圖 ),在去年底經過 切版直播班 洗禮之後,瞬間點開了好幾個技能,花了三個月每天至少兩小時的學習時間,學會一項前端技能,這是絕對辦的到的,也發現到原來自己的自學力與自制力已經進化轉換養成每日學習的好習慣,每天都會固定時間觀看 影音課程 ,就算沒啥時間也會看個一兩個小段落,這大概跟切版直播班的每日刻意練習有關吧!

前端工程師必備技能

  1. 網頁切版技能:HTML5、CSS3、SCSS、Bootsrap4
  2. 前端開發技能:jQuery、JavaScript、ES6、SPA、JS plugin 整合、API 介接、NPM
  3. JS 框架:Vue.js、Vue CLI、Vue router、VueX
  4. 程式版控:Git、GitHub、Git Flow 工作流程

網頁設計師必備技能

  1. 網頁 UI 設計 50% + 網頁前端 50%
  2. 網頁前置規劃:Logic Flow、Wireframe、網格系統、使用者體驗
  3. 介面繪製流程:Figma、Adobe XD 操作、Mockup、Prototype、標註文件
  4. 網頁切版技能:HTML5、CSS3、SCSS、Bootstrap4、jQuery、JS animation

啊我已經上完切版直播班了,然後哩?

因鑑於自己目前是inhouse的平面設計師(也就是在特定領域的公司裡長期專注於維護某項產品或品牌的設計師),但這幾年開始有了停滯不前的窘境,覺得要開始優化自己的設計師職涯,而不是被困在這了...

必須繼續努力改變人生啊

當然,轉職這麼重大的事情,畢竟是砍掉重練,也有跟洧杰老師討論過,老師覺得我較適合前端設計師(會設計,會JS若又會用到Vue的話,未來在業界會較吃香),所以未來一年也是會朝這方向前進,其實在前端設計還是前端工程職位我都不設限,只希望自己可以向前進,畢竟未來都是要靠程式設計改變社會,前幾天看新聞,為了迎接AI潮流,程式設計已經納入未來國高中生的課綱了(哪泥,國中我在幹嘛啊,我還在玩Gameboy咧)!嗯,或許以後高中應該不用再分理組跟文組了吧!

未來人生裡的 Mentor

到目前影響深遠的應該就是六角學院了,也是因為接觸到六角學院,才有學習的機會,也才有轉職的想法,真的不得不說,洧杰老師真的是很好的 職涯導師( Mentor ),加入六角學院的這幾年,我也都一直持續關注老師的任何動向或文章,從老師課程裡文章裡持續學習、吸收經驗,直到去年切版直播班老師加碼線下見面會,終於才真正見到大神一面!這場見面會也意識到,很多人都在一起共學,自己怎麼能不努力呢,於是在此寫在部落格自己要轉職這件事,所以沒有退路,要時時警惕自己!也因為一直看到社團裡的轉職分享文還有老師寫的前端工程師養成手冊,幻想著到底什麼時候輪到自己呢,透過切班直播班慢慢地建立自己的自信心,才下定決心一定要轉職,而,現在就開始轉職的旅程了,這裡也會繼續記錄我的轉職之路~

程式設計這項技能,是可以靠努力得來的

忘記在哪一集Alex宅幹嘛講到在這種大前端時代裡,你只需要專注於投入與掌控時間,程式設計這項技能,是可以靠努力得來的,有touch到我!所以,未來一年就繼續努力吧!

未來的人生願景

看了卡斯伯老師的部落格,講到「目標是短期的,願景是長期的,成功人士及企業都會擁有願景,並且以這個願景為使命來訂定目標」,而目前的我,有3個願景以利達成我的目標:

1.成功邁向自己的夢想
2.生活與工作達到平衡
3.健康與家人一起到老

以上這些是未來必須且持續執行的長期清單

參考資料來源 邁向前端工程師 / 設計師之路前端開發者學習地圖轉職前端工程師

找到自己的線上學習節奏

買了一堆線上課程,不知道該怎麼吸收完,這時候必須找到自己的學習節奏,我目前的學習方式是看三次,第一次快速瀏覽過,第二次邊做筆記,第三次寫成文章做作業(切版直播班養成的習慣),不需要跟別人比較自己吸收多少,和昨日的自己比較就好,每天都有進步一點點,每年就會進步一大點!( 刻意練習的法則就在此 ),至少每天要訂出一個番茄鐘的時間點去學習。

1. 先看過第一遍,認真吸收並理解
2. 在看第二遍,一邊筆記一邊實作
3. 最後第三遍,融會貫通寫成文章做作業

自學的方法 — 洧杰老師分享自學的四大流程

第一招:吸收整合知識,不急於動手做
第二招:持續輸出,從中獲得自身盲點,利用番茄鐘每日25分鐘練習與筆記
第三招:反覆撞牆,從開源網路中獲得可以前進的方向
第四招:刻意練習,鍛鍊出肌肉長期記憶

摘錄於 廖洧杰 (查理) 洧杰老師的 這篇文章 的文章片段,回想在切版直播班大概也是用這樣模式在學習,真的有成效,所以未來在JS/VUE直播班也會照這模式繼續持續學習下去!

前端工程師課程清單

這些是我自己買過的課程,有些看完,有些進行中,有些尚未觀看!而這些是今年的觀看清單

直播班
1. 切版直播班
2. JS 直播班
3. Vue 直播班

影音課程
1. HTML、CSS 開發網站
2. jQuery 打造互動性網頁效果
3. RWD 手機版網頁設計
4. Bootstrap 4 — 開發超強不解釋
5. Sass 實戰全攻略
6. 使用gulp 進行網頁前端自動化
7. JavaScript 入門 — 學徒的試煉
8. JavaScript 核心篇- 邁向達人之路
9. Vue 出一個電商網站
10. Git & Github 程式時光機
11. 動畫互動網頁特效入門(JS/CANVAS)
12. 動畫互動網頁程式入門 (HTML/CSS/JS)

UIUX設計師
1. 產品設計實戰:用Figma打造絕佳UI/UX
2. UI 設計入門
3. Adobe XD:網頁設計真容易

切版水準
1. 個人履歷設計:簡單,平均半天
2. 形象網站:簡單,平均 1 天
3. RWD 形象官網:困難,平均 8 天
4. 多頁式網站:中等,平均 6 天,到此才有達到課程目標
5. 後台頁面設計:中等偏簡單,平均 4 天
6. 電商網站:困難,平均 8 天,到此才有達到求職水準
7. 視差滾動:簡單,平均 1 天完成,講解視差套件與動畫效果
8. 大型訂房網:極度困難,平均花 12 天,到此才有達成業界水準之上

學習資源 ( 持續增加中 )

前端線上課程系列
1. 六角學院
2. Alex 宅幹嘛
3. Amos css coke
4. Udemy

前端雞湯文章系列

洧杰老師寫給切版班學員的一封信 — 洧杰老師
你提升的不是程式能力,而是自我研究能力 — 洧杰老師
六角學院電子書
六角前端大補帖
前端「設計」聖光之路 系列
人生都被這個小女孩搞亂了!出社會所學到的點點滴滴 系列

前端切版文章系列

金魚都懂的網頁學習路徑懶人包
金魚都能懂的這個網頁畫面怎麼切 — 金魚都能懂
金魚都能懂的 CSS 選取器 — 金魚都能懂
金魚都能懂的網頁設計入門 — 金魚都能懂
不只是寫寫CSS,切版概念30天

前端開發文章系列

邁向 JavaScript 勇者之路 系列
重新認識 JavaScript 系列
前端常見問題攻略 系列
是 Ray 不是 Array
oxxo-sutdio
Stack Overflow

前端學習書籍系列 ( 持續新增中 )

這些也是自己目前閱讀的書籍,有些是工具書很難一次啃完,有些看完、有些進行中、有些還沒看!

程式設計
1. 金魚都能懂的 CSS 選取器:金魚都能懂了你還怕學不會嗎(iT邦幫忙鐵人賽系列書)
2. 零基礎寫程式:設計商品頁面、嵌入YT影片或Google地圖、FB貼文廣告、發電子報……沒學過程式的你,照樣能談
3. JavaScript 網頁程式設計超入門
4. jQuery 最強圖解實戰講座
5. HTML&CSS:網站設計建置優化之道

UI/UX
1. 打造最強網頁UI/UX設計腦:設計師都該懂的絕佳設計.溝通法則

SEO
1. 最親切的SEO入門教室:關鍵字編輯x內容行銷x網站分析
2. 最親切的Google Analytics入門教室

行銷
1. AI行銷學:為顧客量身訂做的全通路轉型策略

平面設計
1. 寄藤文平的創意畫法:塗鴉達人的快樂畫畫祕訣
2. 人人都能上手的資訊圖表設計術:台灣第一家INFOGRAPHIC設計公司,經典案例、操作心法、製作祕笈全公開!
3. 字型設計學:33種字體祕訣,精準傳達重要訊息!
4. 版面研究所②心動版面學:53個讓女人下單的設計關鍵!

創業
1. 一人創業:創業就是,做好一件你真正想做的事!
2. 好懂秒懂的財務思維課:文理系看得懂、商學系終於通,生存賺錢一定要懂的24堂財務基礎

--

--

--

朝前端努力的 Graphic Designer|https://viccjiang.github.io

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jiang V

Jiang V

朝前端努力的 Graphic Designer|https://viccjiang.github.io

More from Medium

3 Tips on Protecting Your WGMI Interfaces Pre-Sale Spot.

Embedding C code in Ravi, a Lua dialect

Truth has Arrived: Used, Abused, Ostracized and Confused

CS371p Spring 2022: Vincent Huynh