web前端学习资源分享

 

个人分享--web前端学习资源分享【转】

来源网站：

掘金  https://juejin.im/

作者介绍：

守候i

web前端开发@ 广州找原料

一个web前端新手，正在web前端的路上打拼的小伙子。

原文网址： 

https://juejin.im/post/5a0c1956f265da430a501f51

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常用的设计模式详解

10 个你需要了解的最佳 javascript 开发实践

深入理解javascript原型和闭包系列

JavaScript学习总结（一）基础部分（这个系列的文章不错，不要忘记看完这个系列不过大家得在发文章的专栏找下这个系列的文章，因为作者在这个专栏发文不是连着发一个系列，中间也夹杂着其它文章，不过也很好找。在这专栏（trigkit4）里面，即使不是这个系列的文章，我看过其中几篇，感觉也很好，大家可以留意下）

JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript（这个系列的教程不错，《JavaScript设计模式与开发实践》的笔记，这本书我也看过，这本书不错，作者整理总结得也不错，大家看完，收获不少）

JavaScript 函数式编程存在性能问题么？

如何让 JS 写得更漂亮

JS的平凡之路--学习人气眼中的效果（上）

你还在用for循环大法麽？

前端模板的原理与实现

只有20行Javascript代码！手把手教你写一个页面模板引擎

【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇

【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇（可以关注这篇文章对应的专栏，写得不错，不知道作者还会不会写下一篇）

如何循序渐进、有效地学习JavaScript？

过目不忘JS正则表达式

JavaScript 进阶之深入理解数据双向绑定

利用 JavaScript 数据绑定实现一个简单的 MVVM 库（这篇文章除了自己简单造轮子，更重要的是用一个实例了解MVVM的原理）

正则表达式30分钟入门教程

如何监听页面 DOM 变动并高效响应

IntersectionObserver API 使用教程（利用这个API可以更简单的实现图片懒加载和其它事情，性能也更高）

（下面三个连接，是知乎上的几个话题，里面的回答质量参差不齐，大家可以挑些高质量的回答看，绝对有帮助）

作为一名前端开发人员，有哪些值得一读的js代码？

JavaScript 有什么奇技淫巧？

用 JavaScript 可以做哪些有趣的事情？

反击爬虫，前端工程师的脑洞可以有多大？（前端反爬虫的文章，只有想不到，没有做不到）

这些的JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已

如何写出好的 JavaScript —— 浅谈 API 设计

JavaScript 设计模式 ① 正确使用面向对象编程的姿势（看了第一篇，不要忘记下面的）

如何优雅的编写 JavaScript 代码

个人小结--javascript实用技巧和写法建议

用65行代码实现JavaScript动画序列播放

如何用原生 JS 实现手势解锁组件

Javascript思维导图

纯前端实现人脸识别-提取-合成

最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等

99%的人都理解错了HTTP中GET与POST的区别

JavaScript练习网站收集（收录一些js练习的网站，有空可以去练习一下）

重新介绍 JavaScript（JS 教程）

编写自己的代码库（javascript常用实例的实现与封装）

让我印象深刻的javascript面试题

JavaScript 打怪升级 —— 把业务逻辑当练习题做

javascript(es6，es7，es8)

阮一峰 es6（可以当作es6文档用的在线书籍）

ES6 你可能不知道的事 - 基础篇

ES6 你可能不知道的事 - 进阶篇

30分钟掌握ES6/ES2015核心内容（简单粗暴介绍es6核心）

八段代码彻底掌握 Promise

ECMAScript 6 新特性（总结性描写常用的es6新特性）

实例感受-es6的常用语法和优越性

10个最佳ES6特性

聊聊ES7与ES8特性Async/Await替代Promise的6个理由

10分钟学会ES7+ES8

import、require、export、module.exports 混合使用详解

typeScript

官网文档（ts的一个官方文档，写得较好）

jquery

jquery源码分析

jQuery中的100个技巧（译）（看了这篇文章，感觉自己学的是假jquery，不过很多技巧我没有亲身试过，保留意见）

这几条JQuery提升性能的规则你需要牢记

JQuery坑，说说哪些大家都踩过的坑（对于刚接触的新人而言，这篇文章还有帮助）

jQuery学习笔记（总结性说明jquery常用的api，也不错）

jQuery插件开发总结

jQuery === 面条式代码？

vue

vue官网

Vue2.x踩坑与总结

Vue 中你不知道但却很实用的黑科技

一个栗子实践vue2.0与1.0的区别

我从未见过如此简洁易懂的Vue教程

vue-API（2.3版本的API大全）

Vue.js 插件开发详解

vue插件编写与实战（从开发到发布的一个流程，实例简单易懂）

使用 Vue.js 创建的 Calendar

加薪DAY10」Vue开源项目库汇总（杂七杂八的库都有，质量当然也是有高有低，大家挑着看。）

Vue.js 的实用技巧（一）(看了第一篇，别忘记剩下的)

深入vue2.0底层思想--模板渲染 

Vue.js——vue-router 60分钟快速入门

Vue2.1.7源码学习

剖析Vue实现原理 - 如何实现双向绑定mvvm

Vue.js入门（一）--MVVM框架理解

Vue2 源码分析——逻辑梳理

手把手教你撸个vue2.0弹窗组件

深入浅出基于“依赖收集”的响应式原理

Vue全家桶实践项目总结

vuex入门实例(1/3)

原创《vue2.0进阶系列》教程目录大全

另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

vuejsexamples（vue的各种demo，可能会有需要的需求）

vue快速入门的三个小实例（我自己的文章，比较基础的用法，用三个小实例讲解vue的入门，）

用vue开发一个所谓的数独

webpack

（下面的文章，有些是webpack1.x和2.x的，考虑到现在已经更新到3.x了，大家看时候要注意区别）

webpack中文网

webpack官方文档

webpack使用优化（基本篇）

webpack常用功能介绍

webpack 3 零基础入门教程 #1 - 介绍（看了第一篇，不要忘记下面的，这个系列值得一看）

开发工具心得：如何 10 倍提高你的 Webpack 构建效率

Webpack 大法之 Code Splitting

webpack多页应用架构系列（一）：一步一步解决架构痛点（看了第一篇不要忘记剩下的，这个系列的文章不错）

parcel

宣布 Parcel：一个快速，零配置的 Web 应用打包工具

前端构建工具吐槽与parcel极简入门

折腾记：Hello Parcel

从 webpack 到全面拥抱 Parcel #1 探索 Parcel（这篇应该会用后续内容，大家可以跟着学）

gulp

gulp详细入门教程

前端构建工具gulp的使用介绍及技巧

gulp入门指南

react

（react我刚接触不久，暂时看过的网站就这两个）

React中国

React 技术栈系列教程

React组件规范在

在 2017 年学习 React + Redux 的一些建议（中篇）

在 2017 年学习 React + Redux 的一些建议（下篇）

学习 React.js 比你想象的要简单

git

猴子都能懂的GIT入门

Git教程 - 廖雪峰的官方网站

browsersync

(Browsersync中文网 - 省时的浏览器同步测试工具)

node.js

使用npm - NodeSource的绝对入门指南

Node.js和npm - NodeSource中的Package.json的基础知识

配置.npmrc以获取最佳Node.js环境

Markdown

认识与入门 Markdown

yoeman

教你从零开始搭建一款前端脚手架工具

lodash

这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。

4.17.4版本

Fiddler

官网

Fiddler教程

调试

web调试优化-chrome开发者工具不完全指南

分享几个日常调试方法让js调试更简单

用 Chrome 调试你的 JavaScript

JavaScript 中 console 的用法（看了这篇和上面一篇文章，你可能会感觉以前根本不会使用console）

Chrome开发者工具系列

Web 的现状：网页性能提升指南

移动 Web 开发问题和优化小结

前端优化不完全指南

细节，优化

浅谈移动前端的最佳实践

前端优化带来的思考，浅谈前端工程化

前端优化实践总结

减少前端代码耦合

判断单、多张图片加载完成

终端代码重复率检测

【组件化开发】前端进阶篇之如何编写可维护可升级的代码

作为一个web开发人员，哪些技术细节是在发布站点前你需要考虑到的

【单页应用】我们该如何处理框架弹出层层级关系？

剥离模板代码加速Web页面加载

移动前端系列——移动页面性能优化

[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

其它

socket.io 中文手册 socket.io 中文文档

WebSocket 与 Socket.IO

VR进化论|教你搭建通用的WebVR工程

RxJS 入门

deeplearn.js：浏览器端机器智能框架

分享和技能清单

鸡年大吉！继续前行的前端周刊（第十五期）（虽然差不多狗年了，但是里面的内容并没有过时）

前端收藏夹（和上面那篇一样，都是别人的总结的，干货不少，但是‘前端收藏夹’，可能是资源太多了，给我的感觉也有点一股脑放资源的感觉，只要是资源，都放进去，少部分资源质量有点低，建议大家带参考思想看）

移动web干货收藏夹

awesomes（前端一个巨大的资源库，里面的资源应有尽有）

知识库（拥有很多语言，框架，库的知识图谱，值得一看！能让你了解哪个语言，框架，库所包含的知识点，每一个知识点的详情讲解，也有栗子和文章，如：javascript知识图谱，html5知识图谱，react知识图谱）

前端资源分享

送给前端的你，推荐几篇前端汇总文章。 - 知乎专栏

前端面试问题合集（Front-end-Developer-Interview-Questions）

github上值得关注的前端项目（trigkit4大神审理的一份清单，里面推荐的项目很多，大家可以按需所需）

前端那点事儿（书列）

FPB 2.0：免费的计算机编程类中文书籍 2.0（迷渡大神分享的书籍，各类图书都有，也有前端的，大家可以挑着看）

腾讯 Web 工程师的前端书单

前端开发者手册

印记中文-手册（各种开发文档，webpack,vue,sass等）

（以下几个链接，不是文章，也不算问题吧，都是segmentfault官方举行的比赛，分享或者讨论的内容，在上面看大神的分享，代码，绝对有收获）

1024 HackGame 第四关面壁人这些题目是怎么想出来的？

把 SegmentFault 全部带回家 —— 码文章，送周边

官方送书活动第二弹 —— 增长姿势之SF喊你来谈开发

官方活动，深入浅出之SF喊你来谈开发！一起来分享一下你的开发知识？

官方30行js比赛：30行js你能做出什么？

【官方比赛】社区 1111 秀代码，让你来秀让你飞！

3.推荐博客

团队博客

淘宝前端团队fed

阿里巴巴

百度前端团队

360奇舞团

奇舞团视频教程

京东设计体验部-凹凸实验室

腾讯网前端研发中心

腾讯alloyteam

腾讯前端IMWEB团队

腾讯前端IMWEB团队-github

腾讯游戏

新浪UED

去哪儿网移动架构组

大前端（饿了么）

搜车大无线团队博客

（上面的团队博客，值得关注，博文内容质量很高，但是就是更新不频繁，下面的更新会比较多，质量也不错）

极乐科技

IMWeb前端社区

爱前端-知乎专栏

前端杂货铺

前端外刊评论

前端解忧杂货铺

DDFE 技术周刊

前端之巅

Fed汇总

大牛博客

十年踪迹

张鑫旭

阮一峰

叶小钗

司徒正美博客

汤姆大叔

廖雪峰

勾三股四

chokCoCo

chokCoCo-github

Cherry's Blog

雅X共赏的前端技术博客-前端路上

4.推荐书籍

我看过的书比较杂七杂八，与前端有关的，推荐的就是下面这些了！下面的书，我都看过，区别就在于有些我是整本都看完了(有些也来回看过几次)，有些粗略的看了其中一部分（有些就看了几页）！

关于看书的建议，下面的书，大家可以根据自己的需求兴趣去挑着看。一本书，不要看完就可以了，要弄懂书中的内容。有些书值得大家来回看几遍的！

关于书的资源，下面的推荐的书（我看的是电子书）我都是从网上下载的。为避免侵权，我在这里就不放资源的链接了！大家自行购买纸质书或者电子书，或者到网上找资源！

《JavaScript高级程序设计》：（红皮书或者红宝石书）可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看

《JavaScript权威指南》：（犀牛书）可以说是js最经典的一本书了，新手看着可能会有点吃力，但是对于学js的人来说，必备的，不理解的地方就去查阅一下，很有帮助。

《数据结构与算法JavaScript描述》（刺猬书）

《编写可维护的JavaScript》（乌龟书）

《JavaScriptDOM编程艺术 第2版》

《JavaScript语言精粹》（蝴蝶书）：经典的书，也是普及JavaScript的开发思维的一本书。

《javascript框架设计》（第二版）-司徒正美

《JavaScript设计模式》-张榕铭（百度员工写的一本书，案例生动易懂，涉及的设计模式比较全）

《JavaScript设计模式与开发实践》-曾琛（腾讯员工写的一本书，讲了js里面更加常用的14个设计模式）

《单页Web应用JavaScript从前端到后端》

《ECMAScript6 入门》可以作为es6新特性文档的一本书，而且这本书开源了（ECMAScript 6 入门），直接看就好！需要的也可以购买！

《HTML5移动Web开发实战》

《HTML5移动Web开发指南》

《HTML5Canvas核心技术》：对于感受canvas的魅力，使用，动画的实现，都非常有帮助。

《html5与css3权威指南第三版》-陆凌牛，这本书貌似有同名的，注意作者，另外该书分上册和下册的。我当时看的是第二版，现在已经出了第三版就推荐第三版了。

《锋利的jquery》：我学jquery就是看这本书，这本书给我身边的同行印象不是很好，但是我感觉不错，而且我学jquery就看了这一本书，就推荐这本了！

《了不起的Nodejs 将JavaScript进行到底》

《css揭秘》：看了这本书，我再也不敢说自己会css了！里面很多都是你想不到的！

5.推荐社区

我推荐社区虽然有这么多个，但是我注册账号并且活跃的只有两三个，其它的社区基本都是我在学习的时候偶然接触到的，并且觉得不错的，所以也推荐下。至于大家想活跃哪几个社区，就看大家的选择了。如果大家有什么好的社区资源，也不妨推荐下！

github：这个起初我经常在上面找资源。但是没注册账号，但是后来被老大催着注册，就去了。在里面可以阅读别人的代码，向大家学习！

稀土掘金：我现在活跃的一个社区，是写文章的一个很好的地方！

segmentfault：我现在活跃的一个社区，主打问答，也有文章和讲堂，质量也很不错！

知乎：虽然不是单纯的IT社区，但是里面有很多大牛和高质量的专栏！

stackoverflow：一个问答社区，基本上各种问题都能在上面获得解答

w3cplus：一个前端学习的网站，里面的文章质量都挺不错的，特别是关于CSS(3)的

前端网前端乱炖：一个前端文章分享的社区，有很多优秀文章

开发者头条

前端周刊

HTML5梦工场

毕业僧

慕课网（貌似现在很多视频收费了，以前我看的时候，基本都是免费的）

汇智网

6.公众号

前端大全

segmentfault

前端之巅

前端早读课

W3cplus

稀土圈

（以上图片来源网络）

7.推荐关注项目

github上的项目

vue

react（我只接触过几次react，使用起来还不错，现在也正在学习）

gulp

parcel

webpack

d3

chart（和d3一样，属于数据可视化方面，体验过。但是在项目上没用过，感觉功能强大，就推荐下）

element-ui（基于vue2.x开发的一个组件库，一般用于后台管理系统开发，现在我们公司开发的后台管理就是用这个）

muse-ui（同样是基于vue的组件库，ui非常的漂亮）

一起学 Node.js（这个其实应该是node.js教程）

AlloyTeam移动端手势解决方案

frontend-dev-bookmarks（前端各方面的学习清单）

免费的编程中文书籍（中文分享书籍，不止前端，各方面都有，大家按需查看）

animate.css

hover.css

muse-ui（基于vue2.0的一个UI库，样式漂亮，种类全）

CSS3 实现各类3D效果的博客（和下面三个连接同属一个作者，这个大牛的作品不错，效果酷炫，虽然star数量与其它几个推荐项目没法比，但是很值得推荐）

chokcoco/boomJS

chokcoco/magicCss

chokcoco/iCSS

handtouch

awesome-vue

Electron

vue-skeleton-webpack-plugin

梁少峰的个人博客（里面的文章质量也不错，各种都有，js,jquery,vue,react,node.js等）

RxJs

deeplearn（谷歌出版，一个关于人工智能深度学习的框架，有兴趣可以看，我看了一会，没看懂）

（下面这两个是我自己的开发的项目，虽然跟其他项目比较欠缺火候，但是还不至于用不了或者拿不出手的地步，也算是我的一个小广告吧！(●'◡'●)）

ec-do（封装了日常开发常用的javascript实例，实例为日常开发常用的小实例，包括数组去重，打乱数组，字母大小写转换，cookie操作的封装等。）

ec-css（基于css3开发的代码库，包括日常使用的hover过渡效果，动画效果，以及预设动画）

其它推荐项目

腾讯css3 ui库

NEC : 更好的CSS样式解决方案（网易的一个css3解决方案，但是貌似挺旧了，不维护了，但是里面的案例大家可以参考，绝对有收获）

8.综合项目教程（学习实录）

使用node.js + socket.io + redis实现基本的聊天室场景

前端开发，从草根到英雄（第一部分）

前端开发，从草根到英雄（第二部分）

我的前端进阶之路（看着标题以为是杂谈，实际上感觉是一篇总结性文章，大家可以看下）

为你的移动页面寻找一丝新意——手机互动网页项目总结（上）

为你的移动页面寻找一丝新意——手机互动网页项目总结（下）

前端开发指南2017

【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！（看完别忘记下面的，是叶小钗大神仿智能社官网的实战）

基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.

发现最好的你-设计中如何打造最合适的组件

webpack+vue项目实战（一,搭建运行环境和相关配置）（我自己的文章，关于使用vue+webpack开发一个单页应用，一个后台管理系统的开发搭建，这个系列一共有五篇文章）

9.开发杂谈

web前端--10个妨碍进步的学习方式

前端入行两年--教会了我这些道理

关于IT培训机构的个人看法

OpenDoc - 前端简历评级标准（美团出的一份简历评级，可以适当参考下，对比下自己的实力和美团评级。当然有兴趣的也可以去面试）

前端代码规范及最佳实践

Vue.js 很好，但是比 Angular 或 React 更好吗？

聊聊技术选型 - Angular2 vs Vue2

写给前端工程师看的，移动应用选型指南

网站架构-从无到有

前端架构那些事儿

技术大牛养成指南，一篇不鸡汤的成功学实践

6 个值得好好学习的 JavaScript 框架

更快学习 JS 的 6 个简单思维技巧

程序员怎么学英语

8个让程序员追悔莫及的职业建议

当心！程序员应警惕七种错误的职业规划

1024程序员节，写给年轻程序员的建议

给新程序员的10条建议

前端框架这么多，该何去何从？

2017年前端开发工具趋势

现代前端开发技术栈

听说2017你想写前端？

如何跟上前端开发的最新前沿

前端开发人员必须了解的七大技能图谱

前端技能汇总（JacksonTian）

另一张前端技能汇总图（和上面的一个链接一样，但是看的话，建议大家带参考的思想看）

怎样成长为一个优秀的 Web 前端开发工程师？

月薪10-12k的前端人员应该具备怎样一种技术水平？

作为一名前端开发人员，有哪些值得一读的js代码？

不吹不黑聊聊前端框架--尤雨溪Live整理

前端开发者指南（2017）

为什么一些公司招前端不想要培训班出来的人？

前端新人不容易

现在Web前端是不是已经饱和了?

2017前端技术发展回顾

hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一（有兴趣的可以看一下，有用）

开放源码的法律面（因为国外对版权，许可证很是注重，该文章就讲代码开源后关于许可证的文章，看得我有点蒙，但是最终整理后，我的开源项目就用MIT）

10.开发经常会接触的网站

MDN-web技术文档

智图_图片压缩在线工具_在线制作webp

多视通图片转换Base64

微信JS-SDK说明文档

草料二维码

菜鸟教程

w3cschool

11.小结

好了，我学前端看过的博客文章，关注过的大牛和项目，项目技术栈的教程基本都在这里了！我分享的这些，不敢说最好，最全，适合每个人。但是都是我看过或者接触过的，至少内容上让我满意的，让我觉得是对学习有用的，能帮到大家的。如果大家有什么学习资源推荐的，我也希望大家不吝啬的共享给我，给大家！

这篇文章，对于大家而言是一个资源的合集，但对于我而言，可能是一个分割线。发完2017最后一篇文章在以后我可能会在务实基础的前提下，注重深入的探究，发的文章可能会比现在的文章深入，文章产量可能不会像现在这么频繁！

还有一个建议就是，学习web前端，上面分享的可以起到一个引导，指路，解惑的作用。但是，大家不要忘记多练，毕竟实操最重要！大家有空余的时间或者周末也可以自己做下自己有兴趣的项目，并且用在自己工作的项目开发上！项目不求比别人好，只求自己能练习，提升自己的技术水平！

 

 

 

来自 <https://juejin.im/post/5a0c1956f265da430a501f51>