Web前端开发工程师常用技术网站整理

1、常用工具相关

有道云笔记http://note.youdao.com/signIn/index.html

36镇-最好用的共享收藏夹http://www.36zhen.com/

浏览器同步测试工具http://www.browsersync.cn/https://www.browsersync.io/

草料二维码生成器http://cli.im/

GitHubhttps://github.com/

StackOverFlowhttp://stackoverflow.com/

图片压缩https://tinypng.com/

代码对比/归并http://tool.oschina.net/diff

json在线编辑器http://www.qqe2.com/

px转rem工具http://520ued.com/tools/rem

在线代码格式化http://tool.oschina.net/codeformat/html

Animate.css动画演示http://www.dowebok.com/demo/2014/98/

CSS 3.0 Animationhttp://www.css3maker.com/index.html

在线二维码解码器http://jiema.wwei.cn/

PDF转换器http://www.pdfdo.com/pdf-to-image.aspx

有道网页翻译http://fanyi.youdao.com/

前端开发仓库http://code.ciaoca.com/

百度静态资源公共库http://cdn.code.baidu.com/?qq-pf-to=pcqq.c2c

在线工具http://tool.oschina.net/

淘宝NPM镜像https://npm.taobao.org/

Animate.css 一款强大的预设css3动画库http://www.jq22.com/jquery-info819

在线制作logohttp://www.logomaker.com.cn/logo-maker.jsp

Cheat Sheethttp://docs.emmet.io/cheat-sheet/

码云 - 开源中国代码托管平台http://git.oschina.net/

浏览器HACKShttp://www.css88.com/tool/hack/

Support tables for HTML5, CSS3, etchttp://caniuse.com/

The best FOSS CDN for webhttps://cdnjs.com/

下载YouTube视频http://en.savefrom.net/

下载YouTube字幕http://keepvid.com/

Coding,git,代码托管https://coding.net/

Git常用命令速查表https://dn-coding-net-production-pp.qbox.me/e8dd7837-b39d-413e-9beb-ed51984719e0.png

CSS 选择器演示http://www.haorooms.com/tools/css_selecter/

Markdown 在线编辑器http://c.runoob.com/front-end/712

Mozilla 开发者网络https://developer.mozilla.org/zh-CN/#

兼容性检测http://caniuse.com/

SOJSON.comhttp://www.sojson.com/

FQ软件http://b.ishadow.host/

活跃在Github上的技术大牛排名http://githubrank.com/

20位活跃在Github上的国内技术大牛http://blog.csdn.net/yaoxtao/article/details/38518933

在线代码着色http://tool.oschina.net/highlight

在线电子书https://www.gitbook.com/

谷歌在线文档https://docs.google.com/document/u/0/

有道网页翻译http://fanyi.youdao.com/WebpageTranslate

手册网http://www.shouce.ren/

docutehttps://docute.js.org/#/zh-Hans/

在线Word转HTMLhttp://www.docpe.com/word/word-to-html.aspx

代码规范https://standardjs.com/rules-zhcn.html


2、知识储备相关
前端开发相关的优秀网站、博客、以及活跃开发者https://github.com/jikeytang/front-end-collect

前端网址导航http://www.whycss.com/

各类移动端页面参考http://k.swao.cn/js/web/mobileRefer.html

JS前端开发http://www.kancloud.cn/jikeytang/qq/87646

大前端http://www.daqianduan.com/

dowebokhttp://www.dowebok.com/

科蚁网http://www.ke01.com/

jQuery之家http://www.htmleaf.com/

Hellowebahttp://www.helloweba.com/

H5EDUhttp://h5edu.cn/index.php

TGideas-腾讯游戏官方设计团队http://tgideas.qq.com/

StuQhttp://www.stuq.org/

H5junhttp://matrix.h5jun.com/

SegmentFaulthttps://segmentfault.com/

醉牛前端http://f2er.club/

如何跟上前端开发的最新前沿https://uptodate.frontendrescue.org/zh/

前端网(W3Cfuns)http://www.w3cfuns.com/

前端工程师手册https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/index.html

前端 TOP100https://www.awesomes.cn/rank

中国领先的开发者服务平台https://www.sdk.cn/companies

TodoMVChttp://todomvc.com/

MUI - DCloudhttp://www.dcloud.io/mui.html

开源中国http://www.oschina.net/

InfoQ - 促进软件开发领域知识与创新的传播http://www.infoq.com/cn/

CSDN.NET - 全球最大中文IT社区http://www.csdn.net/

腾讯ISUXhttps://isux.tencent.com/

WEB前端开发http://www.css88.com/

稀土掘金http://gold.xitu.io/welcome

百度FEXhttp://fex.baidu.com/

Taobao FED | 淘宝前端团队http://taobaofed.org/

SDC设计师网址导航http://hao.uisdc.com/

前端收录http://www.helloweba.com/nav.html

JavaScript 资源大全中文版https://github.com/jobbole/awesome-javascript-cn

WEB前端开发http://www.css88.com/

WeUI 微信移动 Web 应用设计的 UI 库http://demo.weui.org.cn/example/

FrozenUI - 专注于移动web的UI框架http://frozenui.github.io/


3、移动Web相关
iphone分辨率终极指南http://images.shejidaren.com/wp-content/uploads/2014/09/iphone-Resolutions-guide.png

使用Flexible实现手淘H5页面的终端适配https://github.com/amfe/article/issues/17

H5播放器功能演示http://m.v.qq.com/tvp/

微信页面内嵌视频的一些心得http://blog.toxicjohann.com/2016/01/09/sth-about-video/



4、切页面相关
sass入门-sass教程http://www.w3cplus.com/sassguide/

CanvasRenderingContext2Dhttps://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

Photoshop CC 与前端那些事http://isux.tencent.com/ps-photoshop-cc-fd.html

Less 中文网http://lesscss.cn/

快速入门 | Less.js 中文文档http://less.bootcss.com/

LESS 一种动态样式语言http://www.bootcss.com/p/lesscss/

Less 学习手册http://www.1024i.com/demo/less/

z.less apihttp://www.aibusy.com/zless/


5、前端库/框架/插件相关
Swiper中文APihttp://www.swiper.com.cn/

fullPage.jshttp://www.jq22.com/jquery-info1124

多种动态效果的CSS3文字动画插件:textillate.jshttp://www.holdcode.com/web/details/97

TweenMax动画库http://greensock.com/timelinemax

翻书特效http://www.turnjs.com/

css33Dhttps://github.com/shrekshrek

可视化库http://c3js.org/

旋转PPThttps://github.com/impress/impress.js

网页版PPThttps://github.com/hakimel/reveal.js

桌面应用程序http://electron.atom.io/

图片裁剪Cropperhttps://www.awesomes.cn/repo/fengyuanchen/cropper



6、部署流程相关
Gulp官网http://gulpjs.com/

Gulp 中文网http://www.gulpjs.com.cn/

Yeomanhttp://yeoman.io/

browsersync官网https://browsersync.io/

Gulp和webpack的区别,是一种工具吗?http://blog.csdn.net/xllily_11/article/details/51782005


7、帖子相关
shakejs是一个摇一摇的工具https://segmentfault.com/a/1190000002607249

手机移动端WEB资源整合http://www.daqianduan.com/6281.html

H5拍照应用开发经历的那些坑儿http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201409/278736.shtml

移动HTML5前端性能优化指南http://www.uisdc.com/html5-front-end-optimization

amfe的文章https://github.com/amfe/article

重新介绍 JavaScript(JS 教程) https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript

多屏互动——H5中级进阶https://blog.maxleap.cn/archives/985

HTML5与移动端web学习笔记https://segmentfault.com/a/1190000002712653

github上值得关注的前端项目https://segmentfault.com/a/1190000002804472

详解js跨域问题https://segmentfault.com/a/1190000000718840

详解js闭包https://segmentfault.com/a/1190000000652891

浅析jQuery整体框架与实现(上)https://segmentfault.com/a/1190000000754325

JavaScript继承方式详解https://segmentfault.com/a/1190000002440502

关于原生js的一些研究https://segmentfault.com/a/1190000002911253

从输入 URL 到浏览器接收的过程中发生了什么事情?https://segmentfault.com/a/1190000000697254

详解JavaScript模块化开发https://segmentfault.com/a/1190000000733959

JavaScript 经典实例收集整理https://segmentfault.com/a/1190000002559158

Web安全知多少http://wetest.qq.com/lab/view/136.html

前端MVC变形记http://efe.baidu.com/blog/mvc-deformation/

猴子都能懂的GIT入门http://backlogtool.com/git-guide/cn/

前端学习路径https://zhuanlan.zhihu.com/p/21935921

深入了解viewport和pxhttp://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

手机移动端WEB资源整合http://www.daqianduan.com/6281.html

web前端开发-移动端页面开发资源总结http://www.html5dw.com/post?id=1491

H5项目常见问题及注意事项http://www.open-open.com/lib/view/open1449325854077.html


【Web前端开发工程师常用技术网站整理】 8、H5案例相关
全新BMW M2锋芒上市http://bmw2.thefront.com.cn/m2_2016/?from=iguoguo.net

万物皆有源 邀你共同见证http://whoiam.digi-campaign.com/index.html?from=iguoguo.net

H5说 http://www.h5shuo.com/pc

9、Node.js相关
移动前端资源整理http://ionichina.com/topic/570b1f4ecd63e4247a7cfcf3

Node.js API 中文版http://nodeapi.ucdok.com/#/api/

Node.js 中文网http://nodejs.cn/

Node.js 英文网https://nodejs.org/en/

NPMhttps://www.npmjs.com/

Express中文网http://www.expressjs.com.cn/

Express英文网http://expressjs.com/

ejs模板引擎https://www.npmjs.com/package/ejs

jade模板引擎https://www.npmjs.com/package/jade

Jade - Template Enginehttp://jade-lang.com/

CNode:Node.js专业中文社区https://cnodejs.org/

Bowerhttps://bower.io/

bower是什么http://dagaiwan.com/207.html


10、AngularJS相关
AngularJShttps://angularjs.org/

AngularJS中文社区http://www.angularjs.cn/

AngularJS中文网http://www.apjs.net/

AngularJS 菜鸟教程http://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 参考手册http://www.runoob.com/angularjs/angularjs-reference.html

AngularJs篇:30分钟快速掌握AngularJshttp://www.cnblogs.com/zhili/p/AngularJSQuickStart.html

AngularJs学习笔记--directivehttp://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html

Angular范例程序http://showcase.ngnice.com/#/home/home


11、Angular2相关
One framework. - Angular 2https://angular.io/


12、Ionic相关
Ionic官网http://ionicframework.com/

Ionic中文网http://www.ionic.wang/

Cordova官网http://cordova.apache.org/

Ionichina:全球最大的 Ionic Framework 中文社区http://ionichina.com/

Ionic中文站http://cnionic.com/web/

Ionic仿照微信项目源码-边开发边学http://www.phonegap100.com/themesinfo_47.html

Ionic Labhttp://lab.ionic.io/

AndroidDevTools Android SDK下载http://www.androiddevtools.cn/

腾讯大师兄 - 移动开发者工具镜像站点https://dsx.bugly.qq.com/

ionic 教程http://www.runoob.com/ionic/ionic-tutorial.html


13、Ionic 2相关
Ionic 2http://ionic.io/


14、React Native相关
React Native 官网http://facebook.github.io/react-native/

React Native 中文网http://reactnative.cn/

手把手教React Native实战开发视频教程1-50集 https://yunpan.cn/cBiQAJQIkf67P 访问密码 a16f

React-Native学习指南https://github.com/reactnativecn/react-native-guide


15、TypeScript相关
TypeScript官网https://www.typescriptlang.org/

TypeScript中文网http://tslang.cn/index.html

16、GitHub相关
GitHubhttps://github.com/

GitHubPageshttps://pages.github.com/

Hexohttps://hexo.io/

Gisthttps://gist.github.com/

搭建Hexohttp://www.zipperary.com/categories/hexo/

17、React.js相关
React 技术栈系列教程 - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

React.js官网https://facebook.github.io/react/index.html

React.js中文网http://reactjs.cn/react/index.html

Why React? | Reacthttps://facebook.github.io/react/docs/why-react.html

React中文网http://react-china.org/

React入门视频教程 - Page 1 - 霹雳渔http://piliyu.com/tag/react-getting-started-video-tutorial/

React 入门实例教程 - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2015/03/react.html

来自中国电信云计算的React入门视频http://leanote.com/blog/post/57858d9cab644133ed009dfb

React JSFiddlehttps://jsfiddle.net/reactjs/69z2wepo/

React JSFiddle without JSXhttps://jsfiddle.net/reactjs/5vjqabv3/

交互有趣的前端开发课程 - zexeo则修http://zexeo.com/course

Ant Design - 一个 UI 设计语言http://ant.design/

React 中文导航http://nav.react-china.org/

React-uihttps://www.awesomes.cn/repo/Lobos/react-ui

Babel 官网https://babeljs.io/

Babel 中文网http://babeljs.cn/

Wos 课后班http://dagaiwan.com/

Amaze UIhttp://amazeui.org/

react-tools如何使用http://dagaiwan.com/230.html

React学习资源汇总https://github.com/tsrot/study-notes/blob/master/React%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%B1%87%E6%80%BB.md

React 组件之间如何交流http://www.tuicool.com/articles/AzQzEbq

极客学院-React中文文档http://wiki.jikexueyuan.com/list/react/

仿React中文网http://www.css88.com/react/index.html

webpack2中文文档http://www.css88.com/doc/webpack2/

Webpack 中文指南http://webpackdoc.com/index.html

React 应用的性能优化之路https://github.com/xitu/gold-miner/blob/master/TODO/performance-optimisations-for-react-applications.md

惊鸿三世的博客-Reacthttp://blog.codingplayboy.com/tag/react/

Vue 和 React 的使用场景和深度有何不同?https://www.zhihu.com/question/31585377

AngularJs与ReactJS优缺点&适用场景http://blog.csdn.net/u012125579/article/details/52744093

AngularJS 对比 Reacthttp://www.oschina.net/translate/angularjs-vs-react

请问 React 和 Angular 各有什么优缺点,各自又适合什么开发场景?https://www.zhihu.com/question/23444167



18、Vue.js相关
Vue.js中文文档https://vuefe.cn/v2/guide/

Vue.js官网http://cn.vuejs.org/

Vuejs 1.0 系列教程https://laravist.com/series/vue-js-1-0-in-action-series

vuejs入门基础http://www.imooc.com/learn/694

Vue 开源项目库汇总https://github.com/opendigg/awesome-github-vue

使用Vue.js和Vuex实现购物车场景https://segmentfault.com/a/1190000005780326

用VUE.JS学习EShttps://ke.qq.com/course/173710

vue项目实践(vuex + vue-router + vue-resource)https://segmentfault.com/a/1190000006747096

vonic (一个基于 vue.js 和 ionic 样式的 UI 框架)https://wangdahoo.github.io/vonic-documents/#/

Vue.js开发http://www.cnblogs.com/keepfool/category/845804.html

Vue.js资源汇总https://github.com/vuejs/awesome-vue

老马最新力作:最经典的Vue入门系列http://aicoder.com/vue/preview/all.html

Vue1.0常用语法https://yq.aliyun.com/articles/64237

Vue.js专业中文社区https://www.vue-js.com/

Vue.js 源码学习笔记http://jiongks.name/blog/vue-code-review/

Vue.js高仿饿了么外卖Apphttps://github.com/ustbhuangyi/vue-sell/tree/1.0

Vue.js 通用应用框架https://zh.nuxtjs.org/

vue 常用ui组件http://blog.csdn.net/zgrkaka/article/details/53897202

VUE优秀UI组件库合集https://shimo.im/doc/LkpdnWxM1j40BDJj/


19、Weex相关
Weex官网http://alibaba.github.io/weex/

Weex 中文官网http://alibaba.github.io/weex/cn/

Weex中文社区http://www.weex.help/


20、代码组织相关
Sea.js官网http://seajs.org/docs/

sea.js官方文档https://github.com/seajs/seajs/issues/547

RequireJS官网http://requirejs.org/

RequireJS中文网http://www.requirejs.cn/

require.js的用法http://www.ruanyifeng.com/blog/2012/11/require_js.html

21、JavaScript相关
JavaScript菜鸟教程http://www.runoob.com/jsref/dom-obj-document.html

JavaScript书籍下载http://fe.linqing07.com/fontend/read.php?tid=63&fid=8&page=1

林卿的书架http://www.linqing07.com/book.html

廖雪峰JavaScript教程http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

Javascript中的apply与call详解http://www.cnblogs.com/huyong/p/4139875.html

ECMAScript 6入门http://es6.ruanyifeng.com/#README

JavaScript面向对象http://www.cnblogs.com/dolphinX/p/4385862.html

ECMAScript5 Object的新属性方法http://www.cnblogs.com/dolphinX/p/3348467.html

ES6新特性概览http://www.cnblogs.com/Wayou/p/es6_new_features.html

浅析JavaScript设计模式——发布-订阅/观察者模式http://blog.csdn.net/q1056843325/article/details/53353850

深入浅出ES6http://www.infoq.com/cn/es6-in-depth/

es6在线转es5https://babeljs.io/repl/


22、CSS相关
css的div垂直居中的方法,百分比div垂直居中http://www.haorooms.com/post/css_div_juzhong

css常用效果总结http://www.haorooms.com/post/css_common

CSS参考手册http://css.doyoe.com/

css伪类和伪元素http://tympanus.net/codrops/css_reference

css扫光效果总结http://www.haorooms.com/post/css_saoguang

CSS3 Flexbox 演示http://www.css88.com/demo/flexbox-playground/


23、HTML5相关
html5自带表单验证体验优化及提示气泡修改http://www.haorooms.com/post/html5_formvalid

24、工具相关
百度地图http://developer.baidu.com/map/jsdemo.htm#a1_2

25、组件开发相关
KISSY - A Powerful JavaScript Frameworkhttp://docs.kissyui.com/

26、在线学习相关
慕课网(IMOOC)http://www.imooc.com/

极客学院http://www.jikexueyuan.com/

腾讯课堂https://ke.qq.com/

淘宝教育https://xue.taobao.com/

百度传课http://www.chuanke.com/

网易云课堂http://study.163.com/

麦子学院http://www.maiziedu.com/

哔哩哔哩http://www.bilibili.com/index.html


27、知名博主相关
阮一峰的网络日志http://www.ruanyifeng.com/blog/

囧克斯(勾三股四阿里巴巴)http://jiongks.name/

CSS探索之旅(杜瑶去哪儿网)http://blog.doyoe.com/

JerryQu 的小站https://imququ.com/

小胡子哥http://www.barretlee.com/

林卿的个人简历网站http://www.linqing07.com/index.html

永不言败的博客http://blog.901web.com/

trigkit4https://segmentfault.com/u/trigkit4/articles?sort=vote

廖雪峰的官方网站http://www.liaoxuefeng.com/

惜缘Git服务http://git.xiyuan.name/

Haoroomshttp://www.haorooms.com/archives

极限前端 | ouvenzhang的博客http://jixianqianduan.com/

惊鸿三世的博客http://note.codingplayboy.com/categories/JavaScript/

大漠的博客https://www.w3cplus.com/

惜缘的网络笔记https://jiyi1990118.github.io/blog/

28、活动相关
SegmentFault 活动https://segmentfault.com/events

活动行http://www.huodongxing.com/

29、前端面试相关
前端零基础学习提纲http://www.cnblogs.com/dolphinX/p/5181660.html

30、PWA相关
基于 Vue 的 PWA 解决方案https://lavas.baidu.com/


31、招聘相关
看准网 http://www.kanzhun.com/






转载来自:http://www.cnblogs.com/chenyablog/p/5551143.html

    推荐阅读