前端开发看似很简单，但是却涉及了很多的知识领域，IT培训网整理了15个前端开发学习知识，包块了一些页面布局、框架开发流程、设计和编写 HTML 邮件代码等资源。

1. Bootstrap 4 Cheat Sheet

一份 Bootstrap 4 的参考手册，来自 HackerThemes 网站的 Alex。这个网站有一个非常漂亮交互式布局，这个漂亮的交互式布局展示了可被点击的条目，当该条目被点击时在该页面的视口的底端会有代码片段和代码效果显示出来。你也可以在版本 4 里点击突出的所有新的东西。

2. AngularJS Cheat Sheets(AngularJS 参考手册)

“我们创建了一些参考手册学习指南来帮助你克服最初的 AngularJS 学习曲线，并且提供给你的日常工作提供一份参考。”包括三份参考手册:AngularJS Core Services (AngularJS 核心服务),AngularJS Directive Definition Object (AngularJS 指令定义对象)，和 AngularJS ui-router (AngularJS 用户界面路由)。

3. React Makes You Sad

Dan Abramov 为那些在使用 React 框架时有理解不同概念困难的人而制作的一张流程图。这张流程图提供了一些可以做和不可以做的类型的建议，来帮助你简化事情，这样你就可以更好地理解这个库了。

4. Flexbox Patterns(可扩展布局盒模式)

“Flexbox 很棒，但是引入了很多新的概念，这样做可能使使用它变得有些困难。这些交互示例将会展示给你很实际的方法，来使用 Flexbox 构建 UI 组件。它们以简单的代码，而在结尾之前得到更复杂的代码

5. Hacksplaining

它不仅仅适用于前端开发者，同时也值得在开发领域的人进去看一看。”The best defense against hackers (对抗黑客最好的防御)是一个见多识广的开发团队。我们交互式的练习将教会你的团队，关于如今大多数的常见的安全漏洞。”

6. JavaScript Standard Style (JavaScript 标准样式)

JavaScript 标准样式并不是一个主要的学习指南，但是它是一个模式，根据这个模式你可以安装和运行 JavaScript，并且可以通过命令行来测试你的 JavaScript 代码，而不是一系列 JavaScript 语法的规则。它也被用作一个文本编辑器的插件。作为一份指南，你也可以看看 Rules breakdown，这对于初学者和其他人来说是培养一些基本的 JavaScript 意识练习的最好方法。

7. Webpack: An Introduction (Webpack:一份入门手册)

“Webpack 是一款流行的模块打包工具，它能在语块里很方便地打包应用的代码资源，并且它能从一个服务器里把代码加载到一个浏览器里。”这份指南在 Angular 的官网上有，这份指南已经准备好在 Angular2 应用里使用 Webpack。

8. Aural UI of the Elements of HTML (HTML 元素的 Aural UI)

“HTML 元素是如何被屏幕阅读器所支持的。”在 Windows10 操作系统上的 Firefox 浏览器里，在 VoiceOver 上的 Firefox 浏览器里和在 OSX 操作系统上的 Safari9 浏览器上，和在 Windows 8.1 操作系统上的 NVDA 和 Firefox 浏览器里是由四个表格组成的数据来覆盖 JAWS 的， 还有更多的测试。

9. Type Terms

Type Terms 工具对设计者的有用程度远大于开发者，但是它对于那些想更加熟悉排版术语的人来说，是为他们精心设计的和有用的交互工具。它是 Supremo (苏帕摩)的民间机构，一个曼彻斯特的设计机构开发出来的。

10. Email Toolbox (Email 工具盒)

它是大量的链接资源，主要聚焦在设计和编写 HTML 邮件代码上。这些资源都在不同的分类下，包括人们应遵循的，课程，可读的博客文章，工具和邮件服务提供者(商)。

11. Almost complete guide to flexbox (without flexbox)

这里有很多不同的伸缩布局盒指南和工具，但是他们有一些不同。这份指南将向你展示在你的布局里如何使用传统的方法来达到和伸缩布局盒一样的效果。很高兴能看到它们在这样一个帖子里，并且还有代码示例。

12. Angular 1.x styleguide (ES2015)

这是由 Todd Motto 写的一份”针对团队的 Angular 样式指南”，他是一名 Telerik 倡导开发人员。Todd 也在 Angular JS 开发网站上提供课程。这份样式指南”已经为 ES2015 从头到脚重新写了一遍，内容变化的是在 Angular1.5 以上版本在未来升级你的应用到 Angular2。”

13. CSS Purge

这个网站可以给你一些流行网站和框架排名的有效统计数据，可维持的 CSS. 它可以展现 CSS 文件大小的数据，具体的排名和使用的 CSS 属性。

14. Google Chrome’s CSS File

(需自备墙梯才能打开链接)

归功于 Umar Hansa 在推特上写的博客文章。这是 Chrome 浏览器使用的核心 CSS 文件，该核心 CSS 文件用来为 HTML 元素提供以西基本默认的样式。有兴趣可以快速浏览，因为它确实有一些奇怪。

15. MaintainableCSS

“编写 CSS 不用再担心之前存在的样式会带来问题。MaintainableCSS 是编写模块化的，可扩展的和可扩展性的 CSS 样式的一种方式。”这是由 Adam Silver 编写的有十二个部分的指南。