如何成为前端开发工程师?

Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务，如何成为前端开发工程师呢？

1、首先确定你的目标或道路

成为Web开发人员的原因有很多，下面列出了一些选择因素：

你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。

你想以自由开发人员的身份来开始自己的业务或代理。

你可以成为其他公司的顾问。

你可以创建自己的应用来赚钱。

编码是你的业余爱好。

从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。

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

3、从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论你的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第 一件事。

HTML5（语义元素，属性，文档类型等）

CSS基础知识颜色，字体，位置，盒子模型等。

CSS Grid和Flexbox对齐内容或创建列。

CSS自定义属性

4、响应式布局

你的应用程序应该在所有类型的设备（例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备）上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。

了解如何设置视口

媒体查询不同的屏幕尺寸。

流体宽度

雷姆单位

移动优先

5、自定义可重用CSS组件

与其依赖大型的CSS框架（如Bootstrap），不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果你构建自己的定制设计，则无需导入完整的库。你创建只需要特定UI的组件。

的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么你无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。

你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件，Sass确实节省很多时间。

6、CSS框架

学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。

Bootstrap是最 流行的CSS框架。学习引导程序也有助于学习其他框架。

Tailwind CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此你可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

7、前端必须语言：JavaScript

学习HTML和CSS之后，接下来需要学习的是Vanilla Javascript。对开发人员来说，掌握javascript基本知识非常重要。你将在服务器端语言（例如PHP，Python或ASP.net）中使用大量javascript，并且如果你想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。

如果你想转向React，Vue，Angular或其他框架，现代JS（ES6）概念对于学习非常重要。

8、一些重要工具

Git（版本控制）和Github是你肯定会在2020年学习的最 受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。你还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。

了解如何使用浏览器开发工具。无论是chrome还是firefox，你都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。

大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。

9、基本部署

此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则**学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。

域注册（Namecheap，Google等）

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

静态主机（Netlify，Github页面）

SSL证书。

FTP，SFTP（文件传输协议）非常适合小型应用程序。

SSH（安全外壳），用于高级应用程序。

CLI和Git。

到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。你尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。你还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果你想申请工作，那么学习一些前端框架（如React，Vue或Angular）将是很棒的。