如何成为一名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
• 测试：单元，功能，集成等
• 负载平衡，监视，安全性。

以上全部技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。