企业官网建设流程全解析

• 文档
• 教程
• 前端

导读

本文基于《千古前端图文教程》资源推荐目录中的 03-前端学习资源推荐 文档，系统梳理了一份覆盖前端教程、CSS、JavaScript、TypeScript、Node.js、算法、Vue、单元测试、前端面试、博客与文档规范的全方位学习资源清单。读完本文，你将了解每个资源的核心定位与适用阶段，并知道如何让这些外部资源与本仓库的图文教程章节形成"基础打底 + 专项进阶 + 面试冲刺"的完整学习闭环，从而更有针对性地规划自己的前端学习路线。

一、这份清单在知识库中的位置

在 17-资源推荐 目录下，千古前端图文教程围绕"学什么、跟谁学、怎么学"提供了五份互为补充的清单：

• 01-前端书籍推荐：聚焦 JS、CSS、面试、Vue/React 源码、设计模式等方向的经典书籍；
• 02-Web前端最新导航：收录技术社区、技术博客、GitHub 排名统计与资讯类站点；
• 03-前端学习资源推荐（本文主体）：按技术方向组织教程、工具库、算法与面试资源；
• 04-前端大佬名单：列出值得关注的前端技术大牛及其博客；
• 05-前端GitHub项目整理：收录高质量的开源项目与每日时报等聚合资源。

其中 03-前端学习资源推荐 的特点是"按知识点分方向、按学习阶段分层次"：每个分类下都是经过筛选、有明确价值定位的资源，适合在学完本仓库某个章节后，针对性地向外拓展。下文按原文档的分类顺序逐一展开。

二、前端教程：系统化的入门与进阶主线

原文档在"前端教程"这一分类下列出两个核心教程资源，它们恰好覆盖"中文超详细图文笔记"与"以最新标准为准绳"两种互补的学习路径。

1. 千古前端图文教程（本仓库）

• 官网：web.qianguyihao.com（README 中确认的官方在线阅读地址）
• 定位：超详细的前端入门到进阶学习笔记，"从零开始学前端，做一名精致优雅的前端工程师"。

本仓库的教程内容正是这份资源清单的"主体骨架"，全库按技术栈组织为 18 个目录：

• 01-HTML：从认识 Web 和 Web 标准、浏览器介绍，到 HTML 标签与 HTML5 新特性；
• 02-CSS基础、03-CSS进阶：覆盖字体、背景、盒模型、浮动、定位、Flex 布局、CSS3 动画与布局体系；
• 04-JavaScript基础、05-JavaScript基础：ES6语法、06-JavaScript基础：异步编程、07-JavaScript进阶：从变量、函数、闭包、原型链到 Promise、async/await、事件循环；
• 12-Vue基础、13-React基础：两大主流框架的系统讲解；
• 14-前端性能优化、15-前端工程化：渲染机制、静态资源优化、代码规范等工程能力。

它适合作为主线教材反复翻阅，也适合当作"前端字典"随时查漏补缺（README 中明确表述了这三个作用：照顾初学者同理心、提供精品学习路线、可当字典查阅）。

2. 现代 JavaScript 教程

• 官网：zh.javascript.info
• 定位：以最新的 JavaScript 标准为基准，用"简单但足够详细"的内容讲解从基础到高阶的 JavaScript 知识。

它与本仓库的互补关系很明显：本仓库的 04-JavaScript基础 与 05-JavaScript基础：ES6语法 侧重手把手图文讲解，而现代 JavaScript 教程在语言标准细节（如最新的对象、类、模块机制）上更新更及时。建议把两者对照阅读：先用本仓库建立整体认知，再借助后者校正对新标准细节的理解。

三、CSS：灵感、常用样式与特效实现

原文档在 CSS 分类下列出三个资源，覆盖了 CSS 学习的三个典型场景：找灵感、查常用样式、看特效实现。

1. CSS Inspiration（写 CSS 的灵感库）

作者 chokcoco。这是一个以"灵感"为主题的 CSS 项目，适合在写页面缺少思路时浏览。本仓库的 02-CSS基础 与 03-CSS进阶 恰好提供了对应的理论支撑——例如 06-CSS盒模型详解、13-CSS3属性：Flex布局图文详解、02-CSS布局。先理解布局与盒模型的底层规则，再看灵感库中的效果实现，往往能更快读懂其背后的写法。

2. CSS 常用样式（css_tricks）

作者 QiShaoXuan 整理的 CSS 常用样式集合。它本质上是一份"CSS 速查 + 常见效果模板"，适合在开发中遇到"这个样式怎么写"时快速查阅，与仓库中 CSS开发积累、CSS的一些小知识 这类积累型文档的定位一致，可互为补充。

3. You-need-to-know-css（CSS 各种效果实现）

作者内化输出后贡献的开源项目，原文档特意强调："css 的各种效果实现（尤其是动画效果），关键时刻能救命"，作者评价其"很有极客精神"。原文档还记录了一个真实的检索案例：作者在里面找到了"抖动效果"，解决了实际需求。这提示了一个高效用法——当你在仓库的 12-CSS3属性详解：动画详解 中学完动画基础后，可以把这里当作"动画效果字典"，按效果名直接检索现成实现。

四、JavaScript：代码规范与深度进阶

原文档在 JavaScript 分类下推荐了两个资源，分别对应"写得更规范"和"看得更广"。

1. clean-code-javascript（优秀的 JS 代码规范）

作者 ryanmcdermott，以 Clean Code 思想整理 JavaScript 代码规范。建议在学习完 04-JavaScript基础 的语法体系后阅读，把规范落实到自己的编码习惯中。本仓库在 15-前端工程化/01-前端代码规范 中同样有代码规范类的内容，二者可对照：前者是通用 JS 最佳实践，后者更贴近前端工程落地的规范细则。

2. spellbook-of-modern-webdev（现代 Web 开发"咒语书"）

作者 dexteryy 整理，原文档称其为"宝藏"项目。它更像一张现代 Web 开发的知识地图，把生态中的关键概念、工具与库串成体系。对于已经完成 16-前端综合/01-Web前端开发流程和学习路线（详尽版） 学习、想进一步拓宽技术视野的开发者，用它来对照本仓库 15-前端工程化 中的专有名词与工程化概念，可以快速补齐生态位认知。

五、TypeScript：系统教程

原文档在 TS 分类下推荐了 xcatliu 的 TypeScript 教程。它的内容组织从类型基础到进阶类型体操，适合在掌握 JavaScript 基础之后系统学习。本仓库在 16-前端综合/02-Web前端入门自学路线（精简版） 中明确建议"TS 属于进阶内容，先把基础掌握之后再学"，因此推荐顺序是：先完成 04-JavaScript基础 与 05-JavaScript基础：ES6语法，再跟进该 TS 教程。

六、Node.js：服务端方向学习笔记

原文档推荐了 poetries 的 Node.js 学习笔记（blog.poetries.top/node-learning-notes）。它系统覆盖了 Node.js 的模块机制、内置模块与常用框架。本仓库在 11-Node.js 目录下同样提供了配套基础：从 01-Node.js介绍、04-Node.js模块化规范：CommonJS、05-Node.js内置模块：fs文件模块 到 KOA2、WebSocket，以及与后端配套的 10-MySQL数据库 章节。学习路径建议：先通读本仓库 Node.js 基础章节，再用外部笔记补充框架层面的最佳实践。

七、算法类：数据结构和刷题资源

原文档在算法分类下列出 5 个资源，覆盖"系统学算法 + 刷题实践"两条线。

1. javascript-algorithms（数据结构和算法）：作者 trekhleb，用 JavaScript 实现常见数据结构与算法，并附图文解释，是目前 JS 生态中最系统的算法教程之一。建议配合本仓库 15-前端工程化/前端的几道题目 等练习内容使用。
2. leetcode 解题之路：作者 azl397985856 的 LeetCode 题解集合，按专题组织，适合按"数组、链表、动态规划"等主题集中刷题。
3. LeetCodeAnimation（五分钟学算法）：作者 MisterBooo，用动画演示 LeetCode 题目的解题过程，原文档定位为"五分钟学算法"。它对算法可视化的呈现方式，尤其适合把仓库 04-JavaScript基础 中学到的递归、循环等概念在算法题中"看得见"。
4. LeetCode 攻略（2019 年 8 月上半月汇总，109 题攻略）：一篇以"109 题"为单位的阶段性质题攻略汇总，适合按批次集中攻坚时参考。
5. 极客时间 App《数据结构与算法之美》：付费体系化课程，适合愿意系统投入时间、希望在算法方向打深地基的开发者。

算法学习建议与 16-前端综合/01-Web前端开发流程和学习路线（详尽版） 中"查漏补缺、把知识当字典用"的思路一致：先系统学一遍数据结构，再以每日一题的方式保持手感。

八、Vue 教程：深入框架内部

原文档在 Vue 分类下推荐了 yugasun 的 You-May-Not-Know-Vuejs，定位是"你可能不知道的 Vue.js"——专门挖掘 Vue 使用中容易被忽略的细节与原理。它适合在完成本仓库 12-Vue基础 的学习之后阅读，例如先掌握 01-Vue的介绍和vue-cli、13-Vue-router路由，再通过该资源补齐"指令背后的实现细节""组件通信的边界情况"等进阶认知。仓库目录中的 Vue组件、Vue开发积累 可作为补充材料配套查阅。

九、综合类：前端精读周刊

原文档在综合类下推荐了 dt-fe（阿里前端团队）的前端精读周刊（weekly）。其特点是每期精读一篇前端技术文章，输出团队视角的解读，适合长期订阅、保持对技术趋势的敏感度。与之配合，本仓库的 06-前端文章推荐 与 2018/2019/2020/2022-推荐文章 等历年推荐文章汇总，可作为"按年份回顾前端演进"的补充阅读材料。

十、其他：单元测试最佳实践

原文档在"其他"分类下推荐了 goldbergyoni 的 javascript-testing-best-practices，这是目前社区公认的 JavaScript 测试最佳实践合集之一，覆盖测试框架选型、测试用例组织、Mock 策略等。本仓库在 15-前端工程化/前端工程化 中提到了自动化测试等工程化话题，二者可以结合：先用该资源建立测试方法论，再在工程实践中落地。

十一、前端面试：五份互补的题库资源

原文档在前端面试分类下列出 5 个资源，覆盖"图谱式、模块式、问答式、宝典式、合集式"五种组织形式：

1. 前端面试图谱（yuchengkai.cn）：从面试角度出发组织知识体系。原文档特别说明其互补价值："这个项目是从面试的角度出发的，我自己的项目是从基础入门的角度出发的，可以起到互补的作用。"——即用本仓库打基础，用面试图谱做检验。
2. 前端面试常考问题整理（blog.poetries.top/FE-Interview-Questions）：按模块知识点分类整理，适合按"JS 基础、浏览器、框架、工程化"等模块定向复习。
3. 前端开发面试题（markyun/My-blog 的 Front-end-Developer-Questions 目录）：经典的中文前端面试题整理。
4. web 前端面试宝典（h5bp/Front-end-Developer-Interview-Questions）：老牌前端团队维护的面试问题集合，覆盖面广。
5. 掘金前端面试题合集（shfshanyue/blog 中的 juejin-interview 一文）：聚合掘金上高频前端面试题的合集。

搭配使用建议：以面试图谱做总纲，以模块化题库做专项突破。本仓库同样沉淀了面试向内容，如 03-CSS进阶/CSS面试题、15-前端工程化/前端的几道题目、07-JavaScript进阶 下的 call、apply、bind的区别、Promise的一些题目 等，可与外部题库形成"仓库内精读 + 外部题库自测"的闭环。

十二、综合面试：反向面试清单

原文档在综合面试分类下推荐了 yifeikong 的 reverse-interview-zh（反向面试）。它与普通面试题不同：不是"被问"，而是"反问"——整理了你在面试结束时可以反问面试官的问题清单，例如团队技术栈、代码评审流程、成长路径等。原文档将其定位为"反问面试官的问题"，建议在求职阶段提前浏览，挑选与自身关切匹配的问题，避免"面试官提问环节一句都问不出来"的尴尬。

十三、博客：优质中文前端博客合集

原文档在博客分类下推荐了两个资源：

1. best-chinese-front-end-blogs（作者 FrankFang）：收集优质中文前端博客的合集，适合用来发现值得长期关注的作者。可与 04-前端大佬名单 互为补充——前者按"博客质量"收集，后者按"技术大牛"收集。
2. zimo-article（作者 laizimo）：原文档评价"讲得比较详细"，并特别举例其中的 [CSS布局说——可能是最全的] 一文作为"详细讲解"的代表。该文与仓库 03-CSS进阶/02-CSS布局 主题重叠，建议对照阅读：仓库版适合建立主线认知，博客版适合看作者的完整推导过程。

十四、文档类：排版规范与发音纠错

原文档在文档类分类下列出两个实用资源：

1. 中文博客排版指南（作者 qianguyihao，即本教程作者）：关于中文技术博客排版规范的指南。写技术博客时遵循"统一标题层级、中文与英文/数字间留空格、代码块规范"等约定，可显著提升可读性。这也解释了为什么本仓库各章节的行文与排版风格高度统一。
2. chinese-programmer-wrong-pronunciation（作者 shimohq）：收集中国程序员容易发音错误的英文单词，覆盖了 Ajax、Gif、Chrome 等高频误读词，适合在写代码、做分享、录课程前快速自查。

十五、学会提问：高效求助的正确姿势

原文档最后推荐了 ryanhanwu 翻译的 How-To-Ask-Questions-The-Smart-Way（提问的智慧）。它的核心价值在于：提问前先自行排查（文档、搜索引擎、调试）、提问时给出完整上下文（环境、报错、已尝试的方案）、提问后及时反馈结果。这一点与本仓库 README 中"进群要求：少提问、少闲聊、多分享"的理念一致——技术社区的有效交流，建立在"自己先尽力"的前提之上。

十六、如何把这份清单用起来：推荐的使用路径

结合本仓库 16-前端综合/02-Web前端入门自学路线（精简版） 给出的学习顺序，这套资源清单可以按以下路径接入：

1. 入门阶段（0～3 个月）：以本仓库 01-HTML、02-CSS基础、04-JavaScript基础 为主线，配合"现代 JavaScript 教程"校对语法细节；
2. 进阶阶段（3～6 个月）：完成 05-JavaScript基础：ES6语法、06-JavaScript基础：异步编程，同步跟进 TypeScript 教程、clean-code-javascript 规范与算法资源中的数据结构部分；
3. 框架阶段：以 12-Vue基础 或 13-React基础 为主，配合 You-May-Not-Know-Vuejs 深入框架细节，UI 框架可参考 09-移动Web开发/01-Bootstrap入门；
4. 面试阶段：用前端面试图谱做总纲，用模块化题库做专项复习，用反向面试清单准备"反问环节"，同时温习仓库内的 CSS面试题 与 Promise的一些题目；
5. 长期保持：订阅前端精读周刊与历年推荐文章汇总，把 CSS Inspiration、css_tricks、You-need-to-know-css 当作日常开发的"样式字典"随手查阅。

整套资源与仓库章节的对应关系可以归纳为：外部资源负责"深度、广度、最新度"，本仓库负责"体系、循序渐进、查漏补缺"，两者结合即可形成从入门到进阶再到面试的完整学习闭环。

结语

03-前端学习资源推荐 这份清单的价值，不在于链接本身，而在于其分类视角——它把前端学习拆解为"教程主线、CSS 实战、JS 规范、算法训练、框架细节、面试冲刺、博客视野、文档规范"八个维度。配合本仓库的图文教程体系，你既可以按分类定向查阅，也可以按上文推荐的五个阶段系统推进。从零开始学前端，做一名精致优雅的前端工程师，起点就是先拥有一张靠谱的资源地图。

• 文档
• 教程
• 前端