waym1ng/fe

前端 100 天，帮助 10W 人入门并进阶前端。

《前端小课》前端从 0 到 1，免费电子书

《前端小课》是通过图片、文字、代码、视频等多种方式写成的一本多媒体电子书。全书分为不同的小书，每本小书旨在讲透一个知识点。比如 CSS布局、JavaScript基础、动画。以最基础的编程知识为起点，即使不懂编程的小白也能够通过本书学会编程，顺利进入互联网行业。

本书最大的特色是通过公众号+图书+网站形成一个闭环。读者可通过公众号实时获得最新的前端知识，并与作者实时互动；通过图书可以系统地学习前端知识，对前端知识形成一个整体的认识；通过网站可看到代码的实现运行效果。

网站入口，电子书入口（国内）：https://lefex.gitee.io/

网站入口，电子书入口（国外）： https://lefex.github.io/

大厂前端面试真题解析： https://lefex.github.io/bat

前端小课，一本帮助你学习前端的多媒体电子书。每天一小课，分阶段、系统地学习前端知识。如果你有编程基础，这个课程非常适合你。

• 前端学习路线
• 前端小课开课啦
• 学习前端的 8 个专题
• 我的2019 —我与《前端小课》
• 2020年我对大前端的认知
• demo 合集

前端专题

汇集了前端各种解决方案，比如编辑器、在线编辑、工程化、性能优化、浏览器插件、Javascript、DOM、Canvas宝贝、SVG等等，持续更新！！！

🐶前往查看

微信公众号，内容同步

关注公众号：素燕

强烈推荐

• 10x 程序员 · 提高 shell 的使用效率
• npm install -g 的时候别再输密码了
• 使用 vim 不得不看的 2 个 tips

Vue 核心原理

• 实现检测系统（撰写中）

项目经验

• 使用百度开源的ESLint规范集让团队内部代码规范保持一致
• 解决前端 node 环境跨域与404问题，yog2
• 最近看了很多异步编程的博文，该文讲的最为透彻
• 通过精读一本英文技术书籍搞定英语
• 前端网络请求都有哪些方式？webSocket 是什么？
• 学完 Promise 源码，出了 9 道面试题
• 面试让手写Promise，不可取
• Vue.use(ElementUI) 做了什么？
• interface 给对象上个紧箍咒
• 无需下载，1秒查看GitHub项目源码
• 通过 element-ui 自建 UI 组件库，踩坑记录
• 微软365将放弃IE11，你却仍支持IE9？
• 让脚本代替你大部分工作
• 拆解 UI 组件 el-upload 文件上传
• 4天快速落地团队内部的UI组件库
• GitHub 夜间模式实现原理拆解
• 前端如何导出 Excel（CSV）文件
• 代码执行器 hook console.log 方案
• 技术文中直接执行代码，我实现了
• 后台系统都有哪些方案？
• 搞一个万能的 webserver
• 微信读书的 debugger 虽斩断了你的调试的念头，但我有一招
• 1 分钟给的的开源库做个网站
• js-native 通信的 6 种方式
• 小程序白皮书
• 其实有更好的方式学习小程序源码
• 经验 · 在 iOS 中遇到的一个前端问题
• BAT 用一行代码实现了网页黑白显示
• iOS 查找私有 API 的终极方案 · 逆向
• 各种博客的代码高亮是如何实现的
• 不写一行代码，即可跨域的技巧
• 懂设计的程序员
• 你可能不需要一个 UI 设计师

感悟

• 2021 开工、OKR、护城河
• 聊团队，说招人
• 思考并付诸实践
• 随便聊聊
• 素燕的 2020 · 终生成长
• 反思一下，如何写一流代码
• 三十而已，构建自己的投资系统
• 今天，入职百度恰好 3 年
• 周末对前端小课网站更新了一些内容
• 我电脑中的一些常用软件
• 从 JavaScript 红宝书中边学技术边学英语
• 周末把前端小课网站进行了一次升级
• 《前端小课》· 前端图书的一次“革命”
• 我给自己定的“双节” OKR 顺利完成
• 普及一下“我”
• 关于晋升的一点思考
• 2020年我对大前端的认知

第 1 阶段：HTML + CSS

• 坚持学习前端的第20天
• 第19天：写出易复用、易维护、结构清晰的 CSS
• 第18天：CSS中的权重
• 第17天：屏幕尺寸这么多，前端却有高招
• 第16天：领导说，体验差
• 聚齐了这3张宝图，搞懂CSS权重
• 第15天：设计师的要求
• 第14天：在文字前、后插入一个图标
• 第13天：CSS中使用图
• 移动端同学为什么要学前端
• 第12天：打破常规之 display
• 第11天：说好不哭
• 第10天：撑起CSS布局的半壁江山---盒子模型
• 第9天：自我介绍
• 第8天：border 能干啥
• 群里讨论的一个选择器问题（一定要看）
• 第7天：CSS中的选择器详解
• 第 6 天：设计一个左右滑动的菜单
• 第6天：使用CSS的三种方式
• 第 5 天：读懂 HTML 标签
• 第4天：给自己一句鼓励的话
• 第4天：我学前端时用过的资源
• 第3天：HTML 中的 head 标签
• 第2天：HTML 结构
• 第1天：开篇词，开发环境准备

第 2 阶段：死磕 CSS 布局

• 用前端仿写朋友圈
• 第13天：布局的兼容性与两种不常用的布局
• 第12天： 靠边站之float
• 第11天：grid布局对齐属性
• 第10天：买一块地盖一处院子
• 第9天: position 布局之 fixed、sticky
• 第8天：布局翘楚 - Grid 布局概述
• 第7天: position 布局之绝对布局 absolute
• 第6天：深入理解 FlexBox 布局的弹性
• 第5天：position 布局之相对布局 relative
• 第4天：图解 FlexBox 布局（下）
• 第3天：布局之源 - 流式布局
• 第2天：图解 FlexBox 布局（上）
• 第1天：前端布局概述

第 3 阶段：搞懂网络，掌握网页请求流程

• 第三阶段 - 重学网络编程（HTTP、TCP、WebServer）
• 一条命令开启一个 WebServer
• 第2天：server 的接口是如何实现的
• 第3天：HTTP 之客户端与服务端
• 第4天：数据传输之 TCP ，聊天室实践（含视频）
• 第 5 天： 以农村故事说说我对 socket 的理解
• 第 6 天：HTTP背景与整个请求响应流程 （官方英文描述）
• 第 7 天：小卖部与生产商之间的协作
• 这些网络(HTTP, TCP, WebServer)学习资料不容错过
• 第 8 天：弄懂 HTTP 请求报文
• 第 9 天：HTTP 响应报文与状态码
• 第 10 天：我犯了个错误
• 第 11 天：我找到了学习 socket 的正确姿势
• 第 12 天：从 0 徒手实现一个 HTTP Server
• 第 13 天：从 HTTP 到 HTTPS，取得阶段性胜利
• 用故事说透 HTTPS（漫画）
• OpenSSL 自述
• 被乱用的 Cookie
• 打破讨论薪资的红线 之 签名原理（漫画）
• 被“同源策略”限制的我却想着“跨域”
• 第三阶段结语：告别网络编程

第 4 阶段：系统深入学习 JavaScript

• 第四阶段 - 系统深入学习 JavaScript
• 程序原本 — 推荐3本免费电子书
• 被招安的 JavaScript ，取名为 ECMAScript
• 让 JavaScript 跑起来+函数
• JavaScript 中的对象
• var 很傻、let 很亲切 、const 更坚定
• 期中考试之 var、let、const
• 用2000字详细解答昨天的题目（再忙也要看一下）
• JavaScript 内置对象数组
• 用故事说透 JavaScript 中的原型
• 从源码到抽象语法树可视化
• 字节码与二进制的“样貌”
• 执行上下文与调用栈
• 看透变量提升与块级作用域实现的原理
• 推荐我精心准备的 JavaScript 学习资源
• 让 JavaScript 文件代码相互独立
• 带有执行环境的函数 - 闭包
• 调试 JavaScript 少不了这几个技巧
• 连接你、我、他 —— this
• && ，|| 超越了我的认知
• JS 中如何实现策略模式
• 一种系统化创建单例的方法
• 其实有更好的方式学习小程序源码
• 对象的 key 原来可以使用变量
• 2 道 this面试题，你能答对几道？
• 被我忽略的 6 个 JS 开发小技巧
• 群里分享的关于我对 JS 闭包的理解
• 找女朋友时，可能真需要一个媒人 Proxy
• js 中的 ~~ 随好用但好丑
• 字符串转换成整数，被教训了
• 真正的浏览器磁盘缓存 LocalStorage
• 啥时候用 sessionStorage
• 发现有人把 cookie 用作缓存机制，纠正
• 用 import/export 全靠“抄”
• 一种系统化创建单例的方法
• 对象的 key 原来可以使用变量
• 2 道 this面试题，你能答对几道？
• 被我忽略的 6 个 JS 开发小技巧
• 群里分享的关于我对 JS 闭包的理解
• console.log(console.log) = ?
• JavaScript: The First 20 Years

第 5 阶段：深入学习 DOM

• 深入学习 DOM、浏览器工作原理
• 我是一颗树 · DOM
• 回到工位“我”悟出了 DOM 设计的精华
• 打通 DOM 的设计架构
• 两种方法轻松找到 DOM 元素
• 彻底搞懂 offsetX、scrollX、clientX 的区别
• 了如指掌 · DOM 舆图

第 6 阶段：深入学习 Vue (内容还会补充)

• scoped 和 /deep/ 解决 css 冲突覆盖问题
• 系统学习 vue 中使用 css 的各种方式
• refs - 访问DOM或组件实例
• 深度嵌套组件，数据不需要层层传递
• vue 模板的本质是渲染函数
• Vue 组件的本质
• Vue 创建的 app 实例最终去哪了
• 来，开局先创建一个 app
• Vue3 安装与执行过程
• Vue3 Contributor 说渲染器的设计**
• 查看 Vue3 模板编译后的 AST 和渲染函数
• Vue模板语法汇总
• Vue3.0 正式发布，代号为 One Piece
• 第六阶段 · 期待已久的 Vue
• 学习 Vue 从如何贡献代码开始
• 创建第一个 Vue 项目
• 一个页面 Vue 实例只能有一个吗？
• 关于 Vue 中计算与侦听属性的一些思考
• 让 Class 与 Style 动起来
• 动静结合 · Vue 模板
• Vue 模板的功臣 · 指令
• 关于 v-model 的一点思考
• 太强了，从 0 到 1 搭建 vue-cli
• 各种博客的代码高亮是如何实现的
• scoped 减少了我对 CSS 样式冲突的焦虑
• Vue CLI 3.0 配置项 - 设置接口代理

第 7 阶段：云与环境部署

• 第七阶段 · 云与环境部署
• 精心画了一张 vim 壁纸
• 使用 vim 不得不看的 2 个 tips
• npm install -g 的时候别再输密码了
• 我是这样查线上日志的 · 6个命令
• vim 电脑壁纸来了（3种主题）
• 数据接盘侠 > 与 >>
• 进来聊一聊前端上线的一些问题
• 10x 程序员 · 提高 shell 的使用效率
• 与前端部署相关的一些关键词

第 8 阶段：小程序与前端动画特效

• 小程序向上弹出动画效果
• 网易云音乐背景高斯模糊探索
• 跳动的音符动画实现原理剖析
• 让按钮“呼吸”一会（呼吸动画）
• 这个动画代码可以优化一下
• 小猴子跌落山崖之 linear、ease、ease-in
• 图解 CSS 属性单位和动画属性
• 环形进度条没有想象的那么简单
• 四步搞定小菊花 Loading 动画
• 有赞真赞，官网水波纹动画这么酷
• 给 HTML 元素 Hover 态加点料
• 第 8 阶段前端动效结束，下一阶段内容预告

第 9 阶段：搞懂搞透前端构建

• 每位前端人都需要搞懂、搞透前端构建
• webpack 究竟是什么，初学者晕头转向
• 安装 webpack 搞定 Vue 打包
• 从使用 loader 到实现 loader · webpack
• 搞定 webpack 的 plugin 不在话下
• 使用 webpack 动态生成 html
• webpack 与 tapable 擦出火花，实现 plugin 系统
• webpack 性能优化 DLL 才硬核
• webpack 辅助高效开发
• 原来实现 CLI 工具如此简单，以前路走错了
• webpack 性能优化之定位问题
• 这些资料助你搞透 Webpack
• 统一管理多项目 webpack 配置文件

🌹网站

你也可以通过网站学习，前端小课