如何成為一名牛逼的Web前端開(kāi)發(fā)人員？入行學(xué)習(xí)完整指南

時(shí)間：2023-05-26 10:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-26 10:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何成為一名牛逼的Web前端開(kāi)發(fā)人員？入行學(xué)習(xí)完整指南：經(jīng)過(guò)如此多的試驗(yàn)和測(cè)試，而不是說(shuō)你從頭開(kāi)始創(chuàng)建了所有內(nèi)容，接著，你在網(wǎng)頁(yè)上創(chuàng)建了第一個(gè)登錄表單時(shí)，你感覺(jué)如何？

經(jīng)過(guò)了多次更改后，將布局分配給第一個(gè)Web應(yīng)用程序時(shí)感覺(jué)如何？

當(dāng)成功處理了數(shù)千個(gè)用戶的操作時(shí)，你感覺(jué)如何？

大多數(shù)Web開(kāi)發(fā)人員都經(jīng)歷了上述所有階段，最初可能會(huì)對(duì)其中某些感到沮喪，但是當(dāng)他們看到自己的網(wǎng)站正在運(yùn)行并且人們?cè)谑澜绺鞯厥褂盟鼤r(shí)，總體感覺(jué)確實(shí)令人興奮和驚奇。

Web開(kāi)發(fā)人員負(fù)責(zé)許多任務(wù)，從收集需求到設(shè)計(jì)網(wǎng)站，處理網(wǎng)站的后端部分，并使其成功地為用戶服務(wù)。

每年，行業(yè)中都會(huì)涌現(xiàn)出新技術(shù)和工具，以提高開(kāi)發(fā)人員的工作效率，并為用戶提供更好的網(wǎng)站。對(duì)于他們來(lái)說(shuō)，保持在Web開(kāi)發(fā)游戲之上的挑戰(zhàn)變得越來(lái)越大。

今天，我們將討論要在2020年成為Web開(kāi)發(fā)人員的完整地圖。這將是針對(duì)所有開(kāi)發(fā)人員（前端，后端和全棧）的實(shí)用指南。

1、首先確定你的目標(biāo)或道路

我們將討論很多技術(shù)，趨勢(shì)和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開(kāi)發(fā)人員要做什么，因?yàn)檫@將幫助你選擇合適的工具。和學(xué)習(xí)技術(shù)。

成為Web開(kāi)發(fā)人員的原因有很多，下面列出了一些選擇因素：

• 你想作為一名Web開(kāi)發(fā)人員在一家公司工作，這是最普遍的原因。
• 你想以自由開(kāi)發(fā)人員的身份來(lái)開(kāi)始自己的業(yè)務(wù)或代理。
• 你可以成為其他公司的顧問(wèn)。
• 你可以創(chuàng)建自己的應(yīng)用來(lái)賺錢。
• 編碼是你的業(yè)余愛(ài)好。

從上述感興趣或目標(biāo)的領(lǐng)域，你可以選擇適用于你的目標(biāo)的正確工具和技術(shù)。如果你的目標(biāo)是成為一名前端開(kāi)發(fā)人員，則可以選擇前端開(kāi)發(fā)的工具和技術(shù)。后端和全棧開(kāi)發(fā)也是如此。

2、Web開(kāi)發(fā)的基本工具和軟件

計(jì)算機(jī)和操作系統(tǒng)：如果沒(méi)有計(jì)算機(jī)和操作系統(tǒng)，則無(wú)法編寫代碼。要學(xué)習(xí)Web開(kāi)發(fā)，你不需要任何高端計(jì)算機(jī)（如果你擁有的話，那么更好……）。你可以使用任何類型的中型筆記本電腦或臺(tái)式機(jī)。對(duì)于操作系統(tǒng)，可以使用適合你的MacOS，Windows（最新版本）或Linux。

文本編輯器/ IDE：毫無(wú)疑問(wèn)，VSCode適用于大多數(shù)情況和大多數(shù)語(yǔ)言。它具有良好的性能，出色的擴(kuò)展性，內(nèi)置的終端功能以及大量功能。在2019年StackOverFlow調(diào)查中，VSCode也是開(kāi)發(fā)人員的首選。你還可以選擇其他一些不錯(cuò)的選擇，例如Sublime Text或Atom。如果我們談?wù)揑DE，那么是Visual Studio（http://ASP.net或C＃），Eclipse和Netbeans（Java）。是不錯(cuò)的選擇。

Web瀏覽器：大多數(shù)開(kāi)發(fā)人員的首選是Chrome或Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也取得了長(zhǎng)足的進(jìn)步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開(kāi)發(fā)工具，可以對(duì)Web開(kāi)發(fā)中的問(wèn)題進(jìn)行故障排除。

終端：您將使用一些系統(tǒng)命令來(lái)使用CLI進(jìn)行很多工作。您可以將默認(rèn)或第三方終端用于您的Web開(kāi)發(fā)項(xiàng)目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper這些都是可以使用的選項(xiàng)。

設(shè)計(jì)（可選）：并不是每個(gè)人都需要學(xué)習(xí)。在公司中，有專門的團(tuán)隊(duì)來(lái)制作圖像，徽標(biāo)或草圖，但是如果您是自由職業(yè)者，則可能必須學(xué)習(xí)Adobe XD，Photoshop，Sketch或Figma。

3、從HTML和CSS開(kāi)始

HTML和CSS是Web開(kāi)發(fā)的基本構(gòu)建塊。無(wú)論您的Web應(yīng)用程序有多先進(jìn)，或者使用什么框架和后端語(yǔ)言，都必須使用HTML和CSS構(gòu)建前端應(yīng)用程序。因此，這是在Web開(kāi)發(fā)中要學(xué)習(xí)的第一件事。

• HTML5（語(yǔ)義元素，屬性，文檔類型等）
• CSS基礎(chǔ)知識(shí)顏色，字體，位置，盒子模型等。
• CSS Grid和Flexbox對(duì)齊內(nèi)容或創(chuàng)建列。
• CSS自定義屬性

4、響應(yīng)式布局

您的應(yīng)用程序應(yīng)該在所有類型的設(shè)備（例如智能手機(jī)，平板電腦，臺(tái)式機(jī)，iPad或任何其他屏幕尺寸的設(shè)備）上都可以查看和使用。因此，了解創(chuàng)建響應(yīng)式設(shè)計(jì)或布局非常重要。讓我們來(lái)看一些重要的主題。

• 了解如何設(shè)置視口
• 媒體查詢不同的屏幕尺寸。
• 流體寬度
• 雷姆單位
• 移動(dòng)優(yōu)先

5、自定義可重用CSS組件

與其依賴大型的CSS框架（如Bootstrap），不如創(chuàng)建自己的模塊化，可重用的CSS組件以在項(xiàng)目中使用。如果您構(gòu)建自己的定制設(shè)計(jì)，則無(wú)需導(dǎo)入完整的庫(kù)。您創(chuàng)建只需要特定UI的組件。

的新趨勢(shì)最近還出現(xiàn)了有助于更有效地編寫CSS代碼的代碼。如果你已經(jīng)了解CSS，那么您無(wú)需在學(xué)習(xí)Saas上花費(fèi)很多精力。Saas是CSS預(yù)處理程序，可為標(biāo)準(zhǔn)CSS添加更多功能并使其更加高效。

你可以使用變量，嵌套，條件語(yǔ)句來(lái)減少CSS的重復(fù)并提高其效率。你還可以為每個(gè)可重用組件創(chuàng)建單獨(dú)的Saas文件。Sass確實(shí)節(jié)省了很多時(shí)間，所以你絕對(duì)應(yīng)該在2020年學(xué)習(xí)它。

6、CSS框架

學(xué)習(xí)CSS框架的普及程度不如去年，但對(duì)于不擅長(zhǎng)設(shè)計(jì)的開(kāi)發(fā)人員而言，仍然非常相關(guān)或有用。有許多流行的CSS框架可供使用，其中一些如下。

• Bootstrap是最流行的CSS框架。學(xué)習(xí)引導(dǎo)程序也有助于學(xué)習(xí)其他框架。
• Tailwind CSS是其他正在流行的框架，與其他框架幾乎沒(méi)有什么不同。它是一組實(shí)用程序類，因此您可以創(chuàng)建自己的按鈕和其他看起來(lái)與其他按鈕確實(shí)不同的東西。它們也是高度可定制的。
• 物化
• 布爾瑪

7、前端必須語(yǔ)言：JavaScript

學(xué)習(xí)HTML和CSS之后，接下來(lái)需要學(xué)習(xí)的是Vanilla Javascript。對(duì)開(kāi)發(fā)人員來(lái)說(shuō)，掌握javascript基本知識(shí)非常重要。您將在服務(wù)器端語(yǔ)言（例如PHP，Python或http://ASP.net）中使用大量javascript，并且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫(kù)一起使用，則非常需要學(xué)習(xí)這種語(yǔ)言。以下是你應(yīng)該在javascript中涵蓋的一些重要主題…

• JavaScript基礎(chǔ)知識(shí)（變量，數(shù)據(jù)類型，函數(shù)，條件等）
• DOM（文檔對(duì)象模型）
• JSON（JavaScript對(duì)象表示法）
• 提取API（請(qǐng)求/響應(yīng)/ Ajax）
• 如果您想轉(zhuǎn)向React，Vue，Angular或其他框架，現(xiàn)代JS（ES6）概念對(duì)于學(xué)習(xí)非常重要。

8、一些重要工具

Web開(kāi)發(fā)中將使用一些工具。這些工具將幫助你進(jìn)行調(diào)試，提高生產(chǎn)率，管理代碼，與其他開(kāi)發(fā)人員合作以及類似的東西。讓我們討論其中一些工具。

• Git（版本控制）和Github是您肯定會(huì)在2020年學(xué)習(xí)的最受歡迎的工具。Git在與其他開(kāi)發(fā)人員協(xié)作和管理代碼方面有很多幫助。您還可以選擇其他一些選項(xiàng)，例如GitLab，Bitbucket和其他一些選項(xiàng)。
• 了解如何使用瀏覽器開(kāi)發(fā)工具。無(wú)論是chrome還是firefox，您都應(yīng)該知道如何使用不同的選項(xiàng)卡，例如元素選項(xiàng)卡，javascript控制臺(tái)，用于請(qǐng)求和響應(yīng)的網(wǎng)絡(luò)選項(xiàng)卡，應(yīng)用程序選項(xiàng)卡以及其他用于不同目的的選項(xiàng)卡。
• 大多數(shù)IDE或文本編輯器都具有添加擴(kuò)展名或插件的功能，這對(duì)提高生產(chǎn)力和構(gòu)建Web應(yīng)用程序非常有幫助。例如，Visual Studio代碼中的VSCode擴(kuò)展可幫助下載擴(kuò)展，例如實(shí)時(shí)服務(wù)器或?qū)崟r(shí)saas編譯器以與React一起使用。
• Emmet是另一個(gè)很棒的工具，它允許您編寫非?？焖俚腍TML和CSS，這有助于提高開(kāi)發(fā)人員的生產(chǎn)力。
• 學(xué)習(xí)使用javascript軟件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(kù)（例如React），那么這些軟件包管理器將使用很多，但是對(duì)于其他語(yǔ)言（例如Python或Php），您將使用不同的軟件包管理器。
• 如果要在前端安裝NPM軟件包，則必須使用Webpack或Parcel。如果要?jiǎng)?chuàng)建自己的模塊，或者要將一個(gè)javascript文件帶到另一個(gè)javascript文件，則默認(rèn)情況下不能僅使用瀏覽器來(lái)執(zhí)行此操作，因此需要Webpack或Parcel對(duì)其進(jìn)行捆綁。

9、基本部署

此時(shí)，一旦你知道應(yīng)該為前端開(kāi)發(fā)學(xué)習(xí)什么工具或技術(shù)，就需要知道如何在Internet上部署前端網(wǎng)站。如果你正在為小型企業(yè)構(gòu)建一些小型應(yīng)用程序，登錄頁(yè)面或個(gè)人站點(diǎn)，則無(wú)需學(xué)習(xí)AWS或DevOps，僅因?yàn)樗鼈兙哂泄鉂珊托鲁?。你將使事情變得更加?fù)雜而不是簡(jiǎn)單。你需要在2020年學(xué)習(xí)一些部署工具和步驟。

• 域注冊(cè)（Namecheap，Google等）
• 托管托管（InMotion，Hostgator，Bluehost等）
• 靜態(tài)主機(jī)（Netlify，Github頁(yè)面）
• SSL證書。
• FTP，SFTP（文件傳輸協(xié)議）非常適合小型應(yīng)用程序。
• SSH（安全外殼），用于高級(jí)應(yīng)用程序。
• CLI和Git。

到目前為止，我們討論的任何工具，技術(shù)趨勢(shì)或步驟都是前端開(kāi)發(fā)的一部分。您尚不知道該框架，但可以為個(gè)人和小型企業(yè)構(gòu)建網(wǎng)站，也可以構(gòu)建適合移動(dòng)設(shè)備的布局。您還可以使用到目前為止討論的工具或技術(shù)來(lái)部署小型應(yīng)用程序或項(xiàng)目。如果您想申請(qǐng)工作，那么學(xué)習(xí)一些前端框架（如React，Vue或Angular）將是很棒的。

10、前端框架和狀態(tài)管理

框架使您可以進(jìn)行更高級(jí)的前端開(kāi)發(fā)?？蚣転槟峁┝嗽S多優(yōu)勢(shì)，例如可重用的組件，更有條理的UI或頁(yè)面交互。這對(duì)于協(xié)作更好，也有助于編寫簡(jiǎn)潔的代碼。另外，了解狀態(tài)管理。每個(gè)框架都有不同的方法。以下是2020年的一些流行框架和狀態(tài)管理器。

• React：React庫(kù)是最流行的Web開(kāi)發(fā)學(xué)習(xí)方法，與其他框架和庫(kù)相比，它相當(dāng)容易。React開(kāi)發(fā)人員還有很多工作要做。您可以將 Redux和 Context API與Hooks一起使用以進(jìn)行狀態(tài)管理。
• Vue：Vue也越來(lái)越受歡迎，開(kāi)發(fā)人員也更喜歡學(xué)習(xí)Vue。與React和Angular相比，Vue最容易學(xué)習(xí)。VueX是為視圖而構(gòu)建的狀態(tài)管理器。
• Angular：此框架通常在大型組織中使用。它具有相當(dāng)陡峭的學(xué)習(xí)曲線。用Angular學(xué)習(xí) TypeScript也很好。它允許您使用可選的靜態(tài)類型并支持ES2015的功能。NGRX和 Services是可以學(xué)習(xí)此框架的良好狀態(tài)管理器。

可選學(xué)習(xí)：

• 如果您具有這三個(gè)框架之一的知識(shí)，那么您還可以使用Svelte，它是一個(gè)JavaScript編譯器，可讓您生成純凈的原始JS代碼并幫助您輕松構(gòu)建用戶界面。
• 了解服務(wù)器端渲染。NextJS（React）和NuxtJS（Vue）是允許您在服務(wù)器上運(yùn)行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統(tǒng)路由，自動(dòng)代碼拆分，靜態(tài)導(dǎo)出，JS中的CSS和許多其他功能。
• 靜態(tài)網(wǎng)站生成器：Gatsby（反應(yīng)式）和Gridsome（Vue）

我們已經(jīng)討論了所有大多數(shù)前端開(kāi)發(fā)工具和技術(shù)。現(xiàn)在讓我們討論成為后端開(kāi)發(fā)人員或全棧開(kāi)發(fā)人員的語(yǔ)言和技術(shù)。

11、服務(wù)器端語(yǔ)言（選擇一種）

您應(yīng)該至少了解一種服務(wù)器端語(yǔ)言。要在2020年選擇一種語(yǔ)言，下面提供了一些選項(xiàng)...

• NodeJS（不是語(yǔ)言，而是運(yùn)行時(shí)環(huán)境）
• Python（非常適合初學(xué)者）
• Java（適合大型組織）
• Php（適合自由職業(yè)）
• Ruby（2020年少兩極）
• C＃
• Go

注意：無(wú)論你喜歡學(xué)習(xí)哪種服務(wù)器端語(yǔ)言，都要確保你了解使用該語(yǔ)言的數(shù)據(jù)結(jié)構(gòu)和算法。數(shù)據(jù)結(jié)構(gòu)和算法將幫助您為用戶呈現(xiàn)數(shù)據(jù)，并將幫助您優(yōu)化Web應(yīng)用程序中的代碼。我們特別建議您專注于使用數(shù)組和字符串（最重要）。你將同時(shí)使用這兩種方法。

12、服務(wù)器端框架（選擇一項(xiàng)）

一旦學(xué)習(xí)了自己選擇的一種服務(wù)器端語(yǔ)言，就可以使用其中一種語(yǔ)言框架。您可以選擇以下給出的選項(xiàng)之一...

• Node.js – Express，Koa，Adonis，F(xiàn)eather.js，Nest.js
• Python：Django，F(xiàn)lask，
• Java：Spring MVC，Grails
• PHP：Laravel，Symfony，Codeignitor，Slim
• Ruby：Sinatra上的Ruby on Rails
• C＃：http://ASP.NET MVC
• Go：Revel

13、數(shù)據(jù)庫(kù)（選擇一項(xiàng)）

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

• 關(guān)系數(shù)據(jù)庫(kù)：RDBMS仍然是最受歡迎的數(shù)據(jù)庫(kù)。最喜歡使用PostgreSQL，MySQL，MS SQL。
• NoSQL：MongoDB，RethinkDB，CouchDB
• 云數(shù)據(jù)庫(kù)：Firebase，Azure Could DB，AWS
• 輕量級(jí)和緩存：Redis，SQLlite，NeDB

在學(xué)習(xí)數(shù)據(jù)庫(kù)時(shí)，您還將學(xué)習(xí)RDBMS，ORM（對(duì)象關(guān)系映射器）或ODM（對(duì)象數(shù)據(jù)映射器）的SQL（結(jié)構(gòu)化查詢語(yǔ)言）。

GraphQL ：（可選）您可以了解現(xiàn)在流行的GraphQL。這是API的查詢語(yǔ)言。它具有類似于JSON的簡(jiǎn)單語(yǔ)法，并且相當(dāng)容易實(shí)現(xiàn)。

14、CMS：內(nèi)容管理

您絕對(duì)應(yīng)該了解內(nèi)容管理系統(tǒng)，尤其是如果您是自由職業(yè)者。CMS用于將內(nèi)容添加到您的網(wǎng)站或應(yīng)用程序?？蛻裟軌蚋伦约旱膬?nèi)容非常好。

• 傳統(tǒng)CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）
• 其他CMS ：DEDECMS，帝國(guó)CMS，PHPcms，http://Prismic.io，Strati。

15、部署和DevOps

托管全棧應(yīng)用程序或后端應(yīng)用程序比僅前端應(yīng)用程序要復(fù)雜一些，尤其是當(dāng)您擁有數(shù)據(jù)庫(kù)時(shí)。確保您知道如何使用CLI進(jìn)行部署。了解有關(guān)用于部署應(yīng)用程序的以下內(nèi)容。

在大多數(shù)公司中，有不同的團(tuán)隊(duì)從事DevOps的工作。因此，擁有有關(guān)DevOps的知識(shí)完全是可選的。您可以了解到，如果您正在從事自己的項(xiàng)目。

• SSH（安全外殼）
• Web服務(wù)器環(huán)境：NGINX，Apache
• 應(yīng)用程序托管：Linode，Heroku，AWS，Azure，Now。
• 虛擬化：Docker，Vagrant
• 測(cè)試：?jiǎn)卧?，功能，集成?/li>
• 負(fù)載平衡，監(jiān)視，安全性。

以上所有技術(shù)工具都足以使您成為前端，后端或全棧開(kāi)發(fā)人員。根據(jù)最終目標(biāo)選擇正確的工具和技術(shù)。

作者：WEB前端開(kāi)發(fā)社區(qū)
鏈接：如何成為一名Web前端開(kāi)發(fā)人員？入行學(xué)習(xí)完整指南
來(lái)源：微信公眾號(hào)WEB前端開(kāi)發(fā)社區(qū)