前端小白该如何学习?以及掌握哪些能力才能从事前端开发工程师

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

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

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

如果你迫切的需要提升自己的能力,自己从事前端五年了

这里推荐一下我的前端学习交流群:784783012 ,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步,好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

原文地址:https://blog.51cto.com/14227711/2367979

时间: 2024-10-10 21:48:17

前端小白该如何学习?以及掌握哪些能力才能从事前端开发工程师的相关文章

前端小白之每天学习记录----php(2)数据库操作软件

数据库 存储数据的仓库(软件)(DBA:Database Administrator)数据库管理员mysqlsqlserveroracle...... 数据库软件架构 C(client)->S(server)用户<--->服务器 eg:腾讯qq, 金山杀毒软件,wps, office... B(Browser)->S(server)浏览器<-->服务器 eg:所有从浏览器打开的网站(应用) 存储数据的软件(我们用wps的表格来举例) wps           数据库

前端小白之每天学习记录----js简单的组件封装

设计模式:是解决问题的模板 关于设计模式,可以阅读汤姆大叔的博文http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 这里简单介绍两种设计模式: 1.单例模式:单例就是保证一个类只有一个实例 eg:在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var people = { name: "lxb", age: "22"

前端小白之每天学习记录----php(4)ajax

ajax技术( 异步请求 ) 局部无刷新技术: ajax技术不需要刷新页面就能得到服务器的结果, 所以增强了体验. 请求: 发送一次网络连接目的: 是为了获取服务器的数据 步骤: 第一步:要使用ajax技术, 必须要获取浏览器的ajax对象 通过浏览器内置的XMLHttpRequest 就可以得到ajax对象 第二步: 打开请求 open( 打开请求的方式, 请求的地址, true ) 第三步: 发送请求 send使用发送数据的,GET方式一般发送null, 因为get方式的数据是通过url地址

前端小白之每天学习记录----php(6)面向对象

php面向对象类: 一类共性事物的抽象 比如: eg:车子 共性:类的共性 eg:轮子.能动 对象:        类造出来的 eg:自行车, 滑板车, 小汽车, 卡车, 对象才是具体的产品,才能使用功能 1.php新建一个类,并实例化(实例化指的是用类新造一个对象): 定义方法:class 类名称 {} public: 属性修饰符: 用来控制 属性/方法 的访问权限 实例化对象:对象名 = new 类名(); <?php /* 定义一个类 class 类名称 { } 类是由n个属性和方法组成的

前端小白之每天学习记录----php(7)session与cookie

服务器端的会话技术(通讯协议) 坐地铁: 深圳通 拿手机刷 cookie( 保存在 客户端的浏览器里面的数据 ) session( 保存在 web服务器里面的数据 ) 如何使用cookie? 1.设置/注销cookie(新建cookie.php) <?php /* array( 'user' => 'ghostwu' ) */ // function setCookie(c_name,value,expiredays) // 变量名,值,过期天数 setcookie( "user&q

前端小白之每天学习记录----angula2--(1)

1.1 Angular的发展历史  1.1.1 angular起源 GetAngular ====>by Misko Hevery and Adam Abrons 开发效率高 AnguarJS 1.1.2 迭代之路 12年6月 AngularJS 1 ===>双向绑定.依赖注入.指令 AngularJS 1.3.x====>推出单次绑定语法 放弃ie8浏览器支持 AngularJS 1.5.x =====>增加了类似组件的书写体验 1.1.3 AngularJS 1.x困境 性能问

前端小白之每天学习记录----简单的原生js路由

路由: 根据不同的url 显示 不同的内容方法:hash(锚链接)实现路由history对象 1.首先要了解什么是hash,在这里你可以认为hash就是网址后面加上的 #/xxx 当<a>标签被点击时 <a href="#/html">ches</a>会在原网址后面加上<a>里面herf的内容,当该内容改变时,会产生一个事件 onhashchange 话不多说,直接上代码: <!DOCTYPE html> <html l

前端小白webpack学习(一)

俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档,先了解一下webpack的几个概念.我是中英文文档搀着看的,一些小地方中文文档里没写,英文文档里都给了小提示.(下面的概念是我自己翻译总计的,略渣) concepts At its core, webpack is a static module bundler for modern JavaScr

2020年小白学习web前端应该知道的学习路线

2020年是充满机遇与挑战的一年,这一年注定不平凡.随着5G商用.传统产业数字化转型加快,我们完全可以想象到互联网行业即将迎来自己的“高光时刻”,因此,现在学习web前端正当时. 那么,对于零基础小白而言,如何才能快速学习web前端呢?下面,小编就为大家分享web前端学习路线. 很多对于web前端工程师并不了解,先给大家介绍一下什么是web前端开发工程师.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程