（十）Web Development(前端)学习路径

顺序

资源

知识分类/使用方法

链接和介绍

以做个人网站为目标，边学边做

学习建议：其实计算机科学领域大部分的知识你都可以在入门的时候保持这样的一个态度：不需要很懂某些概念，先把它们当工具来用，否则很容易陷入无限依赖的技术细节中。你看上面的链接里有一个扩展阅读，如果你想继续了解相关知识，可以点击扩展阅读继续了解一些细节。这是一个很好的学习计算机专业理论的方法，就先从应用的角度了解有什么用，怎么用，如果有必要再继续深挖细节和原理，这是如何做到的，为什么这样做。

0

学习Visual Studio Code

【工具】

没有特别好的资源，可以自己寻找，下面可以作为参考：

慕课网视频：https://www.imooc.com/learn/1106?utm_source=newmedia&utm_medium=zhihu&utm_campaign=&utm_content=

第一次使用 VS Code 时你应该知道的一切配置：

https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md

1

《Head First HTML 与 CSS》

Or

Runoob 菜鸟教程 - HTML+CSS

二选一

【HTML】【CSS】

《Head First HTML 与 CSS》：

‍https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgvNWIuwYo9bO-wAY.pdf‍‍

菜鸟教程：

https://www.runoob.com/

1‘

黑马程序员 前端小白零基础入门HTML5+CSS3

【HTML】【CSS】

喜欢视频的可以看这个

https://www.bilibili.com/video/BV1H64y127Sp/

黑马课程每讲一部分知识点，都有一个小实验，也就是让我们自己动手画网页，我认为这一点真的很好。

2

《JavaScript 高级程序设计》（红宝书）

【JavaScript】

配合下面的菜鸟教程和MDN练习

这本书推荐的人最多，是必看的

（1）第 1~11 章讲的是语言特性，必须掌握；（2）第 12、14-17 和 23-26 章是重点内容重点看；

（3）第 13、19 和 21 章是次重点内容，尽量看一下；

（4）第 28 章是最佳实践，看完前面内容后来学习如何写出更好的代码；

（5）第 18 章 Canvas、第 20 章 API、第 22 章 XML 和第 27 章工作者线程，可以在学有余力或者用到的时候看一下，不是初期重点内容。

书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。

2‘

Runoob 菜鸟教程 - Javascript

【JavaScript】

拿菜鸟教程和作为一个最为早期的过渡，比如一周时间把里面的内容实战一遍，然后去翻MDN技术文档

https://www.runoob.com/

不过值得一提的是这些线上教程内容很多已经过时，而且这种入门方式学习的知识也非常不系统。尽管它们问题很多，但是线上教程实在没有其他更好的选择。

2‘

mozilla MDN

【JavaScript】

拿菜鸟教程和作为一个最为早期的过渡，比如一周时间把里面的内容实战一遍，然后去翻MDN技术文档

https://developer.mozilla.org/zh-CN

MDN也有入门教程，内容新而且讲解也很系统，不过由于容易跳转到复杂知识的页面，怕新手接受不了。

2‘

廖雪峰的JavaScript教程

【JavaScript】

https://www.liaoxuefeng.com/wiki/1022910821149312

3

学习Git

【Git】

廖雪峰的官方网站-git教程：

https://www.liaoxuefeng.com/wiki/896043488029600

只学：Git简介（安装Git；创建版本库）；时光机穿梭；远程仓库

猴子都能懂 Git 入门：https://backlog.com/git-tutorial/cn/

4

实战项目

【实战】

免费项目：

实现一个个人网站/博客/portfolio

实现一个2048小游戏https://blog.csdn.net/qq_41893646/article/details/109430626

Udemy项目推荐（需要花点钱）：

Udemy Build a Quiz App with HTML, CSS, and JavaScript

https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/

50 Projects In 50 Days - HTML, CSS & JavaScript

https://www.udemy.com/course/50-projects-50-days/

50+ Web Projects with HTML, CSS, and JavaScript

https://www.udemy.com/course/50-web-projects-with-html-css-and-javascript/

JavaScript Web Projects: 20 Projects to Build Your Portfolio

https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/

顺序

资源

知识分类/使用方法

链接和介绍

1

《图解HTTP》

or

图解网络 by 小林coding

【网络】

两个二选一即可

https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgwNWIuwYogJCOkgQ.pdf

前端工程师对网络协议如果能掌握的比较透彻的话，对整体前后端的沟通是非常有帮助的。像 TCP/IP网络协议、三次握手和四次挥手、DNS的作用、CDN的作用和原理、HTTP、HTTPS、WebSocket 等等这些知识点，我认为都是一名合格的前端工程师应该掌握的。

图解网络 by 小林coding：

https://xiaolincoding.com/network/

2

《CSS 权威指南》

【CSS】

‍https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgvdWIuwYo_qqw1QU.pdf‍

本书是一本注重实践的教程，作者为我们揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。第四版包含了 CSS3 的内容，不需要再看别的了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。

3

《你不知道的JavaScript》（上、中、下）

【JavaScript】

上 https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgvNWIuwYogOnXxwY.pdf‍

中 https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgvNWIuwYovqi9vQU.pdf‍

下 https://32931414.s21i.faiusr.com/61/ABUIABA9GAAgvNWIuwYo_bm66wY.pdf‍

上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。

4

ES6 入门教程-阮一峰

【JavaScript】

https://es6.ruanyifeng.com/

5

freeCodeCamp 课程 - responsive web design

【Responsive Web Design】

https://www.freecodecamp.org/learn/2022/responsive-web-design/

学习完了 HTML、CSS，下面就进入到代码实际练习和巩固阶段了，freeCodeCamp可以很好的帮我们实现，在freeCodeCamp的“响应式网页设计”部分，可以把前面学到的知识整体练习一遍，最后还有五个小项目练习来确认基础掌握情况。

6

《Node.js开发指南》

【框架】

这是一本非常不错的入门书！也是国内的第一本Node.js相关书籍，是一本非常出色的面向初学者的Node.js开发指南。

7

React官方文档

Or

Vue官方文档

【框架】

二选一

最后用它搭一个项目（比如个人网站）

框架可以带你高效开发。前端技术变化太快，看官方文档永远是最直接最前沿的：

React：

https://zh-hans.legacy.reactjs.org/docs/getting-started.html

Vue（把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要）：

https://cn.vuejs.org/

React 的开发体验更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来，要求你有较好的 JavaScript 基础。

Vue 则引入了模版，相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），将很多实现封装成了 API，需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，相对的编程的感觉会弱一些。

推荐先学React，对找第一份工作比较友好。

8

JQuery的官方文档

【框架】

【JavaScript】

https://jquery.com/

9

Bootstrap官方文档

【框架】【UI】

https://www.bootcss.com/

10

学习DevTools

【工具】

https://juejin.cn/post/6946017980518137869

11

项目实战

【实战】

1. 用框架完成个人博客的上线

2. 聊天机器人https://www.freecodecamp.org/chinese/news/how-to-build-a-chatbot-with-react/

3. 自己选择做其他项目

顺序

资源

知识分类/使用方法

链接和介绍

1

《JavaScript权威指南（第6版）》 （犀牛书）

【JavaScript】

‍https://32931414.s21i.faiusr.com/61/ABUIABA9GAAg5tmIuwYohIDTmQI.pdf‍

作为字典使用，不理解的地方就去查阅一下，很有帮助。

2

《高性能JavaScript》

【JavaScript】

‍https://32931414.s21i.faiusr.com/61/ABUIABA9GAAg59mIuwYo28a14AM.pdf‍

这本书是JavaScript界的神书之一，这本书的含金量非常高，里边的很多知识，都是作者通过实践总结出来的，都是经验的积累，这在一般的教科书上是学不到的。

3

《JavaScript忍者秘籍》

【JavaScript】

这本书是jQuery库创始人编写的一本深入剖析JavaScript语言的书 对JavaScript语言的重要部分（函数、闭包和原型）进行深入、全面的介绍，以及讲述跨浏览器代码如何编写

4

《HTTP权威指南》

【网络】

《HTTP权威指南》比较少见的全面介绍HTTP协议的书。全书涉及HTTP协议的方方面面：URL、URI、连接、Web服务器、代理、缓存、路由器、交换机、web机器人、cookie、认证、HTTPS、编码、负载均衡、日志记录等等。写的不错。

虽然是十年前的书，好在HTTP协议这十年来没什么变化，这本书基本不过时。只是10年前的网络比现在慢，网站架构比现在简单，书中涉及到网络的地方经常用modem来举例，书中出现的网站的架构也相对简单。

5

《编写可维护的JavaScript》

【代码规范】

基本上是zakas那本红宝书的子集，重点是javascript代码风格、规范以及最佳实践。

==

乌龟书，很薄，但从工程实践的角度谈了常见的坑，其中的工作习惯值得coder们学习

==

书籍里有一些编码规范相关的内容，闲来读一读对自己的代码质量能有提高

6

Airbnb JavaScript 代码规范

【代码规范】

https://github.com/BingKui/javascript-zh

7

学习TypeScript

【JavaScript】

没有特别突出的资源推荐，参考下面的网站：

https://www.tslang.cn/docs/home.html

https://www.runoob.com/typescript/ts-tutorial.html

7

《深入浅出Node.js》

【框架】

学有余力可以看这本

本书是我看到现在对Node.JS技术原理和应用实践阐述的最深入，也最全面的一本兼顾了理论和实践的好书。

说实话，国内作者能有如此评价真的是非常厉害了。

作者秉着授人于鱼不如授人于渔的精神，细致入微的从V8虚拟机，内存管理，字符串与Buffer的应用，异步编程的思路和原理这些基础的角度来解释Node.JS是如何工作的，比起市面上众多教你如何安装node，用几个包编写一些示例来比，本书绝对让人受益匪浅。

认真看完本书，几乎可以让你从一个Node的外行进阶到专家的水平。赞！

9

学习Webpack

【工具】

没有特别突出的资源推荐，可以参考：

《深入浅出 Webpack》：

https://webpack.wuhaolin.cn/#google_vignette

Webpack 官方文档：

https://www.webpackjs.com/concepts/

10

学习npm

【工具】

https://www.freecodecamp.org/chinese/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/

11

掌握后端基础

【后端】

见后端的部分