2018年web前端学习路线与前端书籍学习

什么是web前端?

在以前,通俗的讲是网页制作,在现在,哼哼,

那么如果高效优雅的学习web呢?

注:以下纯属个人观点,如果不当请指出

第一阶段、html(5)+css(3)

Html和css是基础中的基础,但对于很多html标签和css属性是平常开发中很难用到的,如果系统的学真的不知道学到猴年马月,所以学会一些常用的就好了,这些基础就不用买书了。推荐跟着慕课网在线敲一下代码,它那里讲的都是一些常用的东西

第二阶段、Javascript Dom

在这个阶段,你可以学会怎么用js写一些网页特效啊、交互啊之类的。注:这是js里面最简单最低级的功能,并不是学会了写特效就学会了js。

推荐书籍:《Javascript DOM 编程艺术》

web前端学习路线与书籍推荐

web前端/HTML5/javscript技术学习群:733581373

第三阶段、Jquery

什么是jquery?Jquery是一个js的库。

以前有朋友问我,为什么有jquery还要学js,这里大家要搞清楚,jq只是一个库,它把一些常用的繁琐的js方法用自己的方式封装好,便于我们使用,它强大的地方在浏览器兼容,既然提高了兼容性,那么内部肯定有繁琐的条件判断,所以jq的性能会比较偏低。

jq的插件有很多,可以实现很多效果。

所以jquery也是我们学习的基础之一。

推荐书籍《锋利的jquery》

web前端学习路线与书籍推荐

第四阶段、一个UI-库(bootstrap or other)

既然javascript有库(jquery),那么css呢?

没错,一般css的库叫做ui库,或者叫做css框架,比如bootstrap,以下简称bs,我们学习bs的目的是什么?

1.学习优雅的css命名规范

2.学习什么是可复用的web组件,为什么要复用这些组件

3.提高开发效率

Bootstrap中文文档http://v3.bootcss.com/

学完这些,你也应该入门前端了。学完以上四个部分你应该会:

1) 高度还原psd设计稿;(简称切图)

2) 会熟练使用浏览器调试工具

3) 看的懂别人写的网页,会修修改改

如果这些你都会,4k+月薪没问题

进阶(以下知识点不分前后)

移动端页面制作

会写pc端页面还远远不够,我们还得会写移动端页面:

稍微复杂点的flex布局、响应式布局和移动端基础知识:

很简单的rem布局:

混合APP开发

什么是混合app开发?

原生的android、ios应用我们称之为nativeApp。

运行在网页的app我们称之为webapp,比如淘宝触屏版。

混合App其实就是原生态App与Web App的结合,简单说混合App拥有原生App的外壳,内部的展现都是通过Web App的H5技术实现,在通俗点就是可以用html5技术写一个可以安装在手机上的应用,这个应用可以扩展一些js功能,比如访问手机硬件等等。

Javascript高级部分

我们之前说过js远不是写写特效那么简单,这里我们学习:

a.Ajax

什么是ajax?

Ajax就是前端与后台交互,实现数据获取、异步请求等等。

这方面知识百度很多

b.Canvas

什么是canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,可以实现很多炫酷的效果,有兴趣的同学可以学一学

c.H5新特性

离线储存、视频、音频。。。等等

d.Js面向对象与原型

这方面内容很重要,得好好学一学。了解js的原型机制。

推荐书籍《jsvascript面向对象编程》《你不知道的javascript》

web前端学习路线与书籍推荐

web前端学习路线与书籍推荐

e.Js设计模式

如果想深学,可以看一看,推荐书籍《javascript 设计模式与开发实践》

Nodejs与npm

什么是nodejs?

首先,nodejs是一门后台语言,对,后台语言!在node上,我们可以用js语言进行后台的开发。相比较php,node的优点是非阻塞IO处理,采用事件驱动的异步编程,对前端开发人员很友好,做前端的很容易上手

什么是npm?

Npm是nodejs里的一个包管理器,首先得理解模块化,类似java的package。

这些刚开始可以不必深学,但是得知道是干啥的:

Nodejs中文网:http://nodejs.cn/

ECMAScript2015

ECMAScript2015,也称es6,下一代javascript语言,虽说是下一代,但是我已经用了好一阵子了。^-^

ES6加了很多js新特性,比如解构赋值,promise对象,模块,块作用域等等等等。。。

一般现有浏览器对es6还不是全面支持,但是可以通过一些预编译,编译成es5语法格式,让浏览器支持它。

阮一峰--《ECMAScript6入门》:http://es6.ruanyifeng.com

前端自动化

又是nodejs这个家伙,nodejs不仅将前端带到了后端,也在前端掀起了自动化的浪潮。

为什么要自动化。电脑能完成的为什么要手动完成,可以实现:

  1. 图片无损压缩

  2. Sass,less等css预编译的编译与压缩

  3. Js文件压缩合并

  4. 自动检测文件变化,开发时网页自动刷新

  5. 对各个模块的管理

  6. ......

常见的自动化工具有grunt,glup,还有后起只秀webpack。

这里我强烈推荐学习webpack,学成之后你会真正感受到什么是酸爽。

前端MVC框架

重头戏来了,会一个mvc框架,是现在前端招聘高级技术人员的基本条件。

为什么我要把这个放在后面,因为学起来并不是很难,繁琐的是一开始的各种node配置或者文档的es6语法看不懂,所以的先了解node与es6.

现在主流的框架有angular ,react ,vue。

Angular和react的社区背景很庞大,一个是谷歌,一个是facebook。

而我更佩服的是vue,vuejs的作者是中国人,名叫尤雨溪,从他的个人项目,到github三万+star。附上尤大美照一张

web前端学习路线与书籍推荐

简直提高了程序员的平均颜值

相比于ng和react,vue更加轻量,更易于学习。当然每个框架都有自己的优点和缺点,具体怎么学习,自己选择吧。

Github 和 git

如果你是学了几年计算机专业的学生,连github都不知道的话,那么我真的不知道你整天在看些啥。

Github是最大的开源代码托管平台,你可以在github上查看一些开源项目,你可以给一个项目贡献自己的代码(当然得符合开发规范),你也可以将自己的代码开源供他人使用。

Git是一个分布式的版本控制系统,相比于svn,git可以在离线的状态下在本地commit做一个版本,当有网的时候在一并push到仓库。

关于git和github的内容可以自行百度

我是一名前端开发程序员,自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴。

web前端/HTML5/javscript技术学习群:733581373

 

WEB 前端开发技术

01-08

购买这个套餐,你需要知道以下事实: 1.这套课程全程由赫赫有名的Java大咖张中强老师讲解,张中强老师是哈工大应用软件专业研究生,有10年以上软件开发经验。张中强老师的《听强哥说Java》系列课程在CSDN学院点击量超过了288万。 2.这套课程已经培养出了很多年薪10万以上的开发工程师,其中有两位年薪已经达到40万,他们都是通过这个课程入Java大门的。 3.购买《听强哥说Java》任何课程,我们都是有技术服务团队随时在线解决大家学习中的问题的,这一点和其他任何老师的视频课程完全不同。购买完课程请联系老师将你加入我们的学习群。 4.如果你觉得强哥老师的课程讲的很好,服务也很到位,请在网站上给老师做个好评,让更多的同学在好课程中收益。我们对你深表感谢。 本套课程说明: 这套课程包括和HTML,CSS,Javascript,jQuery。是如何开发网页,实现网页上的一些动态效果的课程。不管是学Java,学.net,学php,学前端,学nodejs,学python,甚至是学习移动开发,这些前端技术都是必须要学的。这些前端技术的作用是通过网页的形式展现后端业务逻辑处理的结果。前端技术学起来相对来说也比较简单,有两周的时间就足够把这几个课程学精通了。 学完本课程,如果有J2SE的基础知识,后续可以学习强哥的《Java Web入门课程》,如果没有Java基础知识,需要去学习强哥的《J2SE入门第一季》。

没有更多推荐了,返回首页