[前端之旅] - 01 开端 （持续更新各种资料）（夜·猫之使徒·哮喘征服者·被光选中的人·逐梦）

导读

一个小白的自述：

现在的前端无所不能，从网页到框架，从前端到后端，再到移动互联网，APP、小程序，数据可视化，甚至最近火的一塌糊涂的元宇宙，只要你能想到的，前端都已经渗透了。

小编一直从事C++相关的开发。20年开始，做了一些项目，这才发现，大前端的便利。因为技术上的要求，也开始写起前端代码，当时可以说是0基础，然后海量的看B站的教学视频，一上来，看的就是vue-element-amdin，当时是真的一脸蒙圈，收集了大量的视频，看了个把月，功能也算写了出来，原理基本不动，也就是最顶层代码的搬运。

20年开始，到现在，一直用前端写些工具，也做些后台功能，大大小小的项目做了五六个，不过依然一知半解的，看过的视频也是看的懂，很少去练习，过个小半年，基本也就忘完了。

立个flag

今天（2022-1-25），电视剧《开端》完结了，然后又随便点开了之前看过的视频程序员前端知识图谱+B站自学资源整合 新手自学无忧 老手查缺补漏 实现完全自学，忽然感觉，这就是我一直想做的，整理最近所学。说干就干，先立个flag（也算挖坑吧，埋不埋的……尽量……），2022，总结前端知识，系统的学习和做笔记。

各种高质量资料

技术胖，是之前学习前端的UP主，有很多免费视频，质量很高。之后就跟着这份地图跑起来。

程序员前端知识图谱（来自技术胖）

视频里面对这个图谱说的优点说的很明白了，gitee上更是有详细的说明，https://gitee.com/jishupang/web_atlas，打开链接即可使用。

这里就只放一张大纲图片和图谱的开头，等看完了再补充一些其他内容吧。

前端pdf集合

• https://github.com/mynane/PDF.git

黑马Java后台视频集合

2022版java最新最全学习路线图

• 2022黑马程序员Java学习路线图

如何下载资料

• 黑马程序员教程资源下载指南

Java SE基础-打好JavaSE基础才能成为开发高手

• Java基础：Java入门基础视频教程，java零基础自学首选黑马程序员Java入门教程（含Java项目和Java真题）

Java Web-能制作中小型网站 企业管理系统

• Javaweb：黑马程序员最新版JavaWeb基础教程，Java web从入门到企业实战完整版
• Java开发框架-Java企业级服务端开发必会技能
• Maven：黑马程序员Maven全套教程，maven项目管理从基础到高级，Java项目开发必会管理工具maven
• Git：黑马程序员Git全套教程，完整的git项目管理工具教程，一套精通git
• SSM框架：黑马程序员最全SSM框架教程|Spring+SpringMVC+MyBatis全套教程(spring+springmvc+mybatis)
• MybatisPlus：黑马程序员MybatisPlus深入浅出教程，快速上手mybatisplus
• Spring Boot：黑马程序员SpringBoot2全套视频教程，springboot零基础到项目实战（spring boot2完整版）
• 传智健康：黑马程序员Java项目《传智健康》，超完整的企业级医疗行业项目（基于SSM+Zookeeper+Dubbo+Spring Security技术栈）

中间件 微服务框架-中级程序员必备的热门技术

• Springcloud：SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式，史上最全面的springcloud微服务技术栈课程|黑马程序员Java微服务
• Dubbo：黑马程序员Dubbo快速入门，Java分布式框架必会的dubbo教程
• Zookeeper：黑马程序员Zookeeper视频教程，快速入门zookeeper技术
• RabbitMQ：黑马程序员RabbitMQ全套教程，rabbitmq消息中间件到实战
• RocketMQ：黑马程序员RocketMQ系统精讲，电商分布式消息中间件，硬核揭秘双十一
• Docker：黑马程序员Docker容器化技术，从零学会Docker教程
• Redis：黑马程序员Redis入门到精通，深入剖析Redis缓存技术，Java企业级解决方案必看的redis教程
• MongoDB：黑马程序员MongoDB基础入门到高级进阶，一套搞定mongodb
  搜索技术：java中级教程-ELK高级搜索，全面的讲解ElasticStack技术栈

项目实战-企业级项目开发，掌握行业3年开发经验

• 人力资源：黑马程序员Java项目SaaS移动办公完整版《iHRM 人力资源管理系统》，跨行业SaaS办公整合性解决方案
• 好客租房：黑马程序员Java项目《好客租房》，Java企业级解决方案（Spring全家桶+分布式解决方案+微信授权+爬虫解决方案等）
• 权限管理一体化解决方案：黑马程序员Java品达通用权限项目，基于SpringCloud SpringBoot 的微服务框架的权限管理解决方案

黑马前端视频集合

2022版前端最新最全学习路线图

• 2022年前端学习路线图

资源下载问题

• 黑马程序员教程资源下载指南

web 入门

• Html5+css：最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程
• web 进阶：黑马程序员web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）

技术进阶

• JavaScript：黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门
• DOM BOM：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作
• jQuery：黑马程序员前端基础必备教程|jQuery网页开发案例精讲
• Ajax：黑马程序员AJAX零基础到精通_整合Git核心内容全套教程

Vue 开发

• Node.js: 黑马程序员Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解
• Vue2+Vue3全套：黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

React 小程序开发

• React：黑马程序员前端React视频教程，react零基础入门原理详解到好客租房项目实战
• 零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)

教程学习可能遇到的问题答疑（非技术型）：黑马程序员学习常见问题答疑

尚硅谷前端视频集合

前端学习路线图【2021版】

• 全网最全Web前端学习路线

前端核心–扎好马步——》》

• HTML5+CSS3:【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
• JS核心:【尚硅谷】JavaScript基础&实战丨JS入门到精通全套完整版
• JS高级:尚硅谷JavaScript高级教程(javascript实战进阶)
• jQuery:尚硅谷jQuery教程(jquery从入门到精通)
• Bootstrap: 尚硅谷Bootstrap教程(bootstrap框架讲解)
• AJAX: 【尚硅谷】3小时Ajax入门到精通

必备技术–修炼内功——》》

• ES6-ES11: 尚硅谷Web前端ES6教程，涵盖ES6-ES11
• AngularJS: 尚硅谷AngularJS实战教程(angular.js框架精讲)
• Node.js: 【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)
• Zepto.js: 尚硅谷Zepto教程(zepto.js框架精讲)
• MongoDB: 尚硅谷MongoDB入门基础教程（一天搞定mongodb）
• Webpack: 尚硅谷新版Webpack5实战教程(从入门到精通)
• Git: 尚硅谷Git教程全套完整版（12h深入掌握git）

前沿框架–习得绝学——》》

• TypeScript: 尚硅谷TypeScript教程（李立超老师TS新课）
• React: 尚硅谷React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）
• Vue全家桶: 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
• Vue3新特性: 尚硅谷Vue.JS教程快速入门到项目实战（Vue3/VueJS技术详解）
• Promise: 尚硅谷Web前端Promise教程从入门到精通
• axios: 尚硅谷Web前端axios入门与源码解析

项目实战–身经百战——》》

• Vue硅谷外卖: 尚硅谷Vue实战教程(企业级vue项目，Vue项目硅谷外卖)
• Vue尚品汇: 尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)
• React谷粒后台: 尚硅谷React项目教程(react实战全栈谷粒后台)
• 硅谷直聘: 尚硅谷React项目实战，全栈开发Web前端项目《硅谷直聘》
• 谷粒音乐: 尚硅谷前端项目教程_HTML5项目实战《谷粒音乐》
• 微信小程序: 尚硅谷小程序开发，微信小程序开发
• 公众号开发: 尚硅谷微信小程序开发（零基础小程序开发入门到精通）
• 前端面试题: 尚硅谷经典前端面试题精讲第一季(web前端大咖总结)

前端代码规范

参考视频《9个前端代码规范秘籍 让你也能写出诗一样的代码》https://www.bilibili.com/video/BV19P4y147Jz的内容：

• https://guide.aotu.io/docs/
• http://tgideas.qq.com/doc/index.html
• https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
• https:// github.com/standard/standard
• https://eslint.bootcss.com/
• https://cn.vuejs.org/v2/style-guide/index.html
• http://es6.ruanyifeng.com/#docs/style

参考资料

• B站技术胖视频地址： https://www.bilibili.com/video/BV1ub4y1h7ZY
• gitee地址： https://gitee.com/jishupang/web_atlas
• qq群：夜猫逐梦技术交流裙/953949723