從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。
HTML5（語義元素，屬性，文檔類型等）
CSS基礎知識顏色，字體，位置，盒子模型等。
CSS Grid和Flexbox對齊內容或創建列。
CSS自定義屬性
響應式佈局
您的應用程序應該在所有類型的設備（例如智能手機，平板電腦，臺式機，iPad或任何其他屏幕尺寸的設備）上都可以查看和使用。因此，瞭解創建響應式設計或佈局非常重要。讓我們來看一些重要的主題。
瞭解如何設置視口
媒體查詢不同的屏幕尺寸。
流體寬度
雷姆單位
移動優先
前端必須語言：JavaScript
學習HTML和CSS之後，接下來需要學習的是Vanilla Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在服務器端語言（例如PHP，Python或http://ASP.net）中使用大量javascript，並且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題…
JavaScript基礎知識（變量，數據類型，函數，條件等）
DOM（文檔對象模型）
JSON（JavaScript對象表示法）
提取API（請求/響應/ Ajax）
如果您想轉向React，Vue，Angular或其他框架，現代JS（ES6）概念對於學習非常重要。
一些重要工具
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對其進行捆綁。
基本部署
此時，一旦你知道應該爲前端開發學習什麼工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在爲小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因爲它們具有光澤和新潮。你將使事情變得更加複雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
域註冊（Namecheap，Google等）
託管託管（InMotion，Hostgator，Bluehost等）
靜態主機（Netlify，Github頁面）
SSL證書。
FTP，SFTP（文件傳輸協議）非常適合小型應用程序。
SSH（安全外殼），用於高級應用程序。
CLI和Git。
到目前爲止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以爲個人和小型企業構建網站，也可以構建適合移動設備的佈局。您還可以使用到目前爲止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那麼學習一些前端框架（如React，Vue或Angular）將是很棒的。
前端框架
框架使您可以進行更高級的前端開發。框架爲您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對於協作更好，也有助於編寫簡潔的代碼。另外，瞭解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
React： React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將 Redux和 Context API與Hooks一起使用以進行狀態管理。
Vue： Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是爲視圖而構建的狀態管理器。
Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習 TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和 Services是可以學習此框架的良好狀態管理器。
更多文章推薦閱讀 【 學習企鵝圈：731771211 】 ：
2020年Web前端開發工程師市場怎麼樣？學會什麼技術才能拿到高薪