本项目是百度前端技术学院（百度IFE第一期）学习过程中涉及到的相关阅读资料、开发工具、入门tutorial、技术资讯等精华资源的汇总，其中部分内容可能需要翻墙访问（翻墙指南），本列表的内容会随着课程进展逐步完善，对前端刚入门的同学可以持续关注本项目的更新情况。
Pre
Introduction
- Brendan Eich: JavaScript at 20
- Quora: What are the best resources for learning JavaScript?
- 知乎中一些值得推荐的前端领域相关问答
- 知乎：有哪些关于前端技术的推荐书籍
- 前端知识体系
- JavaScript之路（包含大量学习资源）
- 前端面试题汇总
Editor
- Sublime Text 2
- WebStorm
- Visual Studio Code [Free]
- Brackets [Free]
- Atom [Free]
Tools
- Sublime常用配置技巧与常用插件
- Web前端编程规范 或 AlloyTeam前端编程规范
- RGB颜色查询对照表
- Can I use: 浏览器兼容性查询
- 跨浏览器测试工具modern.IE
- BootCDN: 稳定、快速、免费的开源项目 CDN 服务
Commmunity
Task 1 HTML\CSS\Git Basic
Reading:
- 知乎：Web开发基础指南
- 入门图书：Head First HTML&CSS, 2nd
- Learn to Code HTML&CSS
- HTML/CSS Performance & Organization
Git
- Git – the simple guide
- 图解Git
- Git from inside out
- 猴子都能懂的GIT入门
- Git Magic
- First Aid Git: A searchable collection of the most frequently asked Git Questions
- Github Help
- 搬进Github
- Github Pull Request Tutorial
- 25个Git进阶技巧
HTML:
- HTML入门：教你做一个简单的网站
- MDN: HTML入门
- 知乎：如何理解Web语义化
- Learn to Code HTML & CSS
- 20 HTML Elements for Better Text Semantics
- 10 Typical HTML Interview Exercises
CSS & Layout:
- CSS入门：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started
- 学习CSS布局：http://zh.learnlayout.com/no-layout.html
- CSS常见布局问题整理
- 60个有用的CSS代码片断
- 淘宝UED：双飞翼布局 http://www.imooc.com/wenda/detail/254035
- stackoverflow: 3 column layout
- stackoverflow: Two column div layout with fluid left and fixed right column
- CSS3中的网格
- CSS Flexible Box: CSS3中弹性盒布局的最新版
- Tool: How to Center in CSS
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
- Responsive Web Design
- An Introduction to Mobile-First Media Queries
- Responsive Design Best Practices for Big Project
- The 30 CSS Selectors you Must Memorize
Task 2 JavaScript Basic
Reading:
- 推荐阅读：Head First HTML5 Programming
- 推荐阅读：JavaScript高级程序设计，第3版
- Dive Into HTML5
- MDN: JavaScript Wiki
- Learn to Code Advanced HTML & CSS
HTML5
- Tutorial: Native HTML5 Drag and Drop API
JavaScript
- MDN: JavaScript入门
- JavaScript性能优化：加载和执行
- MDN: JavaScript正则表达式
- MDN: query selector
- MDN: Cookie
- w3school: Ajax基础教程
- Blog: 使用原生JavaScript封装Ajax
- Comet: 基于HTTP长连接的“服务器push”技术
- jsfiddle: a simple countdown timer
- Simple Ajax Auto-Complete Example
- Tutorial: 使用原生JavaScript从0开始开发一个轮播图
Node.js
Questions
- 为什么JavaScript中0.1+0.2不等于0.3？参看浮点数计算的基本问题。
- stackoverflow: most efficient way to clone an object
- stackoverflow: remove duplicate items from an array
- stackoverflow: 浏览器类型判断
- stackoverflow: creating the checkbox daynamically using javascript
- stackoverflow: How to iterate JSON array in JavaScript
Task 3 JavaScript Advanced & Basic Web App Development
Reading
- JavaScript高级程序设计，第3版
- JavaScript: The Good Parts
- JavaScript: The Definitive Guide
- Learning Advanced JavaScript
- Elogquent JavaScript
- JavaScript Garden
- 数据结构与算法JavaScript描述
- 编写可维护的JavaScript
- Effective JavaScript
- 重新介绍JavaScript
Debug
- Debugging JavaScript
- Debugging Asynchronous JavaScript with Chrome DevTools
- Breakpoint Actions in JavaScript
- Evaluating Network Performance
- Enhance your javascript debugging with Cross-Browser Source Maps
JavaScript
- 5个经典的JavaScript面试题
- 鸟哥：理解JavaScript的作用域
- JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
- Understanding JavaScript Prototypes
- A Plain Guide to JavaScript Prototypes
- 详解JavaScript的函数闭包
- Revealing the Inner Workings of JavaScript’s ‘this’ keyword
- JavaScript like a Boss: Understanding Fluent APIs
- stackoverflow: Storing Objects in HTML5 localStorage
- stackoverflow: Copying array by value in JavaScript
JavaScript OOP
- Javascript 面向对象编程基础入门
- 推荐阅读：JavaScript高级程序设计，第6章，面向对象程序设计
- JavaScript继承详解
- JavaScript继承方式详解
- JavaScript探秘：构造函数 Constructor
- this关键字详解
- 深入浅出JavaScript中的this关键字
Design Patterns
HTML & CSS
- Using Links to Create Navigation Menus
- Stackoverflow: CSS3 Viewport-Percentage Length
- Tutorial: Horizontal lists
- Tutorial: Creating a modal window with HTML5 & CSS3
Documentation
Task 4 Mobile and Engineering
Mobile Development
- Book: Head First Mobile Web
- Mobile First Design: Why It’s Great and Why It Sucks
- Mobile Development Get Started
- 移动开发资源与技巧汇总
- The Mobile Web Handbook
- 5 Quick Ways to Make Your Site More Mobile Friendly
- MobileWeb 适配总结
- 移动前端不得不了解的html5 head 头标签
- 浅谈移动前端的最佳实践
- touch系事件
- 移动端真机调试终极利器-BrowserSync
- Webstorm: Getting started with hybrid mobile app development
- Browser-Sync：响应式Web开发调试利器
CSS pre-process and post-process
Modular
- 阮一峰：Javascript模块化编程（一）：模块的写法
- 详解JavaScript模块化开发
- 为什么需要AMD?
- 服务器端模块规范：RequireJS
- CMD实现:Sea.js
- SeaJS与RequireJS最大的区别
- 知乎：LABjs、RequireJS、SeaJS 哪个最好用？为什么？
- Youtube: RequireJS made ridiculously easy, in just 10ish minutes
- Understanding RequireJS for Effective JavaScript Module Loading
- Using RequireJS in AngularJS Applications
- Organizing your application using Modules (require.js)
- 百度EFE：玩转AMD – 写在前面
- 百度EFE：玩转AMD – 设计思路
- 百度EFE：玩转AMD – 应用实践
- 百度EFE：玩转AMD – Loader
- 百度ESL (Enterprise Standard Loader)
- 浏览器加载CommonJS模块的原理与实现
Front-end Engineering
- 前端工程与模块化框架
- 手机百度前端工程化之路
- 视频：FIS2.0全新的百度前端解决方案（范云龙）
- InfoQ: 对话百度前端工程师张云龙：F.I.S与前端工业化
- Grunt教程——初涉Grunt
- Gulp入门指南
Website Performance
- 大型网站的灵魂——性能
- Google: Web性能最佳实践
- 毫秒必争，前端网页性能最佳实践
- Yahoo: Best Practices for Speeding Up Your Web Site
- 14 Rules for Faster-Loading Web Site
- Video: Practical Performance Tips to Make Your HTML/JavaScript Faster
- 前端性能优化最佳实践
- CSS Sprite原理、优缺点及使用
- 伯乐在线：编写高效的 CSS 选择器
Performance Debug Tools
Advanced Topic
Helpers
- 文件精简工具：UglifyJS
- 构建工具：Grunt: The JavaScript Task Runner
- 构建工具：Gulp: the streaming build system
- 文档生成：jsdoc: an api documentation generator for JavaScript
- 代码检查：JSHint
- 测试框架：Jasmine
- Test Runner：Karma
- Bower：Web前端包管理工具
- Yeoman: 帮你快速启动新项目
- Travis CI：持续集成工具
JavaScript MVC Frameworks
- Angular.js & Angular2
- React.js & React Native
- Tutorial: AngularJS in 30 minutes
- AngularJS风格指南
CSS Frameworks
Contact me
- My profile: http://wwsun.me/about.html
- My Github: https://github.com/wwsun
- My Weibo: http://weibo.com/234170023
