前端开发底层逻辑:从零构建网页的完整闭环
很多初学者陷入困境,往往是因为只懂语法却不懂如何组合它们。本课程直击这一痛点,通过 HTML 搭建骨架、CSS 修饰外貌、JavaScript 赋予灵魂,手把手带你从零构建一个动态网页。它不贩卖焦虑,也不画大饼,而是专注于最本质的网页开发逻辑。无论你是想转行做前端,还是后端开发需要补充全栈视野,亦或是大学生需要完成网页设计作业,这门课都能提供一套可落地的解决方案,帮你建立清晰的前端知识图谱,彻底告别“只会在网上看视频”却不会动手敲代码的尴尬局面。
科学的学习路径与基础门槛
学习顺序必须严格遵循“结构 - 样式 - 交互”的底层逻辑。首先必须死磕 HTML,理解语义化标签,确保页面结构清晰;紧接着攻克 CSS,尤其是盒模型、浮动与定位,这是页面布局的命门,不精通这里后续做布局寸步难行。当结构与样式稳固后,再进入 JavaScript 阶段,从基础语法、条件判断、数组函数进阶到面向对象编程。只有前两个阶段的基础打得足够扎实,面对复杂的 DOM 操作和事件监听时才不会一头雾水。建议初学者先花 20% 的时间快速浏览整体目录,建立宏观认知,再逐章深入,切忌跳跃式学习。
学完能做什么与资料配合策略
学完这门课,你应能独立手写一个包含头部导航、主体内容区和底部页脚的完整静态页面,并能通过按钮点击触发弹窗或数据更新等基础交互效果。这意味着你已经具备了独立承担初级前端开发工作的能力,能够承接简单的官网搭建、企业宣传页或后台管理界面开发,同时为后续学习 Vue、React 等主流框架打下坚不可摧的地基。资料包中的每日练习并非摆设,请务必按顺序完成。不要直接复制粘贴代码,而是看着参考代码,亲手敲一遍,遇到报错再对照修正。对于 CSS 布局章节,建议多找几个经典案例进行模仿重构;对于 JS 进阶部分,重点动手实现 BOM 和 DOM 操作,只有亲手写过的代码,才能转化为你的肌肉记忆。
课程目录
阶段01:HTML+CSS
01 HTML
Day01-HTML
Day02_HTML
Day03-HTML
Day04_HTML&CSS
02 CSS
Day05_CSS
Day06_CSS
Day07_CSS
Day08_CSS
03 页面布局
Day09_页面布局
Day10_页面布局
04 HTML5+CSS3
Day11_HTML5&CSS3
Day12_CSS3
Day13_CSS3
Day14_CSS3
Day15_CSS3
Day16_CSS3
阶段02:JavaScript基础
01 基础语法
Day01_JavaScript
Day02_JavaScript
02 条件语句
Day03_JavaScript
Day04_JavaScript
03 数组与函数
Day05_JavaScript
Day06_JavaScript
Day07_JavaScript
04 面向对象
Day08_JavaScript
Day09_JavaScript
Day10_JavaScript
阶段03:JavaScript进阶
01 BOM与DOM
Day11_BOM&DOM
Day12_DOM
Day13_DOM
02 事件与监听
Day14_DOM
Day15_DOM
Day16_DOM
03 垃圾回收与线程
Day17_Senior
Day18_Senior
04 LESS
Day19_PC项目&Less
阶段04:项目一:品H商城
01 项目一:PH商城
Day20_PC项目
Day21_PC项目
Day22_PC项目
02 BootStrap
bootstrap-3.4.1
bootstrap源码分析
jquery
课堂案例
课堂视频
Day23_BootStrap课堂笔记.md 3.28kb
03 正则表达式
Day24_事件的防抖和节流.md 1.57kb
Day24_正则表达式课堂笔记.md 3.29kb
常用正则.txt 3.49kb
阶段05:ES6 + Node + 前端工程化
01 ECMAScript 6
Day01_ES6
Day02_ES6
Day03_ES6
02 Git
Day04_ES6&Git
Day05_Git
03 Node与模块化
Day06_Node
Day07_Node
Day08_Node
Day09_Node
Day10_Node
Day11_Node
04 MongoDB与案例
Day12_Node&MongoDB
Day13_Node&会话控制
05 Ajax
Day14_Ajax
Day15_Ajax
06 Promise
Day16_Promise
Day17-Promise
Day18-自定义Promise
07 Fetch 与 Axios
Day19-Fetch&Axios
Day20-Axios
阶段06:项目二:工程化管理系统
01 项目前置课:Webpack
资源
Day21_webpack课堂笔记.md 24.82kb
webpack运行在node之上.jpg 24.58kb
02 项目初始化
backend_project
frontend_project
课堂案例-project
课堂案例-webpack
课堂视频-project
课堂视频-webpack
项目文档
项目资料
Day22_webpack课堂笔记.md 24.81kb
Day22_工程化项目开发笔记.md 9.79kb
webpack总结.xmind 90.60kb
03 项目功能实现
项目结构分析图
Day23_工程化项目开发笔记.md 60.91kb
04 项目实现本地存储
Day24_工程化项目开发笔记.md 97.78kb
Day24_课堂笔记.md 7.42kb
05 项目其他功能与部署
Day25_工程化项目开发笔记.md 144.69kb
阶段07:React + TypeScript + 医通项目
React + TypeScript + 医通项目
day01-01-clone仓库及学习目录介绍.mp4 10.41M
day01-02-使用vscode获取最新代码.mp4 25.59M
day01-03-vscode练习目录说明.mp4 4.07M
day01-05-react介绍.mp4 28.85M
day01-06-react调试插件的安装.mp4 13.38M
day01-07-react代码运行控制台报错-关闭其他插件.mp4 3.60M
day01-08-vscode-插件安装.mp4 4.02M
day01-09-react基础使用.mp4 29.26M
day01-10-vscode如何配置代码片段.mp4 47.71M
day01-11-注意事项.mp4 32.44M
day01-12-虚拟dom和真实dom的区别.mp4 68.12M
day01-14-创建没有属性的react元素.mp4 16.86M
day01-15-特殊属性className.mp4 25.85M
day01-16-react元素嵌套作业.mp4 6.50M
day01-17-react元素的嵌套.mp4 20.82M
day01-19-jsx注意事项.mp4 18.60M
day01-20-js表达式和js语句的差别.mp4 18.56M
day01-21-插值表达式-01.mp4 54.97M
day01-22-插值表达式-02.mp4 40.10M
day01-23-翔哥碎碎念.mp4 22.33M
day01-24-条件渲染.mp4 58.89M
day01-25-style行内样式.mp4 16.97M
day01-26-style行内样式补充说明.mp4 3.53M
day01-27-class样式处理.mp4 29.06M
day01-28-列表渲染.mp4 83.24M
day01-29-作业.mp4 13.17M
day02-01-综合练习作业讲解.mp4 23.58M
day02-02-列表渲染的key值问题.mp4 21.42M
day02-03-jsx表达式给标签属性赋值.mp4 32.17M
day02-04-表格报错补充说明.mp4 3.04M
day02-05-通过标签属性绑定事件-事件回调函数相关知识.mp4 43.68M
day02-06-函数调用时的实参this说明.mp4 16.08M
day02-07-oninput-onchange的区别.mp4 16.49M
day02-08-jsx中的事件回调函数.mp4 55.01M
day02-09-jsx中事件回调参数传递.mp4 22.12M
day02-10-即传递事件对象又传递普通参数.mp4 12.93M
day02-11-jsx中的onChange事件.mp4 19.85M
day02-12-jsx标签语法补充说明.mp4 4.34M
day02-13-案例综合练习-点击事件处理.mp4 11.27M
day02-14-回顾小结.mp4 25.75M
day02-15-jsx中的三种注释方式.mp4 12.28M
day02-16-原生dom操作-文档碎片.mp4 32.62M
day02-17-React中的文档碎片.mp4 23.12M
day02-18-解构赋值复习.mp4 24.32M
day02-19-组件的基本认识.mp4 20.26M
day02-20-类组件的定义及调用.mp4 50.45M
day02-21-类组件render过程模拟实现.mp4 49.82M
day02-22-函数组件的定义及调用.mp4 23.90M
day02-23-函数组件调用渲染的过程.mp4 22.29M
day02-24-npm-yarn安装并启动项目.mp4 60.79M
day02-25-使用npx局部安装并创建启动项目.mp4 12.01M
day03-01-答疑-模拟render函数.mp4 32.08M
day03-02-react项目目录及文件介绍.mp4 66.27M
day03-04-创建一个类组件并在App根组件中调用.mp4 16.32M
day03-05-rcc-rfc.mp4 10.73M
day03-06-如何运行之前src目录的代码.mp4 3.37M
day03-07-类组件状态数据的定义及读取.mp4 28.32M
day03-08-类组件状态数据的理解及为什么一定要定义在state属性上.mp4 9.08M
day03-09-定义状态的方式二.mp4 6.89M
day03-10-类复习.mp4 44.05M
day03-11-类组件事件回调this指向问题.mp4 64.24M
day03-12-setState修改状态数据.mp4 35.05M
day03-14-类的子组件如何接收父组件传递的外部数据.mp4 43.31M
day03-16-props外部数据不可修改.mp4 9.56M
day03-17-props组件通信-子传父.mp4 37.82M
day03-18-props-children属性.mp4 16.89M
day03-19-限定props类型-必填-默认值.mp4 42.41M
day03-21-todolist静态结构布局.mp4 52.79M
day04-01-css-第三方样式库处理.mp4 19.12M
day04-02-css-第三方样式出导入方式二.mp4 10.32M
day04-03-css其他样式处理位置及导入方式.mp4 4.05M
day04-04-css模块化.mp4 31.48M
day04-05-图片处理.mp4 35.21M
day04-06-eslint语法检查规则配置.mp4 8.40M
day04-07-css模块化多个样式类名应用的补充说明.mp4 5.45M
day04-08-轮播图练习之布局.mp4 33.85M
day04-09-轮播图功能实现.mp4 15.47M
day04-10-轮播图-图片是数组元素版本.mp4 9.64M
day04-11-react基础课件内容概览-react17语法介绍.mp4 44.31M
day04-12-react生命周期的理解.mp4 17.09M
day04-13-组件挂载阶段.mp4 25.92M
day04-14-组件挂载-开启定时器-电子时钟案例.mp4 19.47M
day04-15-组件更新-componentDidUpdate.mp4 71.16M
day04-16-组件卸载-componentWillUnmount.mp4 25.39M
day04-17-组件卸载取消定时器案例练习.mp4 20.82M
day04-18-ref的基本使用.mp4 26.04M
day04-19-受控组件.mp4 88.92M
day04-20-受控表单-change函数封装.mp4 19.51M
day04-21-对象属性操作复习.mp4 6.02M
day04-22-radio单选框-复选框都是通过checked属性值受控.mp4 17.50M
day05-01-非受控组件表单操作.mp4 48.40M
day05-02-金山打字通如何练习手速.mp4 12.17M
day05-03-forEach-filter-map-reduce.mp4 103.66M
day05-04-find-findIndex-some-every.mp4 36.56M
day05-05-改变原数组方法及5个特殊方法.mp4 73.91M
day05-07-todoList静态布局运行.mp4 5.66M
day05-08-首屏数据渲染实现.mp4 56.18M
day05-09-用户交互功能实现思路.mp4 22.41M
day05-11-添加todo-02.mp4 22.99M
day05-12-删除todo.mp4 38.37M
day05-13-checkOne改变完成状态.mp4 22.27M
day05-14-checkAll.mp4 21.32M
day05-15-删除已完成.mp4 11.98M
day05-16-localStorage-JSON.stringify-parse复习.mp4 35.22M
day05-18-本地存储数据错误导致的数组方法报错及解决方案.mp4 8.62M
day06-01-useState.mp4 44.82M
day06-02-useState-深入理解.mp4 34.64M
day06-03-函数组件状态不改变只多渲染一次.mp4 22.08M
day06-04-useEffect基本使用.mp4 65.14M
day06-05-电子时钟练习.mp4 18.23M
day06-06-useRef.mp4 10.53M
day06-07-useRef单独模拟componentDidUpdate[了解].mp4 42.10M
day06-08-非受控组件.mp4 18.48M
day06-09-受控组件-参数方式封装change.mp4 26.77M
day06-10-受控组件-高阶函数封装change函数.mp4 15.18M
day06-11-受控组件调色板练习.mp4 17.97M
day06-12-setMsg用法(上).mp4 34.55M
day06-13-setMsg用法-回调函数(下).mp4 5.86M
day06-14-hook函数使用原则.mp4 53.30M
day06-15-自定义hook应用-未封装前.mp4 32.40M
day06-16-自定义hook应用-封装后.mp4 12.01M
day07-01-todolist-类组件改函数组件静态布局.mp4 9.36M
day07-03-添加todo.mp4 23.29M
day07-04-删除todo.mp4 9.43M
day07-05-checkOne修改单条数据的状态.mp4 7.91M
day07-06-删除已完成.mp4 9.86M
day07-07-全选反选.mp4 7.57M
day07-08-本地存储.mp4 21.67M
day07-09-props通信总结.mp4 12.81M
day07-10-useContext实现祖先组件向任意后代组件通信.mp4 45.30M
day07-11-pubsub实现任意组件通信.mp4 22.20M
day07-12-pubsub基本使用.mp4 50.58M
day07-13-pubsub改写todolist.mp4 44.49M
day07-14-axios基本配置使用.mp4 38.95M
day07-15-axios请求基本用法.mp4 15.78M
day07-17-react-request-配置.mp4 41.27M
day07-18-axios-repo-案例练习.mp4 63.19M
day07-19-axios发送请求开发思路.mp4 12.55M
day07-20-axios-查看请求接口-如何携带参数-具体操作思路.mp4 21.85M
day07-21-axios-发送请求开发套路应用.mp4 52.10M
day07-22-github-users静态页面布局.mp4 32.88M
day07-23-github-users-功能实现.mp4 75.12M
day08-01-前端路由的理解.mp4 21.74M
day08-02-react-路由基本概念及使用逻辑.mp4 26.85M
day08-03-react-路由基本使用.mp4 26.11M
day08-04-Navigate重定向.mp4 17.08M
day08-05-404页面配置.mp4 12.70M
day08-06-NavLink-Link-实现无刷新跳转-active高亮.mp4 26.78M
day08-07-自定义高亮样式类名.mp4 21.00M
day08-08-路由表.mp4 31.94M
day08-09-一级路由页面练习.mp4 36.53M
day08-10-Outlet二级路由配置.mp4 43.88M
day08-11-编程式导航-useNavigate.mp4 49.54M
day08-13-路由参数传递-query参数.mp4 32.43M
day08-14-路由参数传递-state参数.mp4 22.15M
day08-15-路由懒加载.mp4 50.29M
day08-16-bootstrap引入使用相对目录导致文件加载失败的原因.mp4 13.08M
day08-17-html5-history模式-hash路由模式区别.mp4 14.31M
day09-01-redux作用介绍.mp4 7.41M
day09-02-redux核心概念及相互关系.mp4 26.65M
day09-03-数据切片的创建.mp4 62.96M
day09-05-store.dispatch修改状态数据.mp4 17.38M
day09-06-监听仓库数据的变化-store.subscribe.mp4 5.43M
day09-07-redux调试工具的安装及基本使用.mp4 12.10M
day09-09-react-redux基本使用.mp4 62.53M
day09-10-商品-购物车练习静态页面布局完成.mp4 30.62M
day09-11-创建商品切片-购物车切片及store.mp4 28.22M
day09-12-添加商品完成.mp4 38.62M
day09-13-商品列表渲染完成.mp4 7.51M
day09-14-redux执行操作分析.mp4 13.84M
day09-15-添加购物车操作完成.mp4 43.09M
day09-16-购物车列表功能实现.mp4 7.37M
day09-17-购车商品数量操作.mp4 41.28M
day09-18-调错思路分析.mp4 20.74M
day10-01-redux复习.mp4 29.75M
day10-02-redux-异步操作-createAsyncThunk-extraReducers.mp4 97.81M
day10-03-reduxjs-toolkit小结.mp4 34.63M
day10-04-useCallback-缓存一个函数.mp4 42.69M
day10-05-PureComponent纯组件.mp4 35.42M
day10-07-useMemo缓存一个函数计算的结果.mp4 31.63M
day10-08-useReducer-函数组件状态进行集中管理.mp4 36.46M
day10-09-useDebugValue.mp4 14.07M
day10-11-useImpretiveHandle.mp4 79.26M
day10-12-typescript基本介绍及使用.mp4 38.42M
day10-13-typescript-工程化环境构建.mp4 51.38M
day10-14-ts基本数据类型.mp4 117.41M
day10-15-类型推断.mp4 5.10M
day11-01-ts-函数.mp4 54.46M
day11-02-ts-class-01.mp4 25.03M
day11-03-ts-class-类的修饰符.mp4 34.85M
day11-04-ts-接口-可选-只读属性.mp4 28.24M
day11-05-ts-接口-限定方法.mp4 13.73M
day11-06-ts-接口限定类.mp4 33.83M
day11-07-ts-接口重复定义.mp4 7.13M
day11-09-泛型参数可以不止一个.mp4 13.32M
day11-10-泛型接口.mp4 20.92M
day11-11-泛型类.mp4 6.20M
day11-12-泛型约束.mp4 12.66M
day11-14-ts声明文件说明.mp4 35.28M
day11-15-内置类-BOM-DOM内置类.mp4 36.85M
day11-16-antd安装使用步骤.mp4 38.09M
day11-17-主题风格配置.mp4 15.01M
day11-18-antd组件使用套路.mp4 59.06M
day11-19-Table组件渲染.mp4 89.64M
day12-01-Table组件复习.mp4 10.87M
day12-02-pagination分页配置介绍.mp4 30.12M
day12-03-动态实现分页功能.mp4 34.30M
day12-04-ts中发送ajax请求-语法检查错误演示.mp4 40.79M
day12-05-ts发送ajax请求定义类型及请求泛型传递.mp4 48.06M
day12-06-ts中发送ajax请求步骤总结[重要].mp4 8.52M
day12-07-axios结合table实现数据分页.mp4 40.47M
day12-08-表单基本使用.mp4 47.19M
day12-09-useForm-创建form对象处理表单数据.mp4 34.58M
day12-10-其他组件及方法使用.mp4 32.51M
day12-12-react项目clone及目录介绍.mp4 19.60M
day12-13-final项目-依赖安装及启动-可能错误的解决方案.mp4 24.78M
day12-14-base项目-依赖安装及启动.mp4 11.78M
day12-15-项目开发流程.mp4 33.80M
day12-16-项目目录结构介绍.mp4 49.50M
day12-17-carco扩展配置react项目.mp4 42.65M
day12-18-创建医院设置路由组件-完成路由配置.mp4 38.74M
day12-19-医院设置组件静态结构完成.mp4 33.07M
day12-20-医院设置api类型及函数封装.mp4 41.84M
day12-21-医院设置列表显示.mp4 64.69M
day13-01-医院设置分页数据渲染笔记整理.mp4 9.79M
day13-02-表格loading效果.mp4 9.15M
day13-03-列宽度-列固定-滚动条.mp4 24.09M
day13-04-表单搜索查询功能实现.mp4 66.88M
day13-05-清空表单.mp4 19.88M
day13-06-添加医院设置组件创建及路由配置.mp4 24.27M
day13-07-添加医院静态布局完成.mp4 25.27M
day13-08-添加医院接口类型定义及api函数封装.mp4 23.34M
day13-09-添加医院功能实现.mp4 19.37M
day13-10-根据id删除医院设置.mp4 45.91M
day13-11-批量删除id状态获取及设置.mp4 27.58M
day13-12-批量删除实现.mp4 28.71M
day13-13-编辑按钮事件绑定-及路由配置.mp4 11.54M
day13-14-根据id获取医院设置并渲染到表单.mp4 44.92M
day13-15-编辑操作完成.mp4 40.98M
day13-16-医院列表路由组件创建及路由配置.mp4 13.81M
day13-17-医院列表静态布局.mp4 44.21M
day13-18-省市区api类型及函数封装.mp4 31.31M
day13-19-调用api函数获取省列表并定义状态完成渲染.mp4 20.23M
day13-20-获取市-区列表并渲染.mp4 52.33M
day14-01-省市区联动-bug解决.mp4 40.97M
day14-02-医院类型-医院状态-渲染.mp4 24.08M
day14-03-医院列表api-类型及函数封装.mp4 66.17M
day14-03-医院列表api函数-声明周期钩子中调用.mp4 11.40M
day14-04-医院列表分页数据渲染.mp4 63.27M
day14-05-react开发释疑.mp4 8.23M
day14-06-医院列表查询功能实现.mp4 43.96M
day14-07-清空功能实现.mp4 36.97M
day14-08-医院详情路由组件创建及路由配置.mp4 20.08M
day14-09-医院详情页静态布局.mp4 40.40M
day14-10-医院详情api类型及函数定义.mp4 24.21M
day14-11-医院详情-数据渲染.mp4 51.10M
day14-12-医院上下线切换.mp4 26.69M
day14-13-排班路由组件创建及路由配置.mp4 12.01M
day14-14-医院排班静态页面布局完成.mp4 60.01M
day14-16-科室列表渲染完毕.mp4 103.47M
day15-01-点击切换科室选中状态.mp4 24.39M
day15-02-排班日期分页列表-类型定义及api函数封装.mp4 36.96M
day15-03-在组件中发送请求获取排班日期的数据.mp4 36.85M
day15-04-排班日期分页列表数据渲染及切换完成.mp4 52.06M
day15-05-排班医生api-类型及函数封装.mp4 21.15M
day15-06-排班医生api调用并打印列表.mp4 18.68M
day15-07-医生列表渲染完成.mp4 30.64M
day15-08-react调错思路分析.mp4 19.15M
day15-09-数据字典路由组件创建-路由配置.mp4 24.57M
day15-10-获取数据字典数据并渲染table表格.mp4 23.57M
day15-11-table-展开图标配置.mp4 21.90M
day15-12-table展开节点处理完毕.mp4 71.27M
day15-13-打包上线部署.mp4 84.34M
day15-14-i18n国际化.mp4 62.80M
day15-15-antd中的国际化.mp4 45.61M
day15-16-react-diff算法-key.mp4 116.06M
day15-17-react复习.mp4 83.62M
day15-18-未来规划.mp4 48.23M
配套资料.rar 113.62M
… 共 578 条