Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/syhxczy/awesome

A curated list of awesome things related to front-end.
https://github.com/syhxczy/awesome

List: awesome

Last synced: about 1 month ago
JSON representation

A curated list of awesome things related to front-end.

Awesome Lists containing this project

README

        

# 记录一些有用的网站

## 前端

### WEB入门

* [Web基本概念介绍](http://www.zhihu.com/question/22689579)

* [如何理解 Web 语义化?](https://www.zhihu.com/question/20455165)

### HTML & CSS

* [HTML入门](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction)

* [菜鸟教程 - HTML](http://www.runoob.com/html/html-tutorial.html)

* [菜鸟教程 - CSS](http://www.runoob.com/css/css-tutorial.html)

* [MDN - CSS](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started)

* [深入了解CSS行高](http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html)

* [CSS - 没有布局](http://zh.learnlayout.com/no-layout.html)

* [HTML和CSS高级指南之二——定位详解](http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html)

* [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)

* [HOW TO CENTER IN CSS](http://howtocenterincss.com/)

* [关于Block Formatting Context--BFC和IE的hasLayout](http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html)

* [那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html)

* [双飞翼布局介绍-始于淘宝UED](http://www.imooc.com/wenda/detail/254035)

* [Bootstrap 网格系统](http://www.runoob.com/bootstrap/bootstrap-grid-system.html)

* [Creating Your Own CSS Grid System](http://j4n.co/blog/Creating-your-own-css-grid-system)

* [Flex 布局教程:语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

* [Flex 布局教程:实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

* [Flexbox playground](https://codepen.io/enxaneta/full/adLPwv)

* [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)

* [Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification](https://www.w3.org/TR/CSS2/)

* [Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 中文版](http://www.ayqy.net/doc/css2-1/cover.html)

* [w3cplus](http://www.w3cplus.com/)

### 移动web页面

* [手机网页开发](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Mobile)

* [在移动浏览器中使用viewport元标签控制布局](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag)

* [移动开发规范概述](http://alloyteam.github.io/Spirit/modules/Standard/)

* [浅谈移动Web开发](http://www.infoq.com/cn/articles/development-of-the-mobile-web-deep-concept)

* [移动WEB开发入门](http://junmer.github.io/mobile-dev-get-started/)

* [移动前端不得不了解的html5 head 头标签](http://www.css88.com/archives/5480)

* [MobileWeb 适配总结](https://www.w3ctech.com/topic/979)

* [移动开发资源集合](https://github.com/jtyjty99999/mobileTech)

* [手机端页面自适应解决方案—rem布局进阶版](http://www.jianshu.com/p/985d26b40199)

* [antd mobile 0.8 以上版本「高清」方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd mobile 0.8 以上版本「高清」方案设置)

### JavaScript
* [菜鸟教程 - JavaScript](http://www.runoob.com/js/js-tutorial.html)

* [JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)

* [ES5](https://www.w3.org/html/ig/zh/wiki/ES5)

* [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

* [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

* [js之事件冒泡和事件捕获详细介绍](http://www.jb51.net/article/42492.htm)

* [JavaScript事件代理](http://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html)

* [菜鸟教程 - Ajax](http://www.runoob.com/ajax/ajax-tutorial.html)

* [ajax && jsonp](http://www.jianshu.com/p/a2155ae38612)

* [Comet](http://www.ibm.com/developerworks/cn/web/wa-lo-comet/)

* [waterfall](http://dfcreative.github.io/projects/waterfall/)

* [深入理解JavaScript系列](http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html)

* [鸟哥:Javascript作用域原理](http://www.laruence.com/2009/05/28/863.html)

* [理解 JavaScript 作用域和作用域链](http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html)

* [强大的原型和原型链](http://www.nowamagic.net/librarys/veda/detail/1648)

* [js原型链原理看图说明](http://www.jb51.net/article/30750.htm)

* [理解JavaScript原型](http://blog.jobbole.com/9648/)

* [深入理解javascript原型和闭包](http://www.cnblogs.com/wangfupeng1988/p/3977987.html)

* [学习Javascript闭包](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)

* [javascript的闭包](http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html)

* [JavaScript 闭包深入理解](http://www.jb51.net/article/18303.htm)

* [理解 Javascript 的闭包](http://www.oschina.net/question/28_41112)

* [Javascript 面向对象编程](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html)

* [JavaScript继承详解](http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html)

* [JavaScript继承方式详解](http://segmentfault.com/a/1190000002440502)

* [JavaScript探秘:构造函数 Constructor](http://www.nowamagic.net/librarys/veda/detail/1642)

* [理解Javascript constructor实现原理](http://www.jb51.net/article/25027.htm)

* [Javascript中this关键字详解](http://www.cnblogs.com/justany/archive/2012/11/01/the_keyword_this_in_javascript.html)

* [Javascript的this用法](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)

* [深入浅出 JavaScript 中的 this](http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/index.html)

* [JavaScript设计模式深入分析](http://developer.51cto.com/art/201109/288650.htm)

* [常用的Javascript设计模式](http://blog.jobbole.com/29454/)

* [学用 JavaScript 设计模式](http://wiki.jikexueyuan.com/project/javascript-design-patterns/)

* [理解 javascript 观察者模式 (订阅者与发布者)](https://juejin.im/entry/580b5553570c350068e6c2d6)

* [You-Dont-Need-jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md)

* [You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN)

* [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)

* [Learn ES2015 · Babel](http://babeljs.io/learn-es2015/)

* [ECMAScript 6 入门](http://es6.ruanyifeng.com/)

* [谈谈使用 promise 时候的一些反模式](http://efe.baidu.com/blog/promises-anti-pattern/?utm_source=tuicool&utm_medium=referral)

* [总是一知半解的Event Loop](https://juejin.im/post/5927ca63a0bb9f0057d3608e)

### 正则表达式

* [JS正则表达式完整教程](https://juejin.im/post/5965943ff265da6c30653879)

* [最全正则表达式总结](http://www.lovebxm.com/2017/05/31/RegExp/)

### 前端基础

* [前端解决跨域问题的8种方案](http://www.cnblogs.com/JChen666/p/3399951.html)

* [浏览器 HTTP 协议缓存机制详解](https://my.oschina.net/leejun2005/blog/369148)

* [浏览器缓存机制详解](http://mangguo.org/browser-cache-mechanism-detailed/)

* [cookie入门](https://segmentfault.com/a/1190000007530869)

* [从输入 URL 到页面加载完成的过程中都发生了什么](https://segmentfault.com/a/1190000003925803?utm_source=tuicool&utm_medium=referral)

### HTML5 新API

* [MDN Window.localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)

* [MDN Window.sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage)

### 网站性能优化

* [JavaScript 的性能优化:加载和执行](http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html)

* [毫秒必争,前端网页性能最佳实践](www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html)

* [大型网站的灵魂——性能](http://www.cnblogs.com/leefreeman/p/3998757.html)

* [编写高效的 CSS 选择器](http://web.jobbole.com/35339/)

### 前端模块化

* [前端模块化(CommonJs,AMD和CMD)](http://www.jianshu.com/p/d67bc79976e6)

* [浅析JS中的模块规范(CommonJS,AMD,CMD)](http://www.2cto.com/kf/201411/348276.html)

* [前端模块化](http://suibobuzhuliu.github.io/2016/05/26/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/)

* [写了十年JS却不知道模块化为何物?](https://blog.wilddog.com/?p=587)

### 框架/库

* [jQuery API 中文文档](http://jquery.cuishifeng.cn/)

* [Zepto.js API](http://zeptojs.com/)

* [zepto.js 源码解析](http://www.runoob.com/w3cnote/zepto-js-source-analysis.html)

* [Zepto核心模块源码分析](https://github.com/oadaM92/zepto/blob/master/oadaM92/zepto/README.md)

* [一步一步DIY zepto库](http://blog.csdn.net/future_todo/article/details/53260773)

* [Backbone.js API](http://backbonejs.org/)

* [Backbone.js API 中文文档](http://www.css88.com/doc/backbone/)

### SVG

* [菜鸟教程 - SVG](http://www.runoob.com/svg/svg-tutorial.html)

* [SVG动画库 - vivus.js](http://maxwellito.github.io/vivus/)

* [帅气的SVG路径描边动画 (path animation) 实战应用](https://segmentfault.com/a/1190000007811310)

### Canvas

* [菜鸟教程 - Canvas](http://www.runoob.com/tags/ref-canvas.html)

### Babel

* [Babel](http://babeljs.io/)

### Webpack

* [webpack官方文档](https://webpack.js.org/)

### React

* [React 技术栈系列教程](http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html)

* [React官网](https://facebook.github.io/react/)

* [React-router 文档](https://github.com/ReactTraining/react-router/tree/master/docs/)

* [React-redux 文档](http://redux.js.org/)

* [從零開始學 ReactJS](https://github.com/carlleton/reactjs101)

### Vue

* [Vue官方文档](https://vuejs.org/v2/guide/)

* [vue-router官方文档](https://router.vuejs.org/en/)

* [vuex官方文档](https://vuex.vuejs.org/en/)

* [vue-loader官方文档](http://vue-loader.vuejs.org/en)

* [vue-ssr-doc](https://ssr.vuejs.org/en/)

* [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/)

* [vue早期源码学习系列](https://github.com/youngwind/blog/issues/84)

### Fetch

* [传统 Ajax 已死,Fetch 永生](https://segmentfault.com/a/1190000003810652);

* [这个API很“迷人”——(新的Fetch API)](https://www.w3ctech.com/topic/854)

* [axios](https://github.com/mzabriskie/axios)

### 代码规范

* [代码规范](https://github.com/ecomfe/spec)

### 在线工具

* [Can I use](http://caniuse.com/)

* [在线autoprefixer](http://autoprefixer.github.io/)

* [PLACEHOLD.IT 占位图](https://placehold.it/)

* [CSS clip-path maker](http://bennettfeely.com/clippy/)

### 书籍

* 《Head First HTML与CSS》
* 《精通CSS:高级Web标准解决方案》
* 《CSS权威指南》

* 《JavaScript DOM编程艺术》
* 《JavaScript 高级程序设计》
* 《高性能JavaScript》
* 《JavaScript 设计模式 - 张容铭》

* 《HTTP权威指南》

## 后端

### Node.js

* [七天学会NodeJS](http://nqdeng.github.io/7-days-nodejs/)

* [Node.js API](https://nodejs.org/en/docs/)

* [package.json文件](http://javascript.ruanyifeng.com/nodejs/packagejson.html)

* [Express](http://www.expressjs.com.cn/)

* [Koa](http://koajs.com/)

* [koa2进阶学习笔记](https://chenshenhai.github.io/koa2-note/)

* [使用 NGINX 进行微程序缓存的好处](http://blog.oneapm.com/apm-tech/702.html?utm_source=tuicool&utm_medium=referral)

## Git

* [Git教程 - 廖雪峰](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)

## Markdown

* [Markdown教程](http://www.appinn.com/markdown/)