零基础的前端开发初学者应如何系统地学习？

傷城~ 2021-09-20 05:44 286阅读 0赞

首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识：

**W3school：**[http://www.w3school.com.cn/][http_www.w3school.com.cn]

**MDN 官方教程：**[https://developer.mozilla.org/zh-CN/][https_developer.mozilla.org_zh-CN]

**W3C 官方文档：**[https://www.w3.org/][https_www.w3.org]

**freecodecamp 学习网站：**[https://www.freecodecamp.com/][https_www.freecodecamp.com]

学习 HTML 和 CSS 基础知识的时候，看上买呢网站教程就够了。当你想要进阶的时候，推荐你看《精通 CSS 第三版》和《CSS 权威指南两本书》。

![v2-8796f7a614bb411c59e6bd91b05ac9fd_hd.jpg][]

![v2-f05c90a8ee280cdcbcb8e91ea295ac45_hd.jpg][]

之后你就需要学习一些包管理，包括 npm，yarn 等等。

接下来学习 CSS 预处理，CSS 的一些框架的使用，最常见的就是 Bootstrap 等。以及 CSS Architecture。

这里推荐一些好用的前端库：

*  [Sass][]: CSS的扩展，可以声明变量，引入模块，嵌套属性等等。
 *  [Less][]: 为CSS添加声明变量，样式模块，命名空间，继承等特性。
 *  [Stylus][]: 写CSS再也不用写烦人的括号啦～
 *  [Bootstrap][]: 全世界最流行的响应式前端框架。

**以上这些没必要都学，千万不要什么都学，要有选择的学，按照需求去学，在项目实战中学。**

在 CSS 和 HTML 相关知识学好了之后，开始认真学习 JavaScript。推荐几本好书：《JavaScript 权威指南》，《JavaScript 高级程序设计》，《JavaScript DOM 编程艺术》

![v2-a756665761f2fd575a4ba36949b0ad98_hd.jpg][]

![v2-e403c3adf24217fab37c54c5413c96ff_hd.jpg][]

![v2-b5331ff7220a208e25d52b8a3c635b96_hd.jpg][]

当然，除了以上这些书，还有一些进阶书籍。不过以上三本看熟看透，你已经可以达到中级水平了。对于之后再看什么书，你应该自己就可以进行选择了。我在这列一些常见的推荐书目。

### 推荐书目 ###

*  基础
 *  [深入浅出HTML与CSS、XHTML][HTML_CSS_XHTML]
 *  [HTML & CSS设计与构建网站][HTML _ CSS]
 *  [Pro Git中文版][Pro Git]
 *  [鸟哥的linux私房菜][linux]
 *  中级
 *  [Head First HTML5 Programming][]
 *  [JavaScript权威指南][JavaScript]
 *  [JavaScript语言精粹][JavaScript 1]
 *  [JavaScript & jQuery交互式Web前端开发][JavaScript _ jQuery_Web]
 *  [深入浅出Ajax][Ajax]
 *  高级
 *  [JavaScript高级程序设计][JavaScript]
 *  [HTML5高级程序设计][HTML5]
 *  [CSS权威指南][CSS]
 *  [深入浅出Node.js][Node.js]

**学习好了 HTML，CSS，JavaScript 基础知识后，学习一些构建工具及其他工具的使用，并尽量明确其原理，开始做项目。包括但不限于以下工具：**

*  [Grunt][]: JavaScript自动化工具。
 *  [Gulp][]: 个人感觉是最好用的自动化构建工具。
 *  [webpack][]：模块化加载构建一切，CSS/JS连图片都可以
 *  [npm][]: NPM虽好，不要太依赖袄。
 *  [Bower][]: 前端框架包管理工具，各类框架和库一键安装。

**之后进行前端框架的选择和学习，包括但不限于以下框架：**

*  Vue：广泛使用的前端框架，认真学。
 *  React：也是一个广泛使用的前端框架，最好把这个和 Vue 都认真学习好。
 *  [AngularJS][]: Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。
 *  [Ember.js][]: 用来开发单页Web应用的JS前端MVC框架。
 *  [Express][]: Node.js上的Web框架，搭建网站或API服务只要一秒钟！
 *  [Meteor][]: JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。

**注意：以上内容依旧是有选择地学，不是所有内容都要学，不要给自己太大压力，什么都学，导致什么都没学好。**

框架和知识学习好了，要学习如何进行测试，主要包括这部分内容：

![v2-8a199ed81b711e23f411515a440af7ce_hd.jpg][]

之后要学习 PWA，这是以后的发展趋势：

![v2-30db0539bb51a4676c86855686b997f1_hd.jpg][]

之后学习一些更深入的内容：

![v2-cbeece6a5a1df5b21ec860a457299f16_hd.jpg][]

当然，学习无止境，最重要的是持续学习，加油吧！

## 近期发现一个迄今为止最棒的 JavaScript 教程，推荐给大家： ##

[现代 JavaScript 教程zh.javascript.info![图标][v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg]][JavaScript _zh.javascript.info_v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg]

## GitHub 上有一个很有名的 Roadmap： ##

[https://github.com/kamranahmedse/developer-roadmapgithub.com][https_github.com_kamranahmedse_developer-roadmap_github.com]

想成为一名前端大牛，按照这个路线学习，足以帮助你快速成长。

![v2-3b4b01beeb26db8f2a52889c1fa4d239_hd.jpg][]

[http_www.w3school.com.cn]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/
[https_developer.mozilla.org_zh-CN]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/
[https_www.w3.org]: https://link.zhihu.com/?target=https%3A//www.w3.org/
[https_www.freecodecamp.com]: https://link.zhihu.com/?target=https%3A//www.freecodecamp.com/
[v2-8796f7a614bb411c59e6bd91b05ac9fd_hd.jpg]: /images/20210812/594f6dc419fd42c2ab17cbfc4071c496.png
[v2-f05c90a8ee280cdcbcb8e91ea295ac45_hd.jpg]: /images/20210812/a1419ddd39c44b07b8b489bf50d07556.png
[Sass]: https://link.zhihu.com/?target=http%3A//sass-lang.com/
[Less]: https://link.zhihu.com/?target=http%3A//lesscss.org/
[Stylus]: https://link.zhihu.com/?target=http%3A//stylus-lang.com/
[Bootstrap]: https://link.zhihu.com/?target=http%3A//getbootstrap.com/
[v2-a756665761f2fd575a4ba36949b0ad98_hd.jpg]: /images/20210812/aab98ec8bd534d18b6352dac3a9bbb4c.png
[v2-e403c3adf24217fab37c54c5413c96ff_hd.jpg]: /images/20210812/777a63dffd9e478f9a75a120282dd006.png
[v2-b5331ff7220a208e25d52b8a3c635b96_hd.jpg]: /images/20210812/baab1b06f16a4bd5b2310599d72b1237.png
[HTML_CSS_XHTML]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/1799652/
[HTML _ CSS]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/21338365/
[Pro Git]: https://link.zhihu.com/?target=http%3A//iissnan.com/progit/
[linux]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/4889838/
[Head First HTML5 Programming]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/19894872/
[JavaScript]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/10546125/
[JavaScript 1]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/3590768/
[JavaScript _ jQuery_Web]: https://link.zhihu.com/?target=https%3A//www.amazon.cn/JavaScript-jQuery%25E4%25BA%25A4%25E4%25BA%2592%25E5%25BC%258FWeb%25E5%2589%258D%25E7%25AB%25AF%25E5%25BC%2580%25E5%258F%2591-%25E8%25BE%25BE%25E5%2585%258B%25E7%2589%25B9/dp/B010L41T5O/
[Ajax]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/3136781/
[HTML5]: https://link.zhihu.com/?target=http%3A//book.douban.com/subject/5402708/
[CSS]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/2308234/
[Node.js]: https://link.zhihu.com/?target=http%3A//book.douban.com/subject/25768396/
[Grunt]: https://link.zhihu.com/?target=http%3A//gruntjs.com/
[Gulp]: https://link.zhihu.com/?target=http%3A//gulpjs.com/
[webpack]: https://link.zhihu.com/?target=http%3A//webpack.github.io/
[npm]: https://link.zhihu.com/?target=https%3A//www.npmjs.com/
[Bower]: https://link.zhihu.com/?target=http%3A//bower.io/
[AngularJS]: https://link.zhihu.com/?target=https%3A//angularjs.org/
[Ember.js]: https://link.zhihu.com/?target=http%3A//emberjs.com/
[Express]: https://link.zhihu.com/?target=http%3A//expressjs.com/
[Meteor]: https://link.zhihu.com/?target=https%3A//www.meteor.com/
[v2-8a199ed81b711e23f411515a440af7ce_hd.jpg]: /images/20210812/4390634e3a764cf0b051377df3a75965.png
[v2-30db0539bb51a4676c86855686b997f1_hd.jpg]: /images/20210812/b325f9e1a08e4143996ead693f4e9cb6.png
[v2-cbeece6a5a1df5b21ec860a457299f16_hd.jpg]: /images/20210812/51cc6709eb084c2eb95bb2cc75fe3067.png
[v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg]: https://pic4.zhimg.com/v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg
[JavaScript _zh.javascript.info_v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg]: https://link.zhihu.com/?target=http%3A//zh.javascript.info/
[https_github.com_kamranahmedse_developer-roadmap_github.com]: https://link.zhihu.com/?target=https%3A//github.com/kamranahmedse/developer-roadmap
[v2-3b4b01beeb26db8f2a52889c1fa4d239_hd.jpg]: /images/20210812/8b09bfd4ae6949ba90702f46431be0b0.png