Web前端入门合集，一起看看大佬的学习之路吧，也整理了近3年的学习和实践过程，方便以后回味和品味。1.为什么选择学习前端开发？您可能会因为兴趣而感到完成网站、页面或功能的成就感。你也可能是因为前端工作火爆，就业率高。不管是什么原因，只要找对了目标，就可以学起来！2、什么是Web前端开发？有没有办法“赚钱”？（1）定义：前端开发就是实现UI设计师设计的界面，也就是使用一些前端语言（HTML、CSS、jQuery等）将UI设计变成网页可以与用户交互的页面；(2)岗位职责：参与原型需求讨论会，从前端和用户交互的角度提出一些建议和意见；与产品经理沟通，梳理确认原型和需求；与UI设计师沟通，更好的实现界面；与后台开发者沟通，实现数据交互；配合测试人员解决bug；与整个团队合作开发项目的后续迭代；不说一般，找工作还是比较容易的，薪水也挺可观的。当然，刚入门，我的建议是不要太看重薪水，最重要的是有没有好的环境和平台可以多学习。当你在好的环境、好的平台上多学习，积累一定的经验，薪水真的很简单。不要被一开始那少得可怜的薪水压得喘不过气来而放弃，如果真的想进入这一行，那就坚持吧。以后回头看，你会发现一切都是那么的简单明了。1.如何入门，学习建议在开始学习之前，有一些小建议。根据我自己的学习经历，我发现这些建议对我现在乃至未来的职业生涯都有很大的帮助。还有，在开始学习之前，建议先花几天时间，找一些入门的文章，通过很多前辈的文章和建议。整理出一套完整的适合自己学习的方案，在学习过程中对前端有了一定的了解之后再对方案进行一些调整。我相信在这样的计划下学习比开始学习具体的知识要快得多，效果也好得多。代码规范：不是说新手期不重要，而是什么都不懂的时候一定要严格执行所学的规范。循序渐进，直到学有所成，逐渐形成自己的代码风格。手写代码：刚开始学习时，建议手写代码。即使只有一行代码，您也需要将每个字母和空格都打出来。动手操作：即使示例中只有一行代码，也需要手动编写并运行，不能眼高手低。打好基础：只有在新手阶段打好了基础（例如：HTML、CSS、Jquery），才会更容易攻克后续的进阶难关。坚持：当你觉得最困难的时候，坚持下去，天空会完全不一样制定计划：制定相应的计划并严格执行，否则一般学习效果会大打折扣循序渐进，由易到难是一个个人学习总结。如果能够很好地遵循，对学习效果和后续的进步都有很大的帮助。当然，适合自己的方法才是最好的。二、新手阶段如何学习这个阶段的你应该什么都不会，可能连前端大概是做什么的都不知道。可能你只是听说这个职位很火，好找，所以很想学习。或者，也许你看到一个漂亮的网页，你开始好奇，觉得实现它是一件很美好的事情，你想知道如何制作它。如果您想知道如何开始，这里有一些建议和忠告。这是我从小白自学阶段到胜任前端岗位过程中积累的一些经验。我希望它能有所帮助。学习步骤建议（1）HTML标签（网页结构标记语言）+CSS样式（网页样式语言）。它们是实现静态网络应用的最基本的语言。如果掌握得好，可以编写一个简单的模块（如导航等），甚至是一个完整的静态网页。(2)Jquery库(Javascript编程语言必须掌握的库)。它可以“移动”你之前制作的静态网页，比如（下拉二级菜单、网页右侧工具导航展开等交互效果）。(3)建议花时间阅读这本书《DOM编程艺术》，或类似的书。它是关于Javascript编程语言在Web开发中的应用。跟着这本书，你可以写一个简单的交互式网站。以上几点是小白一开始最先学习的东西。这三门语言建议按顺序学习。使用sublime编辑器可以动手写。当你按照学习步骤（3）完成一个小网站时，你会有一种成就感，后续的学习会增加你的信心和兴趣。3.初步进阶学习建议。相信经过前面的探索，如果你能坚持不懈地按照建议学习，你应该已经完成??了自己实现的第一个网站。以下是针对初步高级研究的一些建议。提高我们的基础知识(1)HTML5，一种更高级、功能更丰富的标记语言。添加了很多标签，比如：画布、视频等，你可以实现更多的动画、炫酷的特效或者自己播放视频。(2)CSS3，一种更高级的样式语言。可以实现丰富多彩的页面动画。没必要每次都用js。使用CSS3可以轻松方便地实现一些想要的网页交互。(3)javascript编程语言（最重要）。这是前端必须掌握的一门语言，可以看做是一门编程语言。学会灵活使用javascript，对以后的学习和工作都有很大的帮助。掌握它最重要的是先把基础学好，然后通过不断的实战来提升我们的编程能力和逻辑思维。这一块的学习是持续不断的，直到我们真正掌握并能够灵活运用为止。如果经过一两次研究后，发现没有提升的空间，可以暂时搁置。继续下面的学习，javascript贯穿于我们的前端工作，在后面的学习和实现中也会遇到和锻炼。真正的学习不难理解，关键是灵活运用。(4)开始学习使用一些前端框架，这里指的是前端UI框架，可以帮助我们快速高效的开发一个网站，界面风格也不错。比如PC端的Bootstrap其实是一个响应式框架，移动端也可以用在H5页面上，或者AmazeUi，这是一个专注于移动端的框架。可以在百度或者相应框架的官网查看文档。当你学会使用某个框架的时候，你也会同时拥有另外n+1个各种前端UI框架，触手可及。（5）还有一个前端框架，比如layui，是一个工具框架。它包含分页效果、弹窗效果、日期选择控件等。当你学会这个或以后，你可以学习如何使用它，可以帮助你更高效地完成项目的开发。（6）通过百度可以找到很多网页交互效果的插件，比如二级菜单下拉效果、手风琴菜单、图片轮播、弹窗效果等，下载他们的源码和例子，以及学习使用或手工模仿它们的效果，可以帮助我们快速实现一些更复杂的交互特效。现在有很多免费开源的插件，我们不用重新造轮子，直接拿来用很方便。当然，我的建议是，大家在学习使用特效插件的时候，可以研究一下它的源码，看看效果是如何实现的。这也是巩固学习javascript语言的好方法，你值得拥有。(7)至此，你已经基本掌握了前端开发的一些知识和技能。可以找一些典型的官网模仿其界面和交互效果，比如京东官网、淘宝官网等。认真写几个这样的官网主页，可以进一步巩固和提高之前所学的知识。第四，继续学习。当你能完成一个基本的带有交互效果的页面后，你还需要掌握一些流行的前端开发JS框架和高效流行的开发模式，才能在工作中进一步提升自己。相信至此，你已经成功踏入前端大门，接下来就是在工作中实践如何成为前端主力工程师了。一、一些常用的前端JS框架的建议（1）vue.js，一个面向移动端的JS框架，轻量级。数据驱动交互非常简单易学，可以独立于Jquery框架使用，帮助您开发友好的移动界面。前端开发必备技能，流行的JS框架。关于如何使用和掌握，可以自行百度，也可以去其官网学习官方文档。需要前端面试题的可以私信，CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，免费分享！(2)react.js，与vue相比，更加复杂和重量级，但是实现大型项目也非常快捷方便。掌握它已经成为很多公司的入门要求。相信在学习了vue等数据驱动框架之后，学起来会轻松很多。与通常的jQuery开发项目相比，Vue和React开发的关键在于思维的转变。掌握面向对象和数据驱动的交互，会让你觉得开发起来更轻松、更友好。如何掌握，百度、菜鸟网、官网文档都是不错的选择。2、流行开发模式建议（1）vue+webpack集成开发（2）react+webpack集成开发（3）node.js学习与应用，一款可以使用javascript语言开发后台的工具（4）weex+webpack进行集成开发中，很少看到公司使用（5）angular.js，类似于vue.js，但很少看到使用以上开发框架和开发模式（1）（2）（3），被很多互联网公司团队采用。值得深入学习，当你掌握它后，你会发现开发前端项目原来可以如此简单。不断学习，不断改进以上文章是一些入门建议。当然，在你的学习和以后的工作中，你还可能学习掌握一些其他必要的技能。如：百度很重要。UI设计文件PSD切割图（必备技能，学会阅读UI设计交付给你的设计图）。使用Google或Firefox的F12开发者模式，快速调试，发现开发过程中的问题。配合后台调试数据接口，解决部分跨域问题（如：nginx配置及使用）。不同的项目使用不同的最佳开发工具（sublime、editplus、hbuilder、vsCode等）。使用版本控制工具（如：svn），这是你与团队紧密合作的好工具。最后看了这么多学习内容，差点放弃了，不过大家放心。入门很容易，一旦您完成了入门指南，就很容易遵循。这些都是一些技巧，一些工具，掌握就好。真正的难点是工作上的团队合作，代码规范，不断进步。五、参加工作后的几点建议（一）认清自己岗位职责。(2)配合产品经理：了解原型和需求，提出合理建议。(3)配合UI设计：最好和最优的方式是按照UI规划去实现，而不是死死盯着设计图，提出更好的建议。(4)配合其他前端：此时代码规范非常重要，所以从学习前端开始，我就强调在学习之初就养成良好的编码习惯是非常好的，也是很有必要的。(5)自行初步测试：完成一个项目开发后，自行进行初步的功能测试，如果没有问题，再交付给测试人员进行测试。(6)配合测试人员修改bug。(7)积极配合项目产品的后续迭代。(8)当你的水平进一步提高时，你要学会管理前端团队进行工作分配和控制整体质量和交付时间。这是逐步改进的。虽然您现在可能无法访问它，但您可以了解它。
