網頁設計與前端工程有何不同?給兼職學習者的轉職規劃建議

更新 發佈閱讀 6 分鐘
vocus|新世代的創作平台

日前有學員來信,信中提到他加入 ALPHA Camp 自學程式後,開啟他對未來的憧憬與全新想像,直到學期 2-2 的課程,都讓他充滿成就感與信心。

這位學員也提到,儘管接下來的學期課程難度較高,但他仍努力完成學習,但他依舊懷抱高度意願與熱情,也矢言會繼續學習,以自己的步調繼續在程式語言這條路上邁進。

不過,他也分享了目前的自己的規劃。他說,現階段的自己其實更想直接投入工作,並累積實務工作經驗,因此他寫信詢問以他目前的上過的課程,會有哪些就業市場的機會?另外,他提到希望能以兼職在家工作的方式尋找工作機會。我想這或許也是許多人想了解的地方,以下我會提供個人的看法提供大家一些建議。

網頁設計入門,一文讀懂 HTML、CSS

若有收入考量,建議先從接案開始

以 ALPHA Camp 【學期 2-2】的課程為例,它的定位是讓學員擁有「從頁面到產品」的思維與能力。

首先,你會從學習串接 API 開始,讓你的網頁能取得外部提供的資料。能處理成效資料,把你的作品,從一個好看/有互動的頁面,提升成為有實際應用的軟體產品。

在學習 API 之後,我們將會引導過去你學過的 HTML/CSS/JavaScript,以及 RWD、DOM 操作等概念,透過實作專案來整合與深化。

最後,你也會開始學習「工程師是如何工作的」。從使用 Git 做版本控制,到將自己的程式碼模組化,帶你正式踏入專業工程師的領域。

HTML 語法教學,快速攻略網頁 HTML 標籤的基本元素

在這個階段,你該具備的能力是:

  1. 熟悉 HTML/CSS/JavaScript 的應用,能把設計稿轉化成網頁,並能打造一般的互動
  2. 了解 RWD 的概念,能使用 Bootstrap 框架提高開發速度與實作 RWD
  3. 能串接 API,把資料呈現到網頁上
  4. 對版本控制有概念,能操作 Git/GitHub 等工具

事實上,擁有這些能力後後能升任什麼樣的工作,不同的雇主有不同的標準。對我來說,在此階段你還沒有到「前端工程師」的層次。但有了這些能力,該能勝任一些基礎「網頁設計」的工作。但要成為一個有競爭力的網頁設計師,除了基本 HTML/CSS/JavaScript 與 RWD之外,我會建議你去探索與學習:

  • 平面設計概念與工具,如 Adobe Illustrator
  • SEO 概念與操作

因此,在考量學習的完整性與專業能力上手程度,我不會建議你馬上去找工作。比較合適的方法。如果你真的需要有些收入,建議可以透過接案方式,從打造簡單的網頁與介面開始。

個人認為,要成為一個有長遠發展潛力、雇主會重用的工程師,還有很多能力與素養需要建立的。太早開始找工作,怕會碰到很多挫折。

網頁設計與前端工程的差別

這部分的很多企業也會搞混。因為他們的工作內容看起來很像,而技能關鍵字都是那些:HTML、CSS、JavaScript 等。但工作內容的核心其實有很大的差距。

網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。對於如何與後端的資料庫整合以及資料處理的認知,也比較沒有經驗。

至於前端工程師,需要考慮與解決的技術問題會比較多元、也比較深入。如:

  • 當網站/產品的規模與架構變大時,該如何優化?
  • 當要打造一般套版/套件無法實現的使用體驗時,能如何客製化?
  • 程式碼是否能被有效的長期維護?是否有優化效能的空間?
  • 是否能使用如 Vue、React 等前端框架,讓程式碼能有更好的維護與效能?

前端工程師要會什麼?工作上會遇到什麼挑戰

兼職學習該如何規劃?

這部分要看你兼職的性質。我認為最重要的,就是需要給自己每週,甚至每日幾個固定的時間,能夠長時間學習與練習。

程式能力是需要透過大量的刻意練習來建立的,而在製作專案的時候,需要花一定時間去 debug 與研究,才會突破。所以如果學習時間太破碎,會阻礙學習的效率。

轉職規劃以三個月為一階段

轉職規劃如果是 part-time/在家裡工作,我建議以三個月為一個階段:

  • 階段一:練功。專心打造個人專案,一邊提升自己的能力,一邊打造自己的作品集。可以參考這些別人在 CakeResume 上的作品,或是在網路上買些設計稿然後實作。
  • 階段二:尋找機會。多參與社群活動,把自己的文章與作品呈現朋友與社群認識,也看看身邊的朋友是否有 side projects 可以接。重點是學習如與案主/客戶溝通,了解他們的需求,完成任務。這時候也歡迎來試試看當 AC 的助教 😀。
  • 階段三:準備求職。當你累積了三、四個案子之後,就可以準備求職。你也可以同時完成學期三的課程,把 Vue 與其他專案完成,對求職應該更有幫助。而熟練前端框架,也會幫助你找到薪資較高的工作。

希望這些建議對你有幫助。轉職的路不容易,但也不是不可能。只有你才能真正讓你自己變強。好好加油!ALPHA Camp 會在這支持你。

(原文發表於 ALPHA Camp blog,原標題為〈網頁設計與前端工程有何差別?兼職學習如何做好轉職規劃?

留言
avatar-img
Bernard Chan的沙龍
9會員
7內容數
Bernard Chan的沙龍的其他內容
2021/07/21
在 ALPHA Camp,我們相信教育該不斷演化、進步。 不管是課綱、內容、體驗、以及學生管理等,教育服務都該不斷地優化,這些優化也有大有小。其實在 2017 年,我們從實體教學轉到線上,便是我們做過最大的一次優化。
Thumbnail
2021/07/21
在 ALPHA Camp,我們相信教育該不斷演化、進步。 不管是課綱、內容、體驗、以及學生管理等,教育服務都該不斷地優化,這些優化也有大有小。其實在 2017 年,我們從實體教學轉到線上,便是我們做過最大的一次優化。
Thumbnail
2021/07/01
遠距工作讓信任問題放大、引起主管與員工關係緊張的情況,國內、外都有,畢竟人性就是人性。但據我近期的觀察,狀況在台灣比較嚴重。
Thumbnail
2021/07/01
遠距工作讓信任問題放大、引起主管與員工關係緊張的情況,國內、外都有,畢竟人性就是人性。但據我近期的觀察,狀況在台灣比較嚴重。
Thumbnail
2021/06/02
我看到很多年輕人在還沒準備好、條件尚未成熟的狀況下就創業,這無疑是向失敗叩門,雖說失敗也能獲得寶貴的經驗,但我認為只有「經過努力和認真準備」的失敗才稱得上是最好的老師。
Thumbnail
2021/06/02
我看到很多年輕人在還沒準備好、條件尚未成熟的狀況下就創業,這無疑是向失敗叩門,雖說失敗也能獲得寶貴的經驗,但我認為只有「經過努力和認真準備」的失敗才稱得上是最好的老師。
Thumbnail
看更多
你可能也想看
Thumbnail
想要跨領域轉職軟體工程師,如何踏出第一步? 有一部分的人會因為身邊親友從事相關領域的工作,進而有機會了解業界的軟體工程師的工作內容,但如果身邊沒有任何認識的人在相關領域從業該怎麼辦呢?想要轉職該如何踏出第一步?
Thumbnail
想要跨領域轉職軟體工程師,如何踏出第一步? 有一部分的人會因為身邊親友從事相關領域的工作,進而有機會了解業界的軟體工程師的工作內容,但如果身邊沒有任何認識的人在相關領域從業該怎麼辦呢?想要轉職該如何踏出第一步?
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
除了分享網頁設計公司的其他職務,這篇文章將實際應用《我們為什麼要讀書,為什麼要工作》這本書所提到的方式,探討與分析設計系對應各種不同職務時的優勢。
Thumbnail
除了分享網頁設計公司的其他職務,這篇文章將實際應用《我們為什麼要讀書,為什麼要工作》這本書所提到的方式,探討與分析設計系對應各種不同職務時的優勢。
Thumbnail
如果您根本不知道如何使用计算机,那么学习计算机课程并开始使用是个好主意。即使只是具备如何使用计算机和如何使用互联网的基本工作知识,也会大大增加您可以做的事情的数量,并打开许多原本会为您关闭的门。 确实,如果您仍在工作或正在寻找工作(即尚未退休),知道如何使用计算机将使您能够从事前所未有的不同工作。
Thumbnail
如果您根本不知道如何使用计算机,那么学习计算机课程并开始使用是个好主意。即使只是具备如何使用计算机和如何使用互联网的基本工作知识,也会大大增加您可以做的事情的数量,并打开许多原本会为您关闭的门。 确实,如果您仍在工作或正在寻找工作(即尚未退休),知道如何使用计算机将使您能够从事前所未有的不同工作。
Thumbnail
這部影片想跟各位分享 我從營養系完全不懂程式 轉職成為Android APP軟體工程師的心路歷程 ... 這部影片的重點有 我為何轉職工程師的三個原因 我是如何學習第一個程式語言 以及依照自身經驗 分享非本科轉職成功的三點要素 .......
Thumbnail
這部影片想跟各位分享 我從營養系完全不懂程式 轉職成為Android APP軟體工程師的心路歷程 ... 這部影片的重點有 我為何轉職工程師的三個原因 我是如何學習第一個程式語言 以及依照自身經驗 分享非本科轉職成功的三點要素 .......
Thumbnail
畢業超過 10 年了,中間遇到公司或團隊解散、因病休養、半認真半玩票的遊戲實況,工作性質和產業經歷不少,在這裡盡可能把還記得的寫出來,希望能作為一點參考。 大學不算本科,都是自學(都在玩縫紉機):
Thumbnail
畢業超過 10 年了,中間遇到公司或團隊解散、因病休養、半認真半玩票的遊戲實況,工作性質和產業經歷不少,在這裡盡可能把還記得的寫出來,希望能作為一點參考。 大學不算本科,都是自學(都在玩縫紉機):
Thumbnail
最近一直在想畢業後,到底要做什麼? 因為目前讀的科系,並沒有明顯的出路,又是師範大學, 所以身旁的人大多是決定走老師的路, 大四的假日會要實習,接著考教檢,畢業後再去學校實習半年,之後決定繼續讀研究所,或是就去找老師的職缺考教甄。 但我沒有想當老師。
Thumbnail
最近一直在想畢業後,到底要做什麼? 因為目前讀的科系,並沒有明顯的出路,又是師範大學, 所以身旁的人大多是決定走老師的路, 大四的假日會要實習,接著考教檢,畢業後再去學校實習半年,之後決定繼續讀研究所,或是就去找老師的職缺考教甄。 但我沒有想當老師。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
完成第一步轉職,任職後端工程師也一年多了,除了學習到完整的多人開發流程、職場上反覆的CRUD跟理解前人的智慧後(legacy code),在日復一日的生活裡,作為 Junior 的下一步要做什麼?
Thumbnail
完成第一步轉職,任職後端工程師也一年多了,除了學習到完整的多人開發流程、職場上反覆的CRUD跟理解前人的智慧後(legacy code),在日復一日的生活裡,作為 Junior 的下一步要做什麼?
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News