这门课解决什么工作场景
很多前端新手在背完基础语法后,一拿到真实的设计稿就发懵,不知道怎么把变量和函数真正用到页面上。这组资料的核心主题是 JavaScript 实战,它不侧重干巴巴的语法理论,而是直接带你进入一个大型电商类项目的开发场景。从页面头部结构、搜索框、吸顶导航,一直做到复杂的购物车弹出层和自定义滚动条。它解决的正是“学完语法却写不出业务代码”的断层问题,让你明白在实际工作里,代码是怎么按模块拼装起来、并和用户操作产生交互的。
适合什么基础与建议先看哪几块
这套资料不适合零基础小白,它默认你已经掌握了基本的 HTML、CSS 布局,能独立写完静态页面,同时也大致了解过 JavaScript 的基础概念。如果你正处于从静态切图向动态交互过渡的阶段,这会是一份很好的练手材料。建议你先跳过前面的样式重置和基础结构搭建,直接找到 NodeJS、ES6 以及移动端事件相关的部分先过一遍。这些是现代前端开发的底层基建,理解了 ES6 的语法和 NodeJS 的基本运行环境,你才能看懂综合项目里复杂的逻辑组织。看完这些前置概念后,再回过头来从项目介绍开始,一步步跟着视频搭建页面。
学完能独立做什么与资料怎么配合练习
完整跟下来后,你能独立承担一个中型电商网站前端的交互开发。具体来说,你能写出吸顶导航的监听逻辑,能处理购物车悬浮弹层的显示与隐藏,能实现自定义滚动条的样式与拖拽交互,并且知道怎么用 Git 把代码托管到 GitHub 上进行版本管理。资料配合练习的方法很关键:不要只用眼睛看视频,必须开着编辑器边看边敲。视频里讲到购物车结构和弹出层样式时,先暂停视频自己写一遍结构,再和资料里的演示对比。遇到卡壳的地方,再去查阅对应的 ES6 语法点。整个综合项目做完后,尝试把 Git 仓库推送到自己的 GitHub 上,这既是对学习成果的检验,也能直接作为你求职时的真实项目作品集。
学习学习javascript的Git、GitHub、ES6、移动端事件、NodeJS、以及一个大型综合项目实战。
课程目录
* 01 大型整体实战开发/
* 01 项目介绍.mp4 27:14
* 02 样式重置.mp4 16:16
* 03 页面头结构与样式1.mp4 26:09
* 04 页面头结构与样式2.mp4 18:02
* 05 页面头结构与样式3.mp4 15:44
* 06 logo和搜索框的结构与样式.mp4 14:55
* 07 固定式导航结构.mp4 11:26
* 08 购物车结构.mp4 12:58
* 09 固定式导航样式.mp4 12:07
* 10 购物车父级样式.mp4 07:58
* 11 子导航样式.mp4 07:49
* 12 购物车弹出层样式.mp4 17:32
* 13 购物车滚动条样式.mp4 13:20
* 14 吸顶导航样式.mp4 18:46
* 15 banner结构与样式.mp4 23:02
* 16 品牌制造商结构.mp4 08:34
* 17 品牌制造商样式.mp4 21:07
* 18 新品**结构.mp4 10:46
* 19 新品**样式.mp4 20:08
* 20 人气推荐结构.mp4 09:23
* 21 人气推荐样式.mp4 19:12
* 22 限时购结构.mp4 16:20
* 23 限时购样式.mp4 33:01
* 24 居家结构.mp4 07:43
* 25 居家样式.mp4 13:40
* 26 大家都在说结构.mp4 06:36
* 27 大家都在说样式.mp4 16:18
* 28 底部结构.mp4 16:34
* 29 底部样式.mp4 33:10
* 30 产品页头部底部面包屑内容.mp4 11:09
* 31 产品图片结构.mp4 16:45
* 32 产品图片样式1.mp4 21:52
* 33 产品图片样式2.mp4 19:13
* 34 产品图片样式3.mp4 19:46
* 35 大家都在看结构与样式.mp4 22:48
* 36 详情结构.mp4 11:37
* 37 详情样式.mp4 19:36
* 38 评价结构.mp4 16:58
* 39 评价样式1.mp4 09:25
* 40 评价样式2.mp4 12:22
* 41 评价样式3.mp4 14:27
* 42 翻页结构与样式.mp4 09:13
* 43 专题推荐结构与样式.mp4 08:12
* 44 404页面.mp4 05:10
* 45 导航功能.mp4 36:29
* 46 图片懒加载功能1.mp4 23:48
* 47 图片懒加载功能2.mp4 22:27
* 48 回到顶部功能.mp4 05:14
* 49 轮播图组件1.mp4 13:27
* 50 轮播图组件2.mp4 16:57
* 51 轮播图组件3.mp4 25:36
* 52 轮播图组件4.mp4 18:39
* 53 轮播图组件5.mp4 12:54
* 54 轮播图组件6.mp4 29:33
* 55 轮播图组件7.mp4 35:31
* 56 轮播图组件8.mp4 08:41
* 57 人气推荐功能.mp4 05:30
* 58 限时购功能.mp4 25:21
* 59 数据结构说明.mp4 21:33
* 60 解析URL与实现404页面.mp4 21:42
* 61 产品图片切换功能.mp4 18:34
* 62 创建规格.mp4 11:25
* 63 规格功能1.mp4 21:19
* 64 规格功能2.mp4 28:27
* 65 加减功能.mp4 18:02
* 66 大家都在看功能.mp4 09:18
* 67 详情功能.mp4 19:48
* 68 评价功能.mp4 19:56
* 69 评价数据展示.mp4 35:53
* 70 评价数据里的轮播图.mp4 13:13
* 71 翻页功能1.mp4 14:54
* 72 翻页功能2.mp4 09:19
* 73 翻页功能3.mp4 14:35
* 74 翻页功能4.mp4 21:47
* 75 翻页功能5.mp4 16:12
* 76 翻页功能6.mp4 20:25
* 77 购物车-自定义滚动条1.mp4 15:48
* 78 购物车-自定义滚动条2.mp4 11:19
* 79 购物车-自定义滚动条3.mp4 20:10
* 80 购物车-localStorage1.mp4 20:43
* 81 购物车-localStorage2.mp4 24:46
* 82 购物车-添加商品.mp4 24:06
* 83 购物车-删除商品功能.mp4 27:57
* 84 作业






