学习网站

视频教程

b站

慕课网

优课网（付费）

手册

菜鸟教程

牛客

ES6入门教程

CSDN学习

基础教程

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?

[

](https://gitee.com/li_ya_xu/react-juejin)

音乐播放器

复杂

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

报销审核（移动端）

简单

https://github.com/bailicangdu/react-pxq