文章目錄

• • 導讀
  • • 立個flag
  • 各種高質(zhì)量資料
  • • 程序員前端知識圖譜（來自技術(shù)胖）
    • 前端pdf集合
    • 黑馬Java后臺視頻集合
    • 黑馬前端視頻集合
    • 尚硅谷前端視頻集合
  • 前端代碼規(guī)范
  • 參考資料

導讀

一個小白的自述：

現(xiàn)在的前端無所不能，從網(wǎng)頁到框架，從前端到后端，再到移動互聯(lián)網(wǎng)，APP、小程序，數(shù)據(jù)可視化，甚至最近火的一塌糊涂的元宇宙，只要你能想到的，前端都已經(jīng)滲透了。

小編一直從事C++相關(guān)的開發(fā)。20年開始，做了一些項目，這才發(fā)現(xiàn)，大前端的便利。因為技術(shù)上的要求，也開始寫起前端代碼，當時可以說是0基礎(chǔ)，然后海量的看B站的教學視頻，一上來，看的就是vue-element-amdin，當時是真的一臉蒙圈，收集了大量的視頻，看了個把月，功能也算寫了出來，原理基本不動，也就是最頂層代碼的搬運。

20年開始，到現(xiàn)在，一直用前端寫些工具，也做些后臺功能，大大小小的項目做了五六個，不過依然一知半解的，看過的視頻也是看的懂，很少去練習，過個小半年，基本也就忘完了。

立個flag

今天（2022-1-25），電視劇《開端》完結(jié)了，然后又隨便點開了之前看過的視頻程序員前端知識圖譜+B站自學資源整合 新手自學無憂 老手查缺補漏 實現(xiàn)完全自學，忽然感覺，這就是我一直想做的，整理最近所學。說干就干，先立個flag（也算挖坑吧，埋不埋的……盡量……），2022，總結(jié)前端知識，系統(tǒng)的學習和做筆記。

各種高質(zhì)量資料

技術(shù)胖，是之前學習前端的UP主，有很多免費視頻，質(zhì)量很高。之后就跟著這份地圖跑起來。

程序員前端知識圖譜（來自技術(shù)胖）

視頻里面對這個圖譜說的優(yōu)點說的很明白了，gitee上更是有詳細的說明，https://gitee.com/jishupang/web_atlas，打開鏈接即可使用。

這里就只放一張大綱圖片和圖譜的開頭，等看完了再補充一些其他內(nèi)容吧。

前端pdf集合

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

黑馬Java后臺視頻集合

2022版java最新最全學習路線圖

• 2022黑馬程序員Java學習路線圖

如何下載資料

• 黑馬程序員教程資源下載指南

Java SE基礎(chǔ)-打好JavaSE基礎(chǔ)才能成為開發(fā)高手

• Java基礎(chǔ)：Java入門基礎(chǔ)視頻教程，java零基礎(chǔ)自學首選黑馬程序員Java入門教程（含Java項目和Java真題）

Java Web-能制作中小型網(wǎng)站 企業(yè)管理系統(tǒng)

• Javaweb：黑馬程序員最新版JavaWeb基礎(chǔ)教程，Java web從入門到企業(yè)實戰(zhàn)完整版
• Java開發(fā)框架-Java企業(yè)級服務端開發(fā)必會技能
• Maven：黑馬程序員Maven全套教程，maven項目管理從基礎(chǔ)到高級，Java項目開發(fā)必會管理工具maven
• Git：黑馬程序員Git全套教程，完整的git項目管理工具教程，一套精通git
• SSM框架：黑馬程序員最全SSM框架教程|Spring+SpringMVC+MyBatis全套教程(spring+springmvc+mybatis)
• MybatisPlus：黑馬程序員MybatisPlus深入淺出教程，快速上手mybatisplus
• Spring Boot：黑馬程序員SpringBoot2全套視頻教程，springboot零基礎(chǔ)到項目實戰(zhàn)（spring boot2完整版）
• 傳智健康：黑馬程序員Java項目《傳智健康》，超完整的企業(yè)級醫(yī)療行業(yè)項目（基于SSM+Zookeeper+Dubbo+Spring Security技術(shù)棧）

中間件 微服務框架-中級程序員必備的熱門技術(shù)

• Springcloud：SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式，史上最全面的springcloud微服務技術(shù)棧課程|黑馬程序員Java微服務
• Dubbo：黑馬程序員Dubbo快速入門，Java分布式框架必會的dubbo教程
• Zookeeper：黑馬程序員Zookeeper視頻教程，快速入門zookeeper技術(shù)
• RabbitMQ：黑馬程序員RabbitMQ全套教程，rabbitmq消息中間件到實戰(zhàn)
• RocketMQ：黑馬程序員RocketMQ系統(tǒng)精講，電商分布式消息中間件，硬核揭秘雙十一
• Docker：黑馬程序員Docker容器化技術(shù)，從零學會Docker教程
• Redis：黑馬程序員Redis入門到精通，深入剖析Redis緩存技術(shù)，Java企業(yè)級解決方案必看的redis教程
• MongoDB：黑馬程序員MongoDB基礎(chǔ)入門到高級進階，一套搞定mongodb
  搜索技術(shù)：java中級教程-ELK高級搜索，全面的講解ElasticStack技術(shù)棧

項目實戰(zhàn)-企業(yè)級項目開發(fā)，掌握行業(yè)3年開發(fā)經(jīng)驗

• 人力資源：黑馬程序員Java項目SaaS移動辦公完整版《iHRM 人力資源管理系統(tǒng)》，跨行業(yè)SaaS辦公整合性解決方案
• 好客租房：黑馬程序員Java項目《好客租房》，Java企業(yè)級解決方案（Spring全家桶+分布式解決方案+微信授權(quán)+爬蟲解決方案等）
• 權(quán)限管理一體化解決方案：黑馬程序員Java品達通用權(quán)限項目，基于SpringCloud SpringBoot 的微服務框架的權(quán)限管理解決方案

黑馬前端視頻集合

2022版前端最新最全學習路線圖

• 2022年前端學習路線圖

資源下載問題

• 黑馬程序員教程資源下載指南

web 入門

• Html5+css：最新前端開發(fā)入門教程，web前端零基礎(chǔ)html5 +css3+前端項目視頻教程
• web 進階：黑馬程序員web前端進階教程，前端html5+css3+移動端項目實戰(zhàn)（含華為新聞，b站移動端等）

技術(shù)進階

• JavaScript：黑馬程序員JavaScript全套教程，Web前端必學的JS入門教程，零基礎(chǔ)JavaScript入門
• DOM BOM：黑馬程序員JavaScript核心教程，前端基礎(chǔ)教程，JS必會的DOM BOM操作
• jQuery：黑馬程序員前端基礎(chǔ)必備教程|jQuery網(wǎng)頁開發(fā)案例精講
• Ajax：黑馬程序員AJAX零基礎(chǔ)到精通_整合Git核心內(nèi)容全套教程

Vue 開發(fā)

• Node.js: 黑馬程序員Node.js全套入門教程，nodejs最新教程含es6模塊化+npm+express+webpack+promise等_Nodejs實戰(zhàn)案例詳解
• Vue2+Vue3全套：黑馬程序員Vue全套視頻教程，從vue2.0到vue3.0一套全覆蓋，前端必會的框架教程

React 小程序開發(fā)

• React：黑馬程序員前端React視頻教程，react零基礎(chǔ)入門原理詳解到好客租房項目實戰(zhàn)
• 零基礎(chǔ)玩轉(zhuǎn)微信小程序：黑馬程序員前端微信小程序開發(fā)教程，微信小程序從基礎(chǔ)到發(fā)布全流程_企業(yè)級商城實戰(zhàn)(含uni-app項目多端部署)

教程學習可能遇到的問題答疑（非技術(shù)型）：黑馬程序員學習常見問題答疑

尚硅谷前端視頻集合

前端學習路線圖【2021版】

• 全網(wǎng)最全Web前端學習路線

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

• HTML5+CSS3:【尚硅谷】Web前端零基礎(chǔ)入門HTML5+CSS3基礎(chǔ)教程丨初學者從入門到精通
• JS核心:【尚硅谷】JavaScript基礎(chǔ)&實戰(zhàn)丨JS入門到精通全套完整版
• JS高級:尚硅谷JavaScript高級教程(javascript實戰(zhàn)進階)
• jQuery:尚硅谷jQuery教程(jquery從入門到精通)
• Bootstrap: 尚硅谷Bootstrap教程(bootstrap框架講解)
• AJAX: 【尚硅谷】3小時Ajax入門到精通

必備技術(shù)–修煉內(nèi)功——》》

• ES6-ES11: 尚硅谷Web前端ES6教程，涵蓋ES6-ES11
• AngularJS: 尚硅谷AngularJS實戰(zhàn)教程(angular.js框架精講)
• Node.js: 【尚硅谷】最經(jīng)典Node.JS全套完整版教程(快速入門nodejs)
• Zepto.js: 尚硅谷Zepto教程(zepto.js框架精講)
• MongoDB: 尚硅谷MongoDB入門基礎(chǔ)教程（一天搞定mongodb）
• Webpack: 尚硅谷新版Webpack5實戰(zhàn)教程(從入門到精通)
• Git: 尚硅谷Git教程全套完整版（12h深入掌握git）

前沿框架–習得絕學——》》

• TypeScript: 尚硅谷TypeScript教程（李立超老師TS新課）
• React: 尚硅谷React技術(shù)全家桶全套完整版（零基礎(chǔ)入門到精通/男神天禹老師親授）
• Vue全家桶: 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通
• Vue3新特性: 尚硅谷Vue.JS教程快速入門到項目實戰(zhàn)（Vue3/VueJS技術(shù)詳解）
• Promise: 尚硅谷Web前端Promise教程從入門到精通
• axios: 尚硅谷Web前端axios入門與源碼解析

項目實戰(zhàn)–身經(jīng)百戰(zhàn)——》》

• Vue硅谷外賣: 尚硅谷Vue實戰(zhàn)教程(企業(yè)級vue項目，Vue項目硅谷外賣)
• Vue尚品匯: 尚硅谷VUE項目實戰(zhàn)，前端項目-尚品匯(大型\重磅)
• React谷粒后臺: 尚硅谷React項目教程(react實戰(zhàn)全棧谷粒后臺)
• 硅谷直聘: 尚硅谷React項目實戰(zhàn)，全棧開發(fā)Web前端項目《硅谷直聘》
• 谷粒音樂: 尚硅谷前端項目教程_HTML5項目實戰(zhàn)《谷粒音樂》
• 微信小程序: 尚硅谷小程序開發(fā)，微信小程序開發(fā)
• 公眾號開發(fā): 尚硅谷微信小程序開發(fā)（零基礎(chǔ)小程序開發(fā)入門到精通）
• 前端面試題: 尚硅谷經(jīng)典前端面試題精講第一季(web前端大咖總結(jié))

前端代碼規(guī)范

參考視頻《9個前端代碼規(guī)范秘籍 讓你也能寫出詩一樣的代碼》https://www.bilibili.com/video/BV19P4y147Jz的內(nèi)容：

• 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站技術(shù)胖視頻地址： https://www.bilibili.com/video/BV1ub4y1h7ZY
• gitee地址： https://gitee.com/jishupang/web_atlas
• qq群：夜貓逐夢技術(shù)交流裙/953949723
  

總結(jié)

以上是生活随笔為你收集整理的[前端之旅] - 01 开端 （持续更新各种资料）（夜·猫之使徒·哮喘征服者·被光选中的人·逐梦）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。