今天小編要跟大家分享的文章是關于Web前端工程師的入門指南-教你如何成為一名web前端開發(fā)工程師。經過如此多的試驗和測試，而不是說你從頭開始創(chuàng)建了所有內容，接著，你在網頁上創(chuàng)建了第一個登錄表單時，你感覺如何?經過了多次更改后，將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時，你感覺如何？大多數Web開發(fā)人員都經歷了上述所有階段，最初可能會對其中某些感到沮喪，但是當他們看到自己的網站正在運行并且人們在世界各地使用它時，總體感覺確實令人興奮和驚奇。Web開發(fā)人員負責許多任務，從收集需求到設計網站，處理網站的后端部分，并使其成功地為用戶服務。每年，行業(yè)中都會涌現(xiàn)出新技術和工具，以提高開發(fā)人員的工作效率，并為用戶提供更好的網站。對于他們來說，保持在Web開發(fā)游戲之上的挑戰(zhàn)變得越來越大。今天，我們將討論要在2020年成為Web開發(fā)人員的完整地圖。這將是針對所有開發(fā)人員(前端，后端和全棧)的實用指南。1、首先確定你的目標或道路我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發(fā)人員要做什么，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發(fā)人員的原因有很多，下面列出了一些選擇因素：·你想作為一名Web開發(fā)人員在一家公司工作，這是最普遍的原因?！つ阆胍宰杂砷_發(fā)人員的身份來開始自己的業(yè)務或代理?！つ憧梢猿蔀槠渌镜念檰枴！つ憧梢詣?chuàng)建自己的應用來賺錢?！ぞ幋a是你的業(yè)余愛好。從上述感興趣或目標的領域，你可以選擇適用于你的目標的正確工具和技術。如果你的目標是成為一名前端開發(fā)人員，則可以選擇前端開發(fā)的工具和技術。后端和全棧開發(fā)也是如此。2、Web開發(fā)的基本工具和軟件·計算機和操作系統(tǒng)：如果沒有計算機和操作系統(tǒng)，則無法編寫代碼。要學習Web開發(fā)，你不需要任何高端計算機(如果你擁有的話，那么更好)。你可以使用任何類型的中型筆記本電腦或臺式機。對于操作系統(tǒng)，可以使用適合你的MacOS，Windows(最新版本)或Linux?！の谋揪庉嬈?IDE：毫無疑問，VSCode適用于大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發(fā)人員的首選。你還可以選擇其他一些不錯的選擇，例如SublimeText或Atom。如果我們談論IDE，那么是VisualStudio(#或C#)，Eclipse和Netbeans(Java)。是不錯的選擇。·Web瀏覽器：大多數開發(fā)人員的首選是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發(fā)工具，可以對Web開發(fā)中的問題進行故障排除。·終端：您將使用一些系統(tǒng)命令來使用CLI進行很多工作。您可以將默認或第三方終端用于您的Web開發(fā)項目。Bash，Zsh，Powershell，GitBash，iTerm，Hyper這些都是可以使用的選項?！ぴO計(可選)：并不是每個人都需要學習。在公司中，有專門的團隊來制作圖像，徽標或草圖，但是如果您是自由職業(yè)者，則可能必須學習AdobeXD，Photoshop，Sketch或Figma。3、從HTML和CSS開始HTML和CSS是Web開發(fā)的基本構建塊。無論您的Web應用程序有多先進，或者使用什么框架和后端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發(fā)中要學習的第一件事?！TML5(語義元素，屬性，文檔類型等)·CSS基礎知識顏色，字體，位置，盒子模型等?！SSGrid和Flexbox對齊內容或創(chuàng)建列?！SS自定義屬性4、響應式布局您的應用程序應該在所有類型的設備(例如智能手機，平板電腦，臺式機，iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此，了解創(chuàng)建響應式設計或布局非常重要。讓我們來看一些重要的主題?！ち私馊绾卧O置視口·媒體查詢不同的屏幕尺寸?！ち黧w寬度·雷姆單位·移動優(yōu)先5、自定義可重用CSS組件與其依賴大型的CSS框架(如Bootstrap)，不如創(chuàng)建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定制設計，則無需導入完整的庫。您創(chuàng)建只需要特定UI的組件。的新趨勢最近還出現(xiàn)了有助于更有效地編寫CSS代碼的代碼。如果你已經了解CSS，那么您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可為標準CSS添加更多功能并使其更加高效。你可以使用變量，嵌套，條件語句來減少CSS的重復并提高其效率。你還可以為每個可重用組件創(chuàng)建單獨的Saas文件。Sass確實節(jié)省了很多時間，所以你絕對應該在2020年學習它。6、CSS框架學習CSS框架的普及程度不如去年，但對于不擅長設計的開發(fā)人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下?！ootstrap是最流行的CSS框架。學習引導程序也有助于學習其他框架?！ailwindCSS是其他正在流行的框架，與其他框架幾乎沒有什么不同。它是一組實用程序類，因此您可以創(chuàng)建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定制的。·物化·布爾瑪7、前端必須語言：JavaScript學習HTML和CSS之后，接下來需要學習的是VanillaJavascript。對開發(fā)人員來說，掌握javascript基本知識非常重要。您將在服務器端語言(例如PHP，Python或#)中使用大量javascript，并且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題·JavaScript基礎知識(變量，數據類型，函數，條件等)·DOM(文檔對象模型)·JSON(JavaScript對象表示法)·提取API(請求/響應/Ajax)·如果您想轉向React，Vue，Angular或其他框架，現(xiàn)代JS(ES6)概念對于學習非常重要。8、一些重要工具Web開發(fā)中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發(fā)人員合作以及類似的東西。讓我們討論其中一些工具。·Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發(fā)人員協(xié)作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。·了解如何使用瀏覽器開發(fā)工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制臺，用于請求和響應的網絡選項卡，應用程序選項卡以及其他用于不同目的的選項卡。·大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，VisualStudio代碼中的VSCode擴展可幫助下載擴展，例如實時服務器或實時saas編譯器以與React一起使用?！mmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助于提高開發(fā)人員的生產力?！W習使用javascript軟件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React)，那么這些軟件包管理器將使用很多，但是對于其他語言(例如Python或Php)，您將使用不同的軟件包管理器?！と绻谇岸税惭bNPM軟件包，則必須使用Webpack或Parcel。如果要創(chuàng)建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執(zhí)行此操作，因此需要Webpack或Parcel對其進行捆綁。9、基本部署此時，一旦你知道應該為前端開發(fā)學習什么工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在為小型企業(yè)構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟?！び蜃?Namecheap，Google等)·托管托管(InMotion，Hostgator，Bluehost等)·靜態(tài)主機(Netlify，Github頁面)·SSL證書?！TP，SFTP(文件傳輸協(xié)議)非常適合小型應用程序?！SH(安全外殼)，用于高級應用程序?！LI和Git。到目前為止，我們討論的任何工具，技術趨勢或步驟都是前端開發(fā)的一部分。您尚不知道該框架，但可以為個人和小型企業(yè)構建網站，也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那么學習一些前端框架(如React，Vue或Angular)將是很棒的。10、前端框架和狀態(tài)管理框架使您可以進行更高級的前端開發(fā)?？蚣転槟峁┝嗽S多優(yōu)勢，例如可重用的組件，更有條理的UI或頁面交互。這對于協(xié)作更好，也有助于編寫簡潔的代碼。另外，了解狀態(tài)管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態(tài)管理器?！eact：React庫是最流行的Web開發(fā)學習方法，與其他框架和庫相比，它相當容易。React開發(fā)人員還有很多工作要做。您可以將Redux和ContextAPI與Hooks一起使用以進行狀態(tài)管理。·Vue：Vue也越來越受歡迎，開發(fā)人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是為視圖而構建的狀態(tài)管理器?！ngular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習TypeScript也很好。它允許您使用可選的靜態(tài)類型并支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態(tài)管理器?？蛇x學習：·如果您具有這三個框架之一的知識，那么您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純凈的原始JS代碼并幫助您輕松構建用戶界面。·了解服務器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在服務器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統(tǒng)路由，自動代碼拆分，靜態(tài)導出，JS中的CSS和許多其他功能?！れo態(tài)網站生成器：Gatsby(反應式)和Gridsome(Vue)我們已經討論了所有大多數前端開發(fā)工具和技術?，F(xiàn)在讓我們討論成為后端開發(fā)人員或全棧開發(fā)人員的語言和技術。11、服務器端語言(選擇一種)您應該至少了解一種服務器端語言。要在2020年選擇一種語言，下面提供了一些選項...·NodeJS(不是語言，而是運行時環(huán)境)·Python(非常適合初學者)·Java(適合大型組織)·Php(適合自由職業(yè))·Ruby(2020年少兩極)·C#·Go注意：無論你喜歡學習哪種服務器端語言，都要確保你了解使用該語言的數據結構和算法。數據結構和算法將幫助您為用戶呈現(xiàn)數據，并將幫助您優(yōu)化Web應用程序中的代碼。我們特別建議您專注于使用數組和字符串(最重要)。你將同時使用這兩種方法。12、服務器端框架(選擇一項)一旦學習了自己選擇的一種服務器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...·，Koa，Adonis，，·Python：Django，F(xiàn)lask，·Java：SpringMVC，Grails·PHP：Laravel，Symfony，Codeignitor，Slim·Ruby：Sinatra上的RubyonRails·C#：·Go：Revel13、數據庫(選擇一項)大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些數據庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決于您要為應用程序選擇哪個數據庫。我們將討論2020年一些流行的數據庫。·關系數據庫：RDBMS仍然是最受歡迎的數據庫。最喜歡使用PostgreSQL，MySQL，MSSQL?！oSQL：MongoDB，RethinkDB，CouchDB·云數據庫：Firebase，AzureCouldDB，AWS·輕量級和緩存：Redis，SQLlite，NeDB在學習數據庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL：(可選)您可以了解現(xiàn)在流行的GraphQL。這是API的查詢語言。它具有類似于JSON的簡單語法，并且相當容易實現(xiàn)。14、CMS：內容管理您絕對應該了解內容管理系統(tǒng)，尤其是如果您是自由職業(yè)者。CMS用于將內容添加到您的網站或應用程序?？蛻裟軌蚋伦约旱膬热莘浅：谩！鹘y(tǒng)CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)·其他CMS：DEDECMS，帝國CMS，PHPcms，，Strati。15、部署和DevOps托管全棧應用程序或后端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有數據庫時。確保您知道如何使用CLI進行部署。了解有關用于部署應用程序的以下內容。在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目?！SH(安全外殼)·Web服務器環(huán)境：NGINX，Apache·應用程序托管：Linode，Heroku，AWS，Azure，Now?！ぬ摂M化：Docker，Vagrant·測試：單元，功能，集成等·負載平衡，監(jiān)視，安全性。以上所有技術工具都足以使您成為前端，后端或全棧開發(fā)人員。根據最終目標選擇正確的工具和技術。以上就是小編今天為大家分享的關于Web前端工程師的入門指南-教你如何成為一名web前端開發(fā)工程師的文章，希望本篇文章能夠對正在從事web前端工作的小伙伴和正在學習web前端知識的伙伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的web前端開發(fā)工程師！英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(fā)(ID：web_qdkf)