1.前言

 

　　时间过得真快，转眼间现在是2017年最后一个星期，而今天也是圣诞节，过几天也是元旦了。每到年底，大家都习惯总结和分享，我也不例外。但是经历，我之前已经发过了，那么我今天就分享吧！把我接触的一些资源分享给大家，算是送给大家的双旦礼物吧！希望大家能够从中获取自己所需的资源。从我接触前端的开始，到发稿时间截止的这段时间我看过很多的博客，开源项目也了解过一些，质量有参差不齐（甚至还出现过广告文，鸡汤文），但下面的推荐的博客，文章，项目或者其它资源都是我接触过的。不敢说资源最好，最全，适合每一个人，但是内容质量上让我满意的。可能有些资源我未必看完，看懂，看细。但我觉得是可以帮到大家的，能让大家提升技术水平的。希望能给大家起到一个引导，指路或者解惑的作用。如果大家有什么好的资源，也欢迎分享！

 

　　有一些资源链接，在后面我会加上括号的注释！比如：“?html5推广（介绍html5开发的创意广告）?”，加上注释的原因可能有以下几点：?

 

　　1.资源很不错，干货比较多，提醒大家看！

 

　　2.资源是一个系列的其中一个资源。比如一个系列有20多篇文章，每一篇都有用，我不可能把20多篇链接都贴上，所以一般我贴这个系列的第一条，提醒大家不要忘记读完所在系列！

 

　　3.资源里面的部分内容我个人觉得很有用，有部分我觉得没什么用！提醒大家挑着看，按需求看！

 

　　4.资源的标题可能会有些小误导，或者资源的其它注意事项，我加以自己的解释和备注。

 

　　2.推荐文章（教程）

 

　　html(5)

 

　　后HTML5时代I

 

　　后HTML5时代II（简单粗暴的介绍html5的api，没什么废话）

 

　　html5推广（介绍html5开发的创意广告）

 

　　匠心打造canvas签名组件

 

　　HTML5/CSS3（汤姆大叔总结的html5和css3的新特性）

 

　　H5动画开发快车道

 

　　移动H5前端性能优化指南

 

　　玩转HTML5移动页面

 

　　HTML5 进阶系列：文件上传下载

 

　　HTML5 进阶系列：canvas 动态图表

 

　　HTML5 进阶系列：拖放 API 实现拖放排序（这个系列的文章都不错，值得大家一看）

 

　　H5动效的常见制作手法

 

　　超多经典 canvas实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

 

　　打造高大上的Canvas粒子动画

 

　　canvas入门实战--邀请卡生成与下载

 

　　css(3)

 

　　CSS3属性教程与案例分享（大漠的CSS3干货，进去里面可以逐个看，对css3的学习很有用）

 

　　CSS3实现11种经典的CSS技术（大漠的CSS3经典实例干货，对css3的学习很有用）

 

　　W3cplus demo（w3cplus的案例，非常值得一看）

 

　　强大的css3（概括性的说明css3的新特性的一篇文章）

 

　　css3经典教程系列（不要忘记看完这个系列，文章都不错）

 

　　个人总结（css3新特性）

 

　　CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

 

　　编写自己的代码库(css3常用动画的实现)

 

　　也许vue+css3做交互特效更简单

 

　　CSS 写作建议和性能优化小结

 

　　如何编写轻量级 CSS 框架

 

　　21条CSS高级技巧

 

　　原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

 

　　Flex 布局教程：语法篇

 

　　Flex 布局教程：实例篇

 

　　奇妙的 CSS shapes(CSS图形)

 

　　使用CSS3制作各种形状的图形（转自others）

 

　　有趣的CSS题目（1）： 左边竖条的实现方法（看了第一篇，可以往下面看，总会会帮助的，不过这个网站有时候加载不出图片，如果加载不出图片，放弃还是坚持，大家抓主意）

 

　　纯 CSS 实现波浪效果！

 

　　使用浏览器开发者工具检测CSS动画性能

 

　　搞定这些疑难杂症，向css3动画说yes

 

　　Effective前端1：能使用html/css解决的问题就不要使用JS

 

　　如何让你的动画更自然

 

　　css画图形

 

　　css各种鼠标效果

 

　　深入了解 CSS3 新特性（也是概括性的总结，这个系列值得推荐）

 

　　前端如何呼风唤雨

 

　　:after和:before炫酷用法总结

 

　　神奇的 conic-gradient 圆锥渐变

 

　　10 个优质的 CSS 与 JS LOGO 动画示例

 

　　被解放的GPU-提高CSS3性能

 

　　【项目总结】扯一扯电商网站前端css的整体架构设计（1）（看了第一篇，别忘了看下面的一个系列）

 

　　【整理】CSS布局方案

 

　　css：默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式

 

　　20个实用的CSS技巧代码

 

　　CSS性能分析，如何优化CSS提高性能

 

　　CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

 

　　渐进式动画解决方案

 

　　CSS新特性

 

　　CSS Animation性能优化

 

　　【转载】高性能的动画

 

　　奇妙的 CSS shapes(CSS图形)

 

　　sass

 

　　SASS用法指南

 

　　编写Sass的八个技巧

 

　　javascript

 

　　深入理解JavaScript系列（汤姆大叔写的JavaScript系列，涉及到各个知识点，对学习和深入js很有用）

 

　　JavaScript核心概念归纳整理（概括性的说明js的一些核心概念）

 

　　从达标到卓越 —— API 设计之道

 

　　我眼中的 JavaScript 函数式编程

 

　　javascript组件化

 

　　如何写出小而清晰的函数？（JS 版）

 

　　javascript对象详解：__proto__和prototype的区别和联系

 

　　理清javascript中的面向对象（一）——原型继承（这个专栏（实用至上）文章质量不错，值得留意）

 

　　微前端-Javascript常用的设计模式详解