2024年零基础前端学习路线(本人亲身经历,9个月拿到拼多多(1)

个人想法,其实真没必要对于编辑器过于纠结,毕竟只是一个工具,大佬用txt都可以编写代码,在前期学习阶段可以选定一个坚持使用,等到学有所成,对于编辑器有着个人更独特的要求再去选择更适合自己的编辑器。

HTML

学习资料:绿叶学习网 HTML入门教程 以及 《零基础入门学习Web开发》(HTML5&CSS3)(小甲鱼)

HTML的入门知识可以在 绿叶学习网 HTML入门教程 上通读一遍,保证对于html元素标签有一个大概的认识。

不用太刻意去记,这些元素都会在今后的实践中不断加深印象,刻意去背消耗过多的时间并且挫伤积极性,但是阅读的同时自己跟着教程在编辑器里敲一下代码,既能加深记忆,又可以从中获得成就感。

HTML5先学习一下语义化标签,然后了解存储方式的区别,canvas和音视频可以留到之后有需要再深入学习。

CSS

学习资料:绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程

CSS的入门知识也可以在 绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程 上通读一遍,保证对于CSS样式有一个大概的认识,也是不用刻意去记,道理同上。

静态页面

学习步骤:freeCodeCamp => pink老师的品优购电商项目

freeCodeCamp 可以加深HTML和CSS的记忆,相当于对于之前的学习的一个阶段性复习,个人的学习建议是学习响应式WEB设计(除响应式 Web 设计原则)的内容。

个人尝试去做的静态页面还有pink老师的品优购电商项目,基本完成这个页面就可以进行JavaScript的学习

JavaScript

**学习步骤:绿叶学习网 JavaScript入门教程 =>

ECMAScript 6 入门教程 ---- 阮一峰 =>

《JavaScript高级程序设计》第四版**

结论放在最前,先学习绿叶学习网的JavaScript入门教程,再学习ES6几个常用的新特性,就可以继续之后框架板块的学习。

对于ES6没有详细阅读的部分以及JavaScript红宝书,可以在之后有一定了解再深入学习。

JavaScript绝对是前端的灵魂所在,是前端工程师的基础所在,值得在职业生涯中一直保持深入学习。

假如你有其他编程语言的基础,那么绿叶学习网只是作为你对于JavaScript这门语言的引路人,简单过一遍就能对于这个相对直观的编程语言有一个基本了解。

假如你之前没有其他编程语言基础,那么请伴随着百度搜索仔细阅读咀嚼自己不能理解的部分,打好JavaScript的基础对于今后的学习有着很大的帮助。

ES6是一个很庞大的板块,可以不用全篇精读,主要了解一下,变量的解构赋值,变量声明,箭头函数,欢迎来看看我的另一篇博客 —— ES6你不得不知道的新特性,这是对于今后观看其他视频学习前端会高频提到的几个ES6新特性,不知道会影响之后的学习。

《JavaScript高级程序设计》第四版,这是最新最权威的学习书籍,但是由于其厚重性,我并不建议一上手就阅读它,很容易被劝退。但是不可否认,它作为最全面最官方的解读,能让你对于JavaScript这门语言获得最精准的理解。我的建议是作为字典类辅助书籍,有空的时候可以翻翻深入巩固自己的JavaScript基础,没空的时候先不做强制阅读。在今后的学习中,如果遇到在网上无法求解的疑惑的时候可以尝试在其中寻找答案。

三大主流框架


以下是三大主流框架,我个人的选择是VUE,所以对于VUE的学习路径会相对详细些,关于每个框架的优缺点网上测评的有很多,感兴趣的朋友可以去搜搜看。

个人的一些拙见:

  • Angular个人是不建议初学者上手学习,使用的人数基数小,不容易找到实习;

  • REACT适合JavaScript基础比较扎实的人,由于生态很好,构建项目技术选型更像一个开放题,遇到问题也有很多的解决方案,很多大厂都在使用。

  • VUE在中国受众更广,门槛低,由于开发者尤雨溪是中国人,因此中文版文档阅读起来更为轻松,也有大厂在使用,比如美团和阿里。

总而言之,VUE更容易,REACT相对自由度更高,效果更好。

VUE

学习资料:4个小时带你快速入门vue => 2019年最全最新Vue、Vue.js教程,从入门到精通 => VUE源码阅读

这里搬运一下尤大大的 官方文档Github仓库 ,阅读文档的必要性还是很大的,至少我博客中vue-router很大程度都是阅读官方文档总结出来的。

第一个视频能够带你入门VUE,几个小demo自己动手试试能进一步加深印象。

第二个视频则是我认为最佳的VUE教程,由浅入深的讲解VUE,至于视频后期的项目,可以辩证选择,我觉得电商没啥意思,所以我找了一些其他自己感兴趣的项目去做,不过此时一定要做项目实践巩固一下这段时间VUE框架的学习。

学完以上两个视频就可以开始准备实习的投递,但是由于对于原理的理解不够和JavaScript的基础不扎实,所以大厂的实习通过的难度不小,所以可以在刷面试题的同时阅读VUE源码,能够应对大多VUE的面试题,就算没有询问到这方面的问题,自己提及也可以作为自己面试的闪光点。

REACT

学习资料:React学习路线----技术胖

我是因为拼多多是使用REACT技术栈才开始学习REACT,也是今年(2020年)11月刚刚起步,我觉得技术胖的学习路线很不错,内容也很新,大家可以批判借鉴。

还有一个视频我觉得也很适合初学者快速上手,大家有兴趣也可以批判借鉴。最全的react视频【黑马程序员】

不过,我觉得技术胖的实战项目更多立足于UI本身,而不是立足于处理数据交互,因此我并不打算尝试,而是选择打算尝试神三元的掘金小册,具体效果要等我尝试之后才可以确认。

React Hooks 与 Immutable 数据流实战

Angular

我也没学过,我也不知道,嘿嘿嘿~

不过美团的一面面试官好像就是用Angular,他们现在移植Angular项目转为VUE,假如有朋友有很好的学习资源欢迎分享!

精耕深研


学习了以上内容,假如是学生找实习,就可以开始主动刷一下笔试题、面试题,去尝试投递实习。

面试题欢迎转战我的其他博客

2020最全前端面试系列

小程序

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价,看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战,如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件


jUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

  • 25
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值