推荐20个很有帮助的web前端开发教程

太过爱你忘了你带给我的痛 2022-08-13 13:00 195阅读 0赞

[![e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg][]][e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg 1]

## [1. CSS Vocabulary][1._CSS_Vocabulary] ##

一个伟大的指向和点击的小应用程序，让你加快速度掌握 CSS 语法的各个不同部分，学习各个属性的正确的名称。

[![04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg][]][04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg 1]

## [2. Liquidapsive][2._Liquidapsive] ##

一个简单的信息化布局，通过选择框的方式，可以让你在响应式，自适应，流动和静态布局中选择，所以你可以看到四大布局类型之间的区别。

[![ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg][]][ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg 1]

## [3. Superhero.js][3._Superhero.js] ##

最好的文章，视频和演示文稿，以帮助前端开发人员保持较大的 JavaScript 代码库的集合。包括有一些普遍原则型的东西，对测试工具，性能，安全性和更多的资源。

[![7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg][]][7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg 1]

## [4. HowToCoffeeScript.com][4._HowToCoffeeScript.com] ##

学习和记忆 CoffeScript 语法的速查手册。

[![421245b7-82a7-49c8-9c97-f327542001bb.jpg][]][421245b7-82a7-49c8-9c97-f327542001bb.jpg 1]

## [5. The HTML Landscape][5._The_HTML_Landscape] ##

这是非常有趣的。这是 W3C 文档，它描述了3个 HTML 规范之间的“可感知的差异”： WHATWG、W3C的 HTML5.0 和W3C的 HTML5.1 。可能是有点过于技术性，但你也许可以在这里找到一些有趣的新东西。

[![3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg][]][3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg 1]

## [6. The Elements of HTML][6._The_Elements_of_HTML] ##

一个很好的全面的 HTML 和 XHTML 元素的单页图表，用来说明各个元素属于哪个规范。这看起来对做研究真是好，如果元素已过时或在 HTML5 中已过时。

[![902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg][]][902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg 1]

## [7. JavaScript Equality Table][7._JavaScript_Equality_Table] ##

一个很不错的3层的图表，帮助您了解 [**JavaScript**][JavaScript] 的 == 和===操作符。结论是应该使用===操作符，除非你完全明白==发生了转换。

[![fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg][]][fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg 1]

## [8. Web Accessibility Checklist][8._Web_Accessibility_Checklist] ##

一个有用的，但不是压倒性的参考，以帮助您检查过各种元素在你的项目中的可访问性。很多，这是非常简单的，除了做辅助验证已。

[![d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg][]][d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg 1]

## [9. Static Web Apps — A Field Guide][9._Static_Web_Apps_A_Field_Guide] ##

根据介绍：“本指南将为您介绍的静态 [**Web**][JavaScript] 应用程序世界，并提供解决方案，同时建立他们遇到的共同挑战。

[![a77f622e-0c7d-447a-abab-e50d35d88107.jpg][]][a77f622e-0c7d-447a-abab-e50d35d88107.jpg 1]

## [10. Learn regular expressions in about 55 minutes][10._Learn_regular_expressions_in_about_55_minutes] ##

丰富的文档和教程，介绍正则表达式。它所宣称的55分钟或者更长的时间才能真正得到的东西，但绝对值得一试。

[![55d465b1-68bf-483b-9c35-1a825330f367.jpg][]][55d465b1-68bf-483b-9c35-1a825330f367.jpg 1]

## [11. Open Web CSS Reference][11._Open_Web_CSS_Reference] ##

这是一个非常全面的，鲜为人知的 [**CSS**][JavaScript] 属性和功能的参考。按字母顺序排列，包括链接到规范页面。

[![e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg][]][e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg 1]

## [12. CSS Values][12._CSS_Values] ##

这是一个简单的方法来查找一个 CSS 属性并快速查看可能的值。例如，如果你忘了什么样的价值观是可以接受的，如字体变形。除了值，最新的更新包括浏览器支持的每个属性的图表。

[![d3621537-4889-4cd5-9d77-4898aee67557.jpg][]][d3621537-4889-4cd5-9d77-4898aee67557.jpg 1]

## [13. ES6features][13._ES6features] ##

由微软的开发者卢克霍本整理的东西，ECMAScript6 规范的概述。对于前端开发人员，这将是有益的，开始逐渐熟悉这个东西。

[![0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg][]][0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg 1]

## [14. Relevant Spec Links][14._Relevant_Spec_Links] ##

我经常很难找到在规范的引用的一些正确的地方。这是一个很好的简要，总结从 Mozilla 获取的你需要知道的有关规范的链接。

[![c44f23e8-0583-4cd0-b0db-422077f6d375.jpg][]][c44f23e8-0583-4cd0-b0db-422077f6d375.jpg 1]

## [15. OverAPI.com][15._OverAPI.com] ##

史上最全的开发人员在线速查手册！这个网站收集了众多对开发人员非常有用的手册，记得分享和推荐一下哦。

[![516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg][]][516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg 1]

## [16. JavaScript: The Right Way][16._JavaScript_The_Right_Way] ##

一个 JavaScript 指南，旨在引领入门人员，并帮助有经验的人到 [**JavaScript**][JavaScript] 的最佳实践。

[![2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg][]][2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg 1]

## [17. The HTML5 JavaScript API Index][17._The_HTML5_JavaScript_API_Index] ##

一个真正全方位一站式的地方寻找 HTML5 API 的信息。很容易使用3窗格视图导航“自动从 [**HTML5**][JavaScript] 规范文件生成” 。

[![6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg][]][6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg 1]

## [18. Zeal][18._Zeal] ##

这看起来相当整洁。这是一个原生的应用程序，可以让你离线搜索130多个API文档。简单的键盘快捷键，你可以从你的工作区的任何位置显示API的浏览器。

[![2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg][]][2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg 1]

## [19. The Ultimate Flexbox Cheat Sheet][19._The_Ultimate_Flexbox_Cheat_Sheet] ##

一个广泛引用，以帮助您找到flexbox语法和刷上不太熟悉的东西。

[![e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg][]][e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg 1]

## [20. jsCode][20._jsCode] ##

一个应用程序，以帮助您创建自己的自定义  [**JavaScript**][JavaScript] 编码准则。您也可以看看别人和你分享与你的团队或其他合作者创建的自定义指南。

[![a08370f1-309d-4c92-8763-6ec40163d83f.jpg][]][a08370f1-309d-4c92-8763-6ec40163d83f.jpg 1]

原文来自：[推荐20个很有帮助的 Web 前端开发教程][20_Web]

[e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg
[e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/e0d3e203-2fc8-4427-9543-c5f71f1a23ca.jpg
[1._CSS_Vocabulary]: http://pumpula.net/p/apps/css-vocabulary/
[04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg
[04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/04edbd55-526e-4093-83f5-d1e8bebf69ee.jpg
[2._Liquidapsive]: http://liquidapsive.com/
[ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg
[ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/ed3ea75a-39bb-466a-8fa1-417cd2e4ee05.jpg
[3._Superhero.js]: http://superherojs.com/
[7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg
[7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/7bfb5ef1-68a8-40d7-8181-3337dea9013e.jpg
[4._HowToCoffeeScript.com]: http://howtocoffeescript.com/
[421245b7-82a7-49c8-9c97-f327542001bb.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/421245b7-82a7-49c8-9c97-f327542001bb.jpg
[421245b7-82a7-49c8-9c97-f327542001bb.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/421245b7-82a7-49c8-9c97-f327542001bb.jpg
[5._The_HTML_Landscape]: http://www.w3.org/html/landscape/
[3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg
[3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/3b6e720d-ae85-429c-90cc-4a9dd543a769.jpg
[6._The_Elements_of_HTML]: http://rawgithub.com/w3c/elements-of-html/master/index.html
[902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg
[902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/902e94de-d96d-4996-a64d-6a3b8b0d0b5b.jpg
[7._JavaScript_Equality_Table]: http://dorey.github.io/JavaScript-Equality-Table/
[JavaScript]: http://www.cnblogs.com/lhb25/category/146074.html
[fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg
[fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/fda42984-5922-4bab-b2ed-cd69a0048b9c.jpg
[8._Web_Accessibility_Checklist]: http://a11yproject.com/checklist.html
[d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg
[d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/d6a6a107-8941-4c1d-8a89-71ac24ca7656.jpg
[9._Static_Web_Apps_A_Field_Guide]: http://www.staticapps.org/
[a77f622e-0c7d-447a-abab-e50d35d88107.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/a77f622e-0c7d-447a-abab-e50d35d88107.jpg
[a77f622e-0c7d-447a-abab-e50d35d88107.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/a77f622e-0c7d-447a-abab-e50d35d88107.jpg
[10._Learn_regular_expressions_in_about_55_minutes]: http://qntm.org/files/re/re.html
[55d465b1-68bf-483b-9c35-1a825330f367.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/55d465b1-68bf-483b-9c35-1a825330f367.jpg
[55d465b1-68bf-483b-9c35-1a825330f367.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/55d465b1-68bf-483b-9c35-1a825330f367.jpg
[11._Open_Web_CSS_Reference]: http://ref.openweb.io/CSS/
[e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg
[e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/e29a655e-6a7a-4969-a197-069b2b59b1c4.jpg
[12._CSS_Values]: http://cssvalues.com/
[d3621537-4889-4cd5-9d77-4898aee67557.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/d3621537-4889-4cd5-9d77-4898aee67557.jpg
[d3621537-4889-4cd5-9d77-4898aee67557.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/d3621537-4889-4cd5-9d77-4898aee67557.jpg
[13._ES6features]: https://github.com/lukehoban/es6features
[0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg
[0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0843a7d3-01fa-4bb7-94d6-5eb87a4e2c50.jpg
[14._Relevant_Spec_Links]: https://github.com/mozilla/servo/wiki/Relevant-spec-links
[c44f23e8-0583-4cd0-b0db-422077f6d375.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/c44f23e8-0583-4cd0-b0db-422077f6d375.jpg
[c44f23e8-0583-4cd0-b0db-422077f6d375.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/c44f23e8-0583-4cd0-b0db-422077f6d375.jpg
[15._OverAPI.com]: http://overapi.com/
[516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg
[516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/516f803e-bdf4-42c6-b775-8513bb5bb14a.jpg
[16._JavaScript_The_Right_Way]: http://jstherightway.org/
[2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg
[2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/2d053690-0854-4c83-9a6a-9cf54f6c2976.jpg
[17._The_HTML5_JavaScript_API_Index]: http://html5index.org/
[6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg
[6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/6b941ee8-3c4e-49ef-bd4e-901951b57eb1.jpg
[18._Zeal]: http://zealdocs.org/
[2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg
[2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/2014a8e8-0d7f-458a-b8c8-d9df3f8eb316.jpg
[19._The_Ultimate_Flexbox_Cheat_Sheet]: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
[e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg
[e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/e2b44ade-dee9-4908-b6c9-a84970b32bb6.jpg
[20._jsCode]: http://jscode.org/
[a08370f1-309d-4c92-8763-6ec40163d83f.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/a08370f1-309d-4c92-8763-6ec40163d83f.jpg
[a08370f1-309d-4c92-8763-6ec40163d83f.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/a08370f1-309d-4c92-8763-6ec40163d83f.jpg
[20_Web]: http://www.gbtags.com/gb/share/4065.htm