开始他的表演第一章:为什么要学前台开发？什么是web前台开发？从事创业工作快3年了，从一个一无所知的小白，积累了一定的理论和实践经验。 写“Web前台入门指南”系列文章，主要是给初学者一点建议(比如应该学什么？学习步骤如何？一些注意事项？打牢入门基础，提前掌握当前流行的技术，找工作必备的几项技能是什么？)，而且我把这三年来的学习实践课程整理了一下，以便以后回味一下我的味道。 1.为什么要学前台开发？你可能对完成一个网站、页面或功能的成就感感兴趣。 你也可能是因为热门的前台职位和高就业率。 不管是什么，找准目标学就行了！2.Web前端开发是为了什么？没有“钱”途？(1)定义:前端开发就是实现UI设计师设计的界面，也就是使用少量的前端语言(HTML、CSS、jQuery等。)把UI设计变成可以和客户互动的网页；(2)工作职责:参加原型需求讨论会，从前台与客户互动的角度提出少量建议和意见；与产品经理沟通，整理并确认原型和需求；与UI设计师沟通，更好的实现界面；与后端开发者沟通，实现数据交互；与测试人员合作处理bug；配合整个团队开发项目的后续迭代；(3)“钱”的方式:前台工程师目前比较热门，只需要掌握真正的前台知识，而不是泛泛而谈。找工作比较容易，他们的工资也比较可观。 当然，刚入门，我的建议是不要太在意薪资。最重要的是看有没有一个好的环境和平台去多学习。 当你在一个好的环境和平台多学习，积累了积极的经验，工资真的很简单。 不要一开始就被微薄的工资打败，从而放弃。如果你真的想进入这个行业，那就坚持下去。 未来回首，你会发现一切都是那么简单明了。 3.如何入门？前面说了很多废话，请见谅。 最后如何入门，从哪里入手，我会在《Web前台入门指南》系列后续文章中一一告诉你。 从以下几个方面提出自己的意见和建议:基础学什么，如何进阶，可以学习哪些网站资源，目前有哪些热门技术，公司真正需要哪些前端人才。 这是作者第一次写这种文章。如有错误，请指教，我乐意学习。毕竟大家都是互相学习，互相进步的。 第二章:学习建议在开始学习之前，有几个小建议。 根据我自己的学习经验，这些建议对我现在乃至未来的职业生涯都有很大的帮助。 还有一个建议，你可以在开始学习之前，花几天时间找少量关于如何入门的文章，对很多文章和前辈提出建议。 整理出一套完整的适合自己学习的计划，在对前台有了更深入的了解后，再在学习过程中进行少量的计划调整。 我相信在这样有计划的学习下，比一开始就开始学习具体知识要快得多，也有效得多。 (1)代价就是规范:代码规范，不是说白期不重要，而是在什么都不懂的时候，要严格执行学过的规范。 渐渐地，直到你学到了一些东西，你会逐渐形成一套自己的代码风格。(2)你的笔迹很重要。刚开始要学会建议手写代码，哪怕只有一行代码，也要敲出来一个字母一个空格。(3)你的手很重要。哪怕只有一行代码，也要手动编写运行，而不是眼高手低。哦，太简单了。不要这样做。(4)你的基础重要:只有你在小白阶段打下了良好的基础(比如HTML、CSS、Jquery)，你才能更好的克服后续前进的困难。(5)你的坚持:在你觉得最困难的时候，你的坚持会让天空完全不同。(6)你的计划重要:制定相应的计划并严格执行，否则一般的学习效果会大打折扣。你的计划很重要。要按照计划循序渐进，由易到难(8)或更多:是个人学习的总结。如果能很好的遵循，对学习效果和后续进阶方面都有很大的帮助。 当然，适合自己的方法是最好的。 如何向现阶段的小白舞台学习？你应该什么都不知道，或者可能连前台都不知道怎么办。 可能你只是听说这个职位比较热，好找工作，所以想学习。 或者你看到一个漂亮的网页，你开始好奇。你觉得实现它是一件美好的事情，你想知道如何去实现它。 想知道如何入门，可以看看下面的建议和看法。 这是小白从自学阶段到胜任前台的少量经验积累吗？希望能有所帮助。 1.建议学习步骤(1)HTML标签(web结构标记语言)+CSS样式(web样式语言) 它们是实现静态Web应用程序的最基本的语言。如果你很好的掌握了它们，你可以写一个简单的模块(比如导航等。)甚至是一个完整的静态网页。 (2)Jquery库(Javascript编程语言必备库) 它可以让你之前的静态网页“动”起来，比如(下拉二级菜单，开发网页右侧的工具导航等交互特效)。 (3)建议抽时间看看《DOM编程艺术》这本书，或者这一类书籍。 是关于Javascript编程语言在web开发中的应用。按照这本书，你可以写一个简单的具有交互效果的网站。 2.少量学习资源建议(1) W3C学校网站，一个基础学习的网站，比较适合最基础的介绍小白系统学习。 它还具有try功能，允许您在线编辑代码，修改代码并实时查看更改。绝对有意思。 (2)菜鸟网站，找相应的学习内容，也是不错的基础学习网站。 和上面的w3cshool一样，也有在线写实时变化的功能。 (3)书籍，比如《DOM编程的艺术》，认真反复跟着读，手工输出。最后可以做一个简单的网站，有简单的交互效果。 以上几点是小白一开始就开始学习的。建议按顺序学好这三种语言。 可以用sublime editor自己写。 当你按照学习步骤(3)完成一个小网站的时候，你会有很大的成就感，你对后续学习的信心和兴趣会增加百倍。 第三章:学习资源，学习路线我相信经过前两章的摸索，如果你能坚持下来，按照建议去学习，你应该已经完成了第一个自助网站。 这一章是对接下来几个初步进阶的建议。写完这一章，我们就真的要踏入前门了，然后我们就可以和你一起飞了！1.提高我们的基础知识(1)HTML5这种更高级的标记语言，功能更丰富多彩。 添加许多新标签，如画布、视频等。，而且可以自己实现更多的动画，酷炫的特效或者播放视频。 (2)CSS3，更高级的风格语言。 可以实现多彩的页面动画，没必要每次都用js。使用CSS3可以简单方便地实现少量想要的网页交互。 (3)最重要的是javascript编程语言。 这是前台必须掌握的语言，真的可以算是编程语言。学会灵活运用javascript，对以后的学习有很大的帮助。 掌握它最重要的是先学习基础知识，然后通过不断的实战来提高我们的编程技巧和逻辑思维。 这一块的学习一直持续到我们真正掌握，能够灵活运用。 如果前一两次研究后发现没有改进的空间，可以暂时搁置。 继续下面的学习，javascript贯穿我们的前台工作，在后续的学习实施中会遇到和锻炼。 真正学起来不难，关键是灵活运用。 (4)开始学习使用少量的前端框架，这里我指的是前端的UI框架。他们可以帮助我们快速高效的开发一个网站，界面风格不错。 比如PC上的Bootstrap其实就是一个响应式的框架，也可以用在手机上的H5页面，或者AmazeUi，这是一个专注于手机的框架。 可以在百度或者相应框架的官网查看文档。当你学会使用某个框架的时候，剩下的n+1个各种前端UI框架就可供你使用了。 (5)还有前台框架，比如layui，可以看作是工具框架。 包含分页效果、弹出效果、日期选择控件等等。 当你在这个时候或者以后学习的时候，你可以学习如何使用它，它可以帮助你更高效地完成项目开发。 (6)通过百度可以找到很多网页交互特效的插件，比如二级菜单下拉效果、手风琴菜单、图片轮播、弹出效果等等。 下载它们的源代码和例子，学习如何使用或者模仿它们的效果，可以帮助我们快速实现少量复杂的交互特效。 现在有很多免费的开源插件，不用反复造轮子，直接用就方便了。 当然，我的建议是，当你学会使用一个特效插件的时候，你可以学习它的源代码，看看效果是如何实现的。 也是巩固学习javascript语言的好方法，你值得拥有。 (7)至此，你已经基本掌握了前台开发的少量知识和技能。 你可以找几个典型的官网来模仿他们的界面和互动特效，比如JD.COM官网、淘宝官网等等。 认真写几个官网的这些首页，可以进一步巩固和提高之前学过的知识。 2.少量学习资源建议(1)基础知识学习的网站还是w3cshool，菜鸟网站之类的。 (2)Geek.com course.com、哔哩哔哩、海量开放在线等IT技术视频教学网站，比如海量开放在线course.com，有很多不错的免费视频。如果你觉得之前的学习太枯燥或者太难， 那么这类网站的视频教程可以让你学习入门容易很多。 (3)对于少量前端框架的学习，可以去百度或者进入他们的官网学习他们的官方文档。 一步一步跟着例子走，多做多练，很容易熟悉和使用。 (4)少量特效插件也可以百度。这里也推荐一个收集了很多特效的网站。 Http://www.jq22.com/是一个js和jquery特效插件库网站，里面的很多特效都可以为我们所用。 最后，相信经过本章的系统学习，你会有一个非常不一样的成长和进步。 加油！我相信在前台很容易学会。 第四章:继续学习(最后一章)当你能够完成一个基本的具有交互效果的页面时，掌握少量流行的用于前台开发的JS框架和高效流行的开发模型，在工作中进一步提升自己是很有必要的。 相信至此，你已经成功踏入前台大门，接下来就是为如何成为工作中的主要前台工程师而练习了。 1.几个常用的前端js框架建议(1)vue.js，偏向手机端的JS框架，轻量级。 数据驱动的交互非常简单易学，它可以帮助你开发一个独立于Jquery框架的友好的手机界面。 前台开发必备技能，流行的JS框架。 关于如何使用和掌握，你可以去百度，或者去它的官网学习官方文档，甚至菜鸟网站都有详细介绍。 (2)react.js，相对于vue，稍微复杂一点，重量级一点，但是实现大型项目也是快速方便的。 掌握它也成为很多公司的入职要求。相信学了vue这样的数据驱动框架以后，学这个会容易很多。 与通常的jQuery开发项目相比，vue和react的开发关键在于思路会发生变化。掌握面向对象和数据驱动的交互会让你觉得开发起来更容易，更友好。 如何掌握，百度、菜鸟网站、官网文档都是不错的选择。 2.对流行的开发模式的建议:(1)集成开发1)vue+web pack；(2)2)react+web pack的集成开发；(3)学习和应用3)node.js，一个可以使用javascript语言开发后端的工具；(4)集成开发4)weex+web pack；目前很少有公司使用(5)angular.js，它和vue.js差不多，但目前很少看到上面的开发框架和开发模式(1)、(2)、(3)被使用过，被更多的互联网公司团队采用。 值得深入学习，等你掌握了，你会发现开发前端项目也可以这么简单。 保持学习状态，精益求精。以上文章是几点入门建议。 当然，在你的整个学习和未来的工作中，你可能会学会掌握其他一些必要的技能。 学习百度很重要。 (2)学会如何用PSD裁剪UI设计文档的图纸(必备技能，学会看UI设计交付给你的设计图纸) (3)学会使用Google或Firefox的F12开发者模式，快速调试，发现开发过程中的问题。 (4)学会与后端调试数据接口，处理少数跨域问题(如nginx的配置和使用)。 (5)学会针对不同的项目使用不同的最佳开发工具(sublime、editplus、hbuilder、vsCode等。) (6)学会使用版本控制工具(比如svn)，这是你和团队紧密合作的好工具。 最后写了这么多学习内容，是不是都快放弃了？但是不用担心。 入门很简单。完成《入门指南》的第1章和第2章后，后续工作将变得更加容易。 这是少量的技术，少量的工具，掌握就好。 真正的困难是工作中的团队合作、代码标准化和持续改进。 1.参加工作后，给出少量建议:(1)认清自己岗位的职责。 (2)配合产品经理:了解原型和需求，提出自己合适的建议。 (3)配合UI设计:根据UI规划，如何实现才是最好的方式，而不是和设计图一起努力，提出更好的建议。 (4)配合前台的其他工作:此时代码规范尤为重要，所以从学习前台开始，我就强调在学习之初养成良好的编码习惯是非常好的，也是必要的。 (5)自我初步测试:完成一个项目的开发后，进行自我功能初步测试，如果没有问题，再交付给测试人员进行测试。 (6)配合测试人员修改bug。 (7)积极配合项目产品的后续迭代。 (8)当你的水平进一步提高，你要学会管理一个前台团队分配工作，控制整体质量和交付时间。 这是一个循序渐进的进步。虽然现在可能接触不到，但是可以理解。 目前在做前台开发。如果你现在想学习前台开发技术，并且遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙3000人:前:851中:231末:348。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 前台发展日新月异，只要掌握了最基础的知识，尤其是javascript编程语言。 不管它有多少开发框架，我们都能快速掌握和使用。 当然，使用这些框架或工具开发项目只是我们必备的工作技能。我们需要进一步学习的是如何掌握工作技能，天天向上，无论是技术还是项目管理。 只有不断学习进步，保持不断成长的思维，才能不被岗位和社会淘汰。