首先來介紹下前端（Frontend）到底是什麼？前端就是我們肉眼所直觀看見的網頁是片面的，不全面的，不過大體意思基本一致。
閒話不多說來乾貨：前端一般分爲前端設計和前端開發，前端設計一般可以理解爲網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
如上圖所示：這是百度的搜索頁面，該頁面可以大致分爲五部分分別由：第一部分是有1組成；第二部分由2，3，4組成；第三部分的元素是5（其中包括6，7，8，9元素）；10構成第4部分；11則是第五部分。
分析完網頁的組成部分我們來說說他的核心技術，也就是前面所說的HTML和CSS以及JavaScript/ajax。
HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一，使分散的Internet資源連接爲一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不同位置的信息資源用隨機方式進行連接，爲人們查找，檢索信息提供方便。
而CSS和JavaScript以及ajax，則是爲了在網頁的效果上添加更強的視覺衝擊感，可以讓網頁變得更加的豐富多彩。
上圖就是程序員眼中的百度
初學者學習一門新技術往往不知道如何開始，從哪開始，終點是啥。爲啥有人月薪 10k，有人卻 40k，就看你的技術能不能提高生產率，創造更多價值。學習前端也是這樣，要系統全面，前期一定要有刨根問底的精神，遇到問題要究其原因，直到解決爲止。下面我把前端需要掌握的技術點做一個總結。
1、首先確定你的目標或道路
我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成爲一名Web開發人員要做什麼，因爲這將幫助你選擇合適的工具。和學習技術。
成爲Web開發人員的原因有很多，下面列出了一些選擇因素：
你想作爲一名Web開發人員在一家公司工作，這是最普遍的原因。
你想以自由開發人員的身份來開始自己的業務或代理。
你可以成爲其他公司的顧問。
你可以創建自己的應用來賺錢。
編碼是你的業餘愛好。
從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成爲一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2、Web開發的基本工具和軟件
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機（如果你擁有的話，那麼更好……）。你可以使用任何類型的中型筆記本電腦或臺式機。對於操作系統，可以使用適合你的MacOS，Windows（最新版本）或Linux。
文本編輯器/ IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime Text或Atom。如果我們談論IDE，那麼是Visual Studio（ASP.net或C＃），Eclipse和Netbeans（Java）。是不錯的選擇。
Web瀏覽器：大多數開發人員的首選是Chrome或Firefox。Chrome速度很快，並且使用V8引擎（JavaScript引擎）。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具，可以對Web開發中的問題進行故障排除。
終端：您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用於您的Web開發項目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper這些都是可以使用的選項。
設計（可選）：並不是每個人都需要學習。在公司中，有專門的團隊來製作圖像，徽標或草圖，但是如果您是自由職業者，則可能必須學習Adobe XD，Photoshop，Sketch或Figma。
3、從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。
HTML5（語義元素，屬性，文檔類型等）
CSS基礎知識顏色，字體，位置，盒子模型等。
CSS Grid和Flexbox對齊內容或創建列。
CSS自定義屬性
4、響應式佈局
您的應用程序應該在所有類型的設備（例如智能手機，平板電腦，臺式機，iPad或任何其他屏幕尺寸的設備）上都可以查看和使用。因此，瞭解創建響應式設計或佈局非常重要。讓我們來看一些重要的主題。
瞭解如何設置視口
媒體查詢不同的屏幕尺寸。
流體寬度
雷姆單位
移動優先
5、自定義可重用CSS組件
與其依賴大型的CSS框架（如Bootstrap），不如創建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定製設計，則無需導入完整的庫。您創建只需要特定UI的組件。
新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經瞭解CSS，那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可爲標準CSS添加更多功能並使其更加高效。
你可以使用變量，嵌套，條件語句來減少CSS的重複並提高其效率。你還可以爲每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間，所以你絕對應該在2020年學習它。
6、CSS框架
學習CSS框架的普及程度不如去年，但對於不擅長設計的開發人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下。
Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其他框架。
Tailwind CSS是其他正在流行的框架，與其他框架幾乎沒有什麼不同。它是一組實用程序類，因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定製的。
物化
布爾瑪
7、前端必須語言：JavaScript
學習HTML和CSS之後，接下來需要學習的是Vanilla Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在服務器端語言（例如PHP，Python或ASP.net）中使用大量javascript，並且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題…
JavaScript基礎知識（變量，數據類型，函數，條件等）
DOM（文檔對象模型）
JSON（JavaScript對象表示法）
提取API（請求/響應/ Ajax）
如果您想轉向React，Vue，Angular或其他框架，現代JS（ES6）概念對於學習非常重要。
8、一些重要工具
Web開發中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。
Git（版本控制）和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。
瞭解如何使用瀏覽器開發工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制檯，用於請求和響應的網絡選項卡，應用程序選項卡以及其他用於不同目的的選項卡。
大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，Visual Studio代碼中的VSCode擴展可幫助下載擴展，例如實時服務器或實時saas編譯器以與React一起使用。
Emmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助於提高開發人員的生產力。
學習使用javascript軟件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫（例如React），那麼這些軟件包管理器將使用很多，但是對於其他語言（例如Python或Php），您將使用不同的軟件包管理器。
如果要在前端安裝NPM軟件包，則必須使用Webpack或Parcel。如果要創建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執行此操作，因此需要Webpack或Parcel對其進行捆綁。
9、基本部署
此時，一旦你知道應該爲前端開發學習什麼工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在爲小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因爲它們具有光澤和新潮。你將使事情變得更加複雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
域註冊（Namecheap，Google等）
託管託管（InMotion，Hostgator，Bluehost等）
靜態主機（Netlify，Github頁面）
SSL證書。
FTP，SFTP（文件傳輸協議）非常適合小型應用程序。
SSH（安全外殼），用於高級應用程序。
CLI和Git。
到目前爲止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以爲個人和小型企業構建網站，也可以構建適合移動設備的佈局。您還可以使用到目前爲止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那麼學習一些前端框架（如React，Vue或Angular）將是很棒的。
10、前端框架和狀態管理
框架使您可以進行更高級的前端開發。框架爲您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對於協作更好，也有助於編寫簡潔的代碼。另外，瞭解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
React： React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將 Redux和 Context API與Hooks一起使用以進行狀態管理。
Vue： Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是爲視圖而構建的狀態管理器。
Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習 TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和 Services是可以學習此框架的良好狀態管理器。
可選學習：
如果您具有這三個框架之一的知識，那麼您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純淨的原始JS代碼並幫助您輕鬆構建用戶界面。
瞭解服務器端渲染。NextJS（React）和NuxtJS（Vue）是允許您在服務器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其他功能。
靜態網站生成器：Gatsby（反應式）和Gridsome（Vue）
我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成爲後端開發人員或全棧開發人員的語言和技術。
11、服務器端語言（選擇一種）
您應該至少了解一種服務器端語言。要在2020年選擇一種語言，下面提供了一些選項…
NodeJS（不是語言，而是運行時環境）
Python（非常適合初學者）
Java（適合大型組織）
Php（適合自由職業）
Ruby（2020年少兩極）
C＃
Go
注意：無論你喜歡學習哪種服務器端語言，都要確保你瞭解使用該語言的數據結構和算法。數據結構和算法將幫助您爲用戶呈現數據，並將幫助您優化Web應用程序中的代碼。我們特別建議您專注於使用數組和字符串（最重要）。你將同時使用這兩種方法。
12、服務器端框架（選擇一項）
一旦學習了自己選擇的一種服務器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一…
Node.js – Express，Koa，Adonis，Feather.js，Nest.js
Python：Django，Flask，
Java：Spring MVC，Grails
PHP：Laravel，Symfony，Codeignitor，Slim
Ruby：Sinatra上的Ruby on Rails
C＃：ASP.NET MVC
Go： Revel
13、數據庫（選擇一項）
大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些數據庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要爲應用程序選擇哪個數據庫。我們將討論2020年一些流行的數據庫。
關係數據庫：RDBMS仍然是最受歡迎的數據庫。最喜歡使用PostgreSQL，MySQL，MS SQL。
NoSQL：MongoDB，RethinkDB，CouchDB
雲數據庫：Firebase，Azure Could DB，AWS
輕量級和緩存：Redis，SQLlite，NeDB
在學習數據庫時，您還將學習RDBMS，ORM（對象關係映射器）或ODM（對象數據映射器）的SQL（結構化查詢語言）。
GraphQL ：（可選）您可以瞭解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。
14、CMS：內容管理
您絕對應該瞭解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。
傳統CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）
其他CMS ：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
託管全棧應用程序或後端應用程序比僅前端應用程序要複雜一些，尤其是當您擁有數據庫時。確保您知道如何使用CLI進行部署。瞭解有關用於部署應用程序的以下內容。
在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以瞭解到，如果您正在從事自己的項目。
SSH（安全外殼）
Web服務器環境：NGINX，Apache
應用程序託管：Linode，Heroku，AWS，Azure，Now。
虛擬化：Docker，Vagrant
測試：單元，功能，集成等
負載平衡，監視，安全性。
以上所有技術工具都足以使你成爲前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（網頁製作，網站開發，web開發，從0基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰【視頻＋工具＋系統路線圖】全棧工程師學習路線以及規劃都有整理，分享給小夥伴）點：學習前端，我們是認真的