探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置:首页>小程序资讯
九周从前端入门到前端开发工程师
来源:南京小程序开发 发布时间:2023-09-20点击:104

承蒙大家厚爱,在知乎分享的第一篇文章就点赞、评论破千,收藏破万,也让我涨了快一万的粉丝。如今已经2022年,随着行业的快速发展、技术不断的更新迭代,特意把本文更新一波,供大家参考。如果有需要老师带着学习的,可以私信我

作为一名大三开始自学前端,如今已经工作五年的前端狗,跟大家谈谈我的前端自学之路,以及自己的学习方法,和前端学习资源推荐。本篇为前端入门指导文,各位大神请避让。

前端行业这几年发展飞速,各种框架层出不穷,很多开发者都戏谑说自己学不动了。确实,我们应该充分利用自己的有限时间,好的学习方法和资源非常重要。以下所有方法都是自己踩过坑的总结,保证能让各位在前端学习之路上事半功倍。

写在前面:尽信书不如无书,人工撰写定有纰漏,争议之处可留言讨论

第一阶段的学习:html+css+css3+javascript入门

我知道很多人前端入门都是w3school上学习,我个人是不推荐的。上面的知识点太多,平时工作中跟本用不到。如果你在w3School上从头开始看知识点,你只会边看边忘,效率太低了。记住我们是逼格很高的前端工程师,不要去做死记硬背的工作,用的多了自然就记住了,实在记不住的还有度娘。(入门学习者最爱犯的错误就是纠结,总纠结自己今天学习的某个标签、某个css语法没有记住。我只想说这不是高中考试,还要默写。大概了解就可以,等以后项目做多了,复制黏贴的次数多了,也就记住了)

重点来了,说了这么多,入门我们应该在哪学呢。经过自己的不断采坑发现一个优秀到无法形容的网站,特别是对于前端萌新。它就是绿叶学习网,里面对基础知识的讲解--结构清晰、主次分明。并且网站上都是一些常用功能,其他冷门的知识点作者都过滤了。对于没有任何基础的前端萌新来说,简直是再合适不过了。

里面所有的知识点,作者都进行了归类,特别方便记忆。学习的过程中,你脑中的所有知识点都会条理清晰。自学最难受的就是自己脑中的知识点混乱,又没有人指点。那种无力感,自学过的都知道。并且作者对内容的讲解精确独到,没有故作深奥。每章的总结以及题目也是恰到好处。

所以对于基础篇,你只需要将网站中的HTML+css/css3+javascript看完就可以,练习题跟着敲一敲就ok,对于w3school和菜鸟驿站这类网站只适合当作字典去查询。两周时间也就ok

当你看到这篇文章,发现这个网站,你已经比我节约了一个月的时间。网上其它前端基础类 的讲解网站以及视频,真的像老太太的裹脚布又臭又长。。。

二、html5+javascript高级

过了第一关新手村,有点难度的东西来了,并且这块知识点也是面试问的最多的。(入门学者最爱犯的错误就是在学习框架之后,就把这块给扔掉。一定要记住,这块知识点才是初级前端面试的重点。也是一面必考的知识点).就像造房子一样,这块才是地基.

这里建议新手可以去牛客网上刷刷前端的笔面试题,里面的题库内容很丰富,也有适合新手入门做的,没事的时候就多去去刷刷,不仅能巩固知识点,而且对以后找工作也有很大帮助!

这一趴,我不推荐看文章学习。因为知识点稍微有点复杂,看文字的学习效率没有看视频高,慕课网上有很多视频,讲解也很透彻,会比看文字学习效率高很多。但是价格都不便宜,当初我自学的时候,也是投入了很多钱的。当然网上也有很多免费的视频课程,不过都是过时了的,或者不够系统的。贪这个便宜就是在浪费自己的时间,最后什么都没有学到,得不偿失。需要资源的,可在公众号“前端码头”获取

再啰嗦一句,h5的内容在工作中用到的会比较少,面试问的就更少了,大家了解即可,不用学的太深入.但js高级是面试的c位,初级前端面试js高级占了80%,一定要仔细且深入的去学习.无论做什么事情都是讲究方法的,有轻有重才能事半功倍.

这一趴,两周时间也是ok。对于没有计算机基础的人,时间可能有点紧张,但还是应该逼自己一把。

三、es6+less

es6是ECMAScript的扩展,less是css的扩展。对于初学者来说可能会觉得这块内容比较陌生,看上去高大上很难学的样子,其实它比第二趴的内容简单多了。es6主要就是给我们提供了一些语法糖,让我们在写业务代码的时候更高效.less主要就是让我们在写css的时候,可以和写js一样有逻辑性的书写.可以定义变量可以嵌套书写.......等等(前端初学者最爱犯的错误就是把这块内容想的过于高深)

es6现在还是用的比较普遍的,随着浏览器的兼容性越来越高,公司的项目大部分都是用es6的语法,如果完全不了解,看别人的代码会比较吃力。es6网上的学习资源很多,但我比较推荐阮一峰的es6教程。es6没有萌新想象的复杂,都是一些语法糖,平时工作中用到的也就是promise、module、async等一些功能,初学阶段不必过于纠结原理,会用即可。

scss、less等css扩展性语言,了解一个即可。看完这两个教程,一周足够。。。

当然,如果你觉得这趴内容看文字学习比较吃力,也可以通过观看视频进行学习。

四、vue+VueRouter+vuex+axios

说了这么多,大家最关心的前端框架来了。现在比较火的mvvm框架vue和react。对于萌新来说,我比较推荐vue。入手快、学习成本低、资料全、所有的坑前辈都帮你们踩了,公司的使用率也很高,学完不愁找不到工作。

现在vue3出来了,初学者可能会纠结我到底是学习vue2还是直接学习vue3。我给到的意见是:对于初学者来说,还是应该先从vue2学起。首先,现在公司的项目用的都还是vue2,要完全转到vue3可能还需要几年的时间。其次,现在面试也还是以vue2为主。最重要的是,vue2和vue3在用法上差别不大。所有你走过的路都不是白走的,所有的努力最后时间都会给你馈赠。

对于初学框架,一开始我不推荐看官方文档。特别是对于萌新来说,看官方文档学习,效率会比较低下。官方文档比较全面,涉及的知识点也比较多,很多是刚开始工作用不到的。我还是比较推荐视频学习,高效吸收快。等你入门了,再看文档重新梳理一遍。我的学习方法是从全面再到局部,这样学习的过程中就不会困惑与纠结

网上关于vue及其全家桶的视频很多,但都不太适入门学习者。要不就是一直讲项目,涉及的业务逻辑比较多,知识点较少。要不就是完全讲api的使用,没有实际操作,枯燥也没有整体项目的思维。我之前看过一个vue及其全家桶的视频,是用一个简单的项目,将vue的所有知识点串起来,特别适合萌新。

这趴学完,可能需要三周。


五、vue3+typescript

系统的学完vue2之后,vue3也是需要去了解的,毕竟如今vue3在前端社区这么火,面试过程中也一定会被问到。还有就是typescript,因为vue3是用ts重构的,在前端社区ts的讨论度也逐渐增高,面试中也经常被问道。会的话是很加分的,而且我个人觉得typescript是前端的一个风向,以后也会成为前端开发者的必备技能。

这趴主要是了解一下,半周就够了

六、小程序

现在每个公司都有自己的小程序,毕竟微信的流量太大了,小程序开发也是前端的必备技能了。不过大家不用担心,系统的学完前面的知识,你会发现小程序真的太简单了,腾讯有官方文档以及开发工具,你只需要自己做一个小项目练练手就可以了。需要项目资源的,也可以在文末获取

这趴主要是做一个小程序项目,半周就够了


至此,你已经算是跨入前端这个行业了。但不幸的告诉你这才是万里长征的第一步。想升职、想加薪、想成为大牛,你要学的知识还有太多。

根据按照路线学完的粉丝反馈,我把学习的时间改了下,现在入门到就业平均大家学完需要九周。图片我就不改了,偷个懒(做图太难了)。

三更灯火五更鸡,正是男儿读书时。加油吧


扩展

接下来的内容前端入门可以不用学,等找到工作再学也不迟

webpack + git+node

webpack、git、node属于高级的前端的知识点了,也是前端的分水岭。本来我是不想在入门学习中提及的,但还是希望各位了解下,学习除了深度我们也需要广度。所以作为萌新的你只要会简单的使用就行了,不用去深究。上网看一些入门的博客就好或者入门的视频,我也有一些自己的学习笔记,有需要的可以发给你。

webpack的学习可以看我下面的这篇文章,git和node正在努力输出中

开发工具---vscode

工欲善其事,必先利其器。想要优雅且高效的编写代码,必须熟练使用一款前端开发工具,我个人首推vscode。它的详细使用及配置教程,可以看我的这篇文章史上最全vscode配置使用教程。

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

本文所有资源,都可在公众号“前端码头”获取

  • 上一篇:初级测试工程师(能找到工作的水平就行)1、学多久2、学什么?
  • 下一篇:考研小程序开发前景怎么样?考研小程序用户人群多吗?
  • 版权备注
    最新资讯
    2023-12-08
    微信小程序开发常见问题解答
    (2)选择模板的方式去开发微信小程序,它的开发流程就比较简化,这种开发方式的流程相对简单,当然整个流···
    2023-12-08
    《课题中期报告》PPT模板下载
    《课题中期报告》PPT模板 43页1MB 本文档由 “ 格嫒 ” 提供并上传2021-09-01 ···
    2023-12-08
    蛋糕商家如何为小程序疯狂吸粉,成为人气店铺,诀窍都在这了!
    互联网时代很多蛋糕甜品商家都将视线转向了小程序,临漳县的王先生也是其中之一,他在搭建小程序后,运用五···
    2023-12-08
    微信小程序申请注册会员
    微信小程序是指在微信内部运行的小型应用程序,用户可以通过微信扫描二维码或者搜索小程序名称进入应用程序···
    2023-12-08
    🍉小程序优惠券引流实操
    🍉小程序运营推广引流-优惠券实战篇之前讲了很多小程序推广引流的方法这些方法都只是方向,没经验实操教难···
    随机资讯
    2023-10-16
    抖音、支付宝、微信小程序如何开发?
    现在,我们对抖音小程序并不陌生。很多人想为自己制作一个小程序,他们担心抖音小程序太贵。这是个误会。事···
    2023-09-23
    使用滴滴打车小程序【快的新出租】打车后,无法在小程序内开发票
    首页>详情 使用滴滴打车小程序【快的新出租】打车后,无法在小程序内开发票 发布于 2022年01月2···
    2023-09-07
    中免海南小程序怎么退单
    一、线下购买很多小伙伴在线下免税店购买商品后想要取消订单,可以在机场隔离区提货时申请退货,一般来说,···
    2023-09-04
    微信小程序,教培的春天
    导 语小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下···
    2023-09-13
    迪卡侬小程序发什么快递
    迪卡侬小程序发什么快递顺丰快递。迪卡侬小程序快递发货声明中显示,迪卡侬小程序为了昂顾客更快拿到商品,···
    友情链接: 南京网站建设 南京小程序开发 北京网站建设 网站仿制 深圳小程序开发