Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lefex/FE

前端 100 天，帮助 10W 人入门并进阶前端。
https://github.com/lefex/FE

css flexbox fontend html javascript react vue webpack

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

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



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



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



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

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

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



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



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



- [前端学习路线](https://mp.weixin.qq.com/s/yveUo-1akuhP4Yi8wUZPhg)

- [前端小课开课啦](https://mp.weixin.qq.com/s/6_3hSOw5Lv4p-vxIJS1woQ)

- [学习前端的 8 个专题](https://mp.weixin.qq.com/s/H7k8IHxL-YmxCE-QQDc12w)

- [我的2019 —我与《前端小课》](https://mp.weixin.qq.com/s/AktmmOJ0HRJ3daZVxYMR_A)

- [2020年我对大前端的认知](https://mp.weixin.qq.com/s/7v-f9ZbxsehiIGX3l0uO-A)

- [demo 合集](https://github.com/lefex/FE/tree/master/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/code)



## 前端专题



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



[🐶前往查看](https://github.com/lefex/FE/wiki)



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



关注公众号：素燕



![公众号：素燕](https://upload-images.jianshu.io/upload_images/1664496-38caaf22bb2dfda1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



## 强烈推荐



- [10x 程序员 · 提高 shell 的使用效率](https://mp.weixin.qq.com/s/cHexunWiAy4ms32UWVz7_Q)

- [npm install -g 的时候别再输密码了](https://mp.weixin.qq.com/s/EhFt8rZh0brZyNgBuhriDA)

- [使用 vim 不得不看的 2 个 tips](https://mp.weixin.qq.com/s/0zDETiTCU_GANaIthHegnw)



## Vue 核心原理



- [实现检测系统（撰写中）]()



## 项目经验



- [使用百度开源的ESLint规范集让团队内部代码规范保持一致](https://mp.weixin.qq.com/s/HDPesIfXC7A2_L9j5yuiqw)

- [解决前端 node 环境跨域与404问题，yog2](https://mp.weixin.qq.com/s/WMLNGbm9JoWn7dvfYeRKIQ)

- [最近看了很多异步编程的博文，该文讲的最为透彻](https://mp.weixin.qq.com/s/ogGR-uoEneTsPPcKbF-OgQ)

- [通过精读一本英文技术书籍搞定英语](https://mp.weixin.qq.com/s/OREtOQ7L6uoRZfZyGh7Waw)

- [前端网络请求都有哪些方式？webSocket 是什么？](https://mp.weixin.qq.com/s/q2WvipFrCR-XPnadCxK2rg)

- [学完 Promise 源码，出了 9 道面试题](https://mp.weixin.qq.com/s/GKf6W7uqd8PwdIV7CfHiBQ)

- [面试让手写Promise，不可取](https://mp.weixin.qq.com/s/wCq63lCWExukUM4KKZtogw)

- [Vue.use(ElementUI) 做了什么？](https://mp.weixin.qq.com/s/-05Pmjhh5hWTSqoLEViBkA)

- [interface 给对象上个紧箍咒](https://mp.weixin.qq.com/s/-xb3s_4s9x9-XK9RGD4iLQ)

- [无需下载，1秒查看GitHub项目源码](https://mp.weixin.qq.com/s/fWIrsYaz9c6e1Inq3T9MCA)

- [通过 element-ui 自建 UI 组件库，踩坑记录](https://mp.weixin.qq.com/s/p5o3KBMIUjFUmayUt4Gv_w)

- [微软365将放弃IE11，你却仍支持IE9？](https://mp.weixin.qq.com/s/73m7BNPKBcyTgfa3gCDlMA)

- [让脚本代替你大部分工作](https://mp.weixin.qq.com/s/y5w8Tr9QmwfoAWyRe57m-g)

- [拆解 UI 组件 el-upload 文件上传](https://mp.weixin.qq.com/s/ISSyIJMTRVDGgQE9cXUSgQ)

- [4天快速落地团队内部的UI组件库](https://mp.weixin.qq.com/s/B1_nW-5MZPJoA7dQgL3orw)

- [GitHub 夜间模式实现原理拆解](https://mp.weixin.qq.com/s/MDsOerWpNZJZRt05AsY0zQ)

- [前端如何导出 Excel（CSV）文件](https://mp.weixin.qq.com/s/ZxTBUmqvBXKUlWD8sKaUkQ)

- [代码执行器 hook console.log 方案](https://mp.weixin.qq.com/s/Ssg2SK9i-aW3FAa_5IdRSQ)

- [技术文中直接执行代码，我实现了](https://mp.weixin.qq.com/s/VGCy71fx0_B1QgidUICLfg)

- [后台系统都有哪些方案？](https://mp.weixin.qq.com/s/GMorPvBP4lkKKBlogQM81g)

- [搞一个万能的 webserver](https://mp.weixin.qq.com/s/YXtBVEhTMMEqzKyDTqeLtg)

- [微信读书的 debugger 虽斩断了你的调试的念头，但我有一招](https://mp.weixin.qq.com/s/KSqkr0N8rfjONW0q0X1Pyg)

- [1 分钟给的的开源库做个网站](https://mp.weixin.qq.com/s/Afef-At03oQLgpoGCQsZFw)

- [js-native 通信的 6 种方式](https://mp.weixin.qq.com/s/_Xo6O3NoE1z9AIMJm_uSsA)

- [小程序白皮书](https://mp.weixin.qq.com/s/qsf08Z0e-Juc1zlMAWXFMA)

- [其实有更好的方式学习小程序源码](https://mp.weixin.qq.com/s/BzdwR9BhGk_xCWUirdXBBQ)

- [经验 · 在 iOS 中遇到的一个前端问题](https://mp.weixin.qq.com/s/RvnuVU9vAxRGs9aQmrpaDw)

- [BAT 用一行代码实现了网页黑白显示](https://mp.weixin.qq.com/s/RzDOXV4lmKeWnAecNFyLVw)

- [iOS 查找私有 API 的终极方案 · 逆向](https://mp.weixin.qq.com/s/VSMSEFjTvvtObU2adcLfyA)

- [各种博客的代码高亮是如何实现的](https://mp.weixin.qq.com/s/HagUTO9KZjZqovAIbvx8Hg)

- [不写一行代码，即可跨域的技巧](https://mp.weixin.qq.com/s/1uufDrunc0lVPLYU60UgSQ)

- [懂设计的程序员](https://mp.weixin.qq.com/s/jdP3JVPLoSI9_fxMihT8EQ)

- [你可能不需要一个 UI 设计师](https://mp.weixin.qq.com/s/xjxyJhHLMir2cj35DcRCjg)



## 感悟



- [2021 开工、OKR、护城河](https://mp.weixin.qq.com/s/ltKQP6rWrdBbJ6Vn4BjKQQ)

- [聊团队，说招人](https://mp.weixin.qq.com/s/GRDD_PpSMynNkeyAproHYw)

- [思考并付诸实践](https://mp.weixin.qq.com/s/aK_C5lPenorpz9AyQ9BZLA)

- [随便聊聊](https://mp.weixin.qq.com/s/sILciOna36p7IJjb2HG9WQ)

- [素燕的 2020 · 终生成长](https://mp.weixin.qq.com/s/ErewBq-IWNWqODIIScl3zA)

- [反思一下，如何写一流代码](https://mp.weixin.qq.com/s/B-wavU_1X4LSHj1lDVdX2g)

- [三十而已，构建自己的投资系统](https://mp.weixin.qq.com/s/9GEUfI225sd0q4R9mlE3Fw)

- [今天，入职百度恰好 3 年](https://mp.weixin.qq.com/s/HgNXLDDB0_sKgzKDvD_HWg)

- [周末对前端小课网站更新了一些内容](https://mp.weixin.qq.com/s/LicovaAJxy7eBwrBFWX_uw)

- [我电脑中的一些常用软件](https://mp.weixin.qq.com/s/zioN1shCDTf90__NAfz4yA)

- [从 JavaScript 红宝书中边学技术边学英语](https://mp.weixin.qq.com/s/79MJODwIf-PH5qTkLqAcPQ)

- [周末把前端小课网站进行了一次升级](https://mp.weixin.qq.com/s/Wt5EdIRiEWKs1vlAjus7Fw)

- [《前端小课》· 前端图书的一次“革命”](https://mp.weixin.qq.com/s/m69uVLtmE5jw2m5ie3oZfg)

- [我给自己定的“双节” OKR 顺利完成](https://mp.weixin.qq.com/s/rGWCMQ7ubOxt76k4iXJBkQ)

- [普及一下“我”](https://mp.weixin.qq.com/s/_PVpt1wbpJm0ekPjHCsB1A)

- [关于晋升的一点思考](https://mp.weixin.qq.com/s/qGK7NG25LW-NAMYLTLG2Xw)

- [2020年我对大前端的认知](https://mp.weixin.qq.com/s/7v-f9ZbxsehiIGX3l0uO-A)



### 第 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)

- [找女朋友时，可能真需要一个媒人 Proxy](https://mp.weixin.qq.com/s/YDj35J6J-icpNakqyQxKlw)

- [js 中的 ~~ 随好用但好丑](https://mp.weixin.qq.com/s/aESmNkClucuNA9Z6HW5bLA)

- [字符串转换成整数，被教训了](https://mp.weixin.qq.com/s/6TQAppMmX93wJRiN4AjMdA)

- [真正的浏览器磁盘缓存 LocalStorage](https://mp.weixin.qq.com/s/Q7oNEqtb3FfZZOHrSvX-0w)

- [啥时候用 sessionStorage](https://mp.weixin.qq.com/s/YKI7Q3QFnQBsuKX1AUkJIg)

- [发现有人把 cookie 用作缓存机制，纠正](https://mp.weixin.qq.com/s/gcC1Vuz-THL049MUhhXq9g)

- [用 import/export 全靠“抄”](https://mp.weixin.qq.com/s/SM1710OpskFaTPCpJvG6gg)

- [一种系统化创建单例的方法](https://mp.weixin.qq.com/s/RR4I7ciae19b4Bov1QL9Bw)

- [对象的 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)

- [console.log(console.log) = ?](https://mp.weixin.qq.com/s/Y6dKy0Lq8_m1VWo-NrRr4Q)

- [JavaScript: The First 20 Years](https://mp.weixin.qq.com/s/DRSl-pH84EVktsnXSdn5_g)



### 第 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 (内容还会补充)

- [scoped 和 /deep/ 解决 css 冲突覆盖问题](https://mp.weixin.qq.com/s/m7Pjgma9I3KGU872IiIfKg)

- [系统学习 vue 中使用 css 的各种方式](https://mp.weixin.qq.com/s/Z8DaFz9Rh4ObZHWedsVN9A)

- [refs - 访问DOM或组件实例](https://mp.weixin.qq.com/s/pgUGW3EKWwRxGsFhiiWz7Q)

- [深度嵌套组件，数据不需要层层传递](https://mp.weixin.qq.com/s/HJI-me0y8bqMRg6GaQ8oYQ)

- [vue 模板的本质是渲染函数](https://mp.weixin.qq.com/s/T9jMx9X7YUWSzMBcYXbEFA)

- [Vue 组件的本质](https://mp.weixin.qq.com/s/VNgVzadJ2aEqh8yIyHreLg)

- [Vue 创建的 app 实例最终去哪了](https://mp.weixin.qq.com/s/U0sKrKtkUZoI8nOIdq9iBw)

- [来，开局先创建一个 app](https://mp.weixin.qq.com/s/l16JQfT1b5zfv3mNhtxuCA)

- [Vue3 安装与执行过程](https://mp.weixin.qq.com/s/KJSWg_tK0pp0OX9FS1RGYg)

- [Vue3 Contributor 说渲染器的设计思想](https://mp.weixin.qq.com/s/a8xOMhuOJcnMBeqHy5W3Lg)

- [查看 Vue3 模板编译后的 AST 和渲染函数](https://mp.weixin.qq.com/s/sf6qaiVz_-vPz2Z1EkC_ZA)

- [Vue模板语法汇总](https://mp.weixin.qq.com/s/GbIML1wB4u6PIF94VoH9Dg)

- [Vue3.0 正式发布，代号为 One Piece](https://mp.weixin.qq.com/s/rhepOSQrDLXV2FPwzGLhYw)

- [第六阶段 · 期待已久的 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)



## 🌹网站



你也可以通过网站学习，[前端小课](https://lefex.github.io/)