1，先確定自己的目標或者道路。
我們將討論許多技術、趨勢和工具，但我們不希望妳不知所措，所以妳需要先決定要成為壹名Web開發人員要做什麽，因為這將幫助妳選擇正確的工具。和學習技巧。成為壹名Web開發人員有很多原因。以下是壹些選擇因素:
妳想去公司做網頁開發，這是最常見的原因。
妳想以自由開發者的身份開創自己的事業或代理公司。
可以做其他公司的顧問。
妳可以創建自己的應用來賺錢。
編碼是妳的愛好。
從上述感興趣的領域或目標出發，可以選擇適合自己目標的合適工具和技術。如果妳的目標是成為前端開發人員，可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2.Web開發的基本工具和軟件。
電腦和操作系統:沒有電腦和操作系統，就寫不出代碼。學習Web開發，不需要什麽高端電腦(有就更好了)。您可以使用任何類型的中型筆記本電腦或臺式機。操作系統方面，可以使用適合自己的MacOS、Windows(最新版本)或者Linux。
文本編輯器/
IDE:毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，良好的擴展性，內置終端功能和大量的功能。在2019的StackOverFlow調查中，VSCode也是開發者的首選。也可以選擇壹些其他好的選擇，比如Sublime。
文本或原子。如果說IDE，那就是可視化。
Studio(#或C#)，Eclipse和Netbeans(Java)。是個不錯的選擇。
網頁瀏覽器:Chrome或Firefox是大多數開發者的首選。Chrome速度快，使用V8引擎(JavaScript引擎)。Firefox也有了很大的進步，壹些好的東西chrome瀏覽器沒有。兩種瀏覽器都有優秀的開發工具，可以排查Web開發中的問題。
終端:您將使用壹些系統命令在CLI中完成大量工作。您可以為您的Web開發項目使用默認或第三方終端。Bash，Zsh，Powershell，Git
Bash、iTerm和Hyper都是可用的選項。
設計(可選):不是每個人都需要學習。在公司裏，有專門的團隊制作圖像、logos或者草圖，但是如果妳是自由職業者，妳可能要學習Adobe。
XD，Photoshop，Sketch或者Figma。
3.從HTML和CSS開始。
HTML和CSS是Web開發的基本構件。不管妳的Web應用有多高級，也不管妳用的是什麽框架和後端語言，都必須使用HTML和CSS來構建前端應用。所以，這是Web開發首先要學的。
Html 5(語義元素、屬性、文檔類型等。)
CSS基礎知識顏色、字體、位置、盒子模型等。
CSSGrid和Flexbox對齊內容或創建列。
CSS自定義屬性
4.響應式布局
您的應用程序應該可以在所有類型的設備上查看和使用(如智能手機、平板電腦、臺式機、iPad或任何其他屏幕大小的設備)。因此，知道如何創建響應式設計或布局非常重要。讓我們來看看壹些重要的主題。
了解如何設置視口。
媒體詢問不同的屏幕尺寸。
流體寬度
雷姆單位
移動優先級
5.自定義可重用的CSS組件
與其依賴壹個大型的CSS框架(比如Bootstrap)，不如創建自己的模塊化可重用的CSS組件在項目中使用。如果您構建自己的自定義設計，則不需要導入完整的庫。您創建了壹個只需要特定UI的組件。最近，CSS的新趨勢也出現了有助於更有效地編寫CSS代碼的代碼。如果妳已經知道了CSS，那麽妳就不需要花很多精力去學習Saas。Saas是壹個CSS預處理器，可以給標準CSS增加更多的功能，使其效率更高。可以使用變量、嵌套和條件語句來減少CSS的重復，提高效率。您還可以為每個可重用組件創建壹個單獨的Saas文件。Sass真的很省時間，2020年絕對要學。
6.CSS框架
學習CSS框架沒有去年那麽熱門了，但是對於不擅長設計的開發者來說還是很有相關性或者很有用的。有許多流行的CSS框架可用，其中壹些如下。
Bootstrap是最流行的CSS框架。學習指南也有助於學習其他框架。
順風
CSS是另壹個流行的框架，和其他框架幾乎沒什麽區別。它是壹組實用程序類，所以妳可以創建自己的按鈕和其他看起來與其他按鈕不同的東西。它們也是高度可定制的。
具體化
布爾瑪
7.前端語言:JavaScript
學完HTML和CSS，接下來要學的就是香草。
Javascript .對於開發者來說，掌握javascript的基礎知識非常重要。妳會在服務器端語言(如PHP、Python或#)中用到很多javascript，如果妳想和React、Angular、NodeJS、Vue或其他任何javascript框架或庫壹起使用，妳非常需要學習這種語言。以下是壹些您應該在javascript中涉及的重要主題
JavaScript基礎知識(變量、數據類型、函數、條件等。)
文檔對象模型
JSON(JavaScript對象表示)
提取API(請求/響應/Ajax)
如果想轉React，Vue，Angular或者其他框架，現代JS(ES6)的概念對學習很重要。
8.壹些重要的工具
壹些工具將用於Web開發。這些工具將幫助妳調試、提高生產力、管理代碼、與其他開發者合作等等。讓我們來討論其中的壹些工具。
Git(版本控制)和Github是2020年妳壹定會學到的最流行的工具。Git在與其他開發人員合作和管理代碼方面非常有幫助。也可以選擇其他選項，比如GitLab，Bitbucket等。
了解如何使用瀏覽器開發工具。無論是chrome還是firefox，都要知道如何使用不同的標簽頁，比如元素標簽頁、javascript控制臺、請求和響應的web標簽頁、應用程序標簽頁等不同用途的標簽頁。
大多數IDE或文本編輯器都有添加擴展或插件的功能，這對提高生產力和構建Web應用非常有幫助。例如，視覺
Studio代碼中的VSCode擴展可以幫助下載擴展，例如與React壹起使用的實時服務器或實時saas編譯器。
Emmet是另壹個偉大的工具，它允許妳編寫非常快速的HTML和CSS，這有助於提高開發人員的生產力。
學習使用javascript包管理器，比如NPM和Yarn。如果妳使用的是Javascript框架或者庫(比如React)，這些包管理器會被大量使用，但是對於其他語言(比如Python或者Php)，妳會使用不同的包管理器。
如果要在前端安裝NPM包，必須使用Webpack或package。如果妳想創建自己的模塊，或者把壹個javascript文件拿到另壹個javascript文件中，不能只是默認使用瀏覽器來做這些，需要用Webpack或者package捆綁。
9.基本部署
至此，壹旦妳知道了前端開發應該學習哪些工具或技術，妳就需要知道如何在互聯網上部署前端網站。如果妳正在為小型企業構建壹些小型應用程序、登錄頁面或個人網站，妳不需要僅僅因為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和
ContextAPI與鉤子壹起用於狀態管理。
Vue:
Vue越來越流行，開發者更喜歡學習Vue。相比React和Angular，Vue最容易學。VueX是為視圖構建的狀態管理器。
Angular:這種框架通常用於大型組織。它的學習曲線相當陡峭。有角度的學習
TypeScript也很不錯。它允許您使用可選的靜態類型，並支持ES2015的功能。NGRX和服務是很好的狀態管理器，可以學習這個框架。
可選學習:
如果妳了解這三個框架中的壹個，妳也可以使用Svelte，壹個JavaScript編譯器，它可以讓妳生成純原始的JS代碼，並幫助妳輕松地構建壹個用戶界面。
了解服務器端渲染。NextJS(React)和NuxtJS(Vue)是允許妳在服務器上運行React和Vue的框架。兩者都有不錯的功能，比如更好的SEO、文件系統路由、自動代碼拆分、靜態導出、JS中的CSS等諸多功能。
靜態網站生成器:Gatsby(反應式)和Gridsome(Vue)
我們已經討論了所有最前端的開發工具和技術。現在我們來討論壹下成為後端開發者或者全棧開發者的語言和技術。
11，服務器端語言(選壹個)
您應該至少知道壹種服務器端語言。要在2020年選擇壹種語言，這裏有壹些選項。...
NodeJS(不是壹種語言，而是壹個運行時環境)
Python(非常適合初學者)
Java(適合大型組織)
Php(適合自由職業者)
紅寶石(2020年不到兩極)
C#
去
註意:無論妳喜歡學習哪種服務器端語言，都要確保妳知道使用該語言的數據結構和算法。數據結構和算法將幫助您向用戶呈現數據，並幫助您優化Web應用程序中的代碼。我們特別建議您關註數組和字符串(最重要的)。您將使用這兩種方法。
12，服務器端框架(選壹項)
壹旦妳學會了自己選擇的服務器端語言，妳就可以使用其中壹種語言框架。妳可以選擇下面給出的選項之壹。...
Node.js_Express，Koa，Adonis，Feather.js，Nest.js
姜戈，弗拉斯克，
Java:SpringMVC，Grails
PHP:Laravel，Symfony，Codeignitor，Slim
Ruby: RubyonRails on Sinatra
C#:ASP。NETMVC
去:狂歡
13，數據庫(選壹項)
大多數Web應用程序都需要壹個存儲數據的地方。在某些情況下，某些數據庫可以使用某些技術或語言。例如，在Mern stack中，m代表MongoDB，在LAMP stack中，m代表MySQL，但這完全取決於您希望為您的應用程序選擇哪個數據庫。我們將在2020年討論壹些流行的數據庫。
關系數據庫:RDBMS仍然是最流行的數據庫。我最喜歡用PostgreSQL，MySQL，MSSQL。
NoSQL:MongoDB，RethinkDB，CouchDB
雲數據庫:Firebase，AzureCouldDB，AWS。
輕量級和緩存:Redis、SQLlite、NeDB
學習數據庫時，還會學習RDBMS的SQL(結構化查詢語言)、ORM(對象關系映射器)或ODM(對象數據映射器)。GraphQL
(可選)可以了解壹下流行的GraphQL。這是API的查詢語言。它有壹個類似於JSON的簡單語法，很容易實現。
14，CMS:內容管理
妳肯定應該了解內容管理系統，尤其是如果妳是壹個自由職業者。CMS用於向您的網站或應用程序添加內容。客戶可以更新他們自己的內容，這很好。
傳統CMS: WordPress (PHP)、Drupal(PHP)、Keystone(Javascript)、Enduro(Javascript)。
其他CMS:DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。
15，部署和開發運維
托管全棧或後端應用程序比只托管前端應用程序更復雜，尤其是在您有數據庫的情況下。確保您知道如何使用CLI進行部署。了解關於部署應用程序的以下內容。
在大多數公司中，有不同的團隊在開發運維。因此，了解DevOps是完全可選的。如果妳正在做自己的項目，妳可以了解到這壹點。
SSH(安全外殼)
Web服務器環境:NGINX、Apache
應用托管:Linode，Heroku，AWS，Azure，Now。
虛擬化:碼頭工人，流浪者
測試:單元、功能、集成等。
負載平衡、監控和安全性。
以上所有的技術工具，足以讓妳成為壹個前端、後端或者全棧的開發者。根據最終目標選擇合適的工具和技術。
以上就是邊肖今天為大家分享的關於成為壹名web前端開發工程師的學習指南的文章。希望這篇文章能對做web前端的朋友有所幫助。如果想了解更多的web前端，記得關註官網，北大青鳥web培訓。最後祝朋友們工作順利，成為壹名優秀的web前端開發工程師。
English | #/how-to-be-a-complete-guide/translation | web前端開發(ID: web _ qdkf)