Web前端从入门菜鸟到实践老司机所需要的资料与指南合集

Web前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的Web 前端入门与最佳实践。在本文中笔者尽量以入门级介绍为主，如果对于某方面知识点想深入了解，可以参考笔者的对应的知识点系列文章。如果您有其他的Web方面的资料/课程等推荐，欢迎指教，本文会保持持续更新。
本文仅代表个人见解，若有点评不周之处望及时告知。欢迎转载，注明出处。

Introduction & Overview:入门与概览

欢迎来到，前端世界！

• 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*中碎片化的状态管理变为了统一的状态管理，保证了状态的有序性与可回溯性。

Tutorials

• MDN:Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括HTML、CSS 和万维网及HTML5 应用的API。非常权威与详细的各种语法细节介绍，必看首推。

• How-To-Become-A-Great-Front-End-Engineer:如何成为一名伟大的前端工程师

• 专治前端焦虑的学习方案

• Frontend-Guidelines-Questionnaire:一个单页的问卷能帮助你的团队建立高效一直的前端指南。

• 四分钟交互式地了解Web设计基本规范:从零开始设计得体的个人网站

Playground / StartKits

• 在线编译:CodePen、JSFiddle、RunJS:这些网站为我们提供了可以在线编辑HTML/CSS/JavaScript与即时预览的工作台。同时，在这些网站上也沉淀了大量优秀的代码片与示例，笔者就经常在CodePen上欣赏各种神奇的动画效果。
  。

Resources:综合

Collections:资源汇总帖

• MyBridge搜集的一系列面向Web开发者有用的书籍

• Frontend-Dev-Resources:一系列关于前端的会议

• 关于前端面试相关的资源整理:整理一下最近在网上收集的前端面试相关资料，包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多，就光从知乎、前端乱炖、w3cplus 等网站就能找到很多，所以针对细节不发散，仅挑一些内容丰富的合集，更多的资料可以从其中找到。

• Update-To-Date Frontend Technologies:保持更新的前端最新的资料、博客、工具集合。

Books & Serials:书籍与系列文章

• 2016 - JavaScript Stack From Scratch【Series】:从零开始的常用JavaScript前端框架开发栈教程

• 2015 - SurviveJS 【Book】:基于React与Webpack构建一个看板应用程序来讲解Webpack/React技术栈的知识要点

• 2016 - 阮一峰 全栈工程师培训材料【Series】:全栈工程师培训材料，帮助学习者掌握全栈开发的基本知识，承担简单 Web 应用的前后端开发

Courses:教程

• FreecodeCamp: FreecodeCamp是一个非常伟大的项目，其致力于提供优秀的免费教程与练习示范，目前其在前端方面已经累计了数百小时的课程，同时其也包含了数据可视化、后端开发等等。
  

• 实验楼-Web专区

Blogs & Forums:博客与论坛

企业

• 百度:百度前端学院，百度FEX技术周刊

• 阿里:阿里-AMFE

• 腾讯:AlloyTeam

英文

• RisingStack Engineering:一系列关于JavaScript与NodeJS的博客，笔者感觉其在NodeJS方面行文还是很深入的

中文

• [王下邀月熊 - 前端系列博客]():笔者自己的博客，不断完善中，放在这里纯属私心，不能和下面的相提并论。笔者自己觉得行文倒是其次，笔者一直主张要建立属于自己的完善的知识体系。

• 前端外刊评论:关注前端前沿技术，探寻业界深邃思想 qianduan.guru。

• 奇舞周刊:汇聚前端精华，每周五更新的周刊，内容尚可。

• [前端之巅公众号]():定期推送的前端文章，有精品也有套文。

• Div.io:文章更新不是很快，不过也有不少的好文章。

• Fouber-系列博客

• JSFront:JS前端开发群月报，由豪情等人维护。

Tools:工具

• 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年开始征集参赛作品，现在已经办了７年了，还在办。

Syntax:基础语法

HTML

CSS

• 如果你觉得CSS非常简单那么看看这些啪啪打脸的:If CSS is so easy why does everyone suck?

• 语法速查工具:CSS属性指引，免费的可视化CSS各个属性效果展示

BestPractices

• CSS Styleguide:20个编写现代CSS代码的建议，瞅瞅Facebook是怎么保证CSS代码质量的，提升你的CSS姿势

JavaScript

• 我应该从哪一门编程语言上车? :这里有你学习JavaScript的理由。

• 廖雪峰JavaScript教程:介绍了基础的语法与API。

• JavaScript 标准参考教程（alpha） -阮一峰:阮一峰老师出品，相当完善与成体系，也是以基础语法与API为主。

• 2015 - Speaking JavaScript【Book】:Dr. Axel出品的详细JavaScript基础语法的书籍。

• 2015 - You-Dont-Know-JS【Series】:告诉你关于许多你并不知道的JS知识

ES6/ES7专区

• 中文教程:阮一峰 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的语法介绍书籍。

Practices & Tips:实战与提高

• 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、[]()

StyleGuides:样式与风格

DOM

Advanced

StateManagement:状态管理

• Web开发中所谓状态浅析:Domain State&UI State

• 思考:我需要怎样的前端状态管理工具?

Browser:浏览器

Engine

Electron

• Electron 概述与初探

• Hokein编辑的Electron示范项目

• 基于Electron的OSX下桌面OCR应用:Cute OCR Toolkits For OSX, Based On Electron,React&Tesseract

Headless Browser

PhantomJS

Selenium

JSDOM

Render:渲染

• 浏览器工作原理:浏览器的工作原理：新式网络浏览器幕后揭秘、浏览器工作原理、从输入 URL 到页面加载完成的过程中都发生了什么事情？

• 网页渲染:CSDN-开发者应该知道的有关于网页渲染的事、JS一定要放在Body的最底部么？聊聊浏览器的渲染机制

• 高性能JavaScript重排与重绘

• how-browsers-work

• the-rendering-process-of-a-web-page

• 渲染性能

• 应该知道的前端性能二三事：Reflow 和 Repaint

Framework:常用框架

• JavaScripting:一个搜集所有的优秀JavaScript前端库以及对其打分评比的网站

View

React

• 博客与论坛:PureRender，知乎专栏，分享关于 React 相关经验及发展动态， React入门与最佳实践系列总纲【Series】。

• 入门学习:使用Facebook的create-react-app快速构建React开发环境，React开发中常用的工具集锦。

• 脚手架与实战:在重构脚手架中掌握React/Redux/Webpack2基本套路。

• React 设计思想与理念:React 概念模型——脱离React谈谈它的设计思想。

• React RoadMap:React的未来特性 。

• React StyleGuide:如何写出漂亮的React组件。

StateManagement

Redux

• 博客与论坛:Redux 入门与最佳实践系列总纲【Series】。

• 最佳实践:深入理解Redux:10个来自专家的Redux实践建议 。

Utils:辅助工具

jQuery

• 你应该知道的jQuery的小技巧:介绍一系列jQuery使用的小技巧。

• You-Dont-Need-jQuery:前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。

NodeJS

• 一起学NodeJS【Series】:使用 Express + MongoDB 搭建多人博客

• 我在阅读NodeJS文档中读出的19个套路

Builder

Webpack

• 中文教程:Webpack傻瓜式指南，Webpack 中文指南 -赵达

Career & Interview:工作与面试

• Front-end-Developer-Interview-Questions:H5BP出品的一系列的前端问题

• Cracking-The-Front-End-Interview:解决你的前端面试，中文译本为解决你的前端面试