有一種看法是，前端開發人員既應該會編碼，還得擅長設計（看看招聘廣告對技能的要求就知道了，特別會提到要求 Adobe Photoshop 知識）。 雇主僱用前端開發人員的目的就是——編寫代碼和設計漂亮的網站。 在英國，甚至出現了明顯的技術人員短缺，所以如果你表現出是這方面的專家或專業人士，或許有助於你拿到更優渥的薪酬。 軟體開發的步驟可簡化為：開發（Development）、測試、營運維護（Operation），在較大的組織中通常會由不同團隊負責，而為了改善開發端與營運維護端的鴻溝和缺乏效率，DevOps 工程師這個職務便應運而生。 兼有前端和後端技能的開發者，可以更快速地做出產品 prototype、也能夠機動性地支援和協調各開發部門，在變化快速的新創圈中更是一大賣點。 而自從臉書與 Google 的工程師透露他們偏好雇用「全端工程師」後，全端工程師已經變得越來越搶手。
在最後，我簡單交代一下我花了多少時間轉職成為前端工程師，及統整一下我的學習方式。 在我轉職前，我花了約1000小時在寫程式，這個時間是我透過番茄鐘計算出來的。 CSS神書，在初學程式時我覺得CSS算是簡單易懂的程式語言，後來才發現大錯特錯，我花在CSS上的時間實際上並不亞於學習JavaSCript的時間，當我要合併Sass及其他設計模式做進階的CSS使用時，這本書真的給我幫上很多忙。 六角學院：Vue 3 實戰影音課程：偏難，比較見仁見智，說個實在一點的評價就是，這門課是偏Vue功能「導讀」，不要期望上了課你會多猛，一定要額外做「大量」練習與研究，才會比較理解。 我個人其他的想法就是，這一門課的助教有時候會回答不到我的點上，不曉得是不是我有程度以後，對於助教的回覆開始變得嚴格的關係。 在前端合作時要避免這類問題，需改用 .class, #id 來套用樣式，不同的組件不要取同樣的類別名稱。
前端工程師: 前端工程師自學網頁
看看業界的情況，看看應徵全端工程師至少需要具備什麼樣的入門能力。 除了以上核心能力，前端工程師有時會因職務需求，而有偏向設計、或是偏向工程之分。 如果偏向設計，則要會用 Sketch、Adobe Illustrator 、Figma 等向量繪圖軟體進行畫面的設計規劃，並進一步進行畫面切版規劃；如果偏向工程面，則會進行到後端資料串接、撰寫自動化測試、資訊安全等等的實作。 但是不管是偏向哪一邊，兩邊基本上都還是需要有一定的技術基礎，並且持續精進，才能算是稱職的前端工程師。 除此之外，不同的輸入與輸出裝置也非常之重要，RWD 大部分的人都聽過，主要是讓網頁能在各種螢幕，小至手機大到電視、投影都可以使用順暢，也包含輸入的滑鼠、觸控、鍵盤等。 雖然介面的設計是事由設計師接手，但前端工程師會需要協助把這些設計現實化，比如尺寸、滑鼠與觸控的操作差異等必須解決的問題。
PHP在幫助開發人員更快地構建應用程式，非常的有效率，有可擴展性和可靠性。 最簡單的學習曲線、廉價的託管環境、豐富的學習資源和相對容易的開發環境能夠利用PHP快速完成，對初學者來說亦是一個不錯的選擇。 剛好從去年鐵人賽到今年是我從切版轉職走到”更完整的前端工程師”的轉換年，今年在想主題的時候，就希望自己可以把這個轉換年期間，在這塊領域學到的東西彙整成一系列的文章。
- 大多數的時間，前端工程師會以切版作為入門，也就是HTML與CSS，這兩項能力是作為前端工程師來說最基礎的技能。
- 我要的不是知識有多廣多雜, 我要的是看得到求職者對前端的熱誠.
- 以經營實體店面比喻前端與後端工程師所負責的工作，前端工程師如同店面前台，包辦店內裝潢、商品陳列、消費者購物動線…等；而後端工程師則是負責店面後台，如收銀系統、倉儲管理、會員制度管理…等項目。
- 除了各種廠牌的瀏覽器最好都能正常運作外，還得支援各種行動裝置，讓網站在手機上也能順利操作，同時效能還不能太差…。
- 眾所皆知，Python屬於通用型程式語言，作為一種直譯語言，它的實用性極高，當然也非常適合用來做Web開發。
另外我在看MDN時，我一律只看英文，對，我這個人的怪僻就是文件只看英文。 文件只看原文的原因是，我大學的時候曾接案做過翻譯，如果文件翻譯的太爛我可能會看到生氣，有時候我看中文都感覺他不是中文，索性只看英文文件。 這也是我前面說到，為什麼語言能力幫助我很多的原因。 Redux一個用於應用程式狀態管理的開源JavaScript資料庫。 Redux經常與React搭配運用，但其也可以獨立使用。 不過隨著功能變得越來越多甚至越來越複雜，前端需要暫存更多的資料，而這些資料會散落在不同的頁面或是元件中，有時候就會遇到多個頁面或是元件需要共用同一份資料。
前端真的成為一個職位，基本上應該是從 AJAX 熱門起來開始，反過來說，前端工程師基本上就是要大量處理 AJAX 問題。 DOM 全名 Document Object Model，初學者可以把 Object 當成 Model 當成贅詞。 因為 JavaScript 是物件導向的程式語言，所以無論要操作什麼其實都是 Object 物件概念, 而 Model 就是個名詞，模型。
前端工程師: 學習難度：★★★★★★★★★★…xN（咦？）
我在撰寫這篇文章的時候，還沒有實際on board，所以我真的不知道所謂軟體開發這行，RD這一行到底長怎樣。 六角學院：一變應萬變的響應式網頁設計：可以練習 RWD 的課程，一樣的問題，課程比較偏舊，課程優勢就是助教問答的服務。 六角學院：使用 HTML、CSS 開發一個網站：課程內容偏舊，但是我很喜歡助教批改的服務，算是台灣很新手友善的課程。 於是當時我用了很多辦法來讓自己更專注，包括使用番茄工作法、看轉職文章激勵自己、看熱血動畫、看自我成長的書籍，其中最有用的就是使用蕃茄工作法，能讓自己看到明顯專注、學習的時間，讓我獲得成就感之餘，更有辦法掌握自己學習的進度。 薪資要看工作地點也得要看產業，台北、高雄會高一些，另外博奕產業也會高一些。
也都將越來越重要，也將更深入影響著服務端網站在外部搜尋引擎上的評分，進而影響頁面資訊能夠被搜尋到的程度。 能夠根據畫面呈現的資料層級，規劃出適當的資料規格來與後端進行調整討論，提升資料溝通上的正確性。 所謂的動態網頁，並不是大家所想的那樣，要飛來飛去的動畫才叫動態網頁。 而是只要每次進入網頁都有可能發生變化，其實就可以叫做動態網頁。 靜態網頁就是任何人在任何時間進入看它，它都長得一樣。
各種螢幕小至手機大到電視甚至投影銀幕，都可以拿來看網頁，而輸入也有滑鼠、觸控、鍵盤等方式。 部分的介面設計是設計師的事情，但工程師會需要協助把這些設計實作到網頁上，比如尺寸多大的時候元件的擺放呈現位置在哪、滑鼠與觸控的操作差異等。 前端工程師在接收到畫面需求的時候，要能嘗試解讀並掌握設計師對於頁面每個區塊設計的可能原因，並嘗試在設計中根據開發工具的語言限制，找出可能存在的開發疑慮，最後找到與設計師協調溝通開發策略。
不過根據筆者個人經驗，不是任何公司在發布職缺的時候都會想這麼多，尤其是人資體系的管理人員或是公司老闆，很多人並不真的那麼了解。 ，支援的標準也漸趨成熟，但各家瀏覽器的功能與行為仍然不完全相同。 相同網頁在各瀏覽器呈現的差異若不好好處理，輕則讓網頁看起來很醜，嚴重者會讓人無法使用整個網頁，因此前端工程師需要花費心力來讓網頁能夠在各瀏覽器上運行如常。 再詳細一點說明，我們一般講的「上網」泛指各種連結到網路後所進行的活動，包含了瀏覽器，或者手機或桌機的應用程式。
Glints會在這篇文章介紹什麼是全端工程師，以及全端又跟前端與後端有什麼不一樣的。 雖然需要懂的知識很多，但全端開發者並不需要每樣都精通，也不一定每個領域都要能夠獨立開發。 通常他們會特別專精其中幾項技術，並且和網站設計師、前端、後端以及 DevOps 工程師分工合作。 JQuery 能用同一套程式碼支援多版本的瀏覽器，實作上內部需要一直判斷當前的狀況，所以導致他很多情況比原生的 JavaScript 要來得慢上數倍。 加上 AJAX 、使用者體驗、網頁動畫的要求越來越高，太慢的速度會在根本上限制高互動的前端需求。
然而某天，當 A 工程師的頁面需要套用 B 工程師寫好的 CSS 元件時，問題來了。 B 工程師的 CSS 樣式是直接套用 h1, p, div 這樣的 HTML tag selector，這種時候就最容易出現樣式汙染。 企劃/PM 先出整個網站的框架圖，前端人員看到元素、頁面後快速做出 Prototyping。 大部分的調整都盡量在這個時期，這個時候由於製作草圖的時間較短，就算整組砍掉重練也比較不那麼痛。
但是讓不是這個領域的人記得所有的職務名稱不是一件容易的事。 所以我們通常還是會有一個比較大範圍的統稱，比方說網路工程師 來說，我們基本上切分成「前端」與「後端」，如果工作範圍兩邊都涉及，有些人就會稱它為「全端」。 這樣的轉換需要掌握許多非常抽象的概念：變數、迴圈、函式等等。 前端工程師做的，就是依據這些概念來操控 HTML / CSS / JavaScript ，讓網頁變成我們的形狀。
軟體是現下最熱門的主流產業，從下圖可以看到軟體的整體市場未來五年預測成長率高達 45%，這代表著軟體工程師有著較高的就業機會、以及相對高的待遇水準，是近年來頗受青睞的職業類型。 國際電訊聯盟和聯合國教科文組織成立的可持續發展寬頻委 員會（Broadband Commission for Sustainable Development）發表了一份報告，發現網路在全球人口的普及率為51%。 2021年初，世界人口為78.3億，有超過52.2億人使用手機，相當於66.6％的總人口。 現在大家都習慣用手機上網，所以要做出適應各種大小尺寸的 RWD（Responsive Web Design）也是 CSS 的守備範圍。
抑或是當我們思考到整個使用流程，也會需要大量的抽象與邏輯能力來把整個流程轉化為一個個步驟並且對應到可以實作的功能。 要將設計師的設計稿以Pixel Perfect為目標呈現在瀏覽器的畫面中，需要大量的使用CSS 的語言，經驗沒有很多的前端工程師，會需要花很多時間來設計這一塊。 前端工程師 (Front-end developer ) 的工作內容通常負責網頁與使用者互動，設計使用者介面、以及編排網頁功能的流程、資訊的呈現提高使用者體驗。
這樣大致上設定是沒有問題的，不過後來隨著工程師的創意與老闆的需求越來越高，真的完全用這種我們稱之為 inline 的寫法來寫的話，HTML 文檔會變成異常複雜難維護。 現在當然也是有很多種解法，不過最常見的解決方式還是使用 css 獨立出來，利用 selector 綁定的寫法。 很多同學可能從小考試到大，會認為考試就應該要有標準答案。
雖然可能只有我太天真，不過我之前真的覺得前端就是把資料串進來之後做邏輯處理就好，但實際成為這個角色之後，真的發現前端也是包山包海，可以管的事情真的非常多，也非常廣，還覺得自己像一個小菜鳥還有很多事情要去探索和接觸。 有前端相關的問題我主要都是看MDN文件居多，畢竟人家是官方的文件，一定會是標準的作法。 身邊的朋友問問題，大部分我也只是轉貼MDN文件的內容給對方看，導致有朋友甚至戲稱我跟本沒娛樂：「別人在看漫畫的時候我都在看MDN 」。
就以我自己的體感，在台北的Junior 前端工程師，差不多月薪在 40,000 元上下，比較菜的可能會被砍個二、三千塊，比較有談判籌碼的也許可以談到月薪 45,000 或更高。 還算容易，在人力銀行上搜尋「前端工程師」或「Frontend」等關鍵字就可以搜尋到不少的職缺，也常常在社群網路上可以看到公司或獵頭主動來張貼職缺，薪資也都滿漂亮的。 另外，在這個「自學程式現場」的系列文章裡，我會實際拍幾部短片讓大家感受一下 JavaScript 寫起來是什麼樣子，也歡迎大家到時候可以跟著影片動手寫看看。 JavaScript 又簡稱 JS，這應該算是當一個前端工程師最難的上手的大魔王等級技能，要學的深度跟廣度都很驚人，如果你不覺得 JS 很難學，如果不是天生神力，就可能表示你還學的不夠透徹。
身為軟體工程（簡稱「軟工」）的一員，程式語法的掌握絕對是首要條件唷！ 而在網頁前端工程領域中，最重要的就是要掌握前端語言 JavaScript 的運作邏輯與原理。 簡短且無副作用：讓你的函式盡量簡短，一次只做一兩件事，例如就是一個for迴圈，配上一個if，不要if 中還有 for 再有 if 接著還有 while，千萬不要這樣做！
在這個時代，人們越來越依賴這種網路以及軟體的生活模式。 當年只是用來做簡單的表單驗證的 JavaScript 已經複雜到不是一個人可以輕鬆搞定的程度了，於是逐漸特化出「前端工程師」這樣的角色出來。 即然有「前端」，那自然也有相對的「後端」工程師，但請繼續容我在後續的文章再介紹。 技術可以透過刷題、唸書來精進；平時的自我了解，用不卑不亢的心態參與面試，能有效找到適合的公司。
2021年三大前端框架以「全球」市佔率來說，React 目前依然是最高的，但是單就亞洲或是更小範圍的東亞(包含台灣)來說的話，Vue.js 是跟 React 不分千秋甚至超過的。 畢竟 Vue.js 的作者是中國人，如果亞洲最大的經濟體與其合作夥伴都偏好使用它，加上Vue.js 確實很好用，且是以個人名義進行的專案，亞洲市佔率如此的高也是必然。 Angular 目前已全體來講相對小眾，但是如果你走的是微軟體系和 TypeScript 的話，Angular 佔的比例又不能忽視了。
