{"id":15130097,"url":"https://github.com/lefex/fe","last_synced_at":"2025-05-14T07:08:26.549Z","repository":{"id":37413141,"uuid":"215064984","full_name":"lefex/FE","owner":"lefex","description":"前端 100 天，帮助 10W 人入门并进阶前端。","archived":false,"fork":false,"pushed_at":"2024-12-03T01:14:05.000Z","size":42174,"stargazers_count":2074,"open_issues_count":89,"forks_count":262,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-13T13:12:29.052Z","etag":null,"topics":["css","flexbox","fontend","html","javascript","react","vue","webpack"],"latest_commit_sha":null,"homepage":"https://lefex.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lefex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-14T14:26:01.000Z","updated_at":"2025-04-10T16:23:31.000Z","dependencies_parsed_at":"2024-12-21T10:00:41.254Z","dependency_job_id":"d4772373-30b0-486f-9160-8a31d46f9442","html_url":"https://github.com/lefex/FE","commit_stats":{"total_commits":146,"total_committers":8,"mean_commits":18.25,"dds":0.0821917808219178,"last_synced_commit":"11555d83d463f34b2ac474acf912025785d1b99a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lefex%2FFE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lefex%2FFE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lefex%2FFE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lefex%2FFE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lefex","download_url":"https://codeload.github.com/lefex/FE/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092775,"owners_count":22013290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flexbox","fontend","html","javascript","react","vue","webpack"],"created_at":"2024-09-26T02:29:46.195Z","updated_at":"2025-05-14T07:08:26.524Z","avatar_url":"https://github.com/lefex.png","language":"JavaScript","readme":"## 《前端小课》前端从 0 到 1，免费电子书\n\n《前端小课》是通过图片、文字、代码、视频等多种方式写成的一本多媒体电子书。全书分为不同的小书，每本小书旨在讲透一个知识点。比如 CSS布局、JavaScript基础、动画。以最基础的编程知识为起点，即使不懂编程的小白也能够通过本书学会编程，顺利进入互联网行业。\n\n本书最大的特色是通过公众号+图书+网站形成一个闭环。读者可通过公众号实时获得最新的前端知识，并与作者实时互动；通过图书可以系统地学习前端知识，对前端知识形成一个整体的认识；通过网站可看到代码的实现运行效果。\n\n#### 网站入口，电子书入口（国内）：https://lefex.gitee.io/\n#### 网站入口，电子书入口（国外）： https://lefex.github.io/\n#### 大厂前端面试真题解析： https://lefex.github.io/bat\n\n![官网](https://s1.ax1x.com/2020/10/16/0bz8KS.jpg)\n\n前端小课，一本帮助你学习前端的多媒体电子书。每天一小课，分阶段、系统地学习前端知识。如果你有编程基础，这个课程非常适合你。\n\n- [前端学习路线](https://mp.weixin.qq.com/s/yveUo-1akuhP4Yi8wUZPhg)\n- [前端小课开课啦](https://mp.weixin.qq.com/s/6_3hSOw5Lv4p-vxIJS1woQ)\n- [学习前端的 8 个专题](https://mp.weixin.qq.com/s/H7k8IHxL-YmxCE-QQDc12w)\n- [我的2019 —我与《前端小课》](https://mp.weixin.qq.com/s/AktmmOJ0HRJ3daZVxYMR_A)\n- [2020年我对大前端的认知](https://mp.weixin.qq.com/s/7v-f9ZbxsehiIGX3l0uO-A)\n- [demo 合集](https://github.com/lefex/FE/tree/master/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/code)\n\n## 前端专题\n\n汇集了前端各种解决方案，比如编辑器、在线编辑、工程化、性能优化、浏览器插件、Javascript、DOM、Canvas宝贝、SVG等等，持续更新！！！\n\n[🐶前往查看](https://github.com/lefex/FE/wiki)\n\n## 微信公众号，内容同步\n\n关注公众号：素燕\n\n![公众号：素燕](https://upload-images.jianshu.io/upload_images/1664496-38caaf22bb2dfda1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n## 强烈推荐\n\n- [10x 程序员 · 提高 shell 的使用效率](https://mp.weixin.qq.com/s/cHexunWiAy4ms32UWVz7_Q)\n- [npm install -g 的时候别再输密码了](https://mp.weixin.qq.com/s/EhFt8rZh0brZyNgBuhriDA)\n- [使用 vim 不得不看的 2 个 tips](https://mp.weixin.qq.com/s/0zDETiTCU_GANaIthHegnw)\n\n## Vue 核心原理\n\n- [实现检测系统（撰写中）]()\n\n## 项目经验\n\n- [使用百度开源的ESLint规范集让团队内部代码规范保持一致](https://mp.weixin.qq.com/s/HDPesIfXC7A2_L9j5yuiqw)\n- [解决前端 node 环境跨域与404问题，yog2](https://mp.weixin.qq.com/s/WMLNGbm9JoWn7dvfYeRKIQ)\n- [最近看了很多异步编程的博文，该文讲的最为透彻](https://mp.weixin.qq.com/s/ogGR-uoEneTsPPcKbF-OgQ)\n- [通过精读一本英文技术书籍搞定英语](https://mp.weixin.qq.com/s/OREtOQ7L6uoRZfZyGh7Waw)\n- [前端网络请求都有哪些方式？webSocket 是什么？](https://mp.weixin.qq.com/s/q2WvipFrCR-XPnadCxK2rg)\n- [学完 Promise 源码，出了 9 道面试题](https://mp.weixin.qq.com/s/GKf6W7uqd8PwdIV7CfHiBQ)\n- [面试让手写Promise，不可取](https://mp.weixin.qq.com/s/wCq63lCWExukUM4KKZtogw)\n- [Vue.use(ElementUI) 做了什么？](https://mp.weixin.qq.com/s/-05Pmjhh5hWTSqoLEViBkA)\n- [interface 给对象上个紧箍咒](https://mp.weixin.qq.com/s/-xb3s_4s9x9-XK9RGD4iLQ)\n- [无需下载，1秒查看GitHub项目源码](https://mp.weixin.qq.com/s/fWIrsYaz9c6e1Inq3T9MCA)\n- [通过 element-ui 自建 UI 组件库，踩坑记录](https://mp.weixin.qq.com/s/p5o3KBMIUjFUmayUt4Gv_w)\n- [微软365将放弃IE11，你却仍支持IE9？](https://mp.weixin.qq.com/s/73m7BNPKBcyTgfa3gCDlMA)\n- [让脚本代替你大部分工作](https://mp.weixin.qq.com/s/y5w8Tr9QmwfoAWyRe57m-g)\n- [拆解 UI 组件 el-upload 文件上传](https://mp.weixin.qq.com/s/ISSyIJMTRVDGgQE9cXUSgQ)\n- [4天快速落地团队内部的UI组件库](https://mp.weixin.qq.com/s/B1_nW-5MZPJoA7dQgL3orw)\n- [GitHub 夜间模式实现原理拆解](https://mp.weixin.qq.com/s/MDsOerWpNZJZRt05AsY0zQ)\n- [前端如何导出 Excel（CSV）文件](https://mp.weixin.qq.com/s/ZxTBUmqvBXKUlWD8sKaUkQ)\n- [代码执行器 hook console.log 方案](https://mp.weixin.qq.com/s/Ssg2SK9i-aW3FAa_5IdRSQ)\n- [技术文中直接执行代码，我实现了](https://mp.weixin.qq.com/s/VGCy71fx0_B1QgidUICLfg)\n- [后台系统都有哪些方案？](https://mp.weixin.qq.com/s/GMorPvBP4lkKKBlogQM81g)\n- [搞一个万能的 webserver](https://mp.weixin.qq.com/s/YXtBVEhTMMEqzKyDTqeLtg)\n- [微信读书的 debugger 虽斩断了你的调试的念头，但我有一招](https://mp.weixin.qq.com/s/KSqkr0N8rfjONW0q0X1Pyg)\n- [1 分钟给的的开源库做个网站](https://mp.weixin.qq.com/s/Afef-At03oQLgpoGCQsZFw)\n- [js-native 通信的 6 种方式](https://mp.weixin.qq.com/s/_Xo6O3NoE1z9AIMJm_uSsA)\n- [小程序白皮书](https://mp.weixin.qq.com/s/qsf08Z0e-Juc1zlMAWXFMA)\n- [其实有更好的方式学习小程序源码](https://mp.weixin.qq.com/s/BzdwR9BhGk_xCWUirdXBBQ)\n- [经验 · 在 iOS 中遇到的一个前端问题](https://mp.weixin.qq.com/s/RvnuVU9vAxRGs9aQmrpaDw)\n- [BAT 用一行代码实现了网页黑白显示](https://mp.weixin.qq.com/s/RzDOXV4lmKeWnAecNFyLVw)\n- [iOS 查找私有 API 的终极方案 · 逆向](https://mp.weixin.qq.com/s/VSMSEFjTvvtObU2adcLfyA)\n- [各种博客的代码高亮是如何实现的](https://mp.weixin.qq.com/s/HagUTO9KZjZqovAIbvx8Hg)\n- [不写一行代码，即可跨域的技巧](https://mp.weixin.qq.com/s/1uufDrunc0lVPLYU60UgSQ)\n- [懂设计的程序员](https://mp.weixin.qq.com/s/jdP3JVPLoSI9_fxMihT8EQ)\n- [你可能不需要一个 UI 设计师](https://mp.weixin.qq.com/s/xjxyJhHLMir2cj35DcRCjg)\n\n## 感悟\n\n- [2021 开工、OKR、护城河](https://mp.weixin.qq.com/s/ltKQP6rWrdBbJ6Vn4BjKQQ)\n- [聊团队，说招人](https://mp.weixin.qq.com/s/GRDD_PpSMynNkeyAproHYw)\n- [思考并付诸实践](https://mp.weixin.qq.com/s/aK_C5lPenorpz9AyQ9BZLA)\n- [随便聊聊](https://mp.weixin.qq.com/s/sILciOna36p7IJjb2HG9WQ)\n- [素燕的 2020 · 终生成长](https://mp.weixin.qq.com/s/ErewBq-IWNWqODIIScl3zA)\n- [反思一下，如何写一流代码](https://mp.weixin.qq.com/s/B-wavU_1X4LSHj1lDVdX2g)\n- [三十而已，构建自己的投资系统](https://mp.weixin.qq.com/s/9GEUfI225sd0q4R9mlE3Fw)\n- [今天，入职百度恰好 3 年](https://mp.weixin.qq.com/s/HgNXLDDB0_sKgzKDvD_HWg)\n- [周末对前端小课网站更新了一些内容](https://mp.weixin.qq.com/s/LicovaAJxy7eBwrBFWX_uw)\n- [我电脑中的一些常用软件](https://mp.weixin.qq.com/s/zioN1shCDTf90__NAfz4yA)\n- [从 JavaScript 红宝书中边学技术边学英语](https://mp.weixin.qq.com/s/79MJODwIf-PH5qTkLqAcPQ)\n- [周末把前端小课网站进行了一次升级](https://mp.weixin.qq.com/s/Wt5EdIRiEWKs1vlAjus7Fw)\n- [《前端小课》· 前端图书的一次“革命”](https://mp.weixin.qq.com/s/m69uVLtmE5jw2m5ie3oZfg)\n- [我给自己定的“双节” OKR 顺利完成](https://mp.weixin.qq.com/s/rGWCMQ7ubOxt76k4iXJBkQ)\n- [普及一下“我”](https://mp.weixin.qq.com/s/_PVpt1wbpJm0ekPjHCsB1A)\n- [关于晋升的一点思考](https://mp.weixin.qq.com/s/qGK7NG25LW-NAMYLTLG2Xw)\n- [2020年我对大前端的认知](https://mp.weixin.qq.com/s/7v-f9ZbxsehiIGX3l0uO-A)\n\n### 第 1 阶段：HTML + CSS\n\n- [坚持学习前端的第20天](https://mp.weixin.qq.com/s/-js2txXGKUzEFEMUlF8JBg)\n- [第19天：写出易复用、易维护、结构清晰的 CSS](https://mp.weixin.qq.com/s/IqqoMc967gFYfHRJoCAJhw)\n- [第18天：CSS中的权重](https://mp.weixin.qq.com/s/b2f58P6P7E00RswRyuHzVQ)\n- [第17天：屏幕尺寸这么多，前端却有高招](https://mp.weixin.qq.com/s/nlVmqSaUTsKKIFS2lXBg7Q)\n- [第16天：领导说，体验差](https://mp.weixin.qq.com/s/CEh7LcHDqj5s5UebK5t-Vw)\n- [聚齐了这3张宝图，搞懂CSS权重](https://mp.weixin.qq.com/s/wQOEMwQVdDYXpqSN7SuLcA)\n- [第15天：设计师的要求](https://mp.weixin.qq.com/s/5nrVkgzfMXivl1mAEvrWyg)\n- [第14天：在文字前、后插入一个图标](https://mp.weixin.qq.com/s/P03ieC4DiTuZzWRY3vDMZg)\n- [第13天：CSS中使用图](https://mp.weixin.qq.com/s/16E5JnHtszJ2rMunlHFPGA)\n- [移动端同学为什么要学前端](https://mp.weixin.qq.com/s/3hhPUbcMPUZp5GYjg7_Gog)\n- [第12天：打破常规之 display](https://mp.weixin.qq.com/s/OZNDlCroFkK79EbqZpWr8g)\n- [第11天：说好不哭](https://mp.weixin.qq.com/s/0rOCSAJjMq7N4t8U-I1gnw)\n- [第10天：撑起CSS布局的半壁江山---盒子模型](https://mp.weixin.qq.com/s/lt7_v8V5g5sG1QdP4-TOFQ)\n- [第9天：自我介绍](https://mp.weixin.qq.com/s/11D_PwSxll_lKUD-yzWkxQ)\n- [第8天：border 能干啥](https://mp.weixin.qq.com/s/l9pLes4Q64-Yq0KtmcTWQA)\n- [群里讨论的一个选择器问题（一定要看）](https://mp.weixin.qq.com/s/nS_kcIqBwO03mvF97BZCBQ)\n- [第7天：CSS中的选择器详解](https://mp.weixin.qq.com/s/V00q_cJrpPoEUXD7Yxvyug)\n- [第 6 天：设计一个左右滑动的菜单](https://mp.weixin.qq.com/s/hCbRtgZ9v0T9OJhJ15JAeA)\n- [第6天：使用CSS的三种方式](https://mp.weixin.qq.com/s/pHy30He9hS2C4UPDGxYqlg)\n- [第 5 天：读懂 HTML 标签](https://mp.weixin.qq.com/s/vvrt3zvOt8jsgaulayu5sg)\n- [第4天：给自己一句鼓励的话](https://mp.weixin.qq.com/s/u1z009G2lYZK-SGFCXJhyw)\n- [第4天：我学前端时用过的资源](https://mp.weixin.qq.com/s/Y5miYpQhtv4fotp0bFMJiw)\n- [第3天：HTML 中的 head 标签](https://mp.weixin.qq.com/s/LMiPhxhHyOku6HTg0cBQsQ)\n- [第2天：HTML 结构](https://mp.weixin.qq.com/s/7Vx2CYBPTuoHQfYsawQhzA)\n- [第1天：开篇词，开发环境准备](https://mp.weixin.qq.com/s/66oU0fY502OYK9WpxiaCtA)\n\n\n### 第 2 阶段：死磕 CSS 布局\n\n- [用前端仿写朋友圈](https://mp.weixin.qq.com/s/BUMaJXJ2bD0FcZ5kMI_WrA)\n- [第13天：布局的兼容性与两种不常用的布局](https://mp.weixin.qq.com/s/fM8DkM9sGAGzu-G3TW_5UA)\n- [第12天： 靠边站之float](https://mp.weixin.qq.com/s/ba8kJOU2a83NBnwG0y8fdQ)\n- [第11天：grid布局对齐属性](https://mp.weixin.qq.com/s/9_zPYmfYzhIu-vgnfDGk4g)\n- [第10天：买一块地盖一处院子](https://mp.weixin.qq.com/s/ZziZ9jDKGPORnV8Yv5r_lQ)\n- [第9天: position 布局之 fixed、sticky](https://mp.weixin.qq.com/s/OOOrutqFKvOsY_Td-cpi4w)\n- [第8天：布局翘楚 - Grid 布局概述](https://mp.weixin.qq.com/s/SJ7k23nIgMOcR2fDjOHhGg)\n- [第7天: position 布局之绝对布局 absolute](https://mp.weixin.qq.com/s/UJZTjsKUC-aOo0zrNrryiQ)\n- [第6天：深入理解 FlexBox 布局的弹性](https://mp.weixin.qq.com/s/XG5QeIUF-qkBAqd_jlUV9g)\n- [第5天：position 布局之相对布局 relative](https://mp.weixin.qq.com/s/RFlSDGIq7ERm2CWCzpQCJQ)\n- [第4天：图解 FlexBox 布局（下）](https://mp.weixin.qq.com/s/uct9apWqgznde1m2IMVgwA)\n- [第3天：布局之源 - 流式布局](https://mp.weixin.qq.com/s/Ib2AnP47yuMe5HrWRyhTig)\n- [第2天：图解 FlexBox 布局（上）](https://mp.weixin.qq.com/s/T-Z_8he9UxBBfL8Jb3zwtA)\n- [第1天：前端布局概述](https://mp.weixin.qq.com/s/oDNuyEdgUPweSZiOWnriQA)\n\n\n![](https://github.com/lefex/FE/blob/master/asset/css-layout.png)\n\n### 第 3 阶段：搞懂网络，掌握网页请求流程\n\n- [第三阶段 - 重学网络编程（HTTP、TCP、WebServer）](https://mp.weixin.qq.com/s/c_VnSTjtgearUjx6ttqzwQ)\n- [一条命令开启一个 WebServer](https://mp.weixin.qq.com/s/7_gGs16ZCoL_GQKPtGFCcw)\n- [第2天：server 的接口是如何实现的](https://mp.weixin.qq.com/s/nMgN10N1JViigUkwh5UEOg)\n- [第3天：HTTP 之客户端与服务端](https://mp.weixin.qq.com/s/DSCjhv0z--2zxKnUh0Vt7A)\n- [第4天：数据传输之 TCP ，聊天室实践（含视频）](https://mp.weixin.qq.com/s/6Bcxbl2M4Mkbo6CALuoSkg)\n- [第 5 天： 以农村故事说说我对 socket 的理解](https://mp.weixin.qq.com/s/jfAEhPmQya0Ok9wvgK5vZw)\n- [第 6 天：HTTP背景与整个请求响应流程 （官方英文描述）](https://mp.weixin.qq.com/s/ZQxl7zmMd4imJT6llJkMww)\n- [第 7 天：小卖部与生产商之间的协作](https://mp.weixin.qq.com/s/riPVolCKUpWFXwz42AWMvw)\n- [这些网络(HTTP, TCP, WebServer)学习资料不容错过](https://mp.weixin.qq.com/s/MjVEnN3wDK6N4qfW5L23RA)\n- [第 8 天：弄懂 HTTP 请求报文](https://mp.weixin.qq.com/s/lXMHuLT0AfkkdwAOSAjZyw)\n- [第 9 天：HTTP 响应报文与状态码](https://mp.weixin.qq.com/s/9V-TIyeOFzLW8dQ5S9P2-A)\n- [第 10 天：我犯了个错误](https://mp.weixin.qq.com/s/PQZQcGy7Pyrx_ohSlYVk0w)\n- [第 11 天：我找到了学习 socket 的正确姿势](https://mp.weixin.qq.com/s/dPa9tC-LcWiJ7lvlvtvIZg)\n- [第 12 天：从 0 徒手实现一个 HTTP Server](https://mp.weixin.qq.com/s/mWu3RS0AHKeFUxUOqOdXqQ)\n- [第 13 天：从 HTTP 到 HTTPS，取得阶段性胜利](https://mp.weixin.qq.com/s/JLyU8P5_8JauB6wh9Cyyeg)\n- [用故事说透 HTTPS（漫画）](https://mp.weixin.qq.com/s/MfvUuitrF8MN16nxyZNB8A)\n- [OpenSSL 自述](https://mp.weixin.qq.com/s/jp88sX84RQGy7N1j-ydVTA)\n- [被乱用的 Cookie](https://mp.weixin.qq.com/s/iDOoeBA48gnoJUhkCHosqA)\n- [打破讨论薪资的红线 之 签名原理（漫画）](https://mp.weixin.qq.com/s/7tR0kDKdrXotPCKji_2iBw)\n- [被“同源策略”限制的我却想着“跨域”](https://mp.weixin.qq.com/s/tsCFBmNRSLXNR6OeZtAAfg)\n- [第三阶段结语：告别网络编程](https://mp.weixin.qq.com/s/XB1h-jvztNG_rime7P2bMw)\n\n### 第 4 阶段：系统深入学习 JavaScript\n- [第四阶段 - 系统深入学习 JavaScript](https://mp.weixin.qq.com/s/TMdSJcq9s525MdMFmgT9Gw)\n- [程序原本 — 推荐3本免费电子书](https://mp.weixin.qq.com/s/eH7rHCIvp4l29GcMQ7UYMQ)\n- [被招安的 JavaScript ，取名为 ECMAScript](https://mp.weixin.qq.com/s/5UwQiNiB9i5eQQ-Nr9kFHA)\n- [让 JavaScript 跑起来+函数](https://mp.weixin.qq.com/s/TwaIoofmixKTKEymiNfueQ)\n- [JavaScript 中的对象](https://mp.weixin.qq.com/s/2G2LRIGXPjGQsRnoCB3NGQ)\n- [var 很傻、let 很亲切 、const 更坚定](https://mp.weixin.qq.com/s/uZOj5HzJmH_fNeUEPipqwA)\n- [期中考试之 var、let、const](https://mp.weixin.qq.com/s/F8Awa1S7bKBpx-ihQxkFfg)\n- [用2000字详细解答昨天的题目（再忙也要看一下）](https://mp.weixin.qq.com/s/Vl1ft7ipsG9NDVE0qMXY8A)\n- [JavaScript 内置对象数组](https://mp.weixin.qq.com/s/hTjTl9BQHTxpZtSDJu2s5w)\n- [用故事说透 JavaScript 中的原型](https://mp.weixin.qq.com/s/2GOcsgdfFiQkUcvIh3d4zQ)\n- [从源码到抽象语法树可视化](https://mp.weixin.qq.com/s/n4yaR4cYz65YGBVB_Faycg)\n- [字节码与二进制的“样貌”](https://mp.weixin.qq.com/s/zComXbs9jbVWPd4FL2lAOA)\n- [执行上下文与调用栈](https://mp.weixin.qq.com/s/a71BhSmwdrE2whvEAuVv2A)\n- [看透变量提升与块级作用域实现的原理](https://mp.weixin.qq.com/s/WUTAm9IaL_0nByKVGrHQSg)\n- [推荐我精心准备的 JavaScript 学习资源](https://mp.weixin.qq.com/s/hj00b4BjJFD9yBorSa-4kw)\n- [让 JavaScript 文件代码相互独立](https://mp.weixin.qq.com/s/v3sRBOvXG5wu-4btURYnhA)\n- [带有执行环境的函数 - 闭包](https://mp.weixin.qq.com/s/ocWhTCCiNXAr7Si5mo99aw)\n- [调试 JavaScript 少不了这几个技巧](https://mp.weixin.qq.com/s/Ps7A5sJQfJ2MwJOPjlovuQ)\n- [连接你、我、他 —— this](https://mp.weixin.qq.com/s/gFIRL-HFqql19fYOU-V3Og)\n- [\u0026\u0026 ，|| 超越了我的认知](https://mp.weixin.qq.com/s/qCnDp6oxLik2s1H_wbGZTg)\n- [JS 中如何实现策略模式](https://mp.weixin.qq.com/s/c6bcs1ojBiOq29SNG0DE-Q)\n- [一种系统化创建单例的方法](https://mp.weixin.qq.com/s/RR4I7ciae19b4Bov1QL9Bw)\n- [其实有更好的方式学习小程序源码](https://mp.weixin.qq.com/s/BzdwR9BhGk_xCWUirdXBBQ)\n- [对象的 key 原来可以使用变量](https://mp.weixin.qq.com/s/-SZvDmLsGQa_NToTL2A_VQ)\n- [2 道 this面试题，你能答对几道？](https://mp.weixin.qq.com/s/9Otl12y_o9DPODH6R1MENQ)\n- [被我忽略的 6 个 JS 开发小技巧](https://mp.weixin.qq.com/s/UjC6vFXczrmCv5v0dbHK_Q)\n- [群里分享的关于我对 JS 闭包的理解](https://mp.weixin.qq.com/s/X0FLyn7aSJGq8y4m_6onpw)\n- [找女朋友时，可能真需要一个媒人 Proxy](https://mp.weixin.qq.com/s/YDj35J6J-icpNakqyQxKlw)\n- [js 中的 ~~ 随好用但好丑](https://mp.weixin.qq.com/s/aESmNkClucuNA9Z6HW5bLA)\n- [字符串转换成整数，被教训了](https://mp.weixin.qq.com/s/6TQAppMmX93wJRiN4AjMdA)\n- [真正的浏览器磁盘缓存 LocalStorage](https://mp.weixin.qq.com/s/Q7oNEqtb3FfZZOHrSvX-0w)\n- [啥时候用 sessionStorage](https://mp.weixin.qq.com/s/YKI7Q3QFnQBsuKX1AUkJIg)\n- [发现有人把 cookie 用作缓存机制，纠正](https://mp.weixin.qq.com/s/gcC1Vuz-THL049MUhhXq9g)\n- [用 import/export 全靠“抄”](https://mp.weixin.qq.com/s/SM1710OpskFaTPCpJvG6gg)\n- [一种系统化创建单例的方法](https://mp.weixin.qq.com/s/RR4I7ciae19b4Bov1QL9Bw)\n- [对象的 key 原来可以使用变量](https://mp.weixin.qq.com/s/-SZvDmLsGQa_NToTL2A_VQ)\n- [2 道 this面试题，你能答对几道？](https://mp.weixin.qq.com/s/9Otl12y_o9DPODH6R1MENQ)\n- [被我忽略的 6 个 JS 开发小技巧](https://mp.weixin.qq.com/s/UjC6vFXczrmCv5v0dbHK_Q)\n- [群里分享的关于我对 JS 闭包的理解](https://mp.weixin.qq.com/s/X0FLyn7aSJGq8y4m_6onpw)\n- [console.log(console.log) = ?](https://mp.weixin.qq.com/s/Y6dKy0Lq8_m1VWo-NrRr4Q)\n- [JavaScript: The First 20 Years](https://mp.weixin.qq.com/s/DRSl-pH84EVktsnXSdn5_g)\n\n### 第 5 阶段：深入学习 DOM\n- [深入学习 DOM、浏览器工作原理](https://mp.weixin.qq.com/s/zeFQRjx3B11-QviBxTbLEQ)\n- [我是一颗树 · DOM](https://mp.weixin.qq.com/s/rpY9fl9d_fM9P7uG8NxfUQ)\n- [回到工位“我”悟出了 DOM 设计的精华](https://mp.weixin.qq.com/s/kVPqY09YDL4RjmOlqVe8mg)\n- [打通 DOM 的设计架构](https://mp.weixin.qq.com/s/wDKzA3qJguRvPlznRsw4_w)\n- [两种方法轻松找到 DOM 元素](https://mp.weixin.qq.com/s/wW6gsRdWOpf19ai3m7ZAnQ)\n- [彻底搞懂 offsetX、scrollX、clientX 的区别](https://mp.weixin.qq.com/s/HYD_WEG8ObWAe4WYvqDdPg)\n- [了如指掌 · DOM 舆图](https://mp.weixin.qq.com/s/aIfJC1fDf-y0SqvZT0KcUw)\n\n### 第 6 阶段：深入学习 Vue (内容还会补充)\n- [scoped 和 /deep/ 解决 css 冲突覆盖问题](https://mp.weixin.qq.com/s/m7Pjgma9I3KGU872IiIfKg)\n- [系统学习 vue 中使用 css 的各种方式](https://mp.weixin.qq.com/s/Z8DaFz9Rh4ObZHWedsVN9A)\n- [refs - 访问DOM或组件实例](https://mp.weixin.qq.com/s/pgUGW3EKWwRxGsFhiiWz7Q)\n- [深度嵌套组件，数据不需要层层传递](https://mp.weixin.qq.com/s/HJI-me0y8bqMRg6GaQ8oYQ)\n- [vue 模板的本质是渲染函数](https://mp.weixin.qq.com/s/T9jMx9X7YUWSzMBcYXbEFA)\n- [Vue 组件的本质](https://mp.weixin.qq.com/s/VNgVzadJ2aEqh8yIyHreLg)\n- [Vue 创建的 app 实例最终去哪了](https://mp.weixin.qq.com/s/U0sKrKtkUZoI8nOIdq9iBw)\n- [来，开局先创建一个 app](https://mp.weixin.qq.com/s/l16JQfT1b5zfv3mNhtxuCA)\n- [Vue3 安装与执行过程](https://mp.weixin.qq.com/s/KJSWg_tK0pp0OX9FS1RGYg)\n- [Vue3 Contributor 说渲染器的设计思想](https://mp.weixin.qq.com/s/a8xOMhuOJcnMBeqHy5W3Lg)\n- [查看 Vue3 模板编译后的 AST 和渲染函数](https://mp.weixin.qq.com/s/sf6qaiVz_-vPz2Z1EkC_ZA)\n- [Vue模板语法汇总](https://mp.weixin.qq.com/s/GbIML1wB4u6PIF94VoH9Dg)\n- [Vue3.0 正式发布，代号为 One Piece](https://mp.weixin.qq.com/s/rhepOSQrDLXV2FPwzGLhYw)\n- [第六阶段 · 期待已久的 Vue](https://mp.weixin.qq.com/s/-Xc89GniErkrOf_cL9RNRQ)\n- [学习 Vue 从如何贡献代码开始](https://mp.weixin.qq.com/s/H_B8ITW5tMSRF128cQXswg)\n- [创建第一个 Vue 项目](https://mp.weixin.qq.com/s/KyQGSXfhrDePwL6OOBmpYQ)\n- [一个页面 Vue 实例只能有一个吗？](https://mp.weixin.qq.com/s/_du0IZ5VZXg9ug1SEWNUFg)\n- [关于 Vue 中计算与侦听属性的一些思考](https://mp.weixin.qq.com/s/xlilwHoVtmOE0Ogf1h_DyA)\n- [让 Class 与 Style 动起来](https://mp.weixin.qq.com/s/vHnDVe_RTQikxTu6Bgfrdg)\n- [动静结合 · Vue 模板](https://mp.weixin.qq.com/s/JqqLT3VrvwRHjAIjNe-vzQ)\n- [Vue 模板的功臣 · 指令](https://mp.weixin.qq.com/s/U6zdZeUj5Qwhw8irF1JufQ)\n- [关于 v-model 的一点思考](https://mp.weixin.qq.com/s/C0aqI0cBix1rCiB_LYCk_g)\n- [太强了，从 0 到 1 搭建 vue-cli](https://mp.weixin.qq.com/s/97v5r122BNQF5erN95PyPQ)\n- [各种博客的代码高亮是如何实现的](https://mp.weixin.qq.com/s/HagUTO9KZjZqovAIbvx8Hg)\n- [scoped 减少了我对 CSS 样式冲突的焦虑](https://mp.weixin.qq.com/s/b2Tjl2CWhZ_GSjheIELXpw)\n- [Vue CLI 3.0 配置项 - 设置接口代理](https://mp.weixin.qq.com/s/lc9krc4AqXcj2WZhEeYb0g)\n\n### 第 7 阶段：云与环境部署\n- [第七阶段 · 云与环境部署](https://mp.weixin.qq.com/s/kKjmqConeMI2zlJpvX0XSw)\n- [精心画了一张 vim 壁纸](https://mp.weixin.qq.com/s/KvYVT5YDt_G_J4RJ98wo4w)\n- [使用 vim 不得不看的 2 个 tips](https://mp.weixin.qq.com/s/0zDETiTCU_GANaIthHegnw)\n- [npm install -g 的时候别再输密码了](https://mp.weixin.qq.com/s/EhFt8rZh0brZyNgBuhriDA)\n- [我是这样查线上日志的 · 6个命令](https://mp.weixin.qq.com/s/K4o0-zVl6KH86YaJXZdi3Q)\n- [vim 电脑壁纸来了（3种主题）](https://mp.weixin.qq.com/s/z_LWAxW21KExVDtoWndYag)\n- [数据接盘侠 \u003e 与 \u003e\u003e](https://mp.weixin.qq.com/s/embPPg-g5fH5x4NZGAa2ZQ)\n- [进来聊一聊前端上线的一些问题](https://mp.weixin.qq.com/s/dDCMw80gktemZklNOqXBbQ)\n- [10x 程序员 · 提高 shell 的使用效率](https://mp.weixin.qq.com/s/cHexunWiAy4ms32UWVz7_Q)\n- [与前端部署相关的一些关键词](https://mp.weixin.qq.com/s/GDXvtesbsTgE8XIrkBKfwA)\n\n### 第 8 阶段：小程序与前端动画特效\n- [小程序向上弹出动画效果](https://mp.weixin.qq.com/s/HR2LnHgcplAcBKXhzKdhUg)\n- [网易云音乐背景高斯模糊探索](https://mp.weixin.qq.com/s/Yd2-Sb6F6tNFd8ojS9N0mw)\n- [跳动的音符动画实现原理剖析](https://mp.weixin.qq.com/s/Dp_-tE8Ioj9eybxIZ5Jhdw)\n- [让按钮“呼吸”一会（呼吸动画）](https://mp.weixin.qq.com/s/V-7drgK9iHjwEGVn3rFycg)\n- [这个动画代码可以优化一下](https://mp.weixin.qq.com/s/NrCoFHoh2RCc_t7nsv1hLQ)\n- [小猴子跌落山崖之 linear、ease、ease-in](https://mp.weixin.qq.com/s/DDi5cj3Dj5mRF72ZYs9Rhw)\n- [图解 CSS 属性单位和动画属性](https://mp.weixin.qq.com/s/-BiHS54K8CvrQyRBakmyWw)\n- [环形进度条没有想象的那么简单](https://mp.weixin.qq.com/s/S4wtZQm12Zk50HCby8mpRA)\n- [四步搞定小菊花 Loading 动画](https://mp.weixin.qq.com/s/0klnoP6M90uU1g2g433swQ)\n- [有赞真赞，官网水波纹动画这么酷](https://mp.weixin.qq.com/s/BisZrZBJixpOir0xRKXbfg)\n- [给 HTML 元素 Hover 态加点料](https://mp.weixin.qq.com/s/xVMQrjHNdxUbyr0FDKCyLg)\n- [第 8 阶段前端动效结束，下一阶段内容预告](https://mp.weixin.qq.com/s/H7k8IHxL-YmxCE-QQDc12w)\n\n### 第 9 阶段：搞懂搞透前端构建\n- [每位前端人都需要搞懂、搞透前端构建](https://mp.weixin.qq.com/s/5nR8LeiJVYgmudUhdgXbWg)\n- [webpack 究竟是什么，初学者晕头转向](https://mp.weixin.qq.com/s/284LdM-xuiYdhON4Sw0krQ)\n- [安装 webpack 搞定 Vue 打包](https://mp.weixin.qq.com/s/nCjUZgQMzOSHZ2Z05LuvqA)\n- [从使用 loader 到实现 loader · webpack](https://mp.weixin.qq.com/s/jfxEOBW89IUV5BWkwOYuGQ)\n- [搞定 webpack 的 plugin 不在话下](https://mp.weixin.qq.com/s/q1yPGGXmUvEMQ0JNNDoWzA)\n- [使用 webpack 动态生成 html](https://mp.weixin.qq.com/s/ScwmFkxoEzCVWO8dXbSPVQ)\n- [webpack 与 tapable 擦出火花，实现 plugin 系统](https://mp.weixin.qq.com/s/aBXcxvqGZVzbs7G0DcH7DA)\n- [webpack 性能优化 DLL 才硬核](https://mp.weixin.qq.com/s/GiPfo5lgxkES4je_gNuNyQ)\n- [webpack 辅助高效开发](https://mp.weixin.qq.com/s/qO5LBpEpxahQK1v1DWGnqA)\n- [原来实现 CLI 工具如此简单，以前路走错了](https://mp.weixin.qq.com/s/ZwfQoGTtIecQFepdb8E1SQ)\n- [webpack 性能优化之定位问题](https://mp.weixin.qq.com/s/WtC1RACuTmGZuvUWmZOtvg)\n- [这些资料助你搞透 Webpack](https://mp.weixin.qq.com/s/fu58YXwN3Mxn-7MFBNDCQw)\n- [统一管理多项目 webpack 配置文件](https://mp.weixin.qq.com/s/6J9X8s_QfQcv2g5Wr-qn-A)\n\n\n## 🌹网站\n\n你也可以通过网站学习，[前端小课](https://lefex.github.io/)\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flefex%2Ffe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flefex%2Ffe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flefex%2Ffe/lists"}