对于一些没有编程经验的人来说, 一开始就学习 web 前端可能会让你觉得比较困难.
因为你的能力还处在初始阶段, 你根本不知道你缺少哪方面的知识.
所以, 在正式学习之初, 你非常有必要先了解一下前端的能力模型.
前端工程师, 都需要掌握哪些能力呢?
LV1: 学会制作静态页面 (Web + Mobile)
html,HTML5:
理解如何浏览和创建网页, 基本的语法规范, 常用标签及属性, 网页之间的链接与跳转, 标签节点层级节点.
CSS:
基本语法和三种书写位置, 选择器和格式化排版, 盒模型的高级用法, 常用布局模型
LV2: 学会制作动态页面
JavaScript :
基础语法和变量, 数据类型和数据类型转换, 条件判断, 循环语句, 函数, 数组等内置对象
(有了这三个, 你基本可以写一些简单的页面了, 但是仍然需要学一些经典的库和框架.)
经典库: 比如 jQuery,YUI2,YUI3
经典框架: 比如 Bootstrap
LV3: 前后端分离, 打造 Web App
vue.js/AngularJS2/React
Node.JS, 使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域
自动化测试
其他:
熟悉 Git 与 Shell 的使用
学习路径
#1. 入门 HTML + CSS
这里推荐一本书, Head First HTML 与 CSS(第 2 版).
从原理到方法都介绍得很详细, 通俗易懂, 活泼有趣. HTML 和 CSS 入门力荐.
学完大概 1-2 个周.
2.JavaScript + jQuery
JS: 看 w3school 教程, 花 2-3 天, 但 w3school 教程有点过时, 看完只能了解个基础, 深入学习的话, 推荐看《JavaScript 权威指南》,《JavaScript 高级程序设计》. 两部都是大部头. 看完还需要在去网上找 ES6 资料学习, 推荐 ECMAScript 6 入门, 深入浅出 ES6.
jQuery 的话, 去官方文档看即可.
熟练掌握大概需要 1 个月.
3.vue.JS/Angular 2/React
Vue.JS: 查看官方中文文档大约需要 3 天左右. Vue 上手容易, 但没有其他前端框架使用基础的人只看官方文档难以理解 Vue 高级用法以及在生产环境中的运用. 目前 Vue 社区还比较小, 除官方文档外难以找到优秀资料.
4.webpack & 测试
webpack 是目前应用最广泛的前端模块管理工具, 功能强大.
测试相关的框架多且杂, 大多是社区产物, 较难系统学习.
以上的这些资源足够你学习几个月的, 但它们不会带你走得更远.
但是, 如果你已经学了这么多, 你已经有足够的能力去继续前端的学习, 直到你可以完美胜任一个前端工程师的要求.
最后留一点小的建议
你会经常地遇到 bug 和其它一些问题. 这可能会让人沮丧, 但你要尽量保持冷静, 并系统地去思考. 记住实践是解决问题的最佳方法.
我们采集的是石头, 但是必须时刻展望未来的大教堂.
持续做一些小改进, 慢慢地你就会惊奇地发现你的经验得到了怎么样的发展, 你的技能得到了怎样的提升.
一个人学习会有迷茫, 动力不足. 这里推荐一下我的前端学习交流 qun: 四八四, 七五七, 七六零, 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入学习.
来源: http://www.jianshu.com/p/c91adb2b2261