一、基础1、学习HTML基础HTML给你的网页一个结构。它让你像人体骨骼一样站立。首先，您需要学习语法及其提供的所有内容。你的学习应该集中在以下事情上：学习HTML的基础知识，了解如何编写语义HTML了解如何将网页划分为部分（段落），以及如何正确组织DOM（文档对象模型）现在许多新标签的html5也很好用，需要学习实践建议：学完HTML基础，至少做5个HTML网页。我建议你找一个随机站点，例如Github个人资料页面或Twitter登录页面。然后专注于正确组织内容。结果可能很丑陋，但暂时不要担心，专注于适当的结构。2.学习一些CSS既然我们已经学会了如何为网页准备骨架，接下来就是在这个基础上添加一些皮肤，让它看起来更好看。CSS-级联样式表用于美化您的HTML页面。首先要做的是学习语法并熟悉常用的CSS属性。了解盒模型（boxmodel），掌握如何使用Grid和Flexbox来准备布局。学会了上面的内容之后，再学习下面的内容，通过媒体查询让网站响应。实用建议：一旦您掌握了基础知识，就可以设计您在上一步中制作的HTML页面了。例如，如果您为Github配置文件编写了HTML页面，现在是应用CSS使其看起来像实际GitHub配置文件页面的时候了。应该使用前5页进行尝试。3.学习JavaScript的基础知识JavaScript可以让你的HTML页面更具交互性。假设您在网站上看到的所有幻灯片、弹出窗口和广播通知，以及在不重新加载页面的情况下重新加载页面的特定部分，都是用JavaScript完成的。在此步骤中，您将学习JavaScript的基础知识，为接下来的旅程做好准备——学习该语言的语法和基本机制。了解如何使用JavaScript操作DOM，例如如何从页面中删除一些元素、如何添加一些元素、添加和删除类、通过JavaScript应用CSS样式等。学习和理解范围、闭包、变量等主题完成后进行提升和事件冒泡。了解如何使用XHR或Ajax生成HTTP调用。Ajax允许您在不重新加载网页的情况下执行某些操作。学完之后，接下来就是了解ES6+的所有新特性。ES6只是JavaScript的一个版本，它为该语言引入了许多有趣的更新，例如类、定义变量的多种方式、数组的新方法、字符串连接等等。你在网上找到的大部分文章都会用Babel来解析ES6，其实就是一个transpiler，可以把这个新的JavaScript转换成旧的JavaScript，因为有些旧的浏览器不支持新版的JS。不过暂时不用担心Babel，你只需要了解相关概念，然后使用任何支持ES6的最新浏览器进行练习即可。到现在为止，您应该对事情的样子有所了解。如果您按照上述步骤操作，您应该受到鼓励。这些是您刚刚学到的一些最重要的东西。我应该学习jQuery吗？曾几何时，每个人都为jQuery疯狂，这是有充分理由的；它是一个强大的库，在JavaScript之上提供了一个包装器，让您可以以浏览器兼容的方式做任何事情。那些日子已经一去不复返了，不再有多少新项目使用它了，但是仍然有人在使用它。所以其实jQuery对我们最大的用处其实还是要看源码。它对dom的操作和交互的源码其实对我们写js代码有很大的启发。练习建议：你可能随时都觉得自己明白了，但不练习很快就会忘记。遵循此路线图学习时，请确保获得尽可能多的实践经验。继续制作一些响应式网站，添加与JavaScript的交互性。您可以添加您感兴趣的任何现有页面，但请记住使用您目前学到的所有内容。一旦你制作了一些网站，就该开始制作真正的东西了。你可以在github上找到一些项目，并为一些开源项目打开pullrequests。以下是您可以尝试的一些拉取请求：增强UI，使任何演示页面响应或改进设计以查看是否有任何您可以解决的未解决问题重构任何您认为可以改进的代码4，其他相关注意事项：学习后git笔记的基本内容，还是需要知道一些技巧的，主要有：chrome浏览器的console调试，这会极大的方便修改代码观察前后台的交互，选择合适的ide，一般来说，用的是sublime，vs，webstorm，vscode等，还有各种编程学习git基本操作的插件。如果想要简单，也可以使用GUI版的git，但其实学习git的基本命令行还是很有用的。二、进阶1、PackageManager相关笔记：npm&yarn笔记在此之前，如果要使用一些外部库，比如插件或者外部桌面小部件，需要手动下载JavaScript和CSS文件，放到项目中，然后那些库或者插件有新版本发布的时候，你还得下载更新后的文件放到你的项目中，非常麻烦。具体来说，包管理器可以帮助你通过命令行将外部库和插件放入你的项目中，并在以后升级版本，这样你就不用手动复制和更新库了。一些包管理器主要是yarn和npm。两者之中，npm先于yarn出现，但yarn的包版本管理比npm强，具体用途也差不多。一旦学会了使用其中的一个，另一个自然就不成问题了。实用建议：在对包管理器有了基本的了解后，可以在之前制作的一些网页上安装一些外部库，比如安装一些提示插件，在用户点击某个按钮时显示提示信息，或者创建一个登录表单并使用一些表单验证库进行表单验证，或者尝试不同的选项以查看如何安装不同的版本。注意：记得看SemanticVersioning2,CSSPreprocessor预处理器通过CSS默认不支持的特性丰富了后者。可选的css预处理语言包括Sass、Less、Stylus等。我宁愿选择Sass。不过PostCSS最近的发展势头也不错，算是锦上添花的一种，有点类似于CSS的“通天塔”。你可以单独使用它，也可以将它叠加在Sass之上。总之，我的建议是先学Sass，少了解，stylus，以后有时间再看看PostCSS。3.CSS框架CSS框架其实并不是什么难的东西，边学边用。建议在Bootstrap、Materialise和Bulma中选择。如果考虑市场需求，那就是Bootstrap。4.CSS组织随着你的应用程序不断扩展，CSS也变得混乱且难以维护。有很多方法可以组织你的CSS以更好地应对可扩展性，例如OOCSS、SMACSS、SUITCSS、Atomic和BEM，所有这些都是CSS代码组织和管理的良好指导实践。CSS组织是针对复杂庞大的CSS开发，统一固定的CSS代码组织管理规范。包括CSS样式的命名规则，你应该知道它们之间的区别，但我更喜欢BEM。5.构建工具相关注释：ESlint注释工具可以帮助你构建/打包开发JavaScript应用。这类工具的功能主要包括以下三个方面：linter（代码检查），指的是对代码进行静态检查，比如定义是否使用变量、变量命名、方法回调次数、注释是否规范等.,主要是检查代码写的是否规范检查。linter有很多选择，包括ESLint、JSLint、JSHint和JSCS。但是目前主要是ESLint用的比较多。taskrunner（自动构建）是将项目代码自动构建并编译成浏览器可以执行的东西，比如编译typescript和Sass，使用自动构建工具不需要程序员手动操作。这个本来就是很多选项，包括npmscripts、gulp、grun等等。但是由于webpack可以处理大部分gulp可以做的事情，所以只有自动化构建中的npm脚本可以用来自动化webpack可以做的任务。没必要学Gulp，以后有一点时间可以去看看对你的申请有没有帮助。bundler（打包工具），不同的选择包括Parcel、Webpack、Rollup、Browserify等。如果非要选一个，此刻你可以闭着眼睛选择Webpack。Rollup也很常用，但主要还是推荐在库上使用。至于app，还是以webpack为主。所以可以先学webpack，想学Rollup以后再学。实用建议：恭喜！您现在可以称自己为75%的现代JavaScript开发人员。现在继续，用你学到的东西做点什么。也许将来可以为Sass和JavaScript使用一个库。然后使用Webpack将Sass转CSS，babel转ES6代码。完成后将其发布到Github和npm。三、进阶1、其实在一般的框架开发中，这部分往往紧挨着基础部分。之所以放在Sass、构造工具和包管理器后面，是因为你会在框架中用到它们。事物。该框架还有几个选项。不过目前比较常用的是React、Vue和Angular。React.js最近的需求量很大。但是，上面列出的任何一个都不会出错。就个人而言，我会选择React或Angular。但特别是，作为初学者，你可能会发现Angular相对容易一些，因为它支持几乎所有立即可用的东西，例如支持延迟加载的强大路由器、支持拦截器的HTTP客户端、依赖注入、组件CSS封装等，而不必担心选择外部库。但React在社区方面肯定有优势，Facebook一直在努力改进它。一旦你选择了一个框架，当然还有其他的东西你需要学习。如果你学习React，你必须学习Redux或Mobx才能理解状态管理。具体选择取决于应用程序的规模。Mobx适合中小型应用，而Redux更适合大型应用。即使应用程序允许，你可能不需要学习它，只需要依赖React的原生状态管理。如果你选择Angular，你必须使用TypeScript（你可以在没有它的情况下开发Angular应用程序，但我们仍然建议你使用它）和Rx.js，它可以在Angular应用程序之外的其他地方使用。这些都是非常强大的库，也适合函数式编程开发。如果你选择Vue.js，你可能要学习Vuex，它类似于Redux，但用于Vue。需要注意的是，Redux、Mobx和Rx.js并不依赖于这些框架，您还可以在各种JavaScript应用程序中使用它们。此外，如果您选择Angular，请确保您使用的是Angular2+而不是Angular1+。这里vue也是一样，vue2.0和vue1.0有细微差别。实用建议：您现在了解开发现代JavaScript应用程序所需的一切。可以选择学习框架，做项目练习。完成后，请查看如何衡量和提高绩效。例如，您可以查看交互时间、页面速度指数和Lighthouse得分。2.Progressivewebapplications完成上述所有步骤后，让我们了解serviceworkers以及如何制作progressiveweb应用程序。渐进式Web应用程序(PWA)是指可以在任何浏览器上执行的支持Internet的应用程序，由服务器端脚本（PHP和ASP）和客户端脚本（JavaScript和HTML）组成。ServiceWorker是客户端（浏览器）和服务器之间的代理。PWA具有以下优点：渐进式-无论选择何种浏览器，每个用户都可以使用，因为它们是以渐进式增强为核心原则构建的。响应式-适应任何形式因素：桌面、移动、平板电脑或即将到来。不依赖于网络连接-ServiceWorkers允许离线工作，或在低质量网络上工作。类似应用程序-感觉就像一个具有应用程序风格交互和导航的应用程序。保持最新-由于服务Woker的更新过程，应用程序始终是最新的。安全-借助HTTPS发现，防止窥探并确保内容未被篡改-受益于W3C清单和服务工作者注册范围，搜索引擎可以找到它们并将它们识别为“应用程序”。用户粘性-通过推送通知等功能让用户回到您的应用程序。可安装-允许用户将他们认为最有用的应用程序“保留”在主屏幕上，而无需通过应用程序商店。可链接-通过URL轻松共享，无需复杂的安装。3.测试你的应用相关的笔记：QUnit笔记应用测试的工具有很多，各有不同的用途。我自己经常使用Jest、Mocha、Karma和Enzyme的组合。然而，在开始选择工具之前，最好先了解有哪些不同类型的测试，查看所有选项，然后选择最适合您需求的选项。单元测试：JS中有很多框架我们可以选择进行单元测试。例如，Mocha、Selenium、jasmine和QUnit。本文将重点介绍Qunit，它是由jQuery团队（jQuery团队）开发的，该团队开发了许多著名的js库，包括jQuery和jQueryUI。4.静态类型检查器静态类型检查器有助于向JavaScript添加类型检查。你不需要学习这些，但它们会给你超能力，而且它们很快就能在几个小时内学会。这方面主要有TypeScript和Flow。我喜欢TypeScript，但您可以同时查看两者并选择您喜欢的。5.服务器渲染到目前为止，你所学的技能应该足够你找到一个“前端工程”的职位了。但您也可以在您选择的任何框架内重新学习服务器端渲染。有不同的选项可用，具体取决于您使用的框架。如果您决定使用React，最值得注意的选项是Next.js和After.js。如果是Angular，可以选择Universal。对于Vue.js，有Nuxt.js。4.小小全栈尝试学习前端的过程。如果你能理解后端是如何工作的，那将有助于你理清思路。再说nodejs的开发越来越强大，前端MVC框架比简单的HTML页面更有逻辑性。所以做一个小型的全栈项目是有意义的。可以从nodejs入手，mysql数据库比较简单轻量，然后可以尝试了解javaweb，或者pyhton的django框架。总结这条路线可能会有差距，但对于任何“前端工程”角色来说应该足够了。还要记住，关键是要尽可能多地练习。一开始可能会感到害怕，而且您并不总是觉得自己已经掌握了它，但这很正常，您会开始对自己感觉更好。还有，遇到困难时不要忘记寻求帮助，你会惊喜地发现有多少人愿意帮助你。英文：KamranAhmed翻译：36氪，转自微信公众号，有博主自己理解的一些改动，侵删
