web前端入门指南：来看看这位大佬的学习之路吧！

- 日理万妓 2022-12-20 08:35 99阅读 0赞

开始他的表演

第一章：为什么要学习前端开发？web前端开发是什么？

从事前端开发工作差不多3年了，自己也从一个什么都不懂的小白积累了一定的理论和实践经验。编写《Web前端入门指南》系列文章，主要是为了给准备入门的新手一些建议（比如：该学习些什么？学习的步骤如何？一些注意的事项？入门打牢基础，进阶掌握当前流行的技术，找工作必备的一些技能是什么？），并且自己也对这3年来的学习实践历程有一个梳理，以供后面来细细回忆品味。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
1、为什么要学习前端开发？

你可能是因为兴趣，完成一个网站、页面、功能的成就感。你也可能是因为现在前端岗位火爆，就业率高。不管是因为什么，只要找准了目标，学就是了！

2、Web前端开发是干什么的？有没有“钱”途？

（1）定义：前端开发就是将UI设计师设计好的界面实现，即用一些前端方面的语言（HTML、CSS、jQuery等等）将UI设计变成可以与用户交互的网页；

（2）岗位职责：参与原型需求讨论会议，从前端和用户交互的角度提出一些自己的建议和意见；与产品经理沟通梳理确认原型及需求；与UI设计师沟通，更好的实现界面；与后台开发人员沟通，实现数据的交互；配合测试人员，解决bug；配合整个团队，对项目后续的迭代进行开发等工作；

（3）“钱”途：前端工程师目前岗位火爆，只要掌握了真正的前端知识，而不是泛泛而谈，找工作也相对比较轻松，薪资也是比较可观的。当然，刚刚入门，我的建议是不要太看重薪资，最应该看中的是有没有好的环境和平台可以学习到更多。当你在好的环境好的平台学习到更多，积累了一定经验之后，薪资真的挺简单。不要被刚刚开始少得可怜的薪资所打败，从而放弃，如果你真的想要进入这行，坚持下去吧。未来回过头来，你会发现，一切就都是这么简单明了了。

3、如何入门？

前面说了一堆的废话，见谅。究竟该怎么开始入门，从哪着手，在《Web前端入门指南》系列后续文章里面，我会一一道来。从打好基础学什么，进阶该如何，有些什么网站资源可以学习，目前流行的技术有哪些，公司真正需求的是什么前端人才等等方面提出自己的意见和建议。

作者也是第一次写这类文章，如果有什么错误请指教，我会很乐意学习的，毕竟大家都是互相学习，互相进步。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

第二章：学习建议

在你开始入手学习前，有一些小的建议。根据我自己学习的经验发现，这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的。还有就是开始学习前，建议可以先花几天时间，查找一些如何入门的文章，通过对许多文章及前人的建议。整理出适合自己学习的一套完整计划，然后在学习过程中，在自己对前端更加了解之后，做出一些计划的调整。我相信，在这样的计划学习之下比一来就开始学习具体知识要快速有效得多。

（1）贵在规范：代码规范，不是说小白时期不重要，正是什么都不懂的时候，才要严格执行学到的规范。徐徐渐进，等到学有所成，渐渐地形成一套自己的代码风格

（2）贵在手写：最开始学习建议手写代码，哪怕只有一行代码，也要一个字母一个空格的敲打出来

（3）贵在动手：哪怕只有一行代码的事例，也要手动编写运行，而不是眼高手低，哦，好简单会了，就不动手了

（4）贵在基础：只有小白阶段把基础打好了（比如：HTML、CSS、Jquery），后续进阶难关才会更好克服

（5）贵在坚持：在觉得最难的时刻，坚持一下，天空会完全不一样

（6）贵在计划：制定相应的计划，并严格执行，否则一般学习效果大打折扣

（7）贵在一步一个脚印：前端要学习掌握的知识非常多，需要跟着计划一步一个脚印，由易到难

（8）以上：是个人学习时的总结，如果能够较好的遵循，学习效果和后续的进阶方面，有大大的帮助。当然适合自己的方法方式才是最好的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
小白阶段怎么学

这个阶段的你，应该是什么都不会，或许连前端大概是做什么都不知道。或许只是听说这个岗位火爆，好找工作，所以你想学习。也或许你看到一个精美的网页，你开始好奇了，感觉实现它是很美的一件事，你想了解怎么样做出来的。如果你想知道怎么入门，可以看看接下来的建议和意见。这是通过还是小白的自我学习阶段到胜任前端岗位这个过程中，积累的一些经验，希望能够有所帮助。

1、建议的学习步骤

（1）HTML标签（网页结构标记语言） +CSS样式（网页样式语言）。它们是实现静态Web应用最基础的语言，掌握好它们，你可以编写出一个简单的模块（如导航等）甚至一个完整的静态网页。

（2）Jquery库（Javascript编程语言的一个必须掌握的库）。它可以让你之前做的静态网页“动起来”，比如（下拉二级菜单、网页右侧工具导航的展开等等交互特效）。

（3）建议花时间看看《DOM编程艺术》这本书，或这类书籍。它是关于Javascript编程语言在网页开发上面的运用，跟着这本书走下来，你可以编写一个简单的具有交互效果的网站了。

2、一些学习资源的建议

（1）w3cshool网站，基础性学习的网站，比较适合小白系统学习最基础的入门。它还有试一试功能，可以让你在线编辑代码，修改代码，实时看到展示变化，富有一定的趣味性。

（2）菜鸟网站，找到对应学习内容，也是一个不错的基础学习网站。和上面的w3cshool一样，同样具有实践在线编写实时变化展示的功能。

（3）书籍，如《DOM编程艺术》，跟着它认真反复学习并动手输出，最后你可以做出一个简单的具有简单交互效果的网站。

以上几点就是小白最开始入门学习的东西，建议按照顺序学好这三种语言。可以使用sublime编辑器进行动手编写。当你根据学习步骤（3）完成一个小小的网站时，你会觉得很有成就感，后续的学习也就信心百增，兴趣百倍。

第三章：学习资源，学习路线

相信经过前面两个章节的探索，如果你能坚持下去并按照建议学习，应该已经完成了第一个自己动手实现的网站了吧。这一章是对接下来的一些初步进阶学习的建议，完成这一章我们应该算是真正踏入了前端的大门，之后就可以随君遨游飞翔了！

1、完善我们的基础知识

（1）HTML5，更高级的标记语言，功能更加丰富多彩。新增许多标签，比如：canvas、video等，可以自己实现更多的动画，炫酷的特效或者播放视频等等。

（2）CSS3，更高级的样式语言。你可以实现丰富多彩的页面动画，不必要每次都是用js，使用CSS3就可以轻松便捷的实现一些想要的网页交互。

（3）重中之重，javascript编程语言。这是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
（4）开始学会使用一些前端的框架，这里我是指前端的UI框架，它们可以帮助我们快速高效的开发一个网站，并且界面风格也好不错。比如PC端的Bootstrap，其实它是响应式的框架，也可以用在移动端H5页面，或者AmazeUi，这是一款专注于移动端的框架。你可以百度也可以在对应框架的官网查看文档，当你学会使用某个框架的时候，其他的n+1个各种各样的前端UI框架，你也会信手拈来。

（5）还有一种前端框架，如layui这类的，算是工具类框架。它里面包含了分页效果、弹窗效果、日期选择控件等等内容。当你学习到这个时候或者更后面的学习里，你可以去学习如何使用，能够更高效的帮助你完成项目的开发。

（6）通过百度，可以找到许多网页交互特效的插件，如二级菜单下拉特效、手风琴菜单、图片轮播、弹窗效果等等。下载它们源码及示例，动手学习使用或模仿它们的效果，可以帮助我们快速实现一些比较复杂的交互特效。现在有非常多的免费开源插件，让我们不用再重复造轮子，直接使用就很方便。当然，我的建议是当你学会使用某个特效插件时，你可以学习它的源码，看看效果究竟是如何实现的。这也是巩固学习javascript语言的好方法，你值得拥有哦。

（7）到了这一步，你算是基本掌握了前端开发的一些知识技能。你可以找到一些典型的官网来仿写它们的界面和交互特效，如京东官网、淘宝官网等等。认真写几个这样的官网首页，可以进一步巩固和完善之前的学习到的知识。

2、一些学习资源建议

（1）基础知识学习的网站依旧是w3cshool、菜鸟网站等等。

（2）B站、慕课网、极客网等IT技术视频教学网站，比如慕课网，里面有很多不错的免费视频，如果觉得之前的学习太过枯燥或有些困难。那么这类网站里面的视频教程，可以让你学习上手起来容易得多。

（3）对于一些前端框架的学习，你可以百度，还可以进入它们的官网，学习它们的官方文档。跟着例子一步一步来做，多做多练，很容易熟悉和使用。

（4）一些特效插件也可以百度，这里也推荐一个收集许多特效的网站。http://www.jq22.com/这是一个js、jquery特效插件库网站，里面的特效很多我们都可以用到。

最后，相信经过这一章的系统学习，你会有很不一样的成长和进步。加油！要相信前端学习入门是很容易的。

第四章：继续学习（终章）

当你可以完成一个基本的带有交互效果的页面之后，参加工作中进一步提升自己就是需要掌握一些流行的前端开发JS框架及高效流行的开发模式。相信到了这一步，你已经成功迈入了前端的大门，接下来就是为了如何成为工作中的主力前端工程师而修行了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
1、常用的一些前端JS框架建议

（1）vue.js，一款偏向于移动端的JS框架，轻量级。数据驱动交互，学习起来非常容易，它可以不依赖与Jquery框架独立使用帮助你开发一个友好的移动端界面。一个前端开发必要掌握的技能，一款流行的JS框架。关于如何使用掌握它，你可以百度，还可以去它的官网学习官方文档，或者是菜鸟网站也有介绍。

（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），是比较多的互联网公司团队，都会采用的。值得去深入学习，并且当你掌握后，你会发现开发前端项目原来可以这么简单。

保持学习状态不断进步

以上的文章都是一些入门的建议。当然贯穿你学习中和以后的工作中，你可能还学要掌握一些其他的必备技能。如：

（1）学会百度很重要。

（2）学会UI设计文件PSD切图（必备技能，学会看UI设计交付给你的设计图）。

（3）学会使用谷歌或火狐浏览器的F12开发者模式，在开发过程中快速调试找到问题。

（4）学会与后台配合进行数据接口的调试，及解决一些跨域的问题（如：nginx的配置使用）。

（5）学会不同项目使用不同最佳的开发工具（sublime、editplus、hbuilder、vsCode等等）。

（6）学会使用版本控制工具（如：svn），你与团队紧密配合的好工具。

写在最后

这么多学习内容看下来，是不是都快放弃了，但是不要担心。入门很简单，做好入门指南1、2章之后，后续就会变得容易起来。这都是一些技术，一些工具，掌握它就好了。真正的难点是工作中的团队配合，代码的规范，以及不断的进步。

1、参加工作后，一些建议

（1）认清自我岗位的职责。

（2）与产品经理的配合：了解原型及需求，提出自己合理的建议。

（3）与UI设计的配合：根据UI规划怎样实现才是最好最优的方式，而不是拿着设计图就埋头苦干，提出更好的建议。

（4）与其他前端配合：这个时候代码规范特别重要，所以从一开始学习前端的时候，我就强调了在学习之初就形成良好的编码习惯是很不错的，很必要的。

（5）自我的初步测试：完成一个项目开发后，自我进行功能性的初步测试，无问题后再交付测试人员测试。

（6）配合测试人员，修改bug。

（7）积极配合项目产品的后续迭代。

（8）当你的水平进一步提升，你就要学会管理一个前端团队进行工作的分配和整体质量及交付时间的把控。这个是一步一步提升的，虽然现在你可能还接触不到，但是可以了解一下。

![在这里插入图片描述][20201111143738628.png_pic_center]  
前端开发日新月异，只要我们把最基础的知识掌握好了，尤其是javascript编程语言。无论它出现多少的开发框架，我们都可以快速掌握并使用它。当然使用这些框架或工具来开发项目只是我们必备的岗位技能，我们进一步需要学习的是如何掌握工作技巧，并且每天都有所进步，不管是技术上面还是项目管理上面。只有不断学习不断进步，保持成长性的思维，才不会被岗位和社会所淘汰。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/af668363296f4c5e87211976153b92db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/fd66f292f57244588bac204f57d065e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/36f51af2796e43b08aaae8b445496c87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201111143708523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[20201111143738628.png_pic_center]: https://img-blog.csdnimg.cn/20201111143738628.png#pic_center