在入門學習前端的過程當中你有遇見任何技術(shù)遍坟，行業(yè)方面的問題，你都可以加入我的前端學習交流裙：??

前面： ++++++++ 282+++++++++++??

中間： ++++++++++549+++++++++??

最后： +++++++++++184++++++++? ??

里面有我從去年到現(xiàn)在享怀，根據(jù)市場技術(shù)棧需求錄制的最新視頻教程，文件里面有我做前端這幾年整理的學習手冊趟咆，面試題添瓷，23款開發(fā)工具，PDF文檔教程值纱，需要的可以自己去下載鳞贷。

經(jīng)過如此多的試驗和測試，而不是說你從頭開始創(chuàng)建了所有內(nèi)容虐唠，接著搀愧，你在網(wǎng)頁上創(chuàng)建了第一個登錄表單時，你感覺如何疆偿？

經(jīng)過了多次更改后咱筛，將布局分配給第一個Web應用程序時感覺如何？

當成功處理了數(shù)千個用戶的操作時杆故，你感覺如何迅箩？

大多數(shù)Web開發(fā)人員都經(jīng)歷了上述所有階段，最初可能會對其中某些感到沮喪处铛，但是當他們看到自己的網(wǎng)站正在運行并且人們在世界各地使用它時饲趋，總體感覺確實令人興奮和驚奇拐揭。

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

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

今天圃泡，我們將討論要在2020年成為Web開發(fā)人員的完整地圖碟案。這將是針對所有開發(fā)人員（前端，后端和全棧）的實用指南颇蜡。

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

我們將討論很多技術(shù)，趨勢和工具风秤，但我們不希望您不知所措鳖目，因此你需要首先決定要成為一名Web開發(fā)人員要做什么，因為這將幫助你選擇合適的工具缤弦。和學習技術(shù)领迈。

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

你想作為一名Web開發(fā)人員在一家公司工作碍沐，這是最普遍的原因狸捅。

你想以自由開發(fā)人員的身份來開始自己的業(yè)務或代理。

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

你可以創(chuàng)建自己的應用來賺錢尘喝。

編碼是你的業(yè)余愛好。

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

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

計算機和操作系統(tǒng)：如果沒有計算機和操作系統(tǒng)骑科，則無法編寫代碼。要學習Web開發(fā)构拳，你不需要任何高端計算機（如果你擁有的話咆爽，那么更好……）梁棠。你可以使用任何類型的中型筆記本電腦或臺式機。對于操作系統(tǒng)斗埂，可以使用適合你的MacOS符糊，Windows（最新版本）或Linux。

文本編輯器/ IDE：毫無疑問呛凶，VSCode適用于大多數(shù)情況和大多數(shù)語言男娄。它具有良好的性能，出色的擴展性漾稀，內(nèi)置的終端功能以及大量功能模闲。在2019年StackOverFlow調(diào)查中，VSCode也是開發(fā)人員的首選崭捍。你還可以選擇其他一些不錯的選擇尸折，例如Sublime Text或Atom。如果我們談論IDE殷蛇，那么是Visual Studio（ASP.net或C＃）实夹，Eclipse和Netbeans（Java）。是不錯的選擇粒梦。

Web瀏覽器：大多數(shù)開發(fā)人員的首選是Chrome或Firefox亮航。Chrome速度很快，并且使用V8引擎（JavaScript引擎）匀们。Firefox也取得了長足的進步缴淋，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發(fā)工具昼蛀，可以對Web開發(fā)中的問題進行故障排除宴猾。

終端：您將使用一些系統(tǒng)命令來使用CLI進行很多工作。您可以將默認或第三方終端用于您的Web開發(fā)項目叼旋。Bash仇哆，Zsh，Powershell夫植，Git Bash讹剔，iTerm，Hyper這些都是可以使用的選項详民。

設(shè)計（可選）：并不是每個人都需要學習延欠。在公司中，有專門的團隊來制作圖像沈跨，徽標或草圖由捎，但是如果您是自由職業(yè)者，則可能必須學習Adobe XD饿凛，Photoshop狞玛，Sketch或Figma软驰。

3、從HTML和CSS開始

HTML和CSS是Web開發(fā)的基本構(gòu)建塊心肪。無論您的Web應用程序有多先進锭亏，或者使用什么框架和后端語言，都必須使用HTML和CSS構(gòu)建前端應用程序硬鞍。因此慧瘤，這是在Web開發(fā)中要學習的第一件事。

HTML5（語義元素固该，屬性锅减，文檔類型等）

CSS基礎(chǔ)知識顏色，字體蹬音，位置上煤，盒子模型等。

CSS Grid和Flexbox對齊內(nèi)容或創(chuàng)建列著淆。

CSS自定義屬性

4劫狠、響應式布局

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

了解如何設(shè)置視口

媒體查詢不同的屏幕尺寸组橄。

流體寬度

雷姆單位

移動優(yōu)先

5荞膘、自定義可重用CSS組件

與其依賴大型的CSS框架（如Bootstrap），不如創(chuàng)建自己的模塊化玉工，可重用的CSS組件以在項目中使用羽资。如果您構(gòu)建自己的定制設(shè)計，則無需導入完整的庫遵班。您創(chuàng)建只需要特定UI的組件屠升。

的新趨勢最近還出現(xiàn)了有助于更有效地編寫CSS代碼的代碼。如果你已經(jīng)了解CSS狭郑，那么您無需在學習Saas上花費很多精力腹暖。Saas是CSS預處理程序，可為標準CSS添加更多功能并使其更加高效翰萨。

你可以使用變量脏答，嵌套，條件語句來減少CSS的重復并提高其效率。你還可以為每個可重用組件創(chuàng)建單獨的Saas文件以蕴。Sass確實節(jié)省了很多時間糙麦，所以你絕對應該在2020年學習它。

6丛肮、CSS框架

學習CSS框架的普及程度不如去年，但對于不擅長設(shè)計的開發(fā)人員而言魄缚，仍然非常相關(guān)或有用宝与。有許多流行的CSS框架可供使用，其中一些如下冶匹。

Bootstrap是最流行的CSS框架习劫。學習引導程序也有助于學習其他框架。

Tailwind CSS是其他正在流行的框架嚼隘，與其他框架幾乎沒有什么不同诽里。它是一組實用程序類，因此您可以創(chuàng)建自己的按鈕和其他看起來與其他按鈕確實不同的東西飞蛹。它們也是高度可定制的谤狡。

物化

布爾瑪

7、前端必須語言：JavaScript

學習HTML和CSS之后卧檐，接下來需要學習的是Vanilla Javascript墓懂。對開發(fā)人員來說，掌握javascript基本知識非常重要霉囚。您將在服務器端語言（例如PHP捕仔，Python或ASP.net）中使用大量javascript，并且如果您想與React盈罐，Angular榜跌，NodeJS，Vue或任何其他javascript框架或庫一起使用盅粪，則非常需要學習這種語言钓葫。以下是你應該在javascript中涵蓋的一些重要主題…

JavaScript基礎(chǔ)知識（變量，數(shù)據(jù)類型湾揽，函數(shù)瓤逼，條件等）

DOM（文檔對象模型）

JSON（JavaScript對象表示法）

提取API（請求/響應/ Ajax）

如果您想轉(zhuǎn)向React，Vue库物，Angular或其他框架霸旗，現(xiàn)代JS（ES6）概念對于學習非常重要。

8戚揭、一些重要工具

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

Git（版本控制）和Github是您肯定會在2020年學習的最受歡迎的工具靴姿。Git在與其他開發(fā)人員協(xié)作和管理代碼方面有很多幫助沃但。您還可以選擇其他一些選項，例如GitLab佛吓，Bitbucket和其他一些選項宵晚。

了解如何使用瀏覽器開發(fā)工具。無論是chrome還是firefox维雇，您都應該知道如何使用不同的選項卡淤刃，例如元素選項卡，javascript控制臺吱型，用于請求和響應的網(wǎng)絡選項卡逸贾，應用程序選項卡以及其他用于不同目的的選項卡。

大多數(shù)IDE或文本編輯器都具有添加擴展名或插件的功能津滞，這對提高生產(chǎn)力和構(gòu)建Web應用程序非常有幫助铝侵。例如，Visual Studio代碼中的VSCode擴展可幫助下載擴展据沈，例如實時服務器或?qū)崟rsaas編譯器以與React一起使用哟沫。

Emmet是另一個很棒的工具，它允許您編寫非承拷椋快速的HTML和CSS嗜诀，這有助于提高開發(fā)人員的生產(chǎn)力。

學習使用javascript軟件包管理器孔祸，例如NPM和Yarn隆敢。如果您正在使用Javascript框架或庫（例如React），那么這些軟件包管理器將使用很多崔慧，但是對于其他語言（例如Python或Php）拂蝎，您將使用不同的軟件包管理器。

如果要在前端安裝NPM軟件包惶室，則必須使用Webpack或Parcel温自。如果要創(chuàng)建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件皇钞，則默認情況下不能僅使用瀏覽器來執(zhí)行此操作悼泌，因此需要Webpack或Parcel對其進行捆綁。

9夹界、基本部署

此時馆里，一旦你知道應該為前端開發(fā)學習什么工具或技術(shù)，就需要知道如何在Internet上部署前端網(wǎng)站。如果你正在為小型企業(yè)構(gòu)建一些小型應用程序鸠踪，登錄頁面或個人站點丙者，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮营密。你將使事情變得更加復雜而不是簡單械媒。你需要在2020年學習一些部署工具和步驟。

域注冊（Namecheap卵贱，Google等）

托管托管（InMotion滥沫，Hostgator，Bluehost等）

靜態(tài)主機（Netlify键俱，Github頁面）

SSL證書。

FTP世分，SFTP（文件傳輸協(xié)議）非常適合小型應用程序编振。

SSH（安全外殼），用于高級應用程序臭埋。

CLI和Git踪央。

到目前為止，我們討論的任何工具瓢阴，技術(shù)趨勢或步驟都是前端開發(fā)的一部分畅蹂。您尚不知道該框架，但可以為個人和小型企業(yè)構(gòu)建網(wǎng)站荣恐，也可以構(gòu)建適合移動設(shè)備的布局液斜。您還可以使用到目前為止討論的工具或技術(shù)來部署小型應用程序或項目。如果您想申請工作叠穆，那么學習一些前端框架（如React少漆，Vue或Angular）將是很棒的。

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

框架使您可以進行更高級的前端開發(fā)示损。框架為您提供了許多優(yōu)勢嚷硫，例如可重用的組件检访，更有條理的UI或頁面交互。這對于協(xié)作更好仔掸，也有助于編寫簡潔的代碼脆贵。另外，了解狀態(tài)管理嘉汰。每個框架都有不同的方法丹禀。以下是2020年的一些流行框架和狀態(tài)管理器。

React：React庫是最流行的Web開發(fā)學習方法，與其他框架和庫相比双泪，它相當容易持搜。React開發(fā)人員還有很多工作要做。您可以將 Redux和 Context API與Hooks一起使用以進行狀態(tài)管理焙矛。

Vue：Vue也越來越受歡迎葫盼，開發(fā)人員也更喜歡學習Vue。與React和Angular相比村斟，Vue最容易學習贫导。VueX是為視圖而構(gòu)建的狀態(tài)管理器。

Angular：此框架通常在大型組織中使用蟆盹。它具有相當陡峭的學習曲線孩灯。用Angular學習 TypeScript也很好。它允許您使用可選的靜態(tài)類型并支持ES2015的功能逾滥。NGRX和 Services是可以學習此框架的良好狀態(tài)管理器峰档。

可選學習：

如果您具有這三個框架之一的知識，那么您還可以使用Svelte寨昙，它是一個JavaScript編譯器讥巡，可讓您生成純凈的原始JS代碼并幫助您輕松構(gòu)建用戶界面。

了解服務器端渲染舔哪。NextJS（React）和NuxtJS（Vue）是允許您在服務器上運行React和Vue的框架困檩。兩者都有很好的功能渔肩，例如更好的SEO弹囚，文件系統(tǒng)路由卫键，自動代碼拆分，靜態(tài)導出外里，JS中的CSS和許多其他功能怎爵。

靜態(tài)網(wǎng)站生成器：Gatsby（反應式）和Gridsome（Vue）

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

11鳖链、服務器端語言（選擇一種）

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

NodeJS（不是語言芙委，而是運行時環(huán)境）

Python（非常適合初學者）

Java（適合大型組織）

Php（適合自由職業(yè)）

Ruby（2020年少兩極）

C＃

Go

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

12牛柒、服務器端框架（選擇一項）

一旦學習了自己選擇的一種服務器端語言，就可以使用其中一種語言框架痊乾。您可以選擇以下給出的選項之一...

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＃：ASP.NET MVC

Go：?Revel

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

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

關(guān)系數(shù)據(jù)庫：RDBMS仍然是最受歡迎的數(shù)據(jù)庫谈截。最喜歡使用PostgreSQL筷屡，MySQL，MS SQL簸喂。

NoSQL：MongoDB毙死，RethinkDB，CouchDB

云數(shù)據(jù)庫：Firebase喻鳄，Azure Could DB扼倘，AWS

輕量級和緩存：Redis，SQLlite除呵，NeDB

在學習數(shù)據(jù)庫時再菊，您還將學習RDBMS，ORM（對象關(guān)系映射器）或ODM（對象數(shù)據(jù)映射器）的SQL（結(jié)構(gòu)化查詢語言）颜曾。

GraphQL ：（可選）您可以了解現(xiàn)在流行的GraphQL纠拔。這是API的查詢語言。它具有類似于JSON的簡單語法泛豪，并且相當容易實現(xiàn)稠诲。

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

您絕對應該了解內(nèi)容管理系統(tǒng)，尤其是如果您是自由職業(yè)者臀叙。CMS用于將內(nèi)容添加到您的網(wǎng)站或應用程序略水。客戶能夠更新自己的內(nèi)容非常好匹耕。

傳統(tǒng)CMS：WordPress（PHP）聚请，Drupal（PHP），Keystone（Javascript）稳其，Enduro（Javascript）

其他CMS ：DEDECMS驶赏，帝國CMS，PHPcms既鞠，Prismic.io煤傍，Strati。

15嘱蛋、部署和DevOps

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

在大多數(shù)公司中，有不同的團隊從事DevOps的工作凶伙。因此郭毕，擁有有關(guān)DevOps的知識完全是可選的。您可以了解到函荣，如果您正在從事自己的項目显押。

SSH（安全外殼）

Web服務器環(huán)境：NGINX，Apache

應用程序托管：Linode傻挂，Heroku乘碑，AWS，Azure金拒，Now兽肤。

虛擬化：Docker，Vagrant

測試：單元殖蚕，功能轿衔，集成等

負載平衡，監(jiān)視睦疫，安全性害驹。

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