Skip to content

Latest commit

 

History

History
172 lines (103 loc) · 3.6 KB

front_end_learning_path.md

File metadata and controls

172 lines (103 loc) · 3.6 KB

前端学习路线

开发工具

设计软件

  • Photoshop

目前我们网站能用到的设计类软件只有这个，主要是切图和一些基本的操作

编辑器

  • Sublime Text

最性感的编辑器，有很多强大的插件可以实现各种功能

  • WebStorm

功能强大的 IDE，适合写 HTML、CSS 和 JavaScript

  • PhpStrom

和 WebStrom 相比，增加了对 PHP 的支持

代码管理

  • Git

分布式版本控制软件，建议使用命令行工具，哪怕是 Windows 系统，下载地址

廖雪峰的 Git 教程

  • GitHub

基于 Git 的全球最大的代码托管网站，国内的 Coding.net 与其类似

Linux

  • Linux 下的一些基本操作，如文件的复制、删除等；
  • 在 Linux 下对代码的修改；
  • Linux 下软件的安装卸载、服务的运行停止等；
  • etc

测试工具

  • Chrome 开发者工具

Chrome 浏览器按下 F12 显示的工具，不多解释

  • IETester

用于测试页面在各版本 IE 浏览器下的表现

用于测试正则表达式

语言基础

HTML

  • 什么是 HTML
  • 文档类型声明
  • 元素、标签和属性
  • 注释
  • DOM

学习资料

HTML5

  • HTML5 与 HTML 的区别
  • HTML 语义化
  • canvas
  • localStorage

学习资料

CSS

  • 选择器
  • 盒子模型
  • 一些基础样式
  • Viewport

学习资料

MDN 的 CSS 入门教程 W3School 的 CSS 入门教程

CSS3

  • 更高级的选择器
  • 动画
  • 媒体查询
  • flex 布局（不知道该不该放这儿）

学习资料

W3School 的 CSS3 教程 MDN CSS3 Flex 布局教程：语法篇（阮一峰） Flex 布局教程：实例篇（阮一峰）

JavaScript

  • 基础的语法
  • DOM 操作
  • 面向对象编程
  • Ajax

学习资料

高级内容

CSS

  • 预处理器
  • 后处理器

学习资料

JavaScript

  • ECMAScript 6

  • Vue.js

  • ReactJS

  • AngularJS

学习资料

前端自动化工具

  • gulp
  • fis3
  • grunt（不推荐学习）

学习资料

前端资源加载/打包工具

  • webpack

学习资料