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

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

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

第一阶段的学习: htmI+css +javascipt入门

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

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

里面所有的知识点,作者都进行了归类,特别方便记忆。学习的过程中,你脑中的所有知识点都会条理清晰。自学最难受的就是自己脑中的知识点混乱,又没有人指点。那种无力感,自学过的都知道。并且作者对内容的讲解精确独到,没有故作深奥。章的总结以及题目也是恰到好处。所以对于基础篇,你只需要将网站中的HTML + css + javascript看完就可以,练习题跟着敲一敲就

ok,对于w3school和菜乌驿站这类网站只适合当作字典去查询。周时间也就ok

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

二、html5+css3+javascript高级

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

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

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

三、es6+sass

这块的内容属于扩展的内容,es6是JavaScript的扩 展,sass是css的扩 展。对于入门学者来说可能会觉得这块内容比较陌生,看上去高大上很难学的样子,其实它比第二趴的内容简单多 了。(前端学习者最爱犯的错误就:是把这块想的过于高深)

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

sass、less等css扩 展性语言,了解一个即阿。绿叶学习网上就有sass入门教程,过-遍即呵。看完这两个教程,-周胞够。。。

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

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

四、vue +VueRouter+Vuex+ axios

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

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

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

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

根据按照路线学完的粉丝反馈,我把学习的时间改了下,现在入i ]学完需要的是七周。标题和图片我就不改了,偷个懒。再灯鸡,男儿读时。加油吧

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

webpadk + git+node

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

开发具一vscode

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

2021年怎么自学前端?相关推荐

  1. 是自学前端还是培训学前端?

    "学web前端是自学好还是去培训机构,哪个靠谱?" 类似的问题应接不暇,包括前段时间逛知乎,关于这个话题的热度,还是居高不下. 都快2021年了,匆匆入场的人还是很多,尤其是在校大 ...

  2. grep从文件末尾开始找_新人自学前端到什么程度才能找工作?

    这个问题打我记事起到现在,问过我的人,没有1000也有800了.足以见得这个问题是多么的不得人心. 自学前端开发,不管他在网上百度了多少资料,看了多少教程,你总得先做个网页出来.所以,很多人都是从ht ...

  3. 如何系统地自学前端(女生),女生发展前端是否是青春饭?

    看问题描述,题主应该对互联网开发了解的不多,题主问的就是两方面: 1.女生如何自学前端? 2.女生如果从事前端开发这个工作能不能长远的发展? 最初我入行的时候也有这样的担忧,很正常. 网上大力鼓吹兴趣 ...

  4. 自学前端真的没有前途吗?

    现在全职从事前端工作,到20年年底整6年,在做前端之前,我是那种跟在销售后面,他投标,我负责把他吹的牛逼变出来的板儿砖型程序员,什么语言和技术栈,根本不是借口,deadline放在那里,让你今天学一个 ...

  5. 自学前端,一天学4个小时左右,能到什么水平?

    自学前端,你的学习时间不是最主要的 而是你拿着这些时间做了什么 如果只是简单的看一些理论知识,没有实际操作 那是远远不够的 如果你是拿这些时间全部用来写demo,折腾一些实战项目 那用不了多久,你水平 ...

  6. 自学前端,需要学习哪些知识点?学多久可以入职前端工程师?

    假如有那么残酷的一天,我不小心喝错了一瓶药,一下子抹掉了我这十多年的编程经验,把我变成了一只小白.我想自学 前端,并且想要找到一份工作,我预计需要 6 个月的时间,前提条件是每天都处于高效率的学习状态 ...

  7. 自学前端很难吗?只要你足够努力,高中学历也能获得offer

    这是一位粉丝朋友分享的他的故事,很感人,希望以此激励那些转行前端现在却很吃力的朋友们. 正文开始: 不得不说,我的人生比很多人都要黑暗,我是2014届的本科生,但是本科我只读了三年就中途退学了. 当时 ...

  8. 0基础自学前端好,还是报班培训好?

    0基础自学前端好,还是报班培训好? 1.自学 优点: 1.自我分析问题和自我解决问题的能力比较的强:自学要自己的找学习资料,学习要自己的摸索学习,学习中遇到的问题要自己去分析,自己去解决. 通过自学成 ...

  9. 自学前端两三个月,很迷茫,有大佬可以指导吗?

    自学前端两三个月,很迷茫,有大佬可以指导吗? Web前端工程师已经成为互联网公司,最亲睐的对象,不管是起薪还是薪资涨幅,都居所有互联网行业职位之首,成为互联网行业最有"钱"景职位! ...

最新文章

  1. 初探Tomcat的架构设计
  2. php与mysql店事物处理_PHP与MYSQL事务处理
  3. boost::subgraph用法的测试程序
  4. 腾讯云服务器性能测试心得经验总结
  5. Android 四大组件 与 MVC 架构模式
  6. android wifi 静态地址设置_安卓手机连接wifi故障的6种常见解决方法
  7. cassandra vs mongo (1)存储引擎
  8. Nginx从入门到精通(全)
  9. Python爬虫入门教程24:下载某网站付费文档保存PDF
  10. 华为云/dev/vdb磁盘挂载
  11. 计算机网络说明文,《Wi-Fi》初中说明文阅读题及答案
  12. python:defaultdict 对象
  13. 鼠标点击按钮相应两次
  14. c语言基础题(笔记二)
  15. 消息队列mq的原理及实现方法
  16. Python可视化:中国环保股上市公司市值Top20强
  17. 解压oracle 失败,CentOS5.9 安装oracle 11g 遇到的各种问题
  18. python循环引用解决 cannot import partially initialize
  19. 小米扫地机器人充电座指示灯不亮_扫地机器人常见问题及故障排除
  20. INFOCOM和SIGCOMM会议信息

热门文章

  1. 二次优化问题dfp_MATLAB优化问题应用实例讲解
  2. 9.jsonp的实现原理
  3. WindJS 中的$await
  4. 《Spring Boot官方指南》28.安全
  5. elixir 关键字列表
  6. 编写MR代码中,JAVA注意事项
  7. 1.22 OSS旧IP下线公告
  8. Windows音频编程:Win32 Wave API 的使用
  9. 2月第三周各国家.NET域名排名Top10:中国第三
  10. STL map常用操作简介