零基础开始学 Web 前端开发，有什么建议吗？

该学哪一些内容？先后顺序是什么样子？有推荐的书吗？

WEB前端看似简单，其实不然，要学的知识点很多很杂，对于零基础学习前端的小伙伴来说，一份详细的前端学习知识点大纲尤为重要。
下面，话不多说，直接上干货（全网最全，没有之一）。
PS：文末有福利（全阶段视频教程+学习资料），有需要的小伙伴可以找小编免费领，整理不宜，如果对您的学习有所帮助，记得点赞哦！
web前端学习路线（包含各阶段的详细知识点），适合零基础的小伙伴。
第一阶段：前端页面重构

本阶段主要针对零基础的小伙伴，专业零基础入门，了解互联网，了解Web相关技术。学习完本阶段的内容后可具备以下技能：

• 具备静态网站设计与制作能力，可实现PC端与移动端布局；
  
• 了解开发工具的使用，浏览器调试控制台的使用等；
  
• 会使用切图软件进行页面制作，如PhotoShop的使用；
  
• 对HTML5新特性以及CSS3新特性有深入理解与掌握；
  
• 可实现响应式布局，一套代码适配PC端、移动端、平板设备等。
  

本阶段具体学习目录及详细知识点如下：
PC端网站布局

知识点：◆ HTML基础，CSS基础，CSS核心属性 ◆ CSS样式层叠，继承，盒模型 ◆ 容器，溢出及元素 ◆ 浏览器兼容与宽高自适应 ◆ 定位，锚点与透明 ◆ 图片整合 ◆ 表格，CSS属性与滤镜"

HTML5+CSS3基础

知识点：◆ HTML5新增的元素与属性 ◆ 表单域增强元素 ◆ CSS3选择器 ◆ 文字字体相关样式 ◆ CSS3位移与变形处理 ◆ CSS3 2D转换与过度动画 ◆ CSS3 3D转换与关键帧动画 ◆ 弹性盒模型 ◆ 媒体查询 ◆ 响应式设计

WebApp页面布局

知识点：◆ 移动端页面设计规范 ◆ 移动端切图 ◆ 流式布局（100%布局） ◆ 等比缩放布局（rem布局） ◆ 响应式布局 ◆ viewport ◆ rem/vw的使用 ◆ flexbox详解 ◆ 移动端reset, 1px border, 高清图片 ◆ 淘宝移动端页面适配方案

第二阶段：前后端网页交互

本阶段课程主要针对零基础进阶的内容，学习完本阶段的内容可具备以下技能：

• 能够独立完成常见的网页特效效果，如标签页、弹窗、轮播图等。
  
• 具备编程思维能力，可独立思考逻辑，会利用算法及数据结构进行开发训练。
  
• 了解前后端分工，前端与后端如何进行配合，完成- -个高质量的项目。
  
• 掌握jQuery库的基本使用，并能了解其实现的原理，并对jQuery插件进行使用。
  
• 掌握ES6到ES10提供的新语法及新特性，深入理解promise与模块化编程，可手写promise规范实现。
  
• 掌握前端工程化工具，如git、gulp、 webpack 等，搭建项目及开发项目。
  

本阶段具体学习目录及详细知识点如下：
原生JavaScript交互功能开发

知识点：◆ 基本语法 ◆ 循环语句 ◆ 函数与数组 ◆ String与Date ◆ BOM与DOM ◆ 事件 ◆ 拖拽效果 ◆ cookie存储 ◆ 正则表达式 ◆ Ajax ◆ 面向对象基础 ◆ 运动与游戏开发

面向对象进阶与ES5/ES6/ES7应用

知识点：◆ Promise ◆ 设计模式（观察者模式等） ◆ 原型链 ◆ 构造函数 ◆ 执行上下文栈与执行上下文 ◆ 变量对象与活动对象 ◆ 作用域链 ◆ 闭包 ◆ this ◆ ES5 ◆ ES6 ◆ ES7

JavaScript工具库自主研发

知识点：◆ DOM库 ◆ 事件库 ◆ AJAX库 ◆ 原型和继承库 ◆ MVVM核心库 ◆ 基于SPA的路由库

jQuery经典交互特效开发

知识点：◆ 时间轴特效 ◆ tab页面切换效果 ◆ 网页定位导航特效 ◆ 滑动门特效 ◆ 焦点图轮播特效 ◆ 导航条菜单效果 ◆ 瀑布流特效 ◆ 弹出层效果 ◆ 倒计时效果 ◆ 抽奖效果

PHP+MySQL后端基础

知识点：◆ Apache ◆ PHP ◆ MySQL ◆ HTTP(s)协议详解 ◆ Ajax进阶、跨域与Defered ◆ Apache与Nginx 环境搭建与配置 ◆ 接口的定义 ◆ Mock数据 ◆ Restful ◆ 前后端联调 ◆ 前端安全(XSS,CSRF,JSON注入)

前端工程化与模块化应用

知识点：◆ Gulp ◆ Webpack ◆ NPM ◆ Linux命令 ◆ Git/SVN ◆ CommonJS ◆ AMD ◆ CMD ◆ ES6模块化

PC端全栈开发项目

知识点：◆ 大首页、列表页与详情页 ◆ 展示与交互特效 ◆ 搜索 ◆ 登录与注册 ◆ 购物车 ◆ jQueryUI 与 jQuery EasyUI ◆ Bootstrap(ACE) ◆ Highcharts/Echarts ◆ ArtTemplate ◆ velocity ◆ smarty ◆ 云平台系统前端 ◆ Apache+PHP+MySQL服务器搭建

第三阶段：​Node.js+前端框架

本阶段的课程主要针对有基础小伙伴的高级进阶内容，学习完本阶段的知识可以具备以下技能：

• 能够独立完成前后台相关功能，胜任H5全栈开发工程师职位。
  
• 了解工程化、自动编译、脚手架等内容，可实现-个小型开发工具。
  
• 掌握企业流行框架，可快速. 上手并能配合后端人员进行高效开发。
  
• 掌握移动Web App的开发模式，能够独立架构项目系统。
  
• 掌握小程序云开发，了解serverless无服务器技术及多端适配方案。
  
• 掌握React-native和Flutter进行混合开发的方式，并能独立搭建混合应用APP。
  
• 掌握桌面应用及可视化大数据，实现复杂数据展示类项目。
  

本阶段具体学习目录及详细知识点如下：
Node.js后端开发

一、Node.js介绍
◆ 开发环境搭建M ◆ 模块与包管理工具M ◆ CommonJS模块M ◆ URL网址解析M ◆ QueryString参数处理M ◆ HTTP模块M ◆ HTTP小爬虫M ◆ request方法M ◆ 事件 events模块M ◆ 文件 fs模块M ◆ Stream 流模块M ◆ 原生路由与参数接收M ◆ 读取图片文件M ◆ npm scriptsM ◆ Yarn 与 PM2M

二、MongoDB
◆ MongoDB介绍与环境搭建 ◆ 数据库常用命令 ◆ Collection聚集集合 ◆ document文档操作 ◆ 聚集集合查询 ◆ NodeJS连接MongoDB

三、GraphGL
◆ GraphQL初探:从REST到GraphQL ◆ GraphGL安装 ◆ 准备数据源 ◆ 搭建GraphQL服务器 ◆ 数据查询

四、Express
◆ express 介绍 ◆ 安装和创建基于Express的项目 ◆ Express 4.1x 初始化项目详解 ◆ 路由简介 ◆ 模板引擎EJS ◆ 模板引擎Pug（Jade）

五、Koa2
◆ Koa2开始 ◆ 路由 ◆ 请求数据获取 ◆ 静态资源加载 ◆ cookie/session ◆ 模板引擎 ◆ 文件上传 ◆ 数据库MySQL ◆ JSONP实现 ◆ 测试与debug

六、测试框架mocha
◆ 搭建框架 ◆ 断言assert ◆ 项目测试 ◆ 运行多个测试

七、socket 即时通信项目
◆ Socket简介和通讯流程 ◆ 基于net模块实现socket ◆ WebSocket ◆ http://Socket.io

八、Node.js高级全栈项目
课程内容：◆ 基于M站+Node.js+MongoDB高级全栈项目开发

Vue.js前端框架
Vue.js开发基础

知识点：◆ WebApp开发基础(Webstorage,移动端事件,UI组件, Zepto, IScroll, Swiper) ◆ MVVM模式 ◆ 前端组件化 ◆ 单文件组件 ◆ 组件间传值 ◆ Vue实例 ◆ E19Vue实例生命周期 ◆ Vue的模版语法 ◆ 计算属性,方法与侦听器 ◆ 计算属性的 getter 和 setter ◆ Vue中的样式绑定 ◆ Vue中的条件渲染 ◆ Vue中的列表渲染 ◆ Vue中的set方法 ◆ 父子组件间的数据传递 ◆ 组件参数校验与非 props 特性 ◆ 给组件绑定原生事件 ◆ 非父子组件间的传值 ◆ 在Vue中使用插槽 ◆ 作用域插槽 ◆ 动态组件与 v-once 指令 ◆ Vue动画

应用Vue.js开发WebApp项目

知识点：◆ 环境配置 ◆ 项目代码介绍 ◆ 单文件组件与Vue中的路由 ◆ 单页应用VS多页应用 ◆ Mint UI ◆ Element UI ◆ 项目的联调，测试与发布上线

React前端框架
React 开发基础

知识点：◆ React简介 ◆ React开发环境准备 ◆ React中的组件 ◆ JSX语法 ◆ 拆分组件与组件之间的传值 ◆ React developer tools 安装及使用 ◆ PropTypes 与 DefaultProps 的应用 ◆ props，state 与 render 函数的关系 ◆ 深入了解React虚拟DOM ◆ 虚拟 DOM 中的 Diff 算法 ◆ React 中 ref 的使用 ◆ React的生命周期函数及使用场景 ◆ 使用Charles实现本地数据mock ◆ React 中实现 CSS 动画效果 ◆ react-transition-group 实现动画 ◆ Redux 概念简述和工作流程 ◆ Action 和 Reducer 的编写 ◆ ActionTypes 的拆分 ◆ 使用 actionCreator 统一创建 action ◆ UI组件和、容器组件及无状态组件 ◆ 使用Redux-thunk 中间件实现ajax数据请求 ◆ Redux-saga 中间件使用 ◆ React-redux 中间件使用

应用React开发WebApp项目

知识点：◆ Ant Design组件库 ◆ React Router 4 路由 ◆ 项目组件编写 ◆ 使用 Immutable.js 来管理store中的数据 ◆ 项目的联调、测试与发布上线

混合开发(Hybrid,RN)
微信公众号开发

知识点：◆ 微信公众号 ◆ 订阅号的基本功能 ◆ 使用百度BAE实现代码的快速上线 ◆ 使用Git完成线上代码部署 ◆ 公众号开发权限及功能接入 ◆ 微信JSSDK接口API ◆ 微信场景项目开发与接入

各类混合应用开发

课程内容：◆ 自主原生Navtive Hybrid(iOS、Android) ◆ 第三方Hybrid框架Cordova/Phone gap ◆ 第三方Hybrid框架MUI + HTML5

阿里钉钉企业E应用（支付宝小程序）

课程内容：◆ E应用功开发入门 ◆ E应用开发流程 ◆ E应用开发基础 ◆ E应用开发实战

小程序开发
微信小程序开发

知识点：◆ 微信小程序初探 ◆ 小程序入门必学 ◆ 小程序组件体验 ◆ 小程序大功能 ◆ 项目实战带你征服小程序

多端小程序开发

知识点：◆ 支付宝小程序 ◆ 百度小程序 ◆ 字节跳动小程序

原生APP开发
React Native

知识点：◆ React Native初探 ◆ React Native 项目导航 ◆ React Native 项目文本框 ◆ React Native 项目滚动分页 ◆ React Native 其他组件

Flutter开发

知识点：◆ 开发准备 ◆ 快速起步 ◆ 界面结构 ◆ 基础部件 ◆ 布局 ◆ 视图 ◆ Sliver ◆ 路由 ◆ 表单 ◆ 按钮 ◆ 输入 ◆ 对话框 ◆ 状态管理 ◆ 网络请求 ◆ 动画 ◆ 测试、发布与部署

Angular前端框架

知识点：◆ TypeScript 基础与进阶 ◆ 开发环境配置 ◆ Hello World ◆ 架构、模块与组件 ◆ 模板 ◆ 元数据、数据绑定与数据显示 ◆ 表单 ◆ 服务与指令 ◆ 依赖注入 ◆ 路由 ◆ Ionic 3 框架

大数据可视化

知识点：◆ 数据可视化基础◆ Echars、Hignchars◆ D3.js 入门◆ D3.js 进阶◆ D3.js 选择集与数据◆ D3.js 高级应用◆ D3.js 应用工具：NVD3、n3-charts

以上就是web前端系统的学习线路了，配套的视频教程可以看小编的这篇文章。
万能传送门：
2020全新零基础WEB前端视频教程集合学习完这些，就可以多找项目练手，积累项目经验了，有了这些找工作可以说手到擒来，找不到练手项目的可以看小编前些天发的前端项目集合的文章。
万能传送门：
前端怎么才能找到项目做？WEB前端零基础入门，大致的学习思路就是这样，希望对有需要的小伙伴有所帮助，有问题的小伙伴可以随时来扰，小编很乐意与大家探讨交流！

PS：收藏等于白Piao，点赞才是真爱！

谢邀，回答这个问题我不会给你讲一些不切实际的定义或者前端历史，或者一些你看不懂听不懂的玄学，我之前做讲师的第一准则是：好好说话，说学生能听懂能有点儿收获的话。下面我来说下怎么零基础学习web前端。
1.先说一下学习完web前端之后能干什么
学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nwjs做电脑客户端软件：比如微信的pc版，钉钉的pc版 都是web前端来做的
2.怎么开始学习
两条路：自学或者找培训班，找培训班的话，我推荐达内和传智播客，在国内讲师质量都比较高。这块我们一点就过，我主要讲下怎么去自学。
对于自学最直接的方式就是看视频学习，可以是在线视频，比如 慕课网，麦子学院，极客学院，北风网都有从入门到精通的前端课程，这些视频都差不多，随便选一套就行，入门课程都一样，不用纠结于选哪一个。
视频找好了之后，如果你不想中途放弃，或者，浪费太多时间又没效果的话。就找找一个引路人，引路人当然是能力越强越好，找引路人的目的在于为你制定学习计划，把控学习质量，及时纠正错误的学习方向，教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心。
我之前接触和辅导过很多自学的学生，有成功的也有放弃的，放弃的那些同学基本都是输在错误的学习思路和心理迷茫期。听他们抱怨说：没有人去指导他们，每天学完就学完了，第二天接着学，但是东西太乱都串不起来，也都不知道是干嘛用的，尤其是js部分，这种问题完全可以把一个人摧毁！所以 我一直对我的学生强调：有问题一定要去问，去解决，千万不要不懂装懂，弄明白了再往下走，人的心理是很脆弱的，一旦倒了可能就再也站不起来了。敬告各位新入行的同学，除非你之前有过编程经验，不然就找个引路人指导你。
3.列一个学习大纲
01.环境搭建
前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。初学者建议sublime 也不要装插件，没有语法提示，可以打基础
02.html基础
带你去认识html，让你学习去运行html，等浏览器上面打开你的页面的时候，你会有很强的成就感，然后开始学习html的基础标签
03.css基础
html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接按照自己所想开写，这是你的第一个项目
04，js基础
js是页面的逻辑，作为一个web前端工程师，js是很核心的部分，也是很难的部分。js的学习之后放长一些，尤其是前一周，要让自己去熟悉那种语法环境，培养自己的开发思路，而且有一点就是学完一个星期的知识之后，及时和你的指引人沟通，看卡自己的理解是否有误，还有就是学习思路是否有问题，他会给你指出那些东西需要多学习，哪些不常用，还有就是给你点一下你学的这些在项目中会是怎么去应用，理论联系实际是最好的学习方式。
05.纯js操作dom和jquery
这阶段要知道怎么去用js来更改页面的元素，怎么去写dom事件，经过一番联系后，再引入jquery，不要本末倒置，有个同学学完jquery之后说发誓以后再不用原生js操作dom！然后被我狠狠骂了一顿
06，开始你的ui框架之旅
这个阶段我推荐从bootstrap开始，这个框架很经典，响应式的珊格系统被后来框架一直沿用，在我线下教学的那几年，我都会带着学生一起看bootstrap的源码，让他们学会这种设计思想，因为之后对他们太有用了，当时他们很痛苦，现在他们说起来觉得很受益，如果可以，你也要去看看源码，先学会去定制bootstrap，公司注重二次开发，定制 bootstrap正好可以练手。
07.开始深入css3
基础学完css3要提上日程，这时你会看到不一样的世界
08.深入js
这阶段你就要去解读原型链，原型替换，this指向，es6，es7的新语法，
09.学一套主流mv*框架
vue，react，angular2选一种，
我建议从vue开始，react的jsx语法不适合你入门去学习，angular2的typescript语法糖难度也比较高，vue学起来平滑些，结合vue，学一下vue-router，vuex，element ui，axios，webpack。做个项目玩一下这个全家桶
10.升级后台语言nodejs
这个不作要求，你在学vue的时候其实已经在用nodejs了，你用的npm就是nodejs的一部分，这个阶段说的是nodejs编程，比较难理解，毕竟是写服务器的东西，不过前面基础打牢固，让别人一点拨就能上手，技术不难，难在思路转换。
3.总结做项目
两个项目，
一个是侧重于css特效方面的，要求就是非常酷，帅到没朋友
第二个项目侧重逻辑处理，用来升华你的逻辑能力
这两个项目可以从网上搜几个网站来模仿，之前我的学生有做过：苹果官网，魅族官网，花瓣网，网易云音乐，在行等很多网站，做的也很不错。
4.面试技巧培养阶段
这个阶段要培养下公司项目的具体流程以及面试技巧的培养，面试回答思路，如果有同学想多了解这方面，我很乐意给大家讲解
整个思路就是这样，希望对大家有用，有问题可以随时私信我，我很愿意为大家辅导
基础如何，请点击:
吴战磊：20道面试题测下你前端基础如何

要成为一个优秀的前端工程师，需要什么技能和学习？答案：练习

在逛知乎、SegmentFault 又或者是相似的技术社区，我们总会看到类似的问题。新手总会关注于，需要怎样的技能，怎么才能入门？有一点经验的程序员则是，需要练习什么？如若一个程序员已经懂得问题的关键是，编程需要大量的练习。那么，我想这个程序员已经入了这个行道了。
在我成为所谓的『前端工程师』之前，我没有想到会变成这样的结果。
前端项目的练习过程

年少的时候，想要做的是 Kernel Hacker。大学时，我做点前端相关的兼职，顺便赚钱点钱。再用这点钱，买点硬件做一些底层、低级的编程，带着去实验室，拿着电洛铁，高喊着：让我们来做一个毁灭世界的机器人。好在，后来我离这个行当有点远，要不这个世界可能就岌岌可危了。反而因此倒是，学会了相当多的前端知识，以及在今天看来是屠龙之术的 IE 兼容。
随后，在研究数据可视化时，我看着用 JavaScript、HTML、CSS 可以做出这么炫的效果。我就继续回到图形编程这个行当，前端的图形编程倒也简单，只需要找一个库，多加练习就可以了。练习多了，便发现，需要更多的面向对象编程经验，要不写出来的代码就跟屎一样。要是在今天，那可能就是函数式编程经验了。
玩了那么多的东西后，我便就对这些东西驾轻就熟了。而在今天看来，仍然走了相当多的弯路。当有人再问我『怎样练习才能成为一个优秀的前端工程师』时，我便想着：我应该好好的回答一下这个问题。
Output is Input
我一直很喜欢那句，Output is Input 的话，即：
即，我们输出知识的时候，便是在输入更完整的知识。因此当我练习的时候，我便会刻意地去结合使用他们，往往能达到事半功倍的效果。想尝试玩一个新的框架时，我便会用这样的逻辑去玩它：使用新框架编写一个应用，再阅读、整理相应的资料。
你若问我，为什么我会这么练习？我想那大概是，我可以更早的得到反馈。我可以更早的知道，A 框架对于使用过 B 框架的人来说有些难度，我也能轻松地指出他们的差异。甚至，如果这是一个新的项目，那么我还能用一种『不很完美的姿势』完成之。而如果只是完成这个项目，那对于我而言也没有多少 实质性的提高。
遗憾的是对于多数人来说，可能就只是完成项目这一程度，后面仍然还有好长的路要走。做一个好的前端工程师，即要做很多的项目，又要读一些书。即要会使用这个框架，又要知道他的一些基本的思想。
习惯了先输出、后输入的过程后，练习起来就很轻松了。
练习框架、技术的时机
练习，那可是相当烧时间的大事；时间，又是一种相宝贵的资源。暂不说，相当于好几年的十万小时理论。对于我们这些每天要早出晚归的工作族来说，八小时以外的时间就更小了。对于一个在校的计算机专业学生来说，也不一定能在四年里搞定。
而这时候如果又选择了一个错误的技术栈，哪怕是相当的浪费时间了。好在我们已经在那篇《学习前端只需要三个月【框架篇】》中讨论了如何选择一个合适的技术栈。此时还有一个问题是，如何在一个合适的时机练习它。
过去，习惯了将一些 Idea 放在 GitHub 上变成一个清单。也因此习惯了，将一些想要玩的框架放到了 TODO Lists 中，再慢慢地享受将他们完结的愉悦感。
当有一个新的框架出现时，看看知乎、微博、微信群里的讨论还不错，我就会将这个框架加到 Todo Lists。在一个周末，或者中午，搭建一下项目，玩一下 DEMO。
随后，这个框架就会进入评估期。评估一个框架可不是一件容易的事，要从不同的角度去了解它：社区欢迎程度、API 变化程度、Roadmap 计划、Release 情况等等。再确认一下框架是否可以适合当前的项目，可以的话，就会创建一个新的分支来玩玩，又或者直接引入项目。
如果这是一个有前景的框架，那么我就会选择一个合适的时机（有时间），创建一个开源来应用它。每个人都会有一些偏爱，这也决定了他们可能不会去玩某些框架，这倒是有些可惜了。
当我们决定去练习的时候，我们更需要一些练习的技巧。
练习的过程

练习框架、技术的技巧

练习嘛，我想就这么几步：

• 找到一个模板
  
• 边修改模板，边查阅资料，以此来完成一个应用
  
• 阅读官方文档或者代码来补漏
  
• 编写博客、文章、书籍来加强印象
  

我喜欢的就是这种输入和输出相结合的形式。一开始的时候，就应该先做一个应用。这种用意特别明显，借此可以快速地了解一个框架，就会觉得相当有成就感。随后就是去补缺补漏，以便于我们可以更好地完成应用。最后，当我们写文章去总结的时候，便会对这个框架有更基础的认识——像拥有一张清晰的思维导图，熟悉他的方方面面。
使用模板
对于多数的人而言，也包括我，决定去使用一个框架的时候，表明它已经是一个几近成熟的框架——我们可以很容易找到一些资料。依据现在框架的发展趋势，大部分的框架都会提供一个脚手架，即应用程序模拟。只需要运行这个模板，我们就可以有一个 hello,world。
如 Angular 官方提供了一个 angular-seed 的项目，它提供了一套基本的模板，可以用来快速的创建应用。而 React 也提供了一个名为 create-react-app 的工具来快速搭建环境。
遗憾的是，大部分的官方 hello,world 都不是很详细，这时候我们可以在 GitHub 上搜索 xxx starter kit 来做同样的事，如 React Starter Kit，就可以轻松地在 GitHub 上找到相就的项目，如react-slingshot
它提供了一些丰富的组合，如 React、Reactd Router、Redux、Babel、Jest、WebPack 等等的工具。现在，我们在这一步要做的事情就是运行起 hello,world。然后，我们再考虑下一步要做一些什么？
做点什么应用
拿到框架的下一个问题时，我们要去做什么，这个就相当有趣了。挑一个有难度的吧，做不了；挑一个简单的吧，觉得不能练手；还是挑一个实用的吧，比如博客。
我写过最多的应用就是与博客相关的应用了。当出现一个新的练手框架时，我总会用这个框架来把博客写一遍。于是，我的博客的后台 API 用 Node.js、Flask、Django 实现过一遍，而前台则用 Backbone、Angular 1、React 实现过一遍，而 APP 方面也使用 Ionic 1 和 React Native 实现过一遍。
对于博客而言，我们都很轻松它的功能：列表页、详情页、登录、创建博客等等。我通常只会实现上面的四个基本元素，这和大部分应用的主要模式差不多。对于前端来说，我们会练习到基本的内容：

• GET 和 POST 数据
  
• 列表页到详情页的跳转和返回
  
• 对于用户登录凭据的获取和保存
  

基本上涉及到了一个框架的大部分内容，路由、模板、API 请求、数据存储、用户授权等等。这样一来，我们就要清楚地业务逻辑了，那么剩下的是都是技术的事。
编写一个博客应用
接下来，唯一的问题是：因为对这一系列的技术栈，我们会遇到一系列的困难。当一个新手选择 React 的时候，就会遇到 JSX ES6 Babel Webpack Redux React-Router 等一系列的 React 全家桶。这时，难以下手的主要原因是，不知道这些东西都是干嘛的，也对前端单应用应用没有一个清楚的认识。
在没有基础的情况下，直接下手这些会有一定的困难：在学习新的技术栈的同时，也在学习前端应用的组成。因此：
首先，要对前端单页面应用有一个大致的了解。如对于一个前端框架来说， 它要有模板引擎、依赖管理、路由处理、控制器（模板）和状态等等，除此它还需要有构建工具、编译工具、测试框架等等。
然后，就需要了解所使用的工具对应的有什么功能。如上面说到的例子里，JSX 相当于是模板引擎、WebPack 是打包工具 / 构建工具、Babel 是 ES6 语言的编译器、Redux 用来做状态管理、React-Router 用来处理路由。
最后，需要一个应用的例子来将这些内容串在一起。如当我们打开一个 Web 应用的时候，应该要有一个路由处理的工具，来将用户导向相应的页面。而这个页面会有对应的控制器和模板，路由就是来分发用户的请求。当页面数据数据或者用户操作时，页面上的数据状态就会发生变化，这时就需要状态管理工具来管理。
幸运的是，我们已经有了一个 starter kit，在这个 starter kit 中会为我们做好相应的配置。因此，我们可以直接阅读代码来了解它们的关系，逐一的了解他们的功能。过程有点痛苦，结局便是大丰收。
这一个过程里，还有一个难点是，我们缺少数据。这时候，我们可以用 moco、MockServer 等工具来做一个假的服务器，以向我们的应用提供数据。
输入和总结
编写应用的时候，我们将一个又一个的内容放到了脑子里，然后发现自己混乱了。需要重新理清他们的关系，这时候可以选择写博客、画思维导图、做分享的形式来整理。
当我们向别人讲述一个东西的时候，就不得不压迫自己对此有更深入的了解，要不只能丢脸。这时候，我们又在重新学习这些内容，并且比以往的任何时间更加深入。这也就是为什么我喜欢写作的原因，它能让我的思路更加清晰。原本只是散落在房间里的书籍，现在整整齐齐的排列在了书架上。在需要的时候，我就可以找到想要的内容。而由于博客的存在，我可以在未来轻松地了解这个框架，别人需要的时候，也可以直接分享相应的经验。
等闲了，逛逛官方的文档，还会发现：原来这个地方可以这么用；原来某个地方还可以做得更好。
其它

假如，我们将前端和后台所要求的能力做一些对比，我们会发现前端在高级领域比后台简单一些。我的意思是，前端要在编程方面遇到瓶颈更快，并且需要从其他方面来补充，如后台，又或者是用户体验设计。
关于练手项目
在那一篇《关于编程，你的练习是不是有效的》中，我提到，提升技能的项目会有四种：

• 纯兴趣驱动的项目。即我的Idea列表上的一个个酷炫的项目，先满足自己再说。
  
• 理论驱动的项目。这一类的项目会比较少，因为我们需要牵强地驱动出这样的项目，然后以理论的方式驱动它。
  
• 兴趣结合理论型。有一个长长的Idea列表，难免有些时间会和将要学习的理论有很大的交集。这种的练习效果是最好的。
  
• 整合成文章、电子书。这一步主要是为了分享、巩固知识点、讨论。
  

以下这个答案可能和问题无关，但是能希望能帮到0基础的同学
之前参加Rails Girls时写的，旨在帮助想学做网站的同学们入门。
原文：
http://www.douban.com/note/512945304/，欢迎建议
====================================
0基础怎样开始学习做网站？
目标读者：完全0基础的人，Rails Girls，想了解技术的同学，产品新人

大多数教学, 都太有条理了。先讲概念, HTML是什么，CSS是什么，HTTP请求是什么....但是一次性听到这么多陌生的概念，很容易晕的。过于抽象了，所以试着写一篇以例子为导向，而不是以概念为导向的介绍，来帮助大家入门Ruby on Rails

Ruby on Rails是做什么的？做网站的，你知道什么是网站（淘宝，知乎..），Rails能做这些，就行了

1. 网站->网页->按钮
我们要做的是什么？是网站，那么就直接以知乎为例好了



这样一个网站，是怎么和“代码”，Rails联系起来的呢?
这个太复杂了，我们不如只看他的首页（上图）
就拿这个页面来说，他是有3部分构成的，HTML,CSS,JS。不过这样说，依然没有什么用
我们只拿出其中的一个按钮，来解释这个概念



我应该怎么来写代码，来实现这个按钮？
这个时候，就要用到HTML了，代码如此：

< button class="sign-button submit" type="submit">注册知乎</button>

写好以后，生成的就是按钮了（如图）



"靠，可是这也差得太远了吧？这两个怎么能是一个东西呢！！"，你可能会想
但是他的功能，是不是都是一样的呢？（就是点击）
这个时候，就用到CSS了。（不要在意代码具体什么意思，知道这是CSS就行了）



（至于JS，可以以后再说）
上面想说的就是，我们看到的网页，都是用HTML,CSS,JS写的：HTML来说明这个内容是什么，CSS来让这个内容变好看（How it looks）。这里说的是按钮，其实，网页上的所有这些文字，标题等等都是这样，都是HTML+CSS+JS写的，如下图的头像，链接等等



再举个例子，上面的指向某个问题的链接
纯粹的HTML，以及加上CSS来改变他的样子之后





小结一下，上面介绍了什么是HTML,CSS,(JS)
[如果有任何问题，可以直接提问]

2. 难道要重复写很多遍吗？
再看知乎里面的“发现”页面，一条一条的“回答”
这些“回答“的结构，都是相似的。那是不是，我们的代码就要这样一条一条的写下去呢...？



显然，这太麻烦了，所以要用到循环，也就是用编程语言（e.g. Ruby）来做 (e.g for loop )
或者，想根据用户登录/未登录的状态，来调整页面的内容





这里，知乎对于未登录的用户，会有登录的按钮；登录的用户，则显示消息，头像等等。这就用到了编程的东西（if else判断）
[if else, for loop，这些应该还能理解吧？]

3. 怎么实现注册功能？
上面，我们讲到了看到的网站是如何由代码构成的

不过，写到这里，你可能还在想，这不拖拖拽拽就行了吗？e.g. Dreamwaver, front page等软件

确实如此。

不过，我们怎么实现“用户注册”的功能呢？

这个时候，就不仅仅是”循环“、”判断“了。显然，这时候，要涉及到更多更为复杂的逻辑。这个时候，就要用到Rails了，我们要用他来实现——注册、登录的功能，发帖的功能，提问的功能，点赞的功能等等等。

所以，Rails（PHP, Python等等）就是用来实现这些“功能的”。这里不再举例子了，因为太复杂，只提几个问题，让大家思考一下，拿论坛发帖子来说：

我们怎么实现“创建”一个帖子的功能？又怎么“修改”，怎么“删除”？

这下，应该能感到这些功能的复杂了。不过，现在依然不用深究，只要知道Rails是用来处理这些复杂逻辑的东西，就行了（此外，我们有这么多用户的数据，帖子的数据，点赞的数据，就又牵扯到数据库了）。

4.  小结
到这里，我们主要介绍了：
(1) 什么是HTML + CSS +JS （显示网页）
(2) 什么是Ruby on Rails （复杂的逻辑功能）
前面的，就是我们所说的前端，后者，就是常称的后端

如果你下次还有疑问的话，不妨顺着这个思路理一理：
(1) “网页是由什么构成的？”
(2) “怎么实现注册的过程？”
(3) “网站上有这么多数据，怎么保存？”

“可是我想要设计一个很漂亮的网站诶.....”，那个是设计师做的

对于一个网页来说，设计师决定这个按钮的颜色，阴影，怎样才好看
而前端工程师（HTML CSS JS），来负责用代码实现这些东西（写具体的代码）
比如设计师说，希望这个按钮是蓝色的，那么工程师就根据这个要求写具体的代码：

1. button {color:blue}

复制代码

对于小的创业团队来说，可能最开始就直接写代码做完了，不会有专职的设计师

5. 那么，我接下来该怎么学习Rails呢？
好了，写到这里，应该基本了解什么是Rails了（其实主要介绍的是前端），接下来的问题可能就是：那我应该怎么学会Rails，来自己做网站呢？
不过我先写这么多了，如果有足够的人需要的话，再继续写吧

注：原标题为Rails in Plain Language，即用浅显的语言，告诉准备学习Rails的同学们，Rails到底是什么。不过本文实际上并没有谈到Rails是什么，更多的写的是前端。因为大多数0基础的同学，并不理解这些，所以先了解一下，我觉得会有帮助。

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！
它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、http://ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。
前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
HTML 甚至不是一门语言，他仅仅是简单的标记语言！
CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。
Javascript 的基础部分相对来说不难，入手还算快。
也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。
另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。
总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；
各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；
浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。
为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。
随着手持设备的迅猛发展，带动了 HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！
现在市场很需要优秀的、高级的前端工程师。
一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！
吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。
实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。
事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！
Javascript 的复杂度不逊色于 Perl 和 Python！
如何学习前端知识？
我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。
学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。
还需要 深刻了解 浏览器宿主 下 的 Javascript 的行为、特性。
因为历史原因，Javascript一直不被重视，有点像被收养的一般！ 所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。
作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。
那么一名优秀的、甚至卓越的 前端开发工程师的具备什么条件？
首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。
对于一个高手来说，新技术不过是就技术的延伸。
再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。
1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。
2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。
3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
Yahoo 公司 ，YUI 的开发工程师 Nicholas C. Zakas 认为：
前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。
————————————
关于书籍：
HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。
Javascript 的书籍 推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。
这里推荐几本 Javascript 书籍：
初级读物：
《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。
《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
中级读物：
《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。
高级读物：
《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。
要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。 这些都要深入研究！
万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。
人们常说：不想当裁缝的司机，不是个好厨师。
如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、http://ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。
在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。