微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

马上毕业了,想做前端,该怎么准备呢?

2016-12-09 20:13 前端大全

对于一些没有编程经验的人来说,一开始就学习 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 和其它一些问题。这可能会让人沮丧,但你要尽量保持冷静,并系统地去思考。记住实践是解决问题的最佳方法。

我们采集的是石头,但是必须时刻展望未来的大教堂。

持续做一些小改进,慢慢地你就会惊奇地发现你的经验得到了怎么样的发展,你的技能得到了怎样的提升。

当然,如果你迫切地需要提高自己,也可以考虑去找一些在线培训,快速入门。

--- 以下是广告 ---

3个月,从0基础小白到耀眼的 Web 全栈工程师。

你将学着搭建一个完整的网站,循序渐进地学会 Web 全栈所需要的核心知识和技能。


点击「阅读原文」了解详情。

 
前端大全 更多文章 新入行程序员最喜欢的 6 种岗位:前端排第二 Firebug 宣布停止开发更新 拿好这段代码,愿你求职路上不再迷茫 Node.js + Web Socket 打造即时聊天程序嗨聊(上) 2016:编写高性能的 JavaScript
猜您喜欢 【R每日一贴】R画散点图? 声动|谢谢你出现在我的青春里,我最深爱的科比 “玩累了,就找个老实的IT男嫁了” 成为顶尖高手!高效程序员的7个共同特征 腾讯牛逼、网易逆袭、盛大喘息,其他还有没有戏?年末手游市场变局观察