技術分享 | 如何成為前端工程師

更新 發佈閱讀 4 分鐘
raw-image

嗨 我是森妮 一個資管背景的菜鳥工程師

四年學習不少基礎,終究逃不過理論無法符合職場需求的命運,跳不少坑才成為軟體工程師,跟大家分享軟體工程師中常見的三種角色的怎麼開始學習、學習路線、必備的技能跟就業注意事項!

軟體工程師屬於一個統稱,開發網頁、APP是多數,在求職的職缺中分為「前端」與「後端」兩種角色,包含前端及後端的角色則是「全端」工程師。

這篇是【前端工程師篇】,後續會再介紹後端工程師與全端工程師,文章會以網頁做為說明的例子,分享給在學過程中或想轉職的人,知道自己適合哪一種軟體工程師角色以及一些必備的技能!


[前端工程師]

前端工程師就像裝潢師建立使用者的操作介面,我們在網頁所看到的畫面中的字體、間距、配色,包含所有圖片呈現,功能操作流程、動態效果呈現,都是由前端工程師所打造!

前端工程師會自行設計或根據UI/UX設計師所提供的設計圖將網頁畫面切版,設計功能間的操作流程,建立順暢與方便操作的介面,加上使用者互動(彈跳視窗、按鈕調整、表格調整)提升網站靈活度,而在這過程中也需確保使用者在不同裝置、不同瀏覽器的使用上都能擁有舒適的體驗、完整功能與資料呈現,提供使用者視覺跟良好的體驗環境!

在我們所看到的網站設計完成後,還需建立與後端的資料接收與傳遞,透過API的方式讓使用者可以在互動過程中取得所需的資料,並將資料傳遞到後端達到資料交換效果。


[工作流程]

  1. 團隊中的PM、SA與客戶進行需求確認
  2. UI/UX設計師根據客戶需求設計出網站的建構原型prototype或線框稿wireframe,與前端工程師合作,將開發會遇到的問題進行討論與調整,將設計的品質維持並降低開發的風險
  3. 前端工程師以設計圖利用 HTML, CSS, JavaScript 等前端技術進行網站畫面的切版,實現按鈕設計、操作流程與互動體驗至瀏覽器
  4. 根據裝置尺寸、裝置設定、瀏覽器、瀏覽器版本等不同因素進行調整,使網站在這些因素下仍可以完整將資料呈現與使用,盡可能涵蓋至更多不同的使用者
  5. 與後端工程師合作討論資料的接收與傳遞格式,並根據API文件進行前端與後端的資料串接
  6. 開發的工時評估與開發目標安排為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的操作頁面,以及自動化測試的測試案例、跨域、憑證等實作。

raw-image

[求職注意]

前端工程師的職缺分布於許多產業,部分屬於企業形象網站與產品介紹網站,這類型的前端工程師較重視美觀與商業風格呈現,資訊系統的前端工程師則更重視商業邏輯與使用者的流暢度!

  • 是重視設計與美觀還是重視商業邏輯的資料處理
  • 是否需要進行UI/UX的設計


[適合對象]

  • 具備視覺設計美感與理解力
  • 善於整理資料經過排版呈現
  • 耐心觀察細節查找畫面問題
  • 換位思考使用者的使用情境
  • 對設計提出建議與解決方案
  • 能與團隊協作及高校執行力

希望大家喜歡今天的分享,有想看的主題也歡迎告訴我💬
instagram:@xenialin.tw
email:xenialin.tw@gmail.com


留言
avatar-img
留言分享你的想法!
avatar-img
森妮後端工程師日常的沙龍
18會員
9內容數
如何成為後端工程師,後端工程師的技術分享!
你可能也想看
Thumbnail
我要從哪邊開始 相信會進來看這篇文章的你或許是好奇,也或許是想要轉職但不知道該從何處開始的人,總之要是有興趣的話就再往下看,我會依照我的經驗作分享。 通常轉職工程師的人大部分是沒有相關背景的人,也就是你並非本科系,或是大學時可能修過資訊相關的課程但早忘光了,這邊我會以完全沒有相關背景的人做參考,
Thumbnail
我要從哪邊開始 相信會進來看這篇文章的你或許是好奇,也或許是想要轉職但不知道該從何處開始的人,總之要是有興趣的話就再往下看,我會依照我的經驗作分享。 通常轉職工程師的人大部分是沒有相關背景的人,也就是你並非本科系,或是大學時可能修過資訊相關的課程但早忘光了,這邊我會以完全沒有相關背景的人做參考,
Thumbnail
這是 30 天寫作挑戰的第 11 天。今天開始要跟大家分享一系列的「從 0 到 1 成為前端工程師的……」,今天要分享的是:從 0 到 1 成為前端工程師的 3 個訣竅
Thumbnail
這是 30 天寫作挑戰的第 11 天。今天開始要跟大家分享一系列的「從 0 到 1 成為前端工程師的……」,今天要分享的是:從 0 到 1 成為前端工程師的 3 個訣竅
Thumbnail
「我想要做軟體相關工作,不知道軟體工程師跟資訊科技(IT)工程師的差別在哪裡?要怎麼知道自己適合哪一種?」,所以這篇文章會幫助你分清楚這兩種職業的差別,提供四個觀察面向來幫助你進行評估,找到適合自己的切入點。
Thumbnail
「我想要做軟體相關工作,不知道軟體工程師跟資訊科技(IT)工程師的差別在哪裡?要怎麼知道自己適合哪一種?」,所以這篇文章會幫助你分清楚這兩種職業的差別,提供四個觀察面向來幫助你進行評估,找到適合自己的切入點。
Thumbnail
做網站一定要會寫程式嗎? 如果你心理有這樣的疑問,是否是正在猶豫要不要學習做網站這件事呢? 首先我們要定義寫程式這件事情。 誰在做寫程式這件事呢?是程式設計師。它涵蓋的職業類別包括:軟體工程師、前端工程師、後端工程師、或全端工程師..。 讓我們進一步看前端工程師與後端工程師的差異?
Thumbnail
做網站一定要會寫程式嗎? 如果你心理有這樣的疑問,是否是正在猶豫要不要學習做網站這件事呢? 首先我們要定義寫程式這件事情。 誰在做寫程式這件事呢?是程式設計師。它涵蓋的職業類別包括:軟體工程師、前端工程師、後端工程師、或全端工程師..。 讓我們進一步看前端工程師與後端工程師的差異?
Thumbnail
前幾天看到在靠北工程師 FB 上有篇貼文,原 PO 提到:「因與經理不合,公司唯一一個可以扛下前端、後端、雲端、手機端的工程師,即便老闆加薪 60% 也堅持離職,最後老闆另開一間公司讓這位員工在新公司上班。」後來還上了新聞,一時間被媒體稱為「最強工程師」,真的有工程師能負責這麼多領域嗎?
Thumbnail
前幾天看到在靠北工程師 FB 上有篇貼文,原 PO 提到:「因與經理不合,公司唯一一個可以扛下前端、後端、雲端、手機端的工程師,即便老闆加薪 60% 也堅持離職,最後老闆另開一間公司讓這位員工在新公司上班。」後來還上了新聞,一時間被媒體稱為「最強工程師」,真的有工程師能負責這麼多領域嗎?
Thumbnail
嗨 我是森妮 上週讓大家投票下一篇文章,沒想到後端工程師篇壓倒性勝利 前端工程師篇不知道大家喜不喜歡!陸續在IG有收到私訊有不少關於後端工程師的問題,我只要有時間都會回應,也歡迎來跟我聊聊天 【後端工程師】 [工作流程] 團隊中的PM、SA與客戶進行需求確認 [學習路徑] >基礎概念與工具
Thumbnail
嗨 我是森妮 上週讓大家投票下一篇文章,沒想到後端工程師篇壓倒性勝利 前端工程師篇不知道大家喜不喜歡!陸續在IG有收到私訊有不少關於後端工程師的問題,我只要有時間都會回應,也歡迎來跟我聊聊天 【後端工程師】 [工作流程] 團隊中的PM、SA與客戶進行需求確認 [學習路徑] >基礎概念與工具
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
2021年7月22日,非常感謝AC又舉辦了每月一次的數位職涯相談室啦! 本次邀請到的就是本BLOG 方格子 的前端及全端工程師:Jiang & Kuan 來分享現實職場當中前後端各別負責的工作內容。
Thumbnail
2021年7月22日,非常感謝AC又舉辦了每月一次的數位職涯相談室啦! 本次邀請到的就是本BLOG 方格子 的前端及全端工程師:Jiang & Kuan 來分享現實職場當中前後端各別負責的工作內容。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News