前端入门自学资料汇总
学习网站
视频教程
b站
慕课网
优课网（这是个付费网站，想要免费学习的可以忽略）
手册
菜鸟教程
牛客
ES6入门教程
基础教程
html + css
黑马最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 27h
pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程 56h
公号众：灵题库，前端学习资料、面试刷题汇总
JavaScript
pink老师 JavaScript基础语法 48h
Vue
vue todolist 图文，开胃菜，用于快速入门
coderwhy 最全最新Vue、Vuejs教程，从入门到精通 68h
尚硅谷 Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 46h
React
尚硅谷 React技术全家桶全套完整版（零基础入门到精通） 40h
React入门到实战 20h
webpack
千锋陆荣涛最新前端webpack5全套教程，全网最完整的webpack教程（基础+高级） 10h
尚硅谷新版Webpack5实战教程(从入门到精通) 10h
实战教程
vue
付费
Vue全家桶实战 从零独立开发企业级电商系统
Vue 实战商业级读书Web APP 全面提升技能
免费
前端项目/vue项目实战/vue+element-ui/vue经典案例分享/紧贴实战的vue经典案例
尚硅谷VUE项目实战，前端项目-尚品汇
前端实战项目】手把手教你从零开始做一个网易云音乐，月嫂级毕业设计教程
【Web前端】Vue实战案例-后台管理系统
Vue实战项目—易购商城
尚硅谷Vue项目(vue实战谷粒外卖)
通俗易懂的Vue实战项目-搭建个人博客
React
付费
React16+Redux 实战企业级大众点评Web App
免费
尚硅谷React项目教程(react实战全栈谷粒后台)
利用react+antd的实战开发项目——商城系统的管理后台
黑马程序员React从零基础入门到react好客租房项目实战
React项目实战课程
webpack
webpack5 + vue3 从零配置项目
教你用webpack搭一个vue脚手架[超详细讲解和注释！]
使用webpack配置一个小型vue-cli脚手架
练手项目
html + css
公号众：灵题库，前端学习资料、面试刷题汇总
小米官网仿写
https://gitee.com/tx1999/imitating-xiaomi-page
携程仿写
https://gitee.com/jack-yung/copy-ctrip-website
京东仿写
https://gitee.com/brucechen414/copy_of_jingdong_homepage\
JavaScript
todo list
https://gitee.com/Liang-Sir/to-do-list
todo list
https://github.com/CaloloCosta/todoListAPP
框架实战
github和gitee有很多Vue、React的练手项目。这些练手项目用Vue/React及工作中常用到的技术构造出一个完整的项目。这些项目主要有这么几类：
电商（仿京东商城、仿小米商城）、音乐、020平台（仿饿了么、仿大众点评）、后台管理、社区（CNode、仿简书）、新闻（仿今日头条）、IM、博客、其他（通讯录、答题器）。
从项目难易程度可以分为简单项目和复杂项目。简单项目可用于练手，熟悉框架和库的用法；复杂项目，比较接近企业级的实际项目，如果能仿照搭建出这种复杂项目，基本上就达到了胜任初级工程师岗位的程度了。
vue
答题器（移动端）
简单
vue2 + vuex + less
https://github.com/bailicangdu/vue2-happyfri
课程管理系统
简单
vue2 + vuex + vue-router + element-ui
https://gitee.com/lv-canfa/any-view
后台管理
复杂
https://github.com/bailicangdu/vue2-manage
vue2 + vuex + vue-router + element-ui + vue-quill-editor + echart + less + fetch
仿知乎
简单
vue3 + vuex + vue-router + typescript +
https://gitee.com/zhang_Wei_Qiang_wq/vue3-ts
新峰商城（移动端）
复杂
vue3 + vuex + vue-router + vant + less + axios
https://gitee.com/kevin402502/newbee-mall-vue3-app
PS：该项目没有做图片懒加载，所以首页初始加载很慢
新峰商城管理后台
复杂
vite + vue3 + vue-router + wangeditor + element-plus + axios
PS：测试账号密码：admin 123456
https://github.com/newbee-ltd/vue3-admin
管理后台
复杂
vue2 + vuex + vue-router + element-ui + axios + echart
https://gitee.com/nmgwap/vueproject
音乐播放器
复杂
vite + vue3 + vue-router + sass + axios + element-plus + typescript
https://github.com/SmallRuralDog/vue3-music
音乐播放器（移动端）
复杂
vue2 + vuex + vue-router + rxjs + less + fetch
https://github.com/Sioxas/vue-music/
Cnode社区（移动端）
复杂
vue2 + vuex + vue-router + webpack-zepto
https://github.com/shinygang/Vue-cnodejs
React
宜家（移动端）
简单
react + redux + react-router + fetch + express
https://gitee.com/ankai-con/react-training-project-ikea?
音乐播放器
复杂
react + redux + react-router + react-draggable + styled-components + axios + craco
https://gitee.com/warm_one/react-muisc2
旅游网
简单
react + react-router + antd + sass + axios + typescript + craco
https://gitee.com/pigyin/react-travel
新闻管理后台
复杂
react + redux + react-router + typescript + axios + antd + draft-js + echarts + react-tsparticles + json-server（全局安装）
PS：react-particles-js已经不支持，卸载，然后替换成react-tsparticles就行了
https://gitee.com/Gyuan123/global-news
CNode社区
复杂
react + redux + react-router + axios + less + antd
https://gitee.com/leofe/My-CNode
好客租房
复杂
react + react-router + sass + axios + antd-mobile
PS：根据实战教程开发：黑马程序员React从零基础入门到react好客租房项目实战。这个项目用到了百度地图的开发平台API，需要申请百度地图API权限：百度开发平台文档-JavaScript API
https://gitee.com/zevsee/hkzf-mobile
报销审核（移动端）
简单
react + redux + react-router + immutable + less + axios
https://github.com/bailicangdu/react-pxq
