前端开发底层逻辑:从零构建网页的完整闭环

很多初学者陷入困境,往往是因为只懂语法却不懂如何组合它们。本课程直击这一痛点,通过 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 条