前端学习 路线图

roadmap

by:ksh

前言

前端要学习三个部分：HTML，CSS，JavaScript(JS).

先说一些文档手册， 在学习过程中 要通过多看文档 来了解细节 MDN文档手册 (MDN是mozilla提供开发者文档，其中的web技术文档堪称最为权威，也很细致):

还有 w3school.com.cn 和 w3schools.com 也可作为参考 PS: 这边列出的 MDN 文档是中文版的,如果能够习惯看英文文档(即使借助翻译工具)是很不错的

再开始学习之前，可以先把http://t.51cto.com/exam/list/id-103.html这套题做完，到达80分就算是已经入门了。

学习技术的核心思想: 知道XXX是什么，XXX合适运用于什么样的场景，XXX有什么优点和缺点

举个例子：

HTML 中的 a 标签 <a>

  • <a>是什么: 它是超链接标签，被<a>包裹的文字和内容，在被鼠标点击之后浏览器会打开 其href属性上设置的URL(这是简单说法,href不止可以设置URL)。
  • <a>适用于什么样的场景: 需要浏览器做 地址转跳 的场景，在什么样的场景下不适用呢。在普通文字时用<a>包裹显然不合适
  • <a>优点：在没有额外CSS和JS的情况下，实现地址转跳，:hover样式, 鼠标指针改变成 小手
  • <a>缺点：他不是block(块)元素，所以在不设置 display: block 或者 display: inline-block 时不能通过CSS设置 width 和 height

随着对某个技术细节的学习，能够对该细节回答上 上述问题 便可谓是掌握了，然后随着跟深入的学习和使用 这些问题的 答案也会变得更加深入和深刻，最终达到精通

WEB前端开发学习目标

第一阶段 入门:

  1. 知道HTML是什么， CSS是什么，怎么用。
  2. 会通过查找文档 或 搜索引擎 来学习和掌握 新的 HTML标签、HTML属性、CSS属性、CSS选择器 等
  3. 掌握JS基本语法
  4. 会使用JS做一些基本的 DOM 操作，如
    • 通过ID获取一个DOM对象并修改它的属性

第二阶段 基本开发(基本功):

  1. 掌握 DIV+CSS 的布局 (大多数 web前端开发的基础)
  2. 掌握 表单的运用，能够做 注册 登录 之类的表单，知道 GET 和 POST 方法的区别
  3. 掌握 大多数 CSS2 属性 (大多数情况下 CSS3 并非是web前端开发必要的)
  4. 掌握 JS DOM操作，包括 事件监听器(EventListener) 相关操作, 如
    • 给一个DOM对象绑定一个事件监听器用于处理事件(click,keyup,keydown)

可以尝试完成如下的页面 进行锻炼:

  1. 漂亮的注册页面
    • 能够验证各种输入是否符合条件
    • 有一个用原生 JS 实现的日期选择器（Date Picker）
  2. 一个漂亮的，有动画的相册
  3. 电商网站常见页面

PS: 在这个阶段最好都使用原生JavaScript，兼容现代浏览器即可

第三阶段 进阶:

  1. 熟练使用和理解AJAX (这个十分重要)
  2. 了解常见的 前端js库，如: jQuery, Underscore, zepto
  3. 掌握常用的 前端样式和组件库，如: Bootstrap
  4. 了解CSS 预编译工具，如: Sass, Less
  5. 了解更高级的前端框架，如: ExtJS, AngulerJS, ReactJS

可以尝试完成如下的站点 进行磨练:

HTML 和 CSS 学习

通过交互式教程学习

HTML 和 CSS 需要一起学习相辅相成才能达到 页面展现应有 的效果 HTML & CSS 可通过 https://www.codecademy.com/learn/web 进行入门学习 PS: codecademy 挂上翻墙代理访问更流畅

通过阅读文档深入学习

  1. 将 HTML 标签列表 中的每个标签都看一下，看看 标签说明、有哪些属性可以设置、各个可以设置哪些值 和 例子，了解其作用和效果
  2. 将 HTML 全局属性的属性过一遍，其中的 id, class, style 属性最为重要
  3. 可以看 MDN上 CSS入门教程(每章的 挑战 都去试试看) 或者 w3school 上的 CSS 教程 (12.布局 / CSS定位 这个章节由为重要 务必边看边自己尝试)

PS: 入门时可先跳过HTML5和CSS3相关的，以后用到再查看相关文档

学习之后可做做看 W3School 的小测验 HTML测验 CSS测验

书籍

视频

博客

技术点目标

HTML:

  1. HTML文件基本结构
  2. 了解各个常用标签的作用和用法
  3. 4种 css 嵌入方式
    • 行内样式
    • 文档内样式
    • 外联css文件
    • DOM属性设置
  4. 盒子模型 content padding border margin

CSS:

  1. CSS选择器
    • 标签选择器
    • id 选择器
    • 类(class) 选择器
    • 伪类选择器
    • 派生选择器/基于关系的选择器
  2. css 的优先级, 行内样式优先级最高，选择器越详细的(a.user_list) 覆盖比较 不详细的(a)
  3. 过一遍主流的css属性，知道大致有些什么，大致能做出什么效果
  4. padding & marging
  5. float 浮动是布局非常重要的一环，(主要内容浮动后的 需要填充高度)
  6. 几种定位方式position的区别 和 使用场景
  7. 命名规范 可以参考http://wenku.baidu.com/view/b3af252558fb770bf78a55e7.html?re=view###

JavaScript & DOM 学习

如果有C风格语言(C,C++,JAVA)基础其实理解 JS语法是比较简单的 基础语法差不太多。

交互式学习 JavaScript 基础语法

与HTML&CSS 一样 这里推荐 codecademy 来入门学习 https://www.codecademy.com/learn/javascript

文档

书籍

视频

博客

前端开发的 JavaScript 技术点:

技术点目标

  1. DOM操作
    • 访问 getElementById(id), getElementsByTagName(tagName), getElementsByClassName(className)
    • 插入 appendChild(node)
    • 移除 removeChild(node)
    • 常用属性 innerHTML parentNode childNodes attributes className
  2. Event 监听&处理 事件类型一览表 DOM Event
  3. AJAX (直接掌握 jQuery 的 $.ajax api 既可)
  4. 异步执行 (理解 AJAX请求的异步性质 和 setTimeout)
  5. 函数的四种调用方式（一般函数，对象的方法，apply，call)
  6. 闭包
  7. 作用域链
  8. 原型链 (OOP, 非必要)

浏览器 页面加载 的生命周期

  • window read/load
  • document read/load

百度前端技术学院

地址：https://github.com/baidu-ife/ife 粗略看了下，这个还是不错的，可以自己去完成其中的一些 task，如果能够在开班期间参与的话那就更不错了

参考