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前端企业级项目实战开发

模仿练习：

• 京东
• 淘宝
• 小米
• 项目实战_魅族官网
• 【WEB前端实战项目】小米商城官网
• 【前端项目仿QQ音乐实战】
• 【仿网易云项目实战】

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笔记 (完整详细版)

原理

1. 浏览器原理 (考察其中的一小部分，例如垃圾回收和渲染原理，熟悉）
2. 计算机网络 （主要考查HTTP(S)、TCP或UDP，熟悉)
3. 算法 （笔试必有，面试手写居多，熟悉常用的即可，甚至没有学校的OJ系统的题目难）
4. 设计模式 （理解或熟悉常用的即可）

   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小书：在线开源

• 深入react技术栈

  🟢编程基础

• Git教程：ProGit2

• 国内程序员容易发音错误的单词

  🟢技术博客

• 张鑫旭，《CSS世界》作者

• 前端成神之路

  🟡其他待研究资料

• HTTPS 如何保证数据传输安全

  📖《书籍》&前端手册

• 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