【網站開發學習筆記】什麼是網站前端工程師

更新於 發佈於 閱讀時間約 3 分鐘

  此部份資料以各大求職網及他人分享的職業甘苦談整理而成,若有任何缺誤再請告知。


  一般而言,前端泛指處理與用戶端相關的開發,舉凡使用介面、從用戶端收集到資料傳至後端進行資料處理等。舉例來說,前端的工作就像是使用者與電腦之間的翻譯人員,電腦需使用代碼下指令來操作,但一般用戶並不是都會程式語言或是語法,也看不懂電腦呈現的代碼含義,因此前端會將指令圖像化,讓使用者可以直觀的進行操作並對電腦下指令,並把圖像化的使用者介面以代碼轉成電腦也能理解的內容,讓電腦運作起來。


前端的工作內容

  而在網站開發時前端主要的工作便是在使用者介面的開發以及與後端資料的串接上。具體而言有以下幾項工作

  • 將設計轉化為真實網頁
    用HTML/CSS將網站設計稿從圖像轉譯為能呈現在瀏覽器上的網站,也就是俗稱的切版
  • 讓網站能在各種裝置、瀏覽器上運行
  • 優化前端體驗與效能
  • 串接後端伺服器進行資料溝通
  • 與其它前端合作開發


前端所需的軟實力

  從上所述,可以看出前端的工作內容多數需要與其它專業項目的人員進行合作。除了與設計師溝通網站的呈現以及使用體驗外,也需要與後端協調進行資料的串接。因此在基本技術力之外,做為網站前端,你還會需要:

  • 不害怕與他人合作溝通
  • 具有一定的美感素養
  • 同時具備抽象與邏輯思考的能力
  • 發現問題、解決問題的能力
  • 不斷的自我更新、持續學習

  個人認為,最後兩項不單只是做為前端,而是不論從事何種行業都需要具備的,不過在技術日新月異的程式開發領域,這些特質的重要程度又更高了。



前端所需的硬實力

  了解前端在做些什麼、又需要什麼樣的軟實力後,覺得自己對於這個職業是有興趣且想要嘗試發展的話,那麼接下來就來看看前端應該要具備什麼樣的專業技能吧!

  大部份的自學介紹多會按學習順序來進行介紹,不過筆者屬於喜歡從「為什麼」來進行思考,且這系列有個大方向的目標:轉職,因此比起依照程式的學習順序來介紹,筆者認為從工作內容來進行介紹會更明確且有感。


  從下一篇開始,就要來更仔細的了解前端的工作內容及所需的能力!


  我是正在努力學習網頁開發知識,立志朝網頁前端工程師邁進的佧佧,這個系列是我的學習筆記及記錄,希望我的學習歷程也能給予同樣走在學習路上的夥伴一些協助,若是內容有任何錯誤或不足,也希望各位前輩、先進不吝提出,謝謝!

我的學習地圖


留言
avatar-img
留言分享你的想法!
avatar-img
佧佧的術式領域
4會員
15內容數
我是佧佧,歡迎來到我的術式領域。 讓我們一起磨練技術、學習程式, 在前端的領域中不斷成長吧!
佧佧的術式領域的其他內容
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/10/27
  在寫程式的時候,我們常會需要針對不同情況來執行不同的工作。這個時候就會用到條件判斷式 ( if statement )
2024/10/27
  在寫程式的時候,我們常會需要針對不同情況來執行不同的工作。這個時候就會用到條件判斷式 ( if statement )
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
我要從哪邊開始 相信會進來看這篇文章的你或許是好奇,也或許是想要轉職但不知道該從何處開始的人,總之要是有興趣的話就再往下看,我會依照我的經驗作分享。 通常轉職工程師的人大部分是沒有相關背景的人,也就是你並非本科系,或是大學時可能修過資訊相關的課程但早忘光了,這邊我會以完全沒有相關背景的人做參考,
Thumbnail
我要從哪邊開始 相信會進來看這篇文章的你或許是好奇,也或許是想要轉職但不知道該從何處開始的人,總之要是有興趣的話就再往下看,我會依照我的經驗作分享。 通常轉職工程師的人大部分是沒有相關背景的人,也就是你並非本科系,或是大學時可能修過資訊相關的課程但早忘光了,這邊我會以完全沒有相關背景的人做參考,
Thumbnail
這是 30 天寫作挑戰的第 14 天。今天要跟大家分享的主題是:從 0 到 1 成為前端工程師應該養成的 3 個寫程式習慣
Thumbnail
這是 30 天寫作挑戰的第 14 天。今天要跟大家分享的主題是:從 0 到 1 成為前端工程師應該養成的 3 個寫程式習慣
Thumbnail
這是 30 天寫作挑戰的第 13 天。今天要跟大家分享主題是:從 0 到 1 成為前端工程師的 3 個技巧
Thumbnail
這是 30 天寫作挑戰的第 13 天。今天要跟大家分享主題是:從 0 到 1 成為前端工程師的 3 個技巧
Thumbnail
這是 30 天寫作挑戰的第 11 天。今天開始要跟大家分享一系列的「從 0 到 1 成為前端工程師的……」,今天要分享的是:從 0 到 1 成為前端工程師的 3 個訣竅
Thumbnail
這是 30 天寫作挑戰的第 11 天。今天開始要跟大家分享一系列的「從 0 到 1 成為前端工程師的……」,今天要分享的是:從 0 到 1 成為前端工程師的 3 個訣竅
Thumbnail
做網站一定要會寫程式嗎? 如果你心理有這樣的疑問,是否是正在猶豫要不要學習做網站這件事呢? 首先我們要定義寫程式這件事情。 誰在做寫程式這件事呢?是程式設計師。它涵蓋的職業類別包括:軟體工程師、前端工程師、後端工程師、或全端工程師..。 讓我們進一步看前端工程師與後端工程師的差異?
Thumbnail
做網站一定要會寫程式嗎? 如果你心理有這樣的疑問,是否是正在猶豫要不要學習做網站這件事呢? 首先我們要定義寫程式這件事情。 誰在做寫程式這件事呢?是程式設計師。它涵蓋的職業類別包括:軟體工程師、前端工程師、後端工程師、或全端工程師..。 讓我們進一步看前端工程師與後端工程師的差異?
Thumbnail
前幾天看到在靠北工程師 FB 上有篇貼文,原 PO 提到:「因與經理不合,公司唯一一個可以扛下前端、後端、雲端、手機端的工程師,即便老闆加薪 60% 也堅持離職,最後老闆另開一間公司讓這位員工在新公司上班。」後來還上了新聞,一時間被媒體稱為「最強工程師」,真的有工程師能負責這麼多領域嗎?
Thumbnail
前幾天看到在靠北工程師 FB 上有篇貼文,原 PO 提到:「因與經理不合,公司唯一一個可以扛下前端、後端、雲端、手機端的工程師,即便老闆加薪 60% 也堅持離職,最後老闆另開一間公司讓這位員工在新公司上班。」後來還上了新聞,一時間被媒體稱為「最強工程師」,真的有工程師能負責這麼多領域嗎?
Thumbnail
嗨 我是森妮 上週讓大家投票下一篇文章,沒想到後端工程師篇壓倒性勝利 前端工程師篇不知道大家喜不喜歡!陸續在IG有收到私訊有不少關於後端工程師的問題,我只要有時間都會回應,也歡迎來跟我聊聊天 【後端工程師】 [工作流程] 團隊中的PM、SA與客戶進行需求確認 [學習路徑] >基礎概念與工具
Thumbnail
嗨 我是森妮 上週讓大家投票下一篇文章,沒想到後端工程師篇壓倒性勝利 前端工程師篇不知道大家喜不喜歡!陸續在IG有收到私訊有不少關於後端工程師的問題,我只要有時間都會回應,也歡迎來跟我聊聊天 【後端工程師】 [工作流程] 團隊中的PM、SA與客戶進行需求確認 [學習路徑] >基礎概念與工具
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News