技術分享 | 如何成為前端工程師
嗨 我是森妮 一個資管背景的菜鳥工程師
四年學習不少基礎，終究逃不過理論無法符合職場需求的命運，跳不少坑才成為軟體工程師，跟大家分享軟體工程師中常見的三種角色的怎麼開始學習、學習路線、必備的技能跟就業注意事項！
軟體工程師屬於一個統稱，開發網頁、APP是多數，在求職的職缺中分為「前端」與「後端」兩種角色，包含前端及後端的角色則是「全端」工程師。
這篇是【前端工程師篇】，後續會再介紹後端工程師與全端工程師，文章會以網頁做為說明的例子，分享給在學過程中或想轉職的人，知道自己適合哪一種軟體工程師角色以及一些必備的技能！
［前端工程師］
前端工程師就像裝潢師建立使用者的操作介面，我們在網頁所看到的畫面中的字體、間距、配色，包含所有圖片呈現，功能操作流程、動態效果呈現，都是由前端工程師所打造！
前端工程師會自行設計或根據UI/UX設計師所提供的設計圖將網頁畫面切版，設計功能間的操作流程，建立順暢與方便操作的介面，加上使用者互動(彈跳視窗、按鈕調整、表格調整)提升網站靈活度，而在這過程中也需確保使用者在不同裝置、不同瀏覽器的使用上都能擁有舒適的體驗、完整功能與資料呈現，提供使用者視覺跟良好的體驗環境！
在我們所看到的網站設計完成後，還需建立與後端的資料接收與傳遞，透過API的方式讓使用者可以在互動過程中取得所需的資料，並將資料傳遞到後端達到資料交換效果。
［工作流程］
- 團隊中的PM、SA與客戶進行需求確認
- UI/UX設計師根據客戶需求設計出網站的建構原型prototype或線框稿wireframe，與前端工程師合作，將開發會遇到的問題進行討論與調整，將設計的品質維持並降低開發的風險
- 前端工程師以設計圖利用 HTML, CSS, JavaScript 等前端技術進行網站畫面的切版，實現按鈕設計、操作流程與互動體驗至瀏覽器
- 根據裝置尺寸、裝置設定、瀏覽器、瀏覽器版本等不同因素進行調整，使網站在這些因素下仍可以完整將資料呈現與使用，盡可能涵蓋至更多不同的使用者
- 與後端工程師合作討論資料的接收與傳遞格式，並根據API文件進行前端與後端的資料串接
- 開發的工時評估與開發目標安排為PM的管理範圍，遇到問題與需要協助也須即時反應，讓進度可以順利進行。
［學習路徑］
HTML→CSS(Sass/Less)→JavaScript→jQuery→Ajax→框架(Angular/Vue/React)→Bootstrap→RWD→版本控制(Git/Svn)→API串接(閱讀API文件/串接API交換資料)
- 著重系統UI/UX畫面設計的前端工程師
對於需設計系統畫面的前端工程師，可以學習Sketch或Figma做為設計建構原型prototype或線框稿wireframe畫面的工具
- 著重資料串接與資訊安全的前端工程師
可以學習Open API的操作頁面，以及自動化測試的測試案例、跨域、憑證等實作。
［求職注意］
前端工程師的職缺分布於許多產業，部分屬於企業形象網站與產品介紹網站，這類型的前端工程師較重視美觀與商業風格呈現，資訊系統的前端工程師則更重視商業邏輯與使用者的流暢度！
- 是重視設計與美觀還是重視商業邏輯的資料處理
- 是否需要進行UI/UX的設計
［適合對象］
- 具備視覺設計美感與理解力
- 善於整理資料經過排版呈現
- 耐心觀察細節查找畫面問題
- 換位思考使用者的使用情境
- 對設計提出建議與解決方案
- 能與團隊協作及高校執行力
希望大家喜歡今天的分享，有想看的主題也歡迎告訴我💬
instagram：@xenialin.tw
email：xenialin.tw@gmail.com
instagram：@xenialin.tw
email：xenialin.tw@gmail.com
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
恭喜你！如果你正在考慮成為一名初階軟體工程師，那麼你即將踏上一條充滿挑戰與機遇的黃金大道。這條路上既有高山峻嶺，也有美麗風光。作為初階軟體工程師，你將體驗到程式設計的奇妙世界，並學會如何在其中找到自己的立足之地。這篇文章將為你揭開這個職業的神秘面紗，帶你了解其中的酸甜苦辣
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
當我剛開始接觸這個領域的時候，經常會看到有人在討論： 到底要做前端還是後端工程師呢？後端工程師賺的比前端工程師多？前端工程師轉後端工程師？那前端與後端到底是什麼呢？ 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理，對於想深入瞭解前後端的讀者會非常有幫助。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
八、軟體公司的前端工程師之路
新公司不是做網頁專案的，而是自己研發資安軟體的公司，主要只有一個大專案，跟很多客製化的需求。
我在這次轉職時有考慮到，我其實不太喜歡一個案子做完就結束的感覺，因為那會讓我覺得這些作品做完好像也不是我的東西..
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
恭喜你！如果你正在考慮成為一名初階軟體工程師，那麼你即將踏上一條充滿挑戰與機遇的黃金大道。這條路上既有高山峻嶺，也有美麗風光。作為初階軟體工程師，你將體驗到程式設計的奇妙世界，並學會如何在其中找到自己的立足之地。這篇文章將為你揭開這個職業的神秘面紗，帶你了解其中的酸甜苦辣
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
當我剛開始接觸這個領域的時候，經常會看到有人在討論： 到底要做前端還是後端工程師呢？後端工程師賺的比前端工程師多？前端工程師轉後端工程師？那前端與後端到底是什麼呢？ 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理，對於想深入瞭解前後端的讀者會非常有幫助。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
八、軟體公司的前端工程師之路
新公司不是做網頁專案的，而是自己研發資安軟體的公司，主要只有一個大專案，跟很多客製化的需求。
我在這次轉職時有考慮到，我其實不太喜歡一個案子做完就結束的感覺，因為那會讓我覺得這些作品做完好像也不是我的東西..
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：