每一年，业界都会出现新的技术和工具来提高开发者的生产力，为用户提供更好的网站。对它们来说，保持在Web开发游戏之上的挑战日益增加。

现在，我们将讨论成为一个Web开发者的完整路线图。

一、先确定你的目标或道路

在讨论许多技术、趋势和工具时，我们并不想让您无所适从，所以您首先需要决定作为一个Web开发人员该怎么做，因为这有助于您选择合适的工具和学习技术。

二、基本的网络开发工具和软件

电脑与操作系统

文字编辑器/IDE

网页浏览器

末端

方案(可选)

三、以HTML和CSS开头

HTML和CSS是Web开发的基本构建模块。不管你的Web应用有多先进，或者使用何种框架和后端语言，前端应用程序必须使用HTML和CSS构建。所以，这是在Web开发中首先要了解的东西。

四、响应式布局

你的应用程序应该能在各种设备上看到和使用，比如智能手机、平板电脑、台式机、iPad或者其他屏幕尺寸的设备。所以，理解创建响应式设计或者布局很重要。

五、定制可重用的CSS组件

不要依赖于像Bootstrap这样的大型CSS框架，而是创建自己的模块化、可重用的CSS组件，用于项目。当你建立你自己的自定义设计时，你不需要导入整个库。你只需要特定的UI创建组件。

六、CSS结构

CSS框架不像去年那么流行了，但是对于不擅长设计的开发人员来说，它仍然是非常有用的。

七、前端必须语言：JavaScript

在学习了HTML和CSS之后，下一步就是VanillaJavascript。对于开发者，掌握javascript的基础知识很重要。

八、一些重要的工具

有些工具将用于Web开发。它们将帮助您调试、提高生产效率、管理代码、与其他开发人员协作等等。下面讨论其中的一些工具。

(1)Git(版本管理)和Github;

(2)学习如何使用浏览器开发工具;

(3)大部分IDE或文本编辑器都可以添加扩展名或插件，这对于提高工作效率和构建Web应用程序很有帮助;

(4)Emmet是另一个很棒的工具，它让你写出非常快的HTML和CSS，这可以帮助开发者提高工作效率;

(5)学会用javascript软件包管理器。

九、前端架构与状态管理

架构允许您进行更的前端开发。架构给你很多好处，比如可复用的组件、更有序的UI或页面交互。

React

Vue

Angular

不管你想学习哪种服务器端语言，一定要知道使用这种语言的数据结构和算法。这些数据结构和算法将帮助你把数据呈现给用户，并且帮助你在Web应用中优化代码。建议你把重点放在使用数组和字符串上(较重要)，两种方法都会用到。