如何成爲一名Web前端開發人員？

一、首先肯定你的目標或道路

咱們將討論不少技術，趨勢和工具，但咱們不但願您不知所措，所以你須要首先決定要成爲一名Web開發人員要作什麼，由於這將幫助你選擇合適的工具。和學習技術。成爲Web開發人員的緣由有不少，下面列出了一些選擇因素：

• 你想做爲一名Web開發人員在一家公司工做，這是最廣泛的緣由。
• 你想以自由開發人員的身份來開始本身的業務或代理。
• 你能夠成爲其餘公司的顧問。
• 你能夠建立本身的應用來賺錢。
• 編碼是你的業餘愛好。

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

二、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。

三、從HTML和CSS開始

HTML和CSS是Web開發的基本構建塊。不管您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。所以，這是在Web開發中要學習的第一件事。

• HTML5（語義元素，屬性，文檔類型等）
• CSS基礎知識顏色，字體，位置，盒子模型等。
• CSS Grid和Flexbox對齊內容或建立列。
• CSS自定義屬性

四、響應式佈局

您的應用程序應該在全部類型的設備（例如智能手機，平板電腦，臺式機，iPad或任何其餘屏幕尺寸的設備）上均可以查看和使用。所以，瞭解建立響應式設計或佈局很是重要。讓咱們來看一些重要的主題。

• 瞭解如何設置視口
• 媒體查詢不一樣的屏幕尺寸。
• 流體寬度
• 雷姆單位
• 移動優先

五、自定義可重用CSS組件

與其依賴大型的CSS框架（如Bootstrap），不如建立本身的模塊化，可重用的CSS組件以在項目中使用。若是您構建本身的定製設計，則無需導入完整的庫。您建立只須要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。若是你已經瞭解CSS，那麼您無需在學習Saas上花費不少精力。Saas是CSS預處理程序，可爲標準CSS添加更多功能並使其更加高效。你可使用變量，嵌套，條件語句來減小CSS的重複並提升其效率。你還能夠爲每一個可重用組件建立單獨的Saas文件。Sass確實節省了不少時間，因此你絕對應該在2020年學習它。

六、CSS框架

學習CSS框架的普及程度不如去年，但對於不擅長設計的開發人員而言，仍然很是相關或有用。有許多流行的CSS框架可供使用，其中一些以下。

• Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其餘框架。
• Tailwind CSS是其餘正在流行的框架，與其餘框架幾乎沒有什麼不一樣。它是一組實用程序類，所以您能夠建立本身的按鈕和其餘看起來與其餘按鈕確實不一樣的東西。它們也是高度可定製的。
• 物化
• 布爾瑪

七、前端必須語言：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）概念對於學習很是重要。

八、一些重要工具

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是能夠學習此框架的良好狀態管理器。

可選學習：

• 若是您具備這三個框架之一的知識，那麼您還可使用Svelte，它是一個JavaScript編譯器，可以讓您生成純淨的原始JS代碼並幫助您輕鬆構建用戶界面。
• 瞭解服務器端渲染。NextJS（React）和NuxtJS（Vue）是容許您在服務器上運行React和Vue的框架。二者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其餘功能。
• 靜態網站生成器：Gatsby（反應式）和Gridsome（Vue）

咱們已經討論了全部大多數前端開發工具和技術。如今讓咱們討論成爲後端開發人員或全棧開發人員的語言和技術。

十一、服務器端語言（選擇一種）

您應該至少了解一種服務器端語言。要在2020年選擇一種語言，下面提供了一些選項...

• NodeJS（不是語言，而是運行時環境）
• Python（很是適合初學者）
• Java（適合大型組織）
• Php（適合自由職業）
• Ruby（2020年少兩極）
• C＃
• Go

注意：不管你喜歡學習哪一種服務器端語言，都要確保你瞭解使用該語言的數據結構和算法。數據結構和算法將幫助您爲用戶呈現數據，並將幫助您優化Web應用程序中的代碼。咱們特別建議您專一於使用數組和字符串（最重要）。你將同時使用這兩種方法。

十二、服務器端框架（選擇一項）

一旦學習了本身選擇的一種服務器端語言，就可使用其中一種語言框架。您能夠選擇如下給出的選項之一...

• 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

1三、數據庫（選擇一項）

大多數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的簡單語法，而且至關容易實現。

1四、CMS：內容管理

您絕對應該瞭解內容管理系統，尤爲是若是您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶可以更新本身的內容很是好。

• 傳統CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）
• 其餘CMS ：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。

1五、部署和DevOps

託管全棧應用程序或後端應用程序比僅前端應用程序要複雜一些，尤爲是當您擁有數據庫時。確保您知道如何使用CLI進行部署。瞭解有關用於部署應用程序的如下內容。
在大多數公司中，有不一樣的團隊從事DevOps的工做。所以，擁有有關DevOps的知識徹底是可選的。您能夠了解到，若是您正在從事本身的項目。

• SSH（安全外殼）
• Web服務器環境：NGINX，Apache
• 應用程序託管：Linode，Heroku，AWS，Azure，Now。
• 虛擬化：Docker，Vagrant
• 測試：單元，功能，集成等
• 負載平衡，監視，安全性。

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