这门课解决什么问题？

前端开发的核心能力集中在两件事：HTML/CSS 的页面布局与样式控制，以及数据结构与算法的底层思维。很多转岗学习者卡在“只会写页面，不会调布局”，或者“代码能跑但面试答不上算法题”。这门课围绕这两块展开，从 CSS 布局与定位讲起，逐步覆盖 HTTP、node.js 与前端基础，再延伸到排序、哈希、桶排序、基数排序等算法与数据结构。目标是让你既能把按钮、技能条、作品展示区这类常见组件做出来，又能用伪代码和流程图拆解问题，做到“会写页面、会调布局、会写算法”。

适合什么基础？

零基础到有一定编程基础的人都可以学。如果你之前写过 Python 或 Java，前端这块会更快上手；如果你完全没写过代码，建议先花两到三天把 HTML 和 CSS 的基本概念过一遍，再跟着学。这门课不适合只想学某个框架的纯业务学习者，它更偏底层原理——CSS 布局、HTTP 请求、数据结构，这些是任何前端项目都绕不开的能力。

建议先看哪几块？

第一块是 CSS 布局与定位，这是整个课程的地基，文档流、高度、定位方式、伪元素，这些必须吃透。第二块是 HTTP、node.js、HTML、CSS 小结，帮你把前端知识串成一条线，理解请求流程。第三块是算法与数据结构，五种排序、哈希、桶排序和基数排序，配合伪代码和流程图一起学。建议按顺序走，不要跳着学。

学完能独立做什么？

能独立完成一个前端页面的布局与样式实现，理解浏览器请求资源的完整流程，会用伪代码和流程图分析简单问题，掌握至少五种排序算法并能手写实现。这些能力足以支撑你独立完成一个前后端分离项目的前端部分，也能应对前端岗位的日常开发与面试。

资料怎么配合练习？

资料包以任务编号组织，建议按顺序学习，每学完一个任务模块就动手跟着做一遍练习。遇到不理解的地方，先看对应的复习视频，再对照文档流、定位方式等知识点理解原理。算法部分建议把五种排序都手写一遍，并尝试用伪代码和流程图分别描述执行过程，加深对算法逻辑的理解。

课程目录

任务1 开班
任务11 入门：CSS布局与定位
_fangfang-1023-2-文档流与高度.mp4 64.91M
_fangfang-1023-5-iconfont.mp4 67.71M
任务12：CSS布局与定位续
_fangfang-1027-2-制作按钮.mp4 46.64M
_fangfang-1027-3-技能条.mp4 53.74M
_fangfang-1027-4-作品展示区.mp4 78.15M
任务12：CSS布局与定位续(1)
_fangfang-1027-1-太极与伪元素.mp4 43.39M
任务13 入门：HTTP node.js HTML CSS 小结
_fangfang-1029-1-作业回顾.mp4 9.38M
_fangfang-1029-2-复习.mp4 21.31M
_fangfang-1029-3-复习请求.mp4 18.64M
_fangfang-1029-4-再次复习请求.mp4 8.87M
_fangfang-1029-5-复习.mp4 51.26M
_fangfang-1029-6-答疑.mp4 15.34M
任务13 入门：HTTP node.js HTML CSS 小结(1)
任务14 入门：算法与初级
_fangfang-1031-2-伪代码.mp4 27.50M
_fangfang-1031-3-流程图.mp4 23.27M
_fangfang-1031-4-五种排序.mp4 93.42M
_fangfang-1031-5-用伪代码实现排序.mp4 40.33M
任务15：数据结构
_fangfang-1105-1-概述.mp4 5.69M
_fangfang-1105-2-哈希&计数排序.mp4 45.43M
_fangfang-1105-3-桶排序&基数排序.mp4 23.31M
_fangfang-1105-4-队列和栈.mp4 15.14M
_fangfang-1105-5-链表和树.mp4 59.17M
_fangfang-1105-6-堆排序.mp4 33.40M
_fangfang-1105-7-总结.mp4 8.45M
任务16 进阶：JavaScript初体验
_fangfang-1107-1-概述.mp4 6.31M
_fangfang-1107-2-数据结构&一个div.mp4 46.88M
_fangfang-1107-3-三行div.mp4 37.81M
_fangfang-1107-4-监听键盘事件.mp4 29.03M
_fangfang-1107-5-编辑hash.mp4 27.46M
_fangfang-1107-6-使用localStorage.mp4 29.40M
_fangfang-1107-7-解决一个bug.mp4 2.30M
任务17 进阶：第一个JS作品
_fangfang-1110-1-概述.mp4 10.73M
_fangfang-1110-2-做键盘.mp4 62.85M
_fangfang-1110-3-加 icon.mp4 73.44M
_fangfang-1110-4-onerror.mp4 16.35M
_fangfang-1110-5-封装成函数.mp4 93.11M
_fangfang-1110-6-总结.mp4 8.86M
任务18 进阶：Canvas画板
_fangfang-1114-1-画板概述.mp4 6.90M
_fangfang-1114-2-mouse事件.mp4 19.58M
_fangfang-1114-3-div画圈.mp4 20.29M
_fangfang-1114-4-canvas画圈.mp4 58.11M
_fangfang-1114-5-全屏canvas.mp4 24.74M
_fangfang-1114-6-橡皮擦.mp4 23.63M
_fangfang-1114-7-上节课作业解答.mp4 22.13M
任务19 进阶：Canva画板续
_fangfang-1117-1-概述.mp4 4.26M
_fangfang-1117-2-添加viewport.mp4 27.81M
_fangfang-1117-3-touch事件.mp4 40.13M
_fangfang-1117-4-添加画笔颜色.mp4 47.76M
_fangfang-1117-5-画笔粗细+保存图片.mp4 53.42M
_fangfang-1117-6-局域网调试.mp4 11.39M
任务2 入门：计算机是如何存储数据的
任务20 JS里的数据
_fangfang-1121-2-JS的黑历史.mp4 53.06M
_fangfang-1121-3-答疑.mp4 9.52M
_fangfang-1121-4-number和string.mp4 31.25M
_fangfang-1121-5-bool、undefined、null和对象.mp4 36.39M
_fangfang-1121-6-delete、in、forin 和 typeof.mp4 17.25M
任务3 入门：软件安装
_fangfang-vip15-170926-19-25-54.mp4 64.88M
_fangfang-vip15-170926-19-41-26.mp4 313.69M
_fangfang-vip15-170926-22-15-58.mp4 275.85M
任务4 入门命令行基础
1506673213225.mp4 32.58M
1506677029794.mp4 83.90M
1510977878398.mp4 69.79M
任务41 考试：JS高级基础知识考试
任务42 高级：会动的简历
_fangfang-0126-1-课程回顾.mp4 9.19M
_fangfang-0126-2-页面会动的原理.mp4 21.82M
_fangfang-0126-3-枯燥的写代码中.mp4 93.30M
_fangfang-0126-4-初识异步与回调.mp4 107.19M
任务43 画一只皮卡丘
_fangfang-0128-1-介绍codepen.mp4 10.40M
_fangfang-0128-2-皮卡丘简单的部位.mp4 30.67M
_fangfang-0128-3-皮卡丘复杂的部位.mp4 58.23M
_fangfang-0128-4-展示皮卡丘的制作过程.mp4 46.43M
_fangfang-0128-5-调速.mp4 41.87M
_fangfang-0128-6-部署代码.mp4 8.44M
任务44 高级：Cookie与登陆注册
_fangfang-0130-1-初级知识复习.mp4 11.84M
_fangfang-0130-2-登录注册.mp4 117.25M
_fangfang-0130-3-Cookie.mp4 123.06M
任务45 高级：Session、LocalStorage、Cache-Control
_fangfang-0204-1-使用Session保存信息.mp4 55.05M
_fangfang-0204-2-localStorage简介.mp4 11.48M
_fangfang-0204-3-localStorage用法.mp4 38.13M
_fangfang-0204-4-不基于Cookie的Session.mp4 10.37M
_fangfang-0204-5-缓存控制Cache-Control.mp4 29.19M
_fangfang-0204-6-如何更新缓存.mp4 20.26M
_fangfang-0204-7-Expires.mp4 15.16M
_fangfang-0204-8-ETag.mp4 24.99M
任务46 高级：初识webpack
_fangfang-0206-1-使用命令行.mp4 78.56M
_fangfang-0206-2-使用更多命令行.mp4 52.14M
_fangfang-0206-3-用webpack来代替这些命令行.mp4 158.84M
_fangfang-0206-4-用parcel代替该死的webpack.mp4 42.33M
任务47 高级：从MVC到ＭＶＶＭ
_fangfang-0209-1-引入 axios.mp4 57.73M
_fangfang-0209-2-引入MVC.mp4 84.00M
_fangfang-0209-3-引入 Vue.mp4 36.34M
_fangfang-0209-4-使用 Vue 做三个小东西.mp4 60.51M
任务48 高级：2018年前端面试押题
_fangfang-0313-1-2018押题（上）.mp4 124.65M
_fangfang-0313-2-2018押题（下）.mp4 156.69M
任务49 高级：简历
2018-8-6-17-1-2-617.mp4 12.79M
_fangfang-0316-1-简历里面应该有什么.mp4 65.67M
_fangfang-0316-2-去哪投简历.mp4 58.38M
_fangfang-0316-3-个性化你的简历.mp4 146.11M
任务5 入门：脚本
_fangfang-1008-1-概述.mp4 8.63M
_fangfang-1008-2-脚本.mp4 6.08M
_fangfang-1008-3-写脚本.mp4 9.92M
_fangfang-1008-5-PATH.mp4 17.45M
_fangfang-1008-6-参数、if、返回值.mp4 26.44M
_fangfang-1008-7-Node.js命令行.mp4 26.78M
_fangfang-1008-8-Node.js脚本.mp4 25.49M
任务50 毕设：网易云音乐1
_fangfang-0211-1-用例图、线框图、架构图.mp4 29.66M
_fangfang-0211-2-LeanCloud环境搭建.mp4 50.46M
_fangfang-0211-3-七牛环境搭建.mp4 82.96M
_fangfang-0211-4-七牛环境搭建2.mp4 78.48M
任务51 毕设：网易云音乐2
_fangfang-0213-1-获取外链.mp4 55.73M
_fangfang-0213-2-CSS布局.mp4 49.05M
_fangfang-0213-3-更多样式.mp4 32.55M
_fangfang-0213-4-模块化、MVC.mp4 41.94M
_fangfang-0213-5-EventHub.mp4 145.52M
任务52 毕设：网易云音乐3
_fangfang-0216-1-获取歌曲.mp4 37.60M
_fangfang-0216-2-修改歌曲.mp4 136.89M
_fangfang-0216-3-视图状态丢失.mp4 18.17M
任务53 毕设：网易云音乐4
_fangfang-0223-1-Vue自测答案.mp4 20.88M
_fangfang-0223-2-加loading.mp4 43.90M
_fangfang-0223-3-上传加锁.mp4 18.81M
_fangfang-0223-4-首页 tab 切换.mp4 115.66M
_fangfang-0223-5-播放页获取歌曲信息.mp4 49.91M
_fangfang-0223-6-播放和暂停.mp4 19.40M
任务54 毕设：网易云音乐5
_fangfang-0225-1-光碟转啊转.mp4 152.93M
_fangfang-0225-2-歌词动啊动.mp4 173.90M
任务55 毕设：网易云音乐6
_fangfang-0302-1-手机页面调试alert法.mp4 50.26M
_fangfang-0302-2-手机页面调试vconsole法.mp4 31.08M
任务56 毕设：网易云音乐7
2018-6-4-10-49-3-866.mp4 96.25M
2018-6-4-10-50-36-465.mp4 20.63M
任务6 入门：http入门
_fangfang-1010-1-概述.mp4 2.38M
_fangfang-1010-2-WWW的历史.mp4 16.28M
_fangfang-1010-3-URL.mp4 36.77M
_fangfang-1010-4-DNS&hosts.mp4 13.14M
_fangfang-1010-5-请求.mp4 52.02M
_fangfang-1010-6-请求答疑.mp4 47.71M
_fangfang-1010-7-响应.mp4 37.69M
任务7 入门：Node.js Server
_fangfang-1013-1-概述.mp4 5.76M
_fangfang-1013-2-网络与IP.mp4 51.29M
_fangfang-1013-3-端口.mp4 18.19M
_fangfang-1013-4-用Server接收请求.mp4 24.18M
_fangfang-1013-5-用Server发出响应.mp4 29.89M
_fangfang-1013-6-总结.mp4 26.55M
任务8 入门：HTML
_fangfang-1015-1-概述.mp4 16.40M
_fangfang-1015-2-购买域名.mp4 12.14M
_fangfang-1015-3-简历写什么.mp4 38.85M
_fangfang-1015-4-HTML简介.mp4 74.63M
_fangfang-1015-5-如何写HTML.mp4 47.74M
任务9 入门：HTML续
_fangfang-1017-1-概述.mp4 4.17M
_fangfang-1017-2-测试题讲解.mp4 45.67M
_fangfang-1017-3-写HTML.mp4 20.50M
_fangfang-1017-4-iframe和a.mp4 61.63M
_fangfang-1017-5-form和table.mp4 97.84M