Table of Contents generated with DocToc
- Introduction & Overview: 入门与概览
- Resources: 综合
- Syntax: 基础语法
- Advanced
- Browser: 浏览器
- Framework: 常用框架
- Career & Interview: 工作与面试
Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的Web 前端入门与最佳实践。在本文中笔者尽量以入门级介绍为主，如果对于某方面知识点想深入了解，可以参考笔者的对应的知识点系列文章。如果您有其他的 Web 方面的资料 / 课程等推荐，欢迎指教，本文会保持持续更新。本文仅代表个人见解，若有点评不周之处望及时告知。
欢迎来到，前端世界！
- 2016 - 对于未来五年内 Web 发展的 7 个预测
- 2015 - 我的前端之路 : 从命令式到响应式，以及组件化与工程化的变革
- 怎么成为一名优秀的软件工程师
- GUI 应用程序架构的十年变迁 :MVC,MVP,MVVM,Unidirectional,Clean: 十年前，Martin Fowler 撰写了 GUI Architectures 一文，至今被奉为经典。本文所谈的所谓架构二字，核心即是对于对于富客户端的代码组织 / 职责划分。纵览这十年内的架构模式变迁，大概可以分为 MV与 Unidirectional 两大类，而 Clean Architecture 则是以严格的层次划分独辟蹊径。从笔者的认知来看，从 MVC 到 MVP 的变迁完成了对于 View 与 Model 的解耦合，改进了职责分配与可测试性。而从 MVP 到 MVVM，添加了 View 与 ViewModel 之间的数据绑定，使得 View 完全的无状态化。最后，整个从 MV到 Unidirectional 的变迁即是采用了消息队列式的数据流驱动的架构，并且以 Redux 为代表的方案将原本 MV* 中碎片化的状态管理变为了统一的状态管理，保证了状态的有序性与可回溯性。
- MDN:Mozilla 开发者网络（MDN ）提供有关开放网络技术（Open Web ）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。非常权威与详细的各种语法细节介绍，必看首推。
- How-To-Become-A-Great-Front-End-Engineer: 如何成为一名伟大的前端工程师
- 专治前端焦虑的学习方案
- Frontend-Guidelines-Questionnaire: 一个单页的问卷能帮助你的团队建立高效一直的前端指南。
- 四分钟交互式地了解 Web 设计基本规范 : 从零开始设计得体的个人网站
- 在线编译 :CodePen、JSFiddle、RunJS: 这些网站为我们提供了可以在线编辑 HTML/CSS/JavaScript 与即时预览的工作台。同时，在这些网站上也沉淀了大量优秀的代码片与示例，笔者就经常在 CodePen 上欣赏各种神奇的动画效果。
。
- MyBridge 搜集的一系列面向 Web 开发者有用的书籍
- Frontend-Dev-Resources: 一系列关于前端的会议
- 关于前端面试相关的资源整理: 整理一下最近在网上收集的前端面试相关资料，包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多，就光从知乎、前端乱炖、w3cplus 等网站就能找到很多，所以针对细节不发散，仅挑一些内容丰富的合集，更多的资料可以从其中找到。
- Update-To-Date Frontend Technologies: 保持更新的前端最新的资料、博客、工具集合。
- 2016 - JavaScript Stack From Scratch #Series#: 从零开始的常用 JavaScript 前端框架开发栈教程
- 2015 - SurviveJS #Book#: 基于 React 与 Webpack 构建一个看板应用程序来讲解 Webpack/React 技术栈的知识要点
- 2016 - 阮一峰 全栈工程师培训材料 #Series#: 全栈工程师培训材料，帮助学习者掌握全栈开发的基本知识，承担简单 Web 应用的前后端开发
- FreecodeCamp: FreecodeCamp 是一个非常伟大的项目，其致力于提供优秀的免费教程与练习示范，目前其在前端方面已经累计了数百小时的课程，同时其也包含了数据可视化、后端开发等等。
- 实验楼 -Web 专区
- 百度 :百度前端学院，百度 FEX 技术周刊
- 阿里 :阿里 -AMFE
- 腾讯 :AlloyTeam
- RisingStack Engineering: 一系列关于 JavaScript 与 NodeJS 的博客，笔者感觉其在 NodeJS 方面行文还是很深入的
- 王下邀月熊 - 前端系列博客: 笔者自己的博客，不断完善中，放在这里纯属私心，不能和下面的相提并论。笔者自己觉得行文倒是其次，笔者一直主张要建立属于自己的完善的知识体系。
- 前端外刊评论: 关注前端前沿技术，探寻业界深邃思想 qianduan.guru。
- 奇舞周刊: 汇聚前端精华，每周五更新的周刊，内容尚可。
- 前端之巅公众号: 定期推送的前端文章，有精品也有套文。
- Div.io: 文章更新不是很快，不过也有不少的好文章。
- Fouber- 系列博客
- JSFront:JS 前端开发群月报，由豪情等人维护。
- Can I Use:CAN I USE，相信每个前端同学都不陌生，查询浏览器兼容性的利器。
- JSHint: 一个在线 JS 检测工具，可以检测 JavaScript 代码中的错误和潜在问题。
- Javascript-Obfuscate: 一个在线混淆工具，通过先进的算法，来混淆你的 JavaScript 代码，使其不可读。该工具还可以减小文件的大小，以便快速加载。
- Best CSS Button Generator: 网站主要提供各种按钮的 CSS 代码，你可以从预设的按钮中选择并使用模板用于自己的设计，还可以查看源代码，非常适合学习。
- Chrome Tools 介绍 :我的 Chrome 插件集、私人珍藏的 Chrome 插件，吐血推荐、前端程序员必知的 30 个 Chrome 扩展、Dev Tips （讲了很多 Chrome 开发技巧）、Chrome 控制台实用指南、Chrome 实用调试技巧
- 配色类网站，为设计师提供很多配色方案与建议 :ColorHunt、Adobe Color Wheel、ColorHunter、BootCSS WebSafeColors
- 图标类网站 :阿里巴巴图标库 :IconFont、IconSearch
- CSS 属性生成工具 :Box Shadow Generator、Gradient Generator 、Ultimate CSS Gradient Generator 、CSS3 Generator。
- JS1K: 大名鼎鼎的 js1K，1K 字节以内的 Javascript 代码，实现一个酷炫的动画、特效、小游戏之类的。官网从 2010 年开始征集参赛作品，现在已经办了７年了，还在办。
-
如果你觉得 CSS 非常简单那么看看这些啪啪打脸的 :If CSS is so easy why does everyone suck?
-
语法速查工具 :CSS 属性指引，免费的可视化 CSS 各个属性效果展示
- CSS Styleguide:20 个编写现代 CSS 代码的建议，瞅瞅 Facebook 是怎么保证 CSS 代码质量的，提升你的 CSS 姿势
- 我应该从哪一门编程语言上车 ? : 这里有你学习 JavaScript 的理由。
- 廖雪峰 JavaScript 教程: 介绍了基础的语法与 API。
- JavaScript 标准参考教程（alpha ） - 阮一峰: 阮一峰老师出品，相当完善与成体系，也是以基础语法与 API 为主。
- 2015 - Speaking JavaScript #Book#:Dr. Axel 出品的详细 JavaScript 基础语法的书籍。
- 2015 - You-Dont-Know-JS #Series#: 告诉你关于许多你并不知道的 JS 知识
- 中文教程 :阮一峰 ECMAScript 6 入门、30 分钟掌握 ES6/ES2015 核心内容（上）
- 语法规范手册 :EcmaScript6 全规范（含 node） -ouvens、ES2015 规范 英文
- 2015 - Setting Up ES6 #Book#:Dr. Axel 出品的介绍如何搭建 ES6 开发环境的书籍。
- 2015 - Exploring ES6 #Book# & 2015 - ES2016&ES2017 #Book#:Dr. Axel 出品的详细的 ES6 的语法介绍书籍。
-
JavaScript 设计模式：JavaScript 设计模式 系列 AlloyTeam，Addy Osmani 编写的 2015 - Learn JavaScript Design Patterns #Book#学习常见的 JavaScript 设计模式，本书不仅仅阐述 JavaScript 语言本身的常见设计模式，还结合了 DOM&jQuery 介绍了一些常用的界面上的设计模式
-
Effective JavaScript:68 Specific Ways to Harness the Power of JavaScript，中文译本在Effective JavaScript
-
代码性能 :2016: 编写高性能的 JavaScript、
- Electron 概述与初探
- Hokein 编辑的 Electron 示范项目
- 基于 Electron 的 OSX 下桌面 OCR 应用 :Cute OCR Toolkits For OSX, Based On Electron,React&Tesseract
-
浏览器工作原理 :浏览器的工作原理：新式网络浏览器幕后揭秘、浏览器工作原理、从输入 URL 到页面加载完成的过程中都发生了什么事情？
-
网页渲染 :CSDN- 开发者应该知道的有关于网页渲染的事、JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
- JavaScripting: 一个搜集所有的优秀 JavaScript 前端库以及对其打分评比的网站
-
博客与论坛 :PureRender，知乎专栏，分享关于 React 相关经验及发展动态， React 入门与最佳实践系列总纲 #Series#。
-
入门学习 :使用 Facebook 的 create-react-app 快速构建 React 开发环境，React 开发中常用的工具集锦。
-
脚手架与实战 :在重构脚手架中掌握 React/Redux/Webpack2 基本套路。
-
React 设计思想与理念 :React 概念模型 —— 脱离 React 谈谈它的设计思想。
-
React Roadmap:React 的未来特性 。
-
React StyleGuide:如何写出漂亮的 React 组件。
- 博客与论坛 :Redux 入门与最佳实践系列总纲 #Series#。
- 最佳实践 :深入理解 Redux:10 个来自专家的 Redux 实践建议 。
- 你应该知道的 jQuery 的小技巧: 介绍一系列 jQuery 使用的小技巧。
- You-Dont-Need-jQuery: 前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular 、 Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。
- 一起学 NodeJS #Series#: 使用 Express + MongoDB 搭建多人博客
- 我在阅读 NodeJS 文档中读出的 19 个套路
-
Front-end-Developer-Interview-Questions:H5BP 出品的一系列的前端问题
-
Cracking-The-Front-End-Interview: 解决你的前端面试，中文译本为解决你的前端面试