学习之前首先要大概了解什么是HTML ,CSS , JS：
一句话概括：HTML 是骨骼， CSS是皮肤， JS只是夹在中间的神经组织！
细说的话：
HTML是由多种骨头(标签)组成的骨架。
HTML5是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头.
CSS是皮肤。CSS3是更美的皮肤
JS控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)
jQuery是把一组常用动作编排成了一个招式。

写给想成为前端工程师的同学们

基础学习：

代码有多难？——写给网页设计师的代码书 w3cschoolHTML教程 初学者学习文档[菜鸟教程]
梦之都HTML教程 HTML30分钟入门教程 HTML教程适合初学者[荐]
零基础的网站开发初学者应如何系统地学习？

视频学习：

慕课网[荐] HTML+CSS基础课程 智能社极客学院StuQ css学习之优酷首页实战css学习之新浪首页实战 智能社JS教学 哈佛大学公开课：构建动态网站

提升学习：

书籍推荐：[书是人类的好朋友]
分享些前端的好书，说说我的web前端之路 有哪些关于前端开发技术（HTML、CSS、JavaScript等）值得推荐的书籍？ 从菜鸟到大牛的前端书单 前端书籍资料PDF公开

前端入门：[工欲善其事 必先利其器]
1. web前端开发分享-css,js入门篇 2.web前端开发分享-css,js进阶篇 3.web前端开发分享-css,js提高篇 4.web前端开发分享-css,js工具篇 5.web前端开发分享-css,js深化篇 6.web前端开发分享-css,js移动篇 Web前端工程师成长第一阶段(基础篇) Web前端工程师成长第二阶段(布局篇)

前端规范
编码规范 by @mdo中文版 前端编码规范（1）——一般规范 前端编码规范（2）——HTML 规范 前端编码规范（3）——JavaScript 规范 前端编码规范（4）——CSS 和 Sass (SCSS) 规范


CSS
CSS参考手册 HTML/CSS开发规范指南 前端编码规范之CSS
CSS预处理SCSS入门篇
CSS预处理LESS入门篇 NEC更好的css方案
精通CSS+DIV 网页样式与布局 【书籍】
精通CSS：高级Web标准解决方案（第2版）【书籍】

CSS RESET：[css重置]
css reset 是什么 cssreset normalize.css

CSS Hack：[建议推行废弃ie6、7、8浏览器]
css hack是什么 不同浏览器（IE6,IE7,IE8,FF）专用标签 浏览器hack

常见css知识点：
csssprite使用笔记总结 SASS和 LESS 区别 less即学即用less入门 Sass基础入门(基础篇) Sass和Compass必备技能之Sass篇 Sass和Compass必备技能之Compass


JS
JavaScript教程 【廖雪峰教程】
JavaScript 资源大全中文版 ECMAScript6入门 ES6LearnES2015

值得收藏！JavaScript语言基础知识总结 JavaScript初学者应注意的七个细节 前端JQuery系列：入门教程| 源码剖析 | 框架设计 | 慕课网教程 byJsAaron jquery学习jqueryAPI中文文档 javascript设计模式 jquery性能优化的十种方法
锋利的jQuery(第2版) 【书籍】


Js知识点：
知道这20个正则表达式，能让你少写1,000行代码 你不知道的Javascript 回调地狱的今生前世@JavaScript

常见Js插件：
性能卓越的 js 模板引擎artTemplate
layui（弹层、日期、分页、模板引擎） echarts图表highcharts图表Chart.js（wap）图表 代码高亮highlight 走进svg的世界 百度脑图svg巅峰之作

HTML5+CSS3：
HTML5从入门到精通【书籍】
CSS动画简介CSSAnimate H5专题多屏滚动优秀案例整理

H5：
Zepto.jsZepto.js中文版 SWIPEJS – 移动WEB页面内容触摸滑动类库 从零搭建移动H5开发项目实战 移动端h5开发相关内容总结


UI框架：
Bootstrap semantic-ui weui[H5]
aui[H5]
frozen-ui[H5]
Sui[H5]
zui[PC]
Jquery.mobile[H5]
Yo amazeui

资源分享：
前端技能汇总 Frontend Knowledge Structure[荐]
前端收集（前端学习资源）  一些前端总结分享 TencentAlloyTeam 2016 前端开发资源导航 谷歌开发者中国

干货
awesome by sindresorhus

Node.js 
因Nodejs更新太快，遇到问题学会搜索以及查看github上更新的最新文档介绍，其所依赖的组件的方法以其github上为准，同时建议使用mac/linux玩node
Node.js 入门 [荐] 一起学Node.jsnodejs新手指南 Node.js学习视频进击Node.js基础 下一代web框架Koajs 高可用架构专用《全栈工程师之路-Node.js》 深入浅出js（Node.js）异步流程控制 微服务选型之ModernNode.js Java项目如何与Node.js共存？

Angular.js
学习AngularJs AngularJs视频 Angular展示案例 Angular2 Angular2案例 Angular2.x 从0到1

Vue.js
了解vue 学习vue
优秀Vue组件集成库：
Element iView- 一套高质量的UI组件库 vue实践1：小米商城 vue实践2：CNode vue实践3：CNode2.0

Vue全套学习视频 百度网盘：链接：https://pan.baidu.com/s/1slD6rJf 密码：zxhm

React.js
ReactJS 中文技术分享 React入门实例教程 Ant.Design 贴吧React 最佳实践

微信公共账号
初识Java微信公众号开发 PHP实现微信公众平台开发—基础篇 PHP实现微信公众平台开发—提升篇 7天开发Nodejs微信公共号 密码:k7h8
Node.js微信开发

微信小程序 
微信小程序接入指南 狼叔直播的微信小程序讲义 微信小程序示例- 剪刀石头布 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践 微信小程序全面实战，架构设计&& 躲坑攻略

VR
Three.js

require.js
学习RequireJs 快速理解RequireJs seajs与requirejs区别

Sea.js
一步步学会使用SeaJS2.0 ★ sea使用文档 Sea.js创始人玉伯专访  前端模块化开发的价值_玉伯☆ API快速参考

Avalon.js
学习Avalon.js AvalonJs学习视频

Backbone.js
学习Backbone.js 学习Underscore.js

开发工具：
前端开发工具SublimeText 使用教程【荐】
前端高效开发之“一键切图” MarkMan——高效的设计稿标注、测量工具 WEB调试工具---Firebug[firefox]
15个必须知道的chrome开发者技巧 sketchcn矢量设计工具（收费） 浏览器兼容性表 puer(快速启动本地服务localhost)
百度短网址 mac用户前端开发需要了解的 WTS：基于Web的Terminal控制台

前端自动化工具相关
yeoman bower grunt gulp webpack 基于webpack搭建前端工程解决方案探索 Grunt-beginner前端自动化工具[grunt\gulp]
FIS3 , 为你定制的前端工程构建工具

Git:
Git教程 git常用命令

GitHub:
GitHub入门与实践 【书籍】
GitHub 部署静态 HTML 网页

MarkDown:
什么是Markdown语法？ 基于Markdown的编辑器 markdown语法入门

[延伸]SVN:
项目管理SVN使用教程[windows] 项目管理SVN使用教程[mac] Mac上最好用的 SVN 客户端是什么

[延伸]WebApp：
Hello，移动WEB Webapp设计浅谈  WebApp开发入门 MUI开发

[延伸]Hybrid App:
ionic ionic视频教程

[延伸]React
React Facebook React入门实例教程 AmazeUI React React.JS中文基础教程 密码:zhsp

[延伸]IOS学习：
IOS学习目录 玩儿转Swift TheSwift Programming Language 中文版

[延伸]Android学习：
Android学习目录

[延伸]Ubuntu学习：
【ubuntu】系统使用小窍门总结 【ubuntu】安装配置Mysql 【ubuntu】导入mysql数据库文件

[延伸]Java学习：
Java程序员由菜鸟到笨鸟

[延伸]Cocos2d：
Cocos2d学习 Cocos2d视频

[延伸]团队合作：
团队协同工具worktile 有道云笔记协作 Coding- 让开发更简单!

[延伸]PHP
Thinkphp Thinkphp学习视频  密码:t65d

[延伸]建站
阿里云ESC服务 推荐码5D2D05（结算时首次可9折）
阿里云Linux一键安装web环境全攻略 阿里云备案

[延伸]Nginx
Nginx 配置简述

网站优化：
Yahoo军规 漫谈页面优化 Web性能优化：What?Why? How? 移动网站性能优化：网页加载技术概览 web前端页面性能优化小结前端各种优化 图片延迟加载LazyLoad Plugin for jQuery

页面重构：
前后端分离的思考与实践[荐]
从新浪微博的改版谈网页重构 经验分享：网页设计与重构那些事儿 中文网页重设与排版：TYPO.CSS

原理探索：[了解原理才是王道]
前端必读：浏览器内部工作原理

技术峰会：
慕课网技术沙龙之前端专场 AlloyTeam前端技术大会(移动web经验分享) D2前端技术论坛——2014绽放 Qnext前端交互沙龙 去哪儿前端沙龙分享第二期 中国首届CSS开发者大会

前端面试：
2014年最新前端开发面试题 前端开发面试题大收集  2014阿里巴巴前端线上笔试题以及答案 前端面试题合集

切图：
前端工程师必备的PS技能——切图篇 做ui必备–PS切图动作用法 [切图]photoshop切片使用小技巧（切图） [切图]PhotoshopCC新功能生成图像资源（切图） iPhone6 plus 适配切图方法分享(原创) iPhone6和iPhone6plus的iOS8设计尺寸参考指南 教你iOSAPP设计一稿支持iPhone5/iPhone6/Plus iOS的 APP 在系统中如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸？ 关于”点九” APP切图那点事儿–详细介绍android和ios平台

交互设计:
一名交互设计师平时要积累哪些东西？ 交互设计精华问答 响应式设计（Responsiveweb design） 复杂产品的响应式设计 响应式网站的产品需求和设计流程详解

字体 图标：
Iconfont-阿里巴巴矢量图标库 FontAwesome——完美的图标字体 [字体]fontawesome4.2不支持IE7 [字体]fontawesome3.2.1支持IE7 css3@font-face 网页中展示中文字体适用于无改动的文字展示

一些文章：
思索| 入行几年后，互联网人的未来应该在哪里？ 2015前端[JS]工程师必知必会 HTML5定稿：手机App将三年内消失，互联网世界的第二次大战

知乎问答：[知乎前端大神]
vue，angular，avalon这三种MVVM框架之间有什么优缺点？ vue、react和angular2.x谁是2016年的主流？ Web建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？ HTML、CSS、JavaScript、PHP、MySQL 的学习顺序是什么？ 大公司里怎样开发和部署前端代码？[荐]
知乎上，前端开发领域有哪些值得推荐的问答？ 前端大牛们都学过哪些东西？ 有哪些经常被误用的HTML、JavaScript、CSS 的元素、方法和属性？ Google V8 引擎运用了哪些优秀的算法？ 如何帮助前端新人入门和提高？ 怎样成长为一个优秀的Web 前端开发工程师？ 天猫的前端工程师和团队在行业内处于什么水平？ 做前端开发必需要掌握切图技能吗？ 有哪些JS 调试技巧？ 近来国内外有哪些用户界面、交互体验设计优秀的产品？优秀在哪里？ 一名合格的前端工程师的知识结构是怎样的？ 网站效果视差滚动 若想学HTML，应从哪里入手？ 前端开发中，对图片的优化技巧有哪些？ 前端工程师的价值体现在哪里？ 现在网页设计中的为什么少有人用11px、13px、15px 等奇数的字体？ 为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？ 2014年末有哪些比较火的 Web 开发技术？ 关于 AngularJS 框架的使用有哪些经验值得分享？ LABjs、RequireJS、SeaJS哪个最好用？为什么？ 有哪些不错的前端开发博客？ 怎样防止重复发送Ajax 请求？ C、C++、Java、JavaScript、PHP、Python、Ruby 这些语言分别主要用来开发什么？ 在今天，利用HTML5 开发和发布大型跨平台网游，可行性如何？要解决哪些问题？ 如何看待 HTML5 开源游戏引擎 Egret，HTML5 游戏开发的前景如何？ Bootstrap3 有哪些改进？ 如何理解 web 语义化？ 前端工程师应该对HTTP 了解到什么程度？从哪些途径去熟悉更好？ 怎么判定web前端架构师的能力高低？ 想深入了解一下jQuery 的源码，但是觉得学习曲线有点陡峭，有没什么好的方法或者学习资源推荐？

大神博客：（前端成长路上掉过的坑，栽过的沟，翻过的墙。。。）
前端博客 by张克军 （考虑到github可能被墙，弄到了我的coding）
菜鸟前端成长之路 前端乱炖 F2E-前端技术社区 前端开发中遇到的工程问题 阮一峰的网络日志 360月影

2016年
全年干货浓缩成一篇文章，这本技术人修炼秘籍你就收下吧

2015年

• 阿里无线前端性能优化指南 (Pt.1 加载期优化) by @晓田
• Web中的图标 by @大漠
• 我理解的阿里无线前端“架构”（半鸡汤，少干货） by @hongru
• 写给前端面试者 by @大漠
• 手机淘宝这三年（更新PPT同步录音视频） by @渚薰
• 手机淘宝前端的图片相关工作流程梳理 by @勾三股四
• 高级CSS filters by @大漠
• Font Boosting by @尚左
• 15年双11手淘前端技术巡演 - 前言 by @hongru
• 对无线电商动态化方案的思考（一） by @勾三股四
• 对无线电商动态化方案的思考（二） by @勾三股四
• 对无线电商动态化方案的思考（三） by @勾三股四
• 使用Flexible实现手淘H5页面的终端适配 by @大漠
• POPLAYER起来HIGH~~ by @靖一
• 双十一敲钟项目总结 by @青缨
• 双11密令红包的前端技术方案 by @颂奇
• 15年双11手淘前端技术巡演 - H5性能最佳实践 by @晓田

前端的路，一步一步来
[路漫漫其修远兮，吾将上下而求索]

CSS不能编程？用Less、Sass、Stylus、甚至直接用 Absurd，框架除了Bootstrap还有很多。JS写多了很麻烦？jQuery。移动开发？Zepto.js。结构不好？找框架，Backbone.js是MVC，AngularJS和Ember.js是MVVM，Twitter还弄了个事件驱动框架Flight。库多了要优化加载？RequireJS。

代码质量成问题？Jasmine、QUnit、Mocha做单元测试。各种浏览器都要测？用Karma。测试通过了部署还有问题？持续集成，用TravisCI。用户行为也要测？用Selenium。样式测试还有Viff 。觉得JS都够麻烦的？用CoffeeScript。

想做动画？Canvas或SVG还有CSS3帮忙，干掉Flash。SVG太难画？用Snap.svg。想开发游戏？用Canvas。自己写FPS太低？用框架，CreateJS.。2D太幼稚？three.js帮你用WebGL开发3D，还不够给力？asm.js让你在浏览器中拥有虚幻3引擎。

这一堆东西都要配置部署，麻烦，用Grunt，库太多？用Bower管理，项目开始要创建各种文件文件夹？用Yeoman。开源项目太多了，GitHub.上找，不会？学Git。顺便用Jekyll托管博客，不是吧还有Ruby这玩意...SASS也是Ruby写的，等等SublimeText是Python写的，要写插件？也学一下。调试太难？用Chrome开发者工具，一堆API和功能。

光在电脑浏览器上跑不给力？移动开发HTML5，离开网络就渣了？HTML5离线应用。不如原生应用？用PhoneGap。想调用原生API？开发FirefoxOS应用吧。浏览器应用也得会吧，Chrome Firefox都有自己的文档。接着是不是把后端甩了，自己来，装Node.js，所以还得学点服务器知识，想用npm管理node包？linux技巧shell神马的也得学。想前后端通吃？再看看http协议。Web精通了？node-webkit 让你可以写桌面程序了，继续学吧。

想学模块化开发？看看CommonJS和AMD规范。理解JS有偏差？看看ECMA-262，等等不知道什么时候第6版就要出了。浏览器各不相同，弄不清该怎么兼容？看看W3C标准，HTML写出来人看的懂，机器读不懂？要SEO，要支持残障人士？看HTML语义化，全会了但IE就是不支持？叫不出名字的浏览器尼玛连JS都不知道是啥？渐进增强。想一次把各种设备全搞定？响应式设计。

然后上面这些不过是一些讨巧的小技术。公司做什么业务的？了解一下行业信息。面向大众的产品？交互设计。美工不给力？UI设计。外包和咨询？设计模式、重构方法、算法、数据结构。知道软件工程吗？了解一下敏捷开发，或许还可以试试TDD、ATDD、BDD。

转自:https://zhuanlan.zhihu.com/p/28339833