前端资源 - 收集

1.应用场景

为高效快速学习与开发前端项目.

2.学习/操作

关于前端学习的建议: // https://www.bilibili.com/read/cv8849777     https://www.bootcss.com/  // 收集有很多优质前端资源, 如, 他们的中文站点 https://docschina.org/ // 印记中文, 里面有很多优质的中文文档  -- 20210108   1. HTML[CSS/JS] https://developer.mozilla.org/zh-CN/   // MDN 重要参考手册 https://github.com/diegocard/awesome-html5  //GitHub 上的 Awesome HTML5，其中有大量的资源和技术文章。   2. CSS https://developer.mozilla.org/zh-CN/docs/Web/CSS   -- CSS规范 https://github.com/necolas/idiomatic-css https://github.com/grvcoelho/css-styleguide https://google.github.io/styleguide/htmlcssguide.html 我个人觉得只要你仔细读一下文档，CSS 并不难学。绝大多数觉得难的，一方面是文档没读透，另一方面是浏览器支持的标准不一致。所以，学好 CSS 最关键的还是要仔细地读文档。 之后，在写 CSS 的时候，你会发现，你的 CSS 中有很多看起来相似的东西。你的 DRY - Don’t Repeat Yourself 洁癖告诉你，这是不对的。所以，你需要学会使用 LESS 和 SaSS 这两个 CSS 预处理工具，其可以帮你提高很多效率。   补充:  https://sass-guidelin.es/#the-7-1-pattern  //遵循 7-1 模式来组织 SASS：Sass 指南 -- CSS Framework https://getbootstrap.com/ http://foundation.zurb.com/ https://semantic-ui.com/ https://bulma.io/ 其中最著名的就是 Twitter 公司的 Bootstrap，其有很多不错的 UI 组件，页面布局方案，可以让你非常方便也非常快速地开发页面。除此之外，还有，主打清新 UI 的 Semantic UI 、主打响应式界面的 Foundation 和基于 Flexbox 的 Bulma。 关于更多的 CSS 框架，你可以参看Awesome CSS Frameworks 上的列表。https://github.com/troxler/awesome-css-frameworks 还有ant design  (Pro)  TBD  20200109     -- Reset 或标准化的 CSS 库 https://github.com/necolas/normalize.css https://github.com/jgthms/minireset.css https://github.com/csstools/sanitize.css https://github.com/Martin-Pitt/css-unstyle 当然，在使用 CSS 之前，你需要把你浏览器中的一些 HTML 标签给标准化掉。所以，推荐几个 Reset 或标准化的 CSS 库：Normalize、MiniRest.css、sanitize.css 和 unstyle.css。   -- CSS 相关实践[某些公司] https://codepen.io/chriscoyier/post/codepens-css http://markdotto.com/2014/07/23/githubs-css/ https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 https://medium.com/bbc-design-engineering/css-at-bbc-sport-part-1-bab546184e66 https://blog.trello.com/refining-the-way-we-structure-our-css-at-trello  //这个听着很熟悉, 果然就是以前公司用过的scrum管理软件trello   -- 可以写出可扩展的 CSS 的阅读列表 https://github.com/davidtheclark/scalable-css-reading-list     3. JS  详细参见: https://time.geekbang.org/column/article/12271   //里面都很多推荐 https://book.douban.com/subject/11874748/   JavaScript: The Good Parts ，中文翻译版为《JavaScript 语言精粹》。这是一本介绍 JavaScript 语言本质的权威图书，值得任何正在或准备从事 JavaScript 开发的人阅读，并且需要反复阅读。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越大师，这本书就是开始。 Secrets of the JavaScript Ninja https://book.douban.com/subject/26638316/ ，中文翻译版为《JavaScript 忍者秘籍》，本书是 jQuery 库创始人编写的一本深入剖析 JavaScript 语言的书。适合具备一定 JavaScript 基础知识的读者阅读，也适合从事程序设计工作并想要深入探索 JavaScript 语言的读者阅读。这本书有很多晦涩难懂的地方，需要仔细阅读，反复琢磨。   Effective JavaScript https://book.douban.com/subject/25786138/，Ecma 的 JavaScript 标准化委员会著名专家撰写，作者凭借多年标准化委员会工作和实践经验，深刻辨析 JavaScript 的内部运作机制、特性、陷阱和编程最佳实践，将它们高度浓缩为极具实践指导意义的 68 条精华建议。   https://github.com/Chalarangelo/30-seconds-of-code  //一堆你可以在 30 秒内看懂各种有用的 JavaScript 的代码，在 GitHub 上有 2 万颗星了。 https://github.com/denysdovhan/wtfjs  //一堆 JavaScript 搞笑和比较 tricky 的样例。   接下来是 ES6 的学习，这里给三个学习手册源。 ES6 in Depth https://hacks.mozilla.org/category/es6-in-depth/，InfoQ 上有相关的中文版 - ES6 深入浅出。还可以看看 A simple interactive ES6 Feature list https://codetower.github.io/es6-features?utm_source=mybridge&utm_medium=email&utm_campaign=read_more ，或是看一下 阮一峰翻译的 ES6 的教程http://es6.ruanyifeng.com/ 。 ECMAScript 6 Tools https://github.com/addyosmani/es6-tools ，这是一堆 ES6 工具的列表，可以帮助你提高开发效率。 Modern JS Cheatsheethttps://mbeaudru.github.io/modern-js-cheatsheet/ ，这个 Cheatsheet 在 GitHub 上有 1 万 6 千颗星，你就可见其影响力了。   然后，还有一组很不错的《You Don’t Know JS 系列》https://github.com/getify/You-Dont-Know-JS 的书。 You Don’t Know JS: “Up & Going” You Don’t Know JS: “Scope & Closures” You Don’t Know JS: “this & Object Prototypes” You Don’t Know JS: “Types & Grammar” You Don’t Know JS: “Async & Performance” You Don’t Know JS: “ES6 & Beyond”   4. 视频资源 -- bilibi  推荐 教程and资料→ 尚硅谷_Java零基础教程-java入门必备-适合初学者的全套完整版教程(宋红康主讲)（看完就懂） 一键三连+关注，尚硅谷带你上高速！ <<自学神器_HTML5前端学习路线>> 2020最新路线:2020最新版前端学习路线图 [前端核心] HTML&CSS:尚硅谷Web前端初学者零基础入门HTML+CSS基础教程全套完整版(新版已上传，推荐观看) HTML5+CSS3(超哥新版):尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) JS核心:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JS高级:尚硅谷JavaScript高级教程(javascript实战进阶) jQuery:尚硅谷jQuery教程(jquery从入门到精通) Bootstrap:尚硅谷Bootstrap教程(bootstrap框架讲解) AJAX:尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） [必备技术] ES6-ES11:尚硅谷Web前端ES6教程，涵盖ES6-ES11 AngularJS:尚硅谷AngularJS实战教程(angular.js框架精讲) Node.js:尚硅谷超经典NodeJS-node.js实战教程全套完整版(初学者零基础入门) Zepto.js:尚硅谷Zepto教程(zepto.js框架精讲) MongoDB:尚硅谷MongoDB基础教程(数据库精讲) webpack:尚硅谷2020最新版Webpack5实战教程(从入门到精通) Git:尚硅谷Git教程全套完整版（12h深入掌握git） [前沿框架] React:尚硅谷React实战教程全套完整版(轻松入门到精通) Vue:尚硅谷超经典VUE实战教程全套完整版(vue.js从入门到精通) Promise:尚硅谷Web前端Promise教程从入门到精通（2021抢先版） axios:尚硅谷_axios核心技术 [项目实战] Vue硅谷外卖:尚硅谷Vue实战教程(企业级vue项目，Vue项目硅谷外卖) React谷粒后台:尚硅谷React项目教程(react实战全栈谷粒后台) 硅谷直聘:尚硅谷React项目实战，全栈开发Web前端项目《硅谷直聘》 谷粒音乐:尚硅谷前端项目教程_HTML5项目实战《谷粒音乐》 微信小程序:尚硅谷小程序开发，微信小程序开发 公众号开发:尚硅谷2021版微信小程序开发（零基础小程序开发入门到精通） 前端面试题:尚硅谷经典前端面试题精讲第一季(web前端大咖总结) 尚硅谷教程and资料（全部免费，无需转发集赞）:尚硅谷教程如何下载（以下载java基础为例） 教程学习中可能遇到的非技术问题（只有声音、pdf无法复制、提取码等错误）:学习尚硅谷教程遇到的各种常识性问题   5.其他 http://www.axios-js.com/   //axios http 请求组件     后续补充 ...

3.问题/补充

1.相关文档 https://html.spec.whatwg.org/  //  WhatWG 规范文档  -- 20210305

4.参考

https://time.geekbang.org/column/article/12271 //87 | 程序员练级攻略：前端基础和底层原理 https://www.bilibili.com/video/BV1e7411j7T5?p=4  // 尚硅谷2020最新版Webpack5实战教程(从入门到精通)

后续补充

...