01、 前端技术路线
框架都掌握:先Vue,后React
腾讯的教程:https://cloud.tencent.com/developer/section/1189706
- ⭐前端学习路线:Obj.Tube出品,一个开源的前端学习的资料聚合网站。
- ⭐MDN的前端技术课程路线:https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
参考资料:
- 阿里前端知识图谱:比较全面的前端知识体系,思维导图的形式展示,可作为参考。
前端开发学习线路大梳理(思维导图)-codesheep 思维导图-图片
前端学习线路(思维导图)-程序员鱼皮 思维导图-图片
[x] 编程自学路线:一个作者自学编程以来所用资源和分享内容的大聚合,除了编程还有各大学的考研资料。
- 2022年Web前端入门的自学路线
- 黑马程序员:2022年web前端开发学习路线图,内有B站配套的视频教程
- 尚硅谷:2022年度全网最全Web前端学习路线,内有B站配套的视频教程
02、 前端基础
| 评分 | 课程 | 发布时间 | 时长/集数 | | | —- | —- | —- | —- | —- | | 3.8 |
- [x] 杭州玛歌:2021最新完整版,HTML+CSS+js教程135集完全入门,还包括JQuery、BootStrap、LayUI的内容
| 2021-7(2020) | 24h/135 | 讲的比较流畅,适合入门。比较基础的知识,覆盖度度一般 | | 4.0 |
- [x] 2022最新web前端开发就业视频 HTML5+CSS3+ES6 ,包含VUE3的课程内容
| 2022-7(2022) | 24h/141 | 比较新,讲的还可以,适合入门,知识点丰富度不够。 | | |
- [ ] 张容铭-前端入门:最新 HTML & CSS 零基础小白web前端入门教程
| 2021-1(2020) | 26h/94 | | | |
- [ ] 张容铭-H5 & C3:Web前端全套教程-Html5&CSS3
| 2021-1(2020) | 29h/114 | | | |
- [ ] 张容铭-JS基础:JavaScript/js基础&实战丨JS入门到精通
| 2021-1(2020) | 24h/94 | | | 4.8 |
- [x] ⭐MDN 官方的前端教程
| - | - | 官方出品,应该是最新、最全面的教程了 | | | 千古前端图文教程 :不错的前端自学笔记 | | | | |
| 廖雪峰的JavaScript教程 | | | | | | 现代 JavaScript 教程:在线的非常全面的JS教程,配有习题和解析 | | | | | | JavaScript Guidebook | | | | | | | | | | | 4.1 | | | | | | 5 | | | | |
张容铭:《javascript设计模式》作者,爱创课堂 · CEO,前百度 · 前端工程师。
廖雪峰:十年软件开发经验,业余产品经理,精通Java/Python/Ruby/Visual Basic/Objective C等,对开源框架有深入研究,著有《Spring 2.0核心技术与最佳实践》一书
JavaScript(JS)从0到1入门教程合集:语法、变量、函数、对象、正则表达式、表单验证、DOM、BOM,10h、2022,27集,个人录制
优极限大前端课程_HTML5+CSS3+JavaScript(前端0基础入门到项目实战)26h,2021
【Web前端全套】零基础自学到精通必备 64h、180,2021
博学谷:最新JavaScript入门攻略初学者必备!/前端/入门/JS https://www.bilibili.com/video/BV1fi4y1o7HR
零基础学Web前端——HTML+CSS 入门https://www.bilibili.com/video/BV1B44y1h7Qa
黑马程序员:2022年web前端开发学习路线图,内有B站配套的视频教程
尚硅谷:2022年度全网最全Web前端学习路线,内有B站配套的视频教程
爱创课堂 :2022最新Web前端学习路线,内有B站配套的视频教程
Demo/项目案例
- HTML+CSS白嫖实战:B站视频,合集中有大量的HTML+CSS案例教程
- HTML5+CSS3实战项目-1小时搞定迅雷官网
- HTML5+CSS项目,手敲代码1小时搞定阴阳师官网网页
- HTML5+CSS3项目,3小时搞定12306铁路官网静态网页
- 【前端练手项目】HTML+CSS+JS实现小米官网首页
- JS练习:20 个 JavaScript 经典案例
- JS练习:Canvas 可视化操作-拖拽、放缩、移动
- 【购物网】HTML+CSS前端企业级项目实战开发
模仿练习:
03、 前端进阶
了解React/Vue/Angular三大主流前端框架并简单学习其中之一熟练使用React/Vue/Angular其中之一在熟练使用一种前端框架的基础上,尽可能掌握第二种jQuery/bootstrap框架了解
尚硅谷2022版Webpack5入门到原理(面试开发一条龙)
Canvas前端超详细实战课程
echarts数据可视化项目教程
2021ElementUI合集
为什么越来越少的人用jQuery
jQuery设计思想 http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html
https://juejin.cn/post/6903489251527098382
jQuery笔记 (完整详细版)
原理
- 浏览器原理 (考察其中的一小部分,例如垃圾回收和渲染原理,熟悉)
- 计算机网络 (主要考查HTTP(S)、TCP或UDP,熟悉)
- 算法 (笔试必有,面试手写居多,熟悉常用的即可,甚至没有学校的OJ系统的题目难)
- 设计模式 (理解或熟悉常用的即可)
Demo案例
- Nodejs:我用 nodejs 爬了一万多张小姐姐壁纸
- Nodejs:Node 实现批量修改文件名
- Vue 项目:尚品汇 前后台 实战合集
- Vue 项目:Vue 后台管理系统
附录1:前端学习资料
🟢前端基础
- B站:2021最新完整版,HTML+CSS+js教程135集完全入门,还包括JQuery、BootStrap、LayUI的内容
-
- ⭐千古前端图文教程 :不错的前端自学笔记
- ⭐现代 JavaScript 教程:在线的非常全面的JS教程,配有习题和解析
- ⭐JavaScript Guidebook :非常全面的js学习手册,除了js本身,还有OOP、BOM、DOM、网络、设计模式
- 廖雪峰的JavaScript教程
- MDN 官方的前端教程:Web 前端开发学习资料
- 前端开发文档:Git开源的前端开发文档
-
🟢前端进阶
[ ] ⭐VUE官方教程:非常详细,不用再买其他资料了
- js中的设计模式:来自语雀
- React.js小书:在线开源
-
🟢编程基础
Git教程:ProGit2
-
🟢技术博客
张鑫旭,《CSS世界》作者
-
🟡其他待研究资料
-
📖《书籍》&前端手册
JavaScript正则表达式迷你书:git下载地址,本地:JavaScript正则表达式迷你书(1.1版).pdf
- 《你不知道的JavaScript》
- 《JavaScript语言精髓与编程实践》
- 《CSS世界》、《CSS新世界》、《精通 CSS》
- 《了不起的JavaScript工程师:从前端到全端高级进阶》
- MDN 官方文档:https://developer.mozilla.org/zh-CN/docs/Web
附录2:前端面试资料
- 前端面试题汇总:比较全面的面试题目,内容特别多。
- 前端面试直通车
- 千古前度图文教程-面试篇
- 在浏览器的地址栏输入url,按下回车后,发生了什么?
附录3:参考资料
- 阿里前端知识图谱:比较全面的前端知识体系,思维导图的形式展示,可作为参考。
前端开发学习线路大梳理(思维导图)-codesheep 思维导图-图片
前端学习线路(思维导图)-程序员鱼皮 思维导图-图片
[x] 编程自学路线:一个作者自学编程以来所用资源和分享内容的大聚合,除了编程还有各大学的考研资料。
- 2022年Web前端入门的自学路线
HTML所有元素的在线清单 https://html.spec.whatwg.org/multipage/indices.html
中文版:https://whatwg-cn.github.io/html