# FE

**Repository Path**: lefex/FE

## Basic Information

- **Project Name**: FE
- **Description**: 前端 100 天，帮助 10W 人入门并进阶前端。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2020-10-16
- **Last Updated**: 2022-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

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

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

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

![官网](https://s1.ax1x.com/2020/10/16/0bz8KS.jpg)

### 微信公众号，内容同步

![](https://s1.ax1x.com/2020/10/10/06VvOx.png)

### 第 1 阶段：HTML + CSS

- [坚持学习前端的第20天](https://mp.weixin.qq.com/s/-js2txXGKUzEFEMUlF8JBg)
- [第19天：写出易复用、易维护、结构清晰的 CSS](https://mp.weixin.qq.com/s/IqqoMc967gFYfHRJoCAJhw)
- [第18天：CSS中的权重](https://mp.weixin.qq.com/s/b2f58P6P7E00RswRyuHzVQ)
- [第17天：屏幕尺寸这么多，前端却有高招](https://mp.weixin.qq.com/s/nlVmqSaUTsKKIFS2lXBg7Q)
- [第16天：领导说，体验差](https://mp.weixin.qq.com/s/CEh7LcHDqj5s5UebK5t-Vw)
- [聚齐了这3张宝图，搞懂CSS权重](https://mp.weixin.qq.com/s/wQOEMwQVdDYXpqSN7SuLcA)
- [第15天：设计师的要求](https://mp.weixin.qq.com/s/5nrVkgzfMXivl1mAEvrWyg)
- [第14天：在文字前、后插入一个图标](https://mp.weixin.qq.com/s/P03ieC4DiTuZzWRY3vDMZg)
- [第13天：CSS中使用图](https://mp.weixin.qq.com/s/16E5JnHtszJ2rMunlHFPGA)
- [移动端同学为什么要学前端](https://mp.weixin.qq.com/s/3hhPUbcMPUZp5GYjg7_Gog)
- [第12天：打破常规之 display](https://mp.weixin.qq.com/s/OZNDlCroFkK79EbqZpWr8g)
- [第11天：说好不哭](https://mp.weixin.qq.com/s/0rOCSAJjMq7N4t8U-I1gnw)
- [第10天：撑起CSS布局的半壁江山---盒子模型](https://mp.weixin.qq.com/s/lt7_v8V5g5sG1QdP4-TOFQ)
- [第9天：自我介绍](https://mp.weixin.qq.com/s/11D_PwSxll_lKUD-yzWkxQ)
- [第8天：border 能干啥](https://mp.weixin.qq.com/s/l9pLes4Q64-Yq0KtmcTWQA)
- [群里讨论的一个选择器问题（一定要看）](https://mp.weixin.qq.com/s/nS_kcIqBwO03mvF97BZCBQ)
- [第7天：CSS中的选择器详解](https://mp.weixin.qq.com/s/V00q_cJrpPoEUXD7Yxvyug)
- [第 6 天：设计一个左右滑动的菜单](https://mp.weixin.qq.com/s/hCbRtgZ9v0T9OJhJ15JAeA)
- [第6天：使用CSS的三种方式](https://mp.weixin.qq.com/s/pHy30He9hS2C4UPDGxYqlg)
- [第 5 天：读懂 HTML 标签](https://mp.weixin.qq.com/s/vvrt3zvOt8jsgaulayu5sg)
- [第4天：给自己一句鼓励的话](https://mp.weixin.qq.com/s/u1z009G2lYZK-SGFCXJhyw)
- [第4天：我学前端时用过的资源](https://mp.weixin.qq.com/s/Y5miYpQhtv4fotp0bFMJiw)
- [第3天：HTML 中的 head 标签](https://mp.weixin.qq.com/s/LMiPhxhHyOku6HTg0cBQsQ)
- [第2天：HTML 结构](https://mp.weixin.qq.com/s/7Vx2CYBPTuoHQfYsawQhzA)
- [第1天：开篇词，开发环境准备](https://mp.weixin.qq.com/s/66oU0fY502OYK9WpxiaCtA)


### 第 2 阶段：死磕 CSS 布局

- [用前端仿写朋友圈](https://mp.weixin.qq.com/s/BUMaJXJ2bD0FcZ5kMI_WrA)
- [第13天：布局的兼容性与两种不常用的布局](https://mp.weixin.qq.com/s/fM8DkM9sGAGzu-G3TW_5UA)
- [第12天： 靠边站之float](https://mp.weixin.qq.com/s/ba8kJOU2a83NBnwG0y8fdQ)
- [第11天：grid布局对齐属性](https://mp.weixin.qq.com/s/9_zPYmfYzhIu-vgnfDGk4g)
- [第10天：买一块地盖一处院子](https://mp.weixin.qq.com/s/ZziZ9jDKGPORnV8Yv5r_lQ)
- [第9天: position 布局之 fixed、sticky](https://mp.weixin.qq.com/s/OOOrutqFKvOsY_Td-cpi4w)
- [第8天：布局翘楚 - Grid 布局概述](https://mp.weixin.qq.com/s/SJ7k23nIgMOcR2fDjOHhGg)
- [第7天: position 布局之绝对布局 absolute](https://mp.weixin.qq.com/s/UJZTjsKUC-aOo0zrNrryiQ)
- [第6天：深入理解 FlexBox 布局的弹性](https://mp.weixin.qq.com/s/XG5QeIUF-qkBAqd_jlUV9g)
- [第5天：position 布局之相对布局 relative](https://mp.weixin.qq.com/s/RFlSDGIq7ERm2CWCzpQCJQ)
- [第4天：图解 FlexBox 布局（下）](https://mp.weixin.qq.com/s/uct9apWqgznde1m2IMVgwA)
- [第3天：布局之源 - 流式布局](https://mp.weixin.qq.com/s/Ib2AnP47yuMe5HrWRyhTig)
- [第2天：图解 FlexBox 布局（上）](https://mp.weixin.qq.com/s/T-Z_8he9UxBBfL8Jb3zwtA)
- [第1天：前端布局概述](https://mp.weixin.qq.com/s/oDNuyEdgUPweSZiOWnriQA)


![](https://github.com/lefex/FE/blob/master/asset/css-layout.png)

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

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

### 第 4 阶段：系统深入学习 JavaScript
- [第四阶段 - 系统深入学习 JavaScript](https://mp.weixin.qq.com/s/TMdSJcq9s525MdMFmgT9Gw)
- [程序原本 — 推荐3本免费电子书](https://mp.weixin.qq.com/s/eH7rHCIvp4l29GcMQ7UYMQ)
- [被招安的 JavaScript ，取名为 ECMAScript](https://mp.weixin.qq.com/s/5UwQiNiB9i5eQQ-Nr9kFHA)
- [让 JavaScript 跑起来+函数](https://mp.weixin.qq.com/s/TwaIoofmixKTKEymiNfueQ)
- [JavaScript 中的对象](https://mp.weixin.qq.com/s/2G2LRIGXPjGQsRnoCB3NGQ)
- [var 很傻、let 很亲切 、const 更坚定](https://mp.weixin.qq.com/s/uZOj5HzJmH_fNeUEPipqwA)
- [期中考试之 var、let、const](https://mp.weixin.qq.com/s/F8Awa1S7bKBpx-ihQxkFfg)
- [用2000字详细解答昨天的题目（再忙也要看一下）](https://mp.weixin.qq.com/s/Vl1ft7ipsG9NDVE0qMXY8A)
- [JavaScript 内置对象数组](https://mp.weixin.qq.com/s/hTjTl9BQHTxpZtSDJu2s5w)
- [用故事说透 JavaScript 中的原型](https://mp.weixin.qq.com/s/2GOcsgdfFiQkUcvIh3d4zQ)
- [从源码到抽象语法树可视化](https://mp.weixin.qq.com/s/n4yaR4cYz65YGBVB_Faycg)
- [字节码与二进制的“样貌”](https://mp.weixin.qq.com/s/zComXbs9jbVWPd4FL2lAOA)
- [执行上下文与调用栈](https://mp.weixin.qq.com/s/a71BhSmwdrE2whvEAuVv2A)
- [看透变量提升与块级作用域实现的原理](https://mp.weixin.qq.com/s/WUTAm9IaL_0nByKVGrHQSg)
- [推荐我精心准备的 JavaScript 学习资源](https://mp.weixin.qq.com/s/hj00b4BjJFD9yBorSa-4kw)
- [让 JavaScript 文件代码相互独立](https://mp.weixin.qq.com/s/v3sRBOvXG5wu-4btURYnhA)
- [带有执行环境的函数 - 闭包](https://mp.weixin.qq.com/s/ocWhTCCiNXAr7Si5mo99aw)
- [调试 JavaScript 少不了这几个技巧](https://mp.weixin.qq.com/s/Ps7A5sJQfJ2MwJOPjlovuQ)
- [连接你、我、他 —— this](https://mp.weixin.qq.com/s/gFIRL-HFqql19fYOU-V3Og)
- [&& ，|| 超越了我的认知](https://mp.weixin.qq.com/s/qCnDp6oxLik2s1H_wbGZTg)
- [JS 中如何实现策略模式](https://mp.weixin.qq.com/s/c6bcs1ojBiOq29SNG0DE-Q)
- [一种系统化创建单例的方法](https://mp.weixin.qq.com/s/RR4I7ciae19b4Bov1QL9Bw)
- [其实有更好的方式学习小程序源码](https://mp.weixin.qq.com/s/BzdwR9BhGk_xCWUirdXBBQ)
- [对象的 key 原来可以使用变量](https://mp.weixin.qq.com/s/-SZvDmLsGQa_NToTL2A_VQ)
- [2 道 this面试题，你能答对几道？](https://mp.weixin.qq.com/s/9Otl12y_o9DPODH6R1MENQ)
- [被我忽略的 6 个 JS 开发小技巧](https://mp.weixin.qq.com/s/UjC6vFXczrmCv5v0dbHK_Q)
- [群里分享的关于我对 JS 闭包的理解](https://mp.weixin.qq.com/s/X0FLyn7aSJGq8y4m_6onpw)

### 第 5 阶段：深入学习 DOM
- [深入学习 DOM、浏览器工作原理](https://mp.weixin.qq.com/s/zeFQRjx3B11-QviBxTbLEQ)
- [我是一颗树 · DOM](https://mp.weixin.qq.com/s/rpY9fl9d_fM9P7uG8NxfUQ)
- [回到工位“我”悟出了 DOM 设计的精华](https://mp.weixin.qq.com/s/kVPqY09YDL4RjmOlqVe8mg)
- [打通 DOM 的设计架构](https://mp.weixin.qq.com/s/wDKzA3qJguRvPlznRsw4_w)
- [两种方法轻松找到 DOM 元素](https://mp.weixin.qq.com/s/wW6gsRdWOpf19ai3m7ZAnQ)
- [彻底搞懂 offsetX、scrollX、clientX 的区别](https://mp.weixin.qq.com/s/HYD_WEG8ObWAe4WYvqDdPg)
- [了如指掌 · DOM 舆图](https://mp.weixin.qq.com/s/aIfJC1fDf-y0SqvZT0KcUw)

### 第 6 阶段：深入学习 Vue (内容还会补充)
- [第六阶段 · 期待已久的 Vue](https://mp.weixin.qq.com/s/-Xc89GniErkrOf_cL9RNRQ)
- [学习 Vue 从如何贡献代码开始](https://mp.weixin.qq.com/s/H_B8ITW5tMSRF128cQXswg)
- [创建第一个 Vue 项目](https://mp.weixin.qq.com/s/KyQGSXfhrDePwL6OOBmpYQ)
- [一个页面 Vue 实例只能有一个吗？](https://mp.weixin.qq.com/s/_du0IZ5VZXg9ug1SEWNUFg)
- [关于 Vue 中计算与侦听属性的一些思考](https://mp.weixin.qq.com/s/xlilwHoVtmOE0Ogf1h_DyA)
- [让 Class 与 Style 动起来](https://mp.weixin.qq.com/s/vHnDVe_RTQikxTu6Bgfrdg)
- [动静结合 · Vue 模板](https://mp.weixin.qq.com/s/JqqLT3VrvwRHjAIjNe-vzQ)
- [Vue 模板的功臣 · 指令](https://mp.weixin.qq.com/s/U6zdZeUj5Qwhw8irF1JufQ)
- [关于 v-model 的一点思考](https://mp.weixin.qq.com/s/C0aqI0cBix1rCiB_LYCk_g)
- [太强了，从 0 到 1 搭建 vue-cli](https://mp.weixin.qq.com/s/97v5r122BNQF5erN95PyPQ)
- [各种博客的代码高亮是如何实现的](https://mp.weixin.qq.com/s/HagUTO9KZjZqovAIbvx8Hg)
- [scoped 减少了我对 CSS 样式冲突的焦虑](https://mp.weixin.qq.com/s/b2Tjl2CWhZ_GSjheIELXpw)
- [Vue CLI 3.0 配置项 - 设置接口代理](https://mp.weixin.qq.com/s/lc9krc4AqXcj2WZhEeYb0g)

### 第 7 阶段：云与环境部署
- [第七阶段 · 云与环境部署](https://mp.weixin.qq.com/s/kKjmqConeMI2zlJpvX0XSw)
- [精心画了一张 vim 壁纸](https://mp.weixin.qq.com/s/KvYVT5YDt_G_J4RJ98wo4w)
- [使用 vim 不得不看的 2 个 tips](https://mp.weixin.qq.com/s/0zDETiTCU_GANaIthHegnw)
- [npm install -g 的时候别再输密码了](https://mp.weixin.qq.com/s/EhFt8rZh0brZyNgBuhriDA)
- [我是这样查线上日志的 · 6个命令](https://mp.weixin.qq.com/s/K4o0-zVl6KH86YaJXZdi3Q)
- [vim 电脑壁纸来了（3种主题）](https://mp.weixin.qq.com/s/z_LWAxW21KExVDtoWndYag)
- [数据接盘侠 > 与 >>](https://mp.weixin.qq.com/s/embPPg-g5fH5x4NZGAa2ZQ)
- [进来聊一聊前端上线的一些问题](https://mp.weixin.qq.com/s/dDCMw80gktemZklNOqXBbQ)
- [10x 程序员 · 提高 shell 的使用效率](https://mp.weixin.qq.com/s/cHexunWiAy4ms32UWVz7_Q)
- [与前端部署相关的一些关键词](https://mp.weixin.qq.com/s/GDXvtesbsTgE8XIrkBKfwA)

### 第 8 阶段：小程序与前端动画特效
- [小程序向上弹出动画效果](https://mp.weixin.qq.com/s/HR2LnHgcplAcBKXhzKdhUg)
- [网易云音乐背景高斯模糊探索](https://mp.weixin.qq.com/s/Yd2-Sb6F6tNFd8ojS9N0mw)
- [跳动的音符动画实现原理剖析](https://mp.weixin.qq.com/s/Dp_-tE8Ioj9eybxIZ5Jhdw)
- [让按钮“呼吸”一会（呼吸动画）](https://mp.weixin.qq.com/s/V-7drgK9iHjwEGVn3rFycg)
- [这个动画代码可以优化一下](https://mp.weixin.qq.com/s/NrCoFHoh2RCc_t7nsv1hLQ)
- [小猴子跌落山崖之 linear、ease、ease-in](https://mp.weixin.qq.com/s/DDi5cj3Dj5mRF72ZYs9Rhw)
- [图解 CSS 属性单位和动画属性](https://mp.weixin.qq.com/s/-BiHS54K8CvrQyRBakmyWw)
- [环形进度条没有想象的那么简单](https://mp.weixin.qq.com/s/S4wtZQm12Zk50HCby8mpRA)
- [四步搞定小菊花 Loading 动画](https://mp.weixin.qq.com/s/0klnoP6M90uU1g2g433swQ)
- [有赞真赞，官网水波纹动画这么酷](https://mp.weixin.qq.com/s/BisZrZBJixpOir0xRKXbfg)
- [给 HTML 元素 Hover 态加点料](https://mp.weixin.qq.com/s/xVMQrjHNdxUbyr0FDKCyLg)
- [第 8 阶段前端动效结束，下一阶段内容预告](https://mp.weixin.qq.com/s/H7k8IHxL-YmxCE-QQDc12w)

### 第 9 阶段：搞懂搞透前端构建
- [每位前端人都需要搞懂、搞透前端构建](https://mp.weixin.qq.com/s/5nR8LeiJVYgmudUhdgXbWg)
- [webpack 究竟是什么，初学者晕头转向](https://mp.weixin.qq.com/s/284LdM-xuiYdhON4Sw0krQ)
- [安装 webpack 搞定 Vue 打包](https://mp.weixin.qq.com/s/nCjUZgQMzOSHZ2Z05LuvqA)
- [从使用 loader 到实现 loader · webpack](https://mp.weixin.qq.com/s/jfxEOBW89IUV5BWkwOYuGQ)
- [搞定 webpack 的 plugin 不在话下](https://mp.weixin.qq.com/s/q1yPGGXmUvEMQ0JNNDoWzA)
- [使用 webpack 动态生成 html](https://mp.weixin.qq.com/s/ScwmFkxoEzCVWO8dXbSPVQ)
- [webpack 与 tapable 擦出火花，实现 plugin 系统](https://mp.weixin.qq.com/s/aBXcxvqGZVzbs7G0DcH7DA)
- [webpack 性能优化 DLL 才硬核](https://mp.weixin.qq.com/s/GiPfo5lgxkES4je_gNuNyQ)
- [webpack 辅助高效开发](https://mp.weixin.qq.com/s/qO5LBpEpxahQK1v1DWGnqA)
- [原来实现 CLI 工具如此简单，以前路走错了](https://mp.weixin.qq.com/s/ZwfQoGTtIecQFepdb8E1SQ)
- [webpack 性能优化之定位问题](https://mp.weixin.qq.com/s/WtC1RACuTmGZuvUWmZOtvg)
- [这些资料助你搞透 Webpack](https://mp.weixin.qq.com/s/fu58YXwN3Mxn-7MFBNDCQw)
- [统一管理多项目 webpack 配置文件](https://mp.weixin.qq.com/s/6J9X8s_QfQcv2g5Wr-qn-A)