web前端開發命令

『壹』 web前端需要掌握的哪些知識

一個合格的web前端需要掌握哪些技術？
最基礎的自然是JavaScript，HTML和css這三種語言。

首先了解下它們到底是什麼。

HTML是用戶看到的網頁的骨架，比如你會發現當前頁面分為左中右三個部分，其中還填充了不同的文字和圖片；每個子部分還會繼續細分，比如當前頁面的中間部分下方有輸入框等等。

CSS是網頁展示的細節控制，比如你會發現有的文字是紅底白色，有的子部分佔了頁面的二分之一寬，有的只佔六分之一，有些部分需要用戶進行某些操作（如點擊，滑動）才會出現等等，這些就是有CSS來控制。

JavaScript是負責捕捉用戶在瀏覽器上的操作，並與後端伺服器進行數據交換的腳本語言。當用戶在前端進行點擊，輸入等操作的時候，會觸動綁定了該動作的JavaScript腳本，然後JavaScript收集數據，調用後端的api介面，再將後端返回的數據交給HTML和CSS渲染出來。

一個網頁的HTML代碼和CSS代碼是可以直接在瀏覽器中查看的，你可以直接按F12，就能看到下圖右側的模塊，左右側紅框就是代碼與實際頁面的對應關系。因此如果你看到某個網站的布局很不錯，不妨點擊F12，進行學習。

前端框架
然而，實際應用中，已經很少有正規的項目組直接用上述三種語言進行web 前端開發了，而是使用很多封裝了這三種語言的框架，比如

Vue.js

，angular，react native等等。它們是來自谷歌和Facebook的大神項目組，基於自己的經驗，封裝了原生前端語言，實現了更多更復雜更酷炫的功能。因此，可以說，學會使用這些框架，能達到事半功倍的效果。

比如用了vue，它是自底向上增量開發的設計，其核心只關心圖層，而且還可以與其他庫或已存項目融合，學習門檻極其友好；另一方面，vue可以驅動單文件組件和vue生態系統支持的庫開發的復雜單頁應用。有了這個生態系統，可以說，vue是處在一個不斷壯大，不斷完善的欣欣向榮的狀態。

網路通信協議
由於前後端分離的趨勢，前端還需要了解很多網路通信協議的知識，這里不局限於http協議，因為據我的經驗，有時候我們還會用到websocket等協議。因此，前端需要簡單了解不同協議的特點以及使用方式，但是好消息是不用像學習計算機網路課程一樣對每種協議的原理都了解的特別透徹，只要學會如何用前端語言發送這種協議的請求就夠了。

『貳』 成為優秀的Web前端開發人員的學習指南

今天小編要跟大家分享的文章是關於成為優秀的web前端開發人員的學習指南。經過如此多的試驗和測試，而不是說你從頭開始創建了所有內容，接著，你在網頁上創建了第一個登錄表單時，你感覺如何?經過了多次更改後，將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時，你感覺如何?

大多數Web開發人員都經歷了上述所有階段，最初可能會對其中某些感到沮喪，但是當他們看到自己的網站正在運行並且人們在世界各地使用它時，總體感覺確實令人興奮和驚奇。Web開發人員負責許多任務，從收集需求到設計網站，處理網站的後端部分，並使其成功地為用戶服務。每年，行業中都會涌現出新技術和工具，以提高開發人員的工作效率，並為用戶提供更好的網站。對於他們來說，保持在Web開發游戲之上的挑戰變得越來越大。今天，我們將討論要在2020年成為Web開發人員的完整地圖。


1、首先確定你的目標或道路


我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什麼，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：


·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。


·你想以自由開發人員的身份來開始自己的業務或代理。


·你可以成為其他公司的顧問。


·你可以創建自己的應用來賺錢。


·編碼是你的業余愛好。


從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。


2、Web開發的基本工具和軟體


·
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。


·文本編輯器/
IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime
Text或Atom。如果我們談論IDE，那麼是Visual
Studio(#或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基礎知識顏色，字體，位置，盒子模型等。


·CSSGrid和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或#)中使用大量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開發人員還有很多工作要做。您可以將Rex和
ContextAPI與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：SpringMVC，Grails


·PHP：Laravel，Symfony，Codeignitor，Slim


·Ruby：Sinatra上的RubyonRails


·C#：ASP.NETMVC


·Go：Revel


13、資料庫(選擇一項)


大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些資料庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。


·關系資料庫：RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL，MySQL，MSSQL。


·NoSQL：MongoDB，RethinkDB，CouchDB


·雲資料庫：Firebase，AzureCouldDB，AWS


·輕量級和緩存：Redis，SQLlite，NeDB


在學習資料庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。


14、CMS：內容管理


您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。


·
傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)


·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。


15、部署和DevOps


託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。


在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。


·SSH(安全外殼)


·Web伺服器環境：NGINX，Apache


·應用程序託管：Linode，Heroku，AWS，Azure，Now。


·虛擬化：Docker，Vagrant


·測試：單元，功能，集成等


·負載平衡，監視，安全性。


所有技術工具都足以使您成為前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。


以上就是小編今天為大家分享的關於成為優秀的web前端開發人員的學習指南的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。


英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(ID：web_qdkf)

『叄』 成為Web前端開發工程師的入門指南

今天小編要跟大家分享的文章是關於成為Web前端開發工程師的入門指南。經過如此多的試驗和測試，而不是說你從頭開始創建了所有內容，接著，你在網頁上創建了第一個登錄表單時，你感覺如何?經過了多次更改後，將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時，你感覺如何？

大多數Web開發人員都經歷了上述所有階段，最初可能會對其中某些感到沮喪，但是當他們看到自己的網站正在運行並且人們在世界各地使用它時，總體感覺確實令人興奮和驚奇。Web開發人員負責許多任務，從收集需求到設計網站，處理網站的後端部分，並使其成功地為用戶服務。每年，行業中都會涌現出新技術和工具，以提高開發人員的工作效率，並為用戶提供更好的網站。對於他們來說，保持在Web開發游戲之上的挑戰變得越來越大。今天，我們將討論要在2020年成為Web開發人員的完整地圖。這將是針對所有開發人員(前端，後端和全棧)的實用指南。


1、首先確定你的目標或道路


我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什麼，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：


·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。


·你想以自由開發人員的身份來開始自己的業務或代理。


·你可以成為其他公司的顧問。


·你可以創建自己的應用來賺錢。


·編碼是你的業余愛好。


從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。


2、Web開發的基本工具和軟體


·
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。


·文本編輯器/
IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime
Text或Atom。如果我們談論IDE，那麼是Visual
Studio(#或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基礎知識顏色，字體，位置，盒子模型等。


·CSSGrid和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或#)中使用大量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開發人員還有很多工作要做。您可以將Rex和
ContextAPI與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：SpringMVC，Grails


·PHP：Laravel，Symfony，Codeignitor，Slim


·Ruby：Sinatra上的RubyonRails


·C#：ASP.NETMVC


·Go：Revel


13、資料庫(選擇一項)


大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些資料庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。


·關系資料庫：RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL，MySQL，MSSQL。


·NoSQL：MongoDB，RethinkDB，CouchDB


·雲資料庫：Firebase，AzureCouldDB，AWS


·輕量級和緩存：Redis，SQLlite，NeDB


在學習資料庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。


14、CMS：內容管理


您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。


·
傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)


·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。


15、部署和DevOps


託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。


在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。


·SSH(安全外殼)


·Web伺服器環境：NGINX，Apache


·應用程序託管：Linode，Heroku，AWS，Azure，Now。


·虛擬化：Docker，Vagrant


·測試：單元，功能，集成等


·負載平衡，監視，安全性。


以上所有技術工具都足以使您成為前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。


以上就是小編今天為大家分享的關於成為Web前端開發工程師的入門指南的文章，希望本篇文章能夠對想要從事Web前端開發工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。


英文|#/how-to-become-a-Web-developer-in-2020-a-complete-guide/翻譯|Web前端開發(ID：Web_qdkf)

『肆』 Web前端初學者要學習的前端開發技術有哪些

今天小編要跟大家分享的文章是關於Web前端初學者要學習的前端開發技術有哪些？Web前端要如何學？這是很多新手都會問的問題，究竟Web前端開發要學什麼內容？哪些才是高薪前端必須要掌握的核心技術呢？接下來就跟小編一起來了解一下吧！第一階段——HTML標簽的學習超文本標記語言(HyperTextMark-upLanguage簡稱HTML)，「超文本」就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標簽，屬性。有了一個好的開始，距離成功就更近了一步~這里有兩點建議，大家可以嘗試：
1，語義化的去記憶。比如ulli這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標簽。2，試著寫一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。
學習HTML就是要自己不斷的去寫，去嘗試。看著自己的代碼能跑起來，有了心目中的效果，這種心情還是很開心的！第二階段——CSS的學習CSS，層疊樣式表——（CascadingStyleSheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。
關於CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是「border」，那我們需要右側邊框做一些改變，那就是「border-right」。很明顯，接下來按照我們的需求還有「右邊框的寬度——border-right-with」，」右邊框顏色——border-right-color」等等等，諸如此類~完全就是我們需要什麼，只要憑著需求去尋找。第三階段——JavaScriptJavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
javascript是一個可以運行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML，CSS。
嚴格來說、HTML和CSS還算不上真正的「語言」，而javascript卻是如假包換的腳本型語言，既然是語言，那就會有字元串，數組，對象等等。而我們的javascript可以處理這些與數據有關的工作，比如給數組排個序，去個重等等。
而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的注冊功能，提交我們的留言，刷新獲取新聞等等。當然，我們強大的javascript遠不止此！第四個階段——jQueryjQuery是一個兼容多瀏覽器的javascript庫，核心理念是write
less,domore(寫得更少,做得更多)。jQuery在2006年1月由美國人JohnResig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由DaveMethvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們只需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。
另外談到Web前端要如何學的問題，在這里簡單給大家介紹一些學習Web前端時候的方法，也希望對大家有些幫助，在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鍾，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的項目，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。有關CSS的小技巧1、CSS縮寫CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。不是像這樣創建

而是像這樣創建2、理解class和id這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點「.」和井號「#」來標識。簡單來說id就是用來標識那些單獨不重復的樣式，而class是可以重復使用的。
3、實用的