这门课解决什么工作场景

很多前端新手在背完基础语法后,一拿到真实的设计稿就发懵,不知道怎么把变量和函数真正用到页面上。这组资料的核心主题是 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 作业