前端知识点

标签： 2860View

本项目是百度前端技术学院（百度IFE第一期）学习过程中涉及到的相关阅读资料、开发工具、入门tutorial、技术资讯等精华资源的汇总，其中部分内容可能需要翻墙访问（翻墙指南），本列表的内容会随着课程进展逐步完善，对前端刚入门的同学可以持续关注本项目的更新情况。

Pre

Introduction

  1. Brendan Eich: JavaScript at 20
  2. Quora: What are the best resources for learning JavaScript?
  3. 知乎中一些值得推荐的前端领域相关问答
  4. 知乎：有哪些关于前端技术的推荐书籍
  5. 前端知识体系
  6. JavaScript之路（包含大量学习资源）
  7. 前端面试题汇总

Editor

  1. Sublime Text 2
  2. WebStorm
  3. Visual Studio Code [Free]
  4. Brackets [Free]
  5. Atom [Free]

Tools

  1. Sublime常用配置技巧与常用插件
  2. Web前端编程规范 或 AlloyTeam前端编程规范
  3. RGB颜色查询对照表
  4. Can I use: 浏览器兼容性查询
  5. 跨浏览器测试工具modern.IE
  6. BootCDN: 稳定、快速、免费的开源项目 CDN 服务

Commmunity

  1. 常备站点：MDN
  2. 前端社区：w3ctech
  3. 前端设计：Sitepoint
  4. 前端博客：Scotch.io

Task 1 HTML\CSS\Git Basic

Reading:

  1. 知乎：Web开发基础指南
  2. 入门图书：Head First HTML&CSS, 2nd
  3. Learn to Code HTML&CSS
  4. HTML/CSS Performance & Organization

Git

  1. Git – the simple guide
  2. 图解Git
  3. Git from inside out
  4. 猴子都能懂的GIT入门
  5. Git Magic
  6. First Aid Git: A searchable collection of the most frequently asked Git Questions
  7. Github Help
  8. 搬进Github
  9. Github Pull Request Tutorial
  10. 25个Git进阶技巧

HTML:

  1. HTML入门：教你做一个简单的网站
  2. MDN: HTML入门
  3. 知乎：如何理解Web语义化
  4. Learn to Code HTML & CSS
  5. 20 HTML Elements for Better Text Semantics
  6. 10 Typical HTML Interview Exercises

CSS & Layout:

  1. CSS入门：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started
  2. 学习CSS布局：http://zh.learnlayout.com/no-layout.html
  3. CSS常见布局问题整理
  4. 60个有用的CSS代码片断
  5. 淘宝UED：双飞翼布局 http://www.imooc.com/wenda/detail/254035
  6. stackoverflow: 3 column layout
  7. stackoverflow: Two column div layout with fluid left and fixed right column
  8. CSS3中的网格
  9. CSS Flexible Box: CSS3中弹性盒布局的最新版
  10. Tool: How to Center in CSS
  11. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
  12. Responsive Web Design
  13. An Introduction to Mobile-First Media Queries
  14. Responsive Design Best Practices for Big Project
  15. The 30 CSS Selectors you Must Memorize

Task 2 JavaScript Basic

Reading:

  1. 推荐阅读：Head First HTML5 Programming
  2. 推荐阅读：JavaScript高级程序设计，第3版
  3. Dive Into HTML5
  4. MDN: JavaScript Wiki
  5. Learn to Code Advanced HTML & CSS

HTML5

  1. Tutorial: Native HTML5 Drag and Drop API

JavaScript

  1. MDN: JavaScript入门
  2. JavaScript性能优化：加载和执行
  3. MDN: JavaScript正则表达式
  4. MDN: query selector
  5. MDN: Cookie
  6. w3school: Ajax基础教程
  7. Blog: 使用原生JavaScript封装Ajax
  8. Comet: 基于HTTP长连接的“服务器push”技术
  9. jsfiddle: a simple countdown timer
  10. Simple Ajax Auto-Complete Example
  11. Tutorial: 使用原生JavaScript从0开始开发一个轮播图

Node.js

  1. scotch.io: Build a RESTful API Using Node and Express 4
  2. Express跨域问题解决方案
  3. 朴灵：Node编码规范

Questions

  1. 为什么JavaScript中0.1+0.2不等于0.3？参看浮点数计算的基本问题。
  2. stackoverflow: most efficient way to clone an object
  3. stackoverflow: remove duplicate items from an array
  4. stackoverflow: 浏览器类型判断
  5. stackoverflow: creating the checkbox daynamically using javascript
  6. stackoverflow: How to iterate JSON array in JavaScript

Task 3 JavaScript Advanced & Basic Web App Development

Reading

  1. JavaScript高级程序设计，第3版
  2. JavaScript: The Good Parts
  3. JavaScript: The Definitive Guide
  4. Learning Advanced JavaScript
  5. Elogquent JavaScript
  6. JavaScript Garden
  7. 数据结构与算法JavaScript描述
  8. 编写可维护的JavaScript
  9. Effective JavaScript
  10. 重新介绍JavaScript

Debug

  1. Debugging JavaScript
  2. Debugging Asynchronous JavaScript with Chrome DevTools
  3. Breakpoint Actions in JavaScript
  4. Evaluating Network Performance
  5. Enhance your javascript debugging with Cross-Browser Source Maps

JavaScript

  1. 5个经典的JavaScript面试题
  2. 鸟哥：理解JavaScript的作用域
  3. JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
  4. Understanding JavaScript Prototypes
  5. A Plain Guide to JavaScript Prototypes
  6. 详解JavaScript的函数闭包
  7. Revealing the Inner Workings of JavaScript’s ‘this’ keyword
  8. JavaScript like a Boss: Understanding Fluent APIs
  9. stackoverflow: Storing Objects in HTML5 localStorage
  10. stackoverflow: Copying array by value in JavaScript

JavaScript OOP

  1. Javascript 面向对象编程基础入门
  2. 推荐阅读：JavaScript高级程序设计，第6章，面向对象程序设计
  3. JavaScript继承详解
  4. JavaScript继承方式详解
  5. JavaScript探秘：构造函数 Constructor
  6. this关键字详解
  7. 深入浅出JavaScript中的this关键字

Design Patterns

  1. 常用的JavaScript设计模式
  2. JavaScript设计模式深入分析
  3. 图书：Learning JavaScript Design Patterns
  4. 上面这本书的中文版

HTML & CSS

  1. Using Links to Create Navigation Menus
  2. Stackoverflow: CSS3 Viewport-Percentage Length
  3. Tutorial: Horizontal lists
  4. Tutorial: Creating a modal window with HTML5 & CSS3

Documentation

  1. MDN JavaScript全部页面索引
  2. MDN JavaScript全部方法索引
  3. MDN JavaScript全部属性索引

Task 4 Mobile and Engineering

Mobile Development

  1. Book: Head First Mobile Web
  2. Mobile First Design: Why It’s Great and Why It Sucks
  3. Mobile Development Get Started
  4. 移动开发资源与技巧汇总
  5. The Mobile Web Handbook
  6. 5 Quick Ways to Make Your Site More Mobile Friendly
  7. MobileWeb 适配总结
  8. 移动前端不得不了解的html5 head 头标签
  9. 浅谈移动前端的最佳实践
  10. touch系事件
  11. 移动端真机调试终极利器-BrowserSync
  12. Webstorm: Getting started with hybrid mobile app development
  13. Browser-Sync：响应式Web开发调试利器

CSS pre-process and post-process

  1. 再谈 CSS 预处理器
  2. CSS 预处理器与 CSS 后处理器
  3. SASS Basics
  4. The Sass way

Modular

  1. 阮一峰：Javascript模块化编程（一）：模块的写法
  2. 详解JavaScript模块化开发
  3. 为什么需要AMD?
  4. 服务器端模块规范：RequireJS
  5. CMD实现:Sea.js
  6. SeaJS与RequireJS最大的区别
  7. 知乎：LABjs、RequireJS、SeaJS 哪个最好用？为什么？
  8. Youtube: RequireJS made ridiculously easy, in just 10ish minutes
  9. Understanding RequireJS for Effective JavaScript Module Loading
  10. Using RequireJS in AngularJS Applications
  11. Organizing your application using Modules (require.js)
  12. 百度EFE：玩转AMD – 写在前面
  13. 百度EFE：玩转AMD – 设计思路
  14. 百度EFE：玩转AMD – 应用实践
  15. 百度EFE：玩转AMD – Loader
  16. 百度ESL (Enterprise Standard Loader)
  17. 浏览器加载CommonJS模块的原理与实现

Front-end Engineering

  1. 前端工程与模块化框架
  2. 手机百度前端工程化之路
  3. 视频：FIS2.0全新的百度前端解决方案（范云龙）
  4. InfoQ: 对话百度前端工程师张云龙：F.I.S与前端工业化
  5. Grunt教程——初涉Grunt
  6. Gulp入门指南

Website Performance

  1. 大型网站的灵魂——性能
  2. Google: Web性能最佳实践
  3. 毫秒必争，前端网页性能最佳实践
  4. Yahoo: Best Practices for Speeding Up Your Web Site
  5. 14 Rules for Faster-Loading Web Site
  6. Video: Practical Performance Tips to Make Your HTML/JavaScript Faster
  7. 前端性能优化最佳实践
  8. CSS Sprite原理、优缺点及使用
  9. 伯乐在线：编写高效的 CSS 选择器

Performance Debug Tools

  1. Chrome developer tools
  2. Web Page Test
  3. Windows Performance Toolkit Overview

Advanced Topic

Helpers

  1. 文件精简工具：UglifyJS
  2. 构建工具：Grunt: The JavaScript Task Runner
  3. 构建工具：Gulp: the streaming build system
  4. 文档生成：jsdoc: an api documentation generator for JavaScript
  5. 代码检查：JSHint
  6. 测试框架：Jasmine
  7. Test Runner：Karma
  8. Bower：Web前端包管理工具
  9. Yeoman: 帮你快速启动新项目
  10. Travis CI：持续集成工具

JavaScript MVC Frameworks

  1. Angular.js & Angular2
  2. React.js & React Native
  3. Tutorial: AngularJS in 30 minutes
  4. AngularJS风格指南

CSS Frameworks

  1. Bootstrap 3
  2. Semantic UI
  3. Materialize：Material design
  4. Top 5 Material Design Frameworks to Use in 2015

Contact me

  1. My profile: http://wwsun.me/about.html
  2. My Github: https://github.com/wwsun
  3. My Weibo: http://weibo.com/234170023

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

  • 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流