入門前端前，先學習css3樣式表 隨後學習js前端控制，jq系列的 還有現在流行的ui框架比如bootstrap angular vue等學習 學習前端設計模式等

準備要入門前端的愛好者，首先要知道什麼前端是做些什麼的，用什麼軟體語言開發編寫的，所以我們先來簡單瞭解一下前端。

1、前端是什麼？

就是人們看到的顯示屏上的介面。

2、軟體開發

作為一個的優秀的前端製作人員，必須對Dreamweaver、notepad++這2款最基礎的要能輕鬆駕馭。

3、編碼瞭解

頁面基本結構、文件宣告、編碼宣告、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文字設定…常用標籤集合header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對路徑、相對路徑、標籤語義化、標籤巢狀規範、SEO…等等，

4、進階編碼

瞭解了初步的編碼，但作為一個工程師還是不夠的，還需要更深層瞭解。

相容性問題處理、整站進階、css3入門、移動端佈局、Bootstrap前端開發框架

5、專案實戰

以上問題都大概知道了，那麼恭喜你，你已經入門前端了

首先你要知道什麼是web前端，web前端是做什麼的。Web前端做的工作主要是製作網頁，將網站的介面更好展現給使用者，並在原有的靜態頁面上增加動態效果，那麼web前端都包括什麼呢?

主要需要掌握的技術是：html、css、JavaScript，也是你想成為前端工程師必須要掌握的三個方面。Html是在進行網站頁面佈局時進行使用，將所有需要的元素來進行定義，再透過css來對展示出來的元素進行定位，最後再透過JavaScript來詩選頁面對應的互動效果，這個部分聽著比較簡單，但是要掌握的融會貫通也是需要時間的。

其它方面例如node開發、前端框架、小程式+資料視覺化也都是需要學習的。由於大家是零基礎的入門web前端，所以在入門的過程中可能會有一點兒難度，大家可以根據自己的情況來制定一個計劃來進行學習，好的學習計劃加上良好的執行力可以讓我們事半功倍的學習。

比較建議大家的學習順序如下：

第一個階段學習html+css，主要學習的內容是html5基礎、css基礎、html5進階知識、css3進階知識，具體的學習時間要根據自己的時間和學習能力來進行安排，

第二階段js互動設計，主要學習內容JavaScript核心語法、DOM和BOM、面向物件程式設計、jQuery、Zepto等，具體時間安排如上，

第三個階段就是node開發、前端框架的學習。

以上就是web前端的主要學習內容，如果大家真的想要學好web前端知識，一定要規劃好自己的學習路線，並能持之以恆進行學習，如果覺得自己的自制力沒有那麼好，就不建議選擇自學了，因為學習效果不會很好。

問題闡述：

其實建議題主下次問問題可以更加詳細的描述一下、比如學習前端的目的、自己目前的基礎等。

問題分析： 歷史：

很多年前叫做美工、專注於頁面搭建、美化，這類職務通常要擔任團隊中的ps、flash、廣告、UI等一系列工作。

程序：

後來隨著時間的推移、一系列新的概念、技術、框架的誕生，美工在團隊中的實用性降低，為了適應市場需求、在企業和員工自發性的試探下、前端應用而生、包括框架、最佳化、美化等都屬於前端、也就是說、這個時候的美工已經從頁面搭建晉升到網站製作，相應的技術能力也需要進一步加深，並且、前端還在進步、後來大家又提出了全杖、即前後端通吃，當然、這類偏全能型的人才一般是後期逐漸向前端轉化、他們在團隊中可謂是中堅力量。

問題結果：情況一

如果題主是純小白入門、那麼把多年前在知乎的一個回答的截圖奉上、其中個別出入忽略不計。

情況二

如果有基礎、那麼就一句話、多練多練多練、不是照著學習影片做，而是自己參照已上線網站介面實現功能、然後檢視原始碼對比自己的程式碼做比較、不斷改進，一定要自己上手做！

1. 學習HTML基礎，主要學習一些標籤以及對應的作用

2. 學習css基礎，學習css的一些語法以及作用

這個時候可以百度一下一些大公司的命名規範，寫程式碼的規範最好從這個時候開始養成。

階段性練習：

你可以寫一些PC端的介面，模仿一些網站來讓自己更熟悉html和css

3. 學習原生javascript。

如果你有足夠多的時間，比如大二或者大一，可以花多點時間學習這一塊，如果你時間不多，又想早點入門前端，可以只學一些簡單的原生js，比如dom操作，js原生動畫等，以後再補上。

4. 學些jquery

jquey來說比原生js要簡單很多，你可以花多點事件學習這一塊，因為工作中用的也比較多。當然，時間多者還是將主要精力放在原生js上比較好。

階段性練習：

此時你可以結合html和css，寫一些有互動的網站，可以多練習一下js來操作dom啊，動畫啊等等

5. 學些HTML5和CSS3。

前面的html和css只是基礎的學習，此時你應該學一學html5 和 css3，來寫一些移動端的專案

此外，研究一下移動端適配。

階段性練習： 此時可以寫一些移動端的網站，可以多使用css3和html5的一些新屬性。可以使用一些less或者sass這些css預處理器

6. 學習ajax；

經過前面的學習，你基本掌握了前端開發的一些基礎知識，不過你寫出來的東西都是靜態的，也就是說資料都是寫死的。此時你可以學習一下ajax,因為工作中你需要透過它來和後端配合，讓你的資料動起來。

階段性練習： 練習如何透過ajax獲取資料，請求資料，如何處理資料，顯示在頁面上等。

7. 學點PS切圖

8、是時候學習一些好的框架了RN/angularJS/

vue.js/node.js等

Web前端開發技術主要學習的內容有三方面：HTML、CSS和JavaScript！

如果你有更高的追求，那麼就需要你精通DIV+CSS佈局，最好能獨立完成HTML頁面製作，隨著經驗的增長良好的前端設計感也有助於你的發展。

HTML甚至不是一門語言，他僅僅是簡單的標記語言！它的作用是表示一個HTML標籤在頁面裡是個什麼角色。

CSS只是無型別的樣式修飾語言。當然可以勉強算作弱型別語言。它的作用是表示一塊內容以什麼樣的樣式（字型、大小、顏色、寬高等）顯示。

Javascript這一基礎部分對於新手來講並不難，入手還算快。它的作用是當用戶觸發某些行為時，會給內容和樣式帶來什麼樣的改變。

如果是面向就業的話，建議可以從淺入深的學習，一般學習週期為3-4個月左右就差不多能夠勝任前端工程師的崗位了，推薦的前端學習路線如下：

第一階段 前端基礎知識

1、HTML/HTML5（網頁結構層）

HTML是搭建網頁結構的第一步。透過學習工作中必備的HTML標籤，並結合實際案例，更快更輕鬆的掌握網頁結構搭建方法和技巧。

H5是HTML的高階應用。透過對H5語義化標籤的學習，並結合HTML標籤搭建網頁，有利於增強網頁的SEO、可讀性和可維護性，提高網頁效能。

2、CSS/CSS3（網頁美化）

CSS是網頁的“美容師”。透過學習常用的CSS屬性並結合HTML標籤，獨立把效果圖還原成靜態程式碼頁面，為學習網頁程式設計打下夯實的基礎。

CSS3是CSS的高階應用。透過對CSS3屬性的學習，並結合HTML標籤，能夠輕鬆製作出各種絢麗的效果，為後面動態網頁的實現奠定基礎。

3、JavaScript基礎（網頁互動）

JS是網頁程式設計的第一步。透過JS網頁程式語言的基礎學習，能夠獨立使用JS知識開發網頁特效，來向PC靜態頁面新增互動行為。

總結

學完這個階段，就可以設計一些簡單的網頁，HTML+CSS+JS 三種語言相互配合，就可以設計出各種帶特效的網頁了。建議多做幾個案例，以便熟練掌握網頁設計的技巧，要牢記常用的HTML標籤和CSS屬性，熟練掌握JS的基礎語法。

第二階段 模組化網頁開發

1、JavaScript高階（面向物件的JS）

在JS初級知識的基礎上，透過深入學習JS函式和麵向物件知識，為後續學習元件化程式設計奠定基礎。

2、JQuery（快速實現JS的一個庫）

jQuery是JS的類庫。jQuery提供了豐富的封裝好的方法，透過對jQuery的學習，能夠縮短配置網站和應用所需的時間，提高開發效率。

3、UI庫（封裝好的CSS和JS庫）

這裡推薦幾個比較常用的UI庫，比如：Bootstrap、Layui、JQueryUI，這些都是PC端的。還需要掌握一些移動端的UI庫，比如：JQuery Mobile、MUI、WeUI等等。學會了這些UI庫的使用，就可以事半功倍的設計網頁了。

總結

學習完這個階段，就可以開發市面上的常見的專案了，而且移動端的UI庫可以做WebAPP，還可以把WebAPP透過打包工具打成移動端的安裝包。

第三階段 WebAPP與小程式開發

1、HTML5（多媒體）

H5多媒體技術是自媒體時代的必備技能。透過對H5多媒體技術的學習，輕鬆應對H5多媒體技術在移動端廣泛應用的需求。主要學習的內容有：

TML5的本地儲存方式，瞭解資料快取機制

HTML5提供的多媒體標籤，進行音影片播放器開發

HTML5 Canvas標籤應用，進行特殊圖形繪製

結合Canvas/JS實現手機解鎖案例等等

2、常見的移動端配置

移動開發基礎是進行webApp開發第一步。透過移動端基礎知識的學習，能夠獨立開發移動端頁面，並適配不同移動端終端。主要學習的內容有：

瞭解移動端螢幕、移動端瀏覽器、作業系統的不同

常用移動端常用Rem適配方案

主流移動端頁面開發技術選型與解決方案

響應式佈局開發與Flex佈局

不同終端適配與Browsersync多終端同步檢測工具的使用等等

3、小程式開發

小程式是必備技能之一 。透過對小程式知識的學習，能夠獨立開發企業級小程式，擁有解決主流小程式功能需求的能力。

第四階段 高階框架

1、ES6語法擴充套件

ES6是必備技能之一。透過對ES6的學習，全面掌握ES6引入的新特性，瞭解ES6在專案中的使用場景，為後面框架的學習奠定基礎。主要學習內容有：

瞭解ES6與ES5的區別

掌握babel轉換器的使用

如何運用ES6 Promise非同步程式設計

使用Class類，更好的面向物件程式設計

掌握陣列，物件，字串函式的擴充套件

掌握箭頭函式的應用等等

2、Vue 框架

Vue是目前國內企業需求熱門的框架之一。透過對Vue.js基礎和專案的學習，具備開發常見功能及快速構建企業級專案的能力，滿足行業中的常見需求。

3、React

React也是企業需求熱門的框架 。透過對React基礎和專案的學習，具備構建企業級專案和解決核心業務問題的能力，快速接入企業專案。

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現。入門的話還是比較簡單的。現在網上的學習影片也特別多，可以選擇適合的，有質量的入門影片學習。前端相對其他程式語言來說也是比較簡單的，而且入門的像h5，css3，js也是很簡單的。這三個是前端開發中最基本也是最必須的三個技能。

零基礎的話，推薦你可以去看看北京尚學堂的前端基礎入門課程。特別適合小白，而且是結合專案學習的。我有很多朋友都在學，他們也看的這套教程，比較推薦。而且是免費的乾貨滿滿，你可以去看一下。

建議你跟著黑馬程式設計師web前端中級程式設計師學習路線圖來學習，含配套影片，前端工具，原始碼等。

黑馬程式設計師學習路線圖及能掌握的能力（總，以下會分階段，加上配套學習影片，小夥伴可繼續往下看！）

第一階段：HTML5+css

第二階段：移動web網頁開發

第三階段：JavaScript網頁程式設計

第四階段：Node.js與Ajax

第五階段：vue.js專案實戰

第七階段：React.js專案實戰

第八階段：框架階段與原理

第九階段：移動APP開發

第十階段：node.js進階

第十一階段：視覺化遊戲

第十二段階段：架構與運維

對於前端入門

主要需要學習的技術是：html、css、JavaScript，也是你想成為前端工程師必須要掌握的三個方面。

比較建議大家的學習順序如下：

第一階段：Html5+CSS3：主要學習HTML5基礎、CSS基礎、HTML5進階、CSS3進階、Less

第二階段：JS互動設計：主要學習JavaScript核心語法、DOM和BOM、JavaScript高階進階、面向物件程式設計、Touch、jQuery、Zepto

第三階段：Node開發：主要學習JavaScript ES6、Node、Express、MySQL、Webpack+Gulp+模組化、WebSocket+Koa2

第四階段：前端框架：主要學習Vue基礎、Vue進階、TypeScript、React

第五階段：小程式+資料視覺化：主要學習小程式基礎、雲開發、uni-app基礎、資料視覺化

最後就是就業準備階段

學習的中間一定要理論和實戰相結合，這樣你才能把知識點真正理解透，才能在工作中靈活運用，不知道做什麼專案？小優把中公的專案拿來給大家作為參考：

PC端專案：《小U商城-PC端》；移動端webApp專案：《小U商城-移動端》；響應式專案：小U商城後臺管理系統、優學線上、小U商城電商專案、優社群專案、菜譜雲平臺、課堂監管大資料系統、優就業辦公系統等。

總之在入門前端的過程中一定要打紮實基礎，多寫多練！

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現。入門的話還是比較簡單的。現在網上的學習影片也特別多，可以選擇適合的，有質量的入門影片學習。前端相對其他程式語言來說也是比較簡單的，而且入門的像h5，css3，js也是很簡單的。這三個是前端開發中最基本也是最必須的三個技能。

零基礎的話，推薦你可以去看看北京尚學堂的前端基礎入門課程。特別適合小白，而且是結合專案學習的。我有很多朋友都在學，他們也看的這套教程，比較推薦。而且是免費的乾貨滿滿，你可以去看一下。

Web前端學習主要包括三部分：HTML、CSS和JavaScript！

HTML：甚至不是一門語言，他僅僅是簡單的標記語言！

CSS：只是無型別的樣式修飾語言。當然可以勉強算作弱型別語言。

Javascript ：它的基礎部分相對來說不難，入手還算快。

Web前端學習的誤區

網頁製作是計算機專業同學在大學期間都會接觸到的一門課程，而學習網頁製作所用的第一個整合開發環境(IDE)想必大多是Dreamweaver，入門快、見效快讓我們在不知不覺中已經深深愛上了網頁製作。此時，很多人會陷入一個誤區，那就是既然藉助這麼帥的IDE，透過滑鼠點選選單就可以快速方便地製作網頁。所以我們會問，那還去學HTML、CSS、JavaScrpt、jQuery這些苦逼的程式碼幹什麼?這不是舍簡求繁嗎?

但是隨著學習的深入，就會發現我們步入了一種窘境——過分的依賴IDE導致我們不清楚其實現的本質，知其然但不知其所以然。想實現一個效果卻不知如何下手改，其原因是顯而易見的——聰明的IDE成全了我們的惰性，使我們忽略了網頁背後最本質的內容——code。所以想要真正掌握web，光會滑鼠操作Dreamweaver是遠遠不夠的。。

隨著網際網路行業的快速發展，也讓前端開發變得火熱，web前端得到了越來越多的企業青睞和需求，而且由於IT行業相對於其它行業的高待遇，讓越來越多的人想要進入到前端，那麼web前端怎麼樣入門呢?

想要進入前端行業，首先要了解的是web前端工程師都需要會什麼呢？那麼這些知識點就是我們在學習過程中需要進行學習的，web前端所需要的知識點主要是要精通HTML、CSS、JavaScript，而且是都要精通不只是掌握就行，必須要將他們三個都非常理解。這樣你才能去完成自己的工作。其它例如後端的一些程式，介面設計等等也是需要在工作中掌握的。

接下來就和大家簡單分享一下web前端需要學習的內容：

HTML：HTML成為超文字標記語言，是一種標記語言，可以說不算是一種程式語言，僅僅是標記語言。主要是透過一系列的標籤，將網路上的文件格式進行統一。

CSS(Cascading Style Sheets):是一種用來表現HTML的計算機語言，不僅可以修飾網頁，還可以配合各種指令碼語言對網站元素進行格式化。

JavaScript：簡稱JS，是一種具有函式優先順序的程式語言，主要是作為開發web頁面的指令碼語言，也是學習web前端相對較難的一部分。

以上就是進入web前端行業所學的內容，首先要開始學習的內容就是html和css，一定要將學習和練習同時進行，不要覺得簡單就不去練習，只有透過自己親手的操作，才可以讓自己理解吸收掉所學習的知識，在學習JS的時候，首先要了解這個語言是做什麼的，可以做什麼。而且你要做的不簡單是將函式記住，而是需要了解JS的原理和機制，只有這樣才能在這條路上走得更遠。

2020前端學習路線：

給你推薦個靠譜的學習資料吧！入門的，講的很細，適合零基礎的學，而且還有實操專案可以做練習，是系統的資料！

我是學校老師推薦學的，我們很多同學都是看這個入門的呢

是百戰程式設計師的課程，b站上會有，或者這個官網也可以領取，還是免費的，希望可以幫到你！

現在網上關於前端的學習資料、影片很多，但是往往知識點比較零散不成系統，不適合初學者。對於一個剛開始學習前端的人，要學哪些內容？應該怎麼學習呢？

首先要學習前端頁面重構。包括PC端網站佈局、HTML5+CSS3基礎、WebApp頁面佈局等等，打好前端開發的基礎。

然後要學JavaScript高階程式設計、PC端全棧開發的知識。包括原生JavaScript互動功能開發、面向物件進階與ES5/ES6/ES7應用、JavaScript工具庫自主研發、jQuery經典互動特效開發、PHP+MySQL後端基礎、前端工程化與模組化應用等。

前面的知識都掌握了，就可以學框架、混合開發了。包括Node.js後端開發、Vue.js前端框架、React前端框架、混合開發(Hybrid,RN)、Angular前端框架等等。

對於零基礎的小白，想自學成為前端的還可以看看下列書籍：

《圖解HTTP》：一本HTTP的神書，圖文並茂，生動形象，非常適合小白學習。

《HeadFirstHTML與CSS(第2版)》：入門真的是經典書籍，手把手教學，豐富的案例讓你從0開始學前端。

《鋒利的jQuery》：作為第一本原因是jQuery入門快，你不會因為js的晦澀難懂而止步不前，因為學習jQuery後你可以自己寫一些可以即使看到效果的小專案從而提升興趣。

《Javascript高階程式設計》：書中涉及的概念基本涵蓋了js的大部分內容，包括作用域鏈、js資料型別、OOP物件在js中的實現、閉包、BOM和DOM模型、對變態IE的系列相容的解決方案、事件流、還有xml、jason、E4X這些資料格式與js的互動操作簡介、高階技巧的介紹(比如惰性載入)等等。

《高效能JavaScript》：揭示了技術和策略能幫助你在開發過程中消除效能瓶頸。你將會了解如何提升各方面的效能，包括程式碼的載入、執行、DOM互動、頁面生存週期等。

《JavaScript設計模式與開發實踐》：騰訊前端AlloyTeam團隊出品，綜合講述前端的設計模式，設計原則，程式設計技巧，程式碼重構等等。

《CSS世界》：CSS和javascript一樣，都是很容易上手，卻很難精通的。這本是前端知名博主張鑫旭的書籍，好評很多，講的很細緻。

《CSS揭秘》：CSS進階必備書籍，47個css技巧讓你在面對各種css問題的時候遊刃有餘。

《深入淺出Node.js》：針對Node的基本原理做了深入，能讓你瞭解底層的Node實現。

在這個前端技術橫飛的年代，如果你有網際網路工作的基礎，不建議學前端。前端在前幾年還很強勢，但是如果與同為五年工作經驗的java，薪資不是一個檔次，除非你能力非常強。

樓主問這個問題呢，首先要明白前端是什麼，前端能做什麼。前端即網站展示的部分，可以執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。隨著網際網路的發展，前端技術主要為html、css、js，新出的html5 和 css3規範，以及前端框架的應用；跨平臺響應式網頁設計能夠適應各種螢幕解析度，通常以iphone6尺寸設計，實現完美的動效設計，給使用者帶來極高的使用者體驗。說白了現在在網上看到的內容都可以算為前端範圍。

前端主要處理和使用者互動的部分，後臺主要操作資料，熟悉的增刪改查。後臺看著比較枯燥，在linux伺服器操作純命令列。前端呢可以在瀏覽器除錯，自己實現效果。前端相對來說入門比較容易，後端技術相對複雜，但是後端的發展比較廣，資料庫的設計，專案的架構等等，很多技術總監都是後端出身。但是前端也有很多機會，尤其現在提倡的大前端，pc + 移動端 + 混合開發 + nodejs 等，其實程式設計思想是相同的，會了 js ，基礎打牢固了，學習其他程式語言也可以很快上手。

如果想學習前端的話，不知道樓主是上學還是已經工作了。上學的話可以選擇計算機專業，但是大學不講前端，主要是c語言，java等，網頁設計是選修，但是可以憑藉自己的興趣成長，而且現在網上有很多教學影片，慕課網，b站等，都可以學習。重要的是堅持，因為自己學還是比較難的，重要的真喜歡。

如果沒有程式設計基礎，可以選擇去培訓機構。早些年的培訓機構還可以，教學質量挺高的，現在很多都講的一般，六個月一期課，都是抱著趕緊教完，開下一期（像達內，北大青鳥等都一般說實話）。選擇個好機構很重要，雖然不可能講太多東西，你的理解程度也有限制，但是他可以直接的帶你入門，學會怎麼開發，怎麼除錯。包裝下簡歷找份工作也是可以的，你的成長主要在開發中成長自己，多學，多問，多思考。你的理解力會慢慢成長。

推薦大家如果有能力能去大廠一定要去大廠，能遇到很多優秀的人，見識理解會有很大成長。即使再笨，跟優秀的人在一起耳濡目染也能有成長，工作流程，工作的分發，工作的彙報等等，都是在小公司學不到的。其實公司大都以業務為主，經驗大都是工作一點點總結的，也就是爬坑，學習還是要靠自己，每天抽出點時間給自己，一定會有進步的。

你好，設計就是透過視覺、動效等方面去傳達一個產品，根據使用者的喜好習慣去設計產品，設計是近乎於產品與使用者的連結點了，現在一般會用到的有PS、SKETCH、LANHU、AXURE等，LANHU有自動標註和一鍵切圖等，非常省時高效啦！

在過去，前端開發人員只要瞭解一些HTML、CSS或jQuery，就可以建立互動式網站。

而如今的開發，需要更廣泛且不斷變化的一系列技能，有各種工具、庫和框架亟待掌握，同時要不斷地投資個人教育。

最近幾年，ReactJS、VueJS和Svelte等新型軟體庫和框架相繼出現，它們利用JavaScript來推動主要的Web應用程式快速發展。

本文旨在為前端開發人員應該在2021年關注什麼提供一些指導，從而提高水平，不管你是剛入門程式設計的新手還是有一定經驗的人。

1. 程式碼編輯器/IDEs

與2019年一樣，微軟的VS Code將成為2021年大多數前端工程師的首選編輯器。

它幾乎具備跟IDE一樣的功能，例如程式碼補全和高亮，並且可透過擴充套件市場進行無限延伸。

尤其是它的市場讓VS Code脫穎而出。下面是作為前端開發人員的一些重要擴充套件內容：

· JavaScript (ES6) code snippets

· npm

· Prettier

· CSS Peek

· Vetur

· ESLint

· Live Sass Compiler

· Debugger for Chrome

· Live Server

· Beautify

這些是很酷的例子。VS Code還有更多有待於挖掘，如果你尚未使用它，建議去嘗試一下。

2.測試

未經過測試的程式碼不應產出。

儘管對個人專案不進行任何測試似乎更加方便，但在商業環境和企業環境下工作時必須進行測試。因此，對於任何開發人員而言，最好儘可能在開發工作中加入測試環節。

測試用例可以作如下區分：

單元測試

單獨測試單個元件或函式。

整合測試

測試元件之間的互動。

端間測試

在瀏覽器中測試功能完善的使用者流。

測試方法還有很多，例如手動測試和快照測試等。如果想升任到高階開發人員或者打算在具有一定開發標準的大型企業工作，就應該努力提高測試技能。

3.軟技能

軟技能的學習經常被忽視卻對開發人員極為重要。

儘管它有助於理解技術層面的內容，但是知道如何進行團隊溝通也同樣重要。如果決心從事技術方面的職業或者打算升任，應該培養以下的軟技能：

· 共情

· 溝通

· 團隊合作

· 平易近人和樂於助人

· 耐心

· 開放的心態

· 解決問題的能力

· 責任感

· 創造力

· 時間管理

永遠記住：高階開發人員最重要的成果是培養更多的高階開發人員。

4. JAMstack

術語JAMstack 代表著JavaScript（在客戶端上執行—例如React、Vue或VanillaJS）、API（伺服器端處理是抽象的，其透過JavaScript訪問HTTPS）、markup（在部署時預構建的模組化標記）三者。

這是構建具有更好效能的網站和apps的一種方式—降低擴充套件成本、提高安全性和更好的開發體驗。

儘管這些術語本身不是新鮮事物，但它們都有一個共同點—即不依賴網站伺服器。因此，如果單片應用程式依賴於Ruby或Node.js後端，或者依賴由伺服器端CMS（例如Drupal 或WordPress）構建的網站，那麼它便不是使用JAMstack構建而成。

如果想使用JAMstack，以下有一些最佳實踐：

整個專案由CDN提供服務

由於不需要任何伺服器，整個專案可透過CDN獲取服務，解鎖無與倫比的速度和效能。

一切都存在於Git

每個人應該能夠從Git repo上覆制整個專案，而無需資料庫或者複雜的設定。

自動構建

你可以完美地進行自動構建，因為所有的標記是預先構建的—例如，webhooks或雲服務的使用。

原子化部署

為了避免在大型專案中重新部署成百上千的檔案而造成的不一致狀態，原子化部署等到所有檔案上傳後，才進行更改。

即時快取失效

當網站執行時，必須確保CDN能夠處理即時快取清除，以使更改可見。

著名的Netlify、Zeit等主機都支援JAMstack應用，大公司使用它們為使用者提供出色的體驗。

作為一名前端開發人員，一定有在2021年想要弄清楚的事。如果想要進一步瞭解JAMstacks，下面是一些不錯的資源：

· JAMstack

· JAMstack WTF

· “New to JAMstack? Everything You Need to Know to Get Started”

5.靜態站點生成器

靜態站點生成器結合了伺服器端的渲染功能（對SEO和初始載入時間都非常重要）和單頁應用程式。

如今，許多專案即使不需要伺服器端渲染，也會選擇SSG，因為Next 或 Nuxt這類解決方案具有便捷的功能，例如Markdown編輯器支援、模組捆綁和整合測試執行器等。

如果你是認真對待前端開發，應該仔細研究以下專案，並嘗試從中獲得一些實踐經驗：

· Next (基於React)

· Nuxt (基於Vue)

· Gatsby (基於React)

· Gridsome (基於Vue)

· Next.js

· Nuxt.js

· Gatsby

· Gridsome

6. 漸進式網路應用（PWA）

漸進式網路應用(PWA)會成為2021年的熱點。越來越多的公司選擇PWAs取代本機應用程式，為使用者提供豐富的移動體驗。

PWAs具有可靠（即時下載，無需網路連線）、快速（流暢的動畫，對使用者互動的快速響應）和高度參與感（本機應用程式感受，出色的使用者體驗）的特點。

它們利用服務人員提供離線功能，以及利用web-app清單檔案提供全屏體驗。

構建漸進式網路應用的理由如下：

· 可以從瀏覽器新增到使用者的主螢幕

· 即使沒有網路連線也能正常工作

· 支援網路推送通知，從而提高使用者參與度

· 使用谷歌的Lighthouse功能

如果想了解關於PWAs的更多資訊，可以隨時查閱這些附加資源：

· Progressive Web Apps

· “Your First Progressive Web App”

7.框架

2021年，我們可能會看到Facebook的ReactJS和社群驅動的VueJS之間的對決。目前，React在GitHub上擁有140,000星（使用者評價），而Vue擁有更多，達到了153,000星，而Angular只有53,000星。

2019年React（藍線）、Vue（紅線）、Angular(黃線)和Svelte（綠線）的搜尋量支援這一假設——Vue的搜尋量稍微高於React。相比之下，Angular的搜尋量無法趕超，而Svelte在這一比較中完全不佔一席之地。

因此在2021年，使用JavaScript框架或想要使用它的前端開發人員應該將React 和 Vue作為首選。如果正在進行大型的企業專案，Angular是一個有效選擇。

如果想要進一步瞭解這些框架，以下的資源非常好：

· React

· Vue.js

8. GraphQL

GraphQL是當前最熱門的話題之一，也絕對是在2021年需要學習或提高的技能。

儘管REST透過提供無狀態伺服器之類的不錯概念，一直被理所當然地認為是設計web APIs的標準。但談及跟上不斷變化的客戶訪問時，RESTfulAPIs逐漸被認為不是那麼靈活。

GraphQL由Facebook開發，旨在解決開發人員使用Restful APIs時面臨的問題。

開發人員透過從REST APIsREST APIs中提取基於特定目的建立的多個端點—例如/users/<id>端點或者/tours/<id>/location端點，來收集資料。

GraphQL的使用將以不同的方式展開。開發人員會根據他們的資料請求向GraphQL伺服器傳送查詢。然後伺服器將返回帶有全部相應資料的JSON物件。

使用GraphQL的另一優勢是它使用強型別系統。GraphQL上所有內容都是透過GraphQL模式定義語言（SDL）來進行模式定義的。模式一旦建立，前端和後端開發人員就可以彼此獨立工作，因為他們都知道定義的資料結構。

9. 整潔程式碼

能夠編寫整潔程式碼是一項重要的技能而且許多企業對它的需求很高。如果想從開發員的位置升到高階開發員，應該認真學習整潔程式碼的概念。

整潔程式碼應該是優雅且易於閱讀的。應該注意的是它應重點突出。所有的測試均以整潔程式碼執行。它們不包含重複項，也應該儘量減少諸如類、方法和函式等實體的使用。

整潔程式碼開發人員應該進行如下操作：

· 為變數、類、方法和函式建立有意義的名稱

· 函式應該短小，其引數也儘可能地少。

· 完全不需要註釋—程式碼應該說明一切

10. Git

毫無疑問，Git是如今網站開發中版本控制的標準。對於每位前端開發人員而言，瞭解Git的基本概念和工作流程是非常重要的，這有助於保證他們在各種規模團隊中的工作效率。

下面是應該瞭解的一些流行Git命令：

· git config

· git init

· git clone

· git status

· git add

· git commit

· git push

· git pull

· git branch

瞭解這些命令可以提高效率，這總是不錯的。但前端工程師還應該學習Git背後的基本概念。

對於零基礎的人而言，要怎麼學習web前端呢？

1、 前端頁面重構。主要內容為PC端網站佈局、Photoshop 工具及切圖、H5移動端網頁佈局、HTML5+CSS3新特性與互動。學習目標是完成PC端網站佈局，可實現響應式佈局，一套程式碼適配 PC 端、移動端、平板裝置等。

2、 前後端網頁互動。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及外掛使用、設計模式及外掛編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前後端互動、前端工程化與模組化應用以及PC 端全棧開發專案等。學習目標是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建專案及開發專案。

3、 Node.js + 前端框架。主要內容為Node.js 全面進階、Koa2+MongoDB搭建服務、Vue.js 框架、React.js 框架、小程式雲開發與小程式框架、原生APP與混合APP、資料視覺化與桌面應用等。學習目標是掌握桌面應用及視覺化大資料，實現複雜資料展示類專案，能夠獨立完成前後臺相關功能，勝任HTML5全棧開發工程師職位。

很多學習web前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功。