web 前端开发由网页制作演变而来, 随着 web2.0 的发展, 网页不再只是承载单一的文字和图片, 各种丰富媒体让网页的内容更加生动, 网页上软件化的交互形式为用户提供了更好的使用体验, 这些都是基于前端技术实现的.
经过了市场的沉淀, 很多前端们开始无所适从, 以前简单的技能已经无法适用前端技术的发展, 新技术新框架又不断涌现,
前端开发市场仍然有着大量的需求. 我们知道前端开发应用是很广泛的, 这些公司都有前端开发岗位(当然这只是一部分): 并且薪资也不低. 除了互联网公司, 传统公司想要连接互联网, 同样离不开前端工程师. 而随着 H5, 微信小程序, 各类 App 的发展, 对于前端的需求将一直上涨. 所以总的来说, 前端开发行业仍然有羹可分. 并且营养丰富.
任何行业都需要努力, 前端开发也不例外, 首先你必须真的想要学习, 想要改变. 你需要有一个清晰的学习路线和方向, 最好是能跟着有经验的人学习, 这样才能快速入门前端, 不走弯路.
前端开发的基础语法, 由 html+CSS+JavaScript 组成, 这是前端开发最基本的 3 个语言.
网页布局基础: HTML+CSS
HTML 就是超文本标记语言, 组成网页内容的最基本语言. 你可以直接说他是网页的骨架, 网页的图片, 文字, 视频, 音频, 程序都需要他引入到网页中体现.
光是 HTML 做网页, 只是有了内容, 当然是远远不够的. 因为只是 HTML 的话, 只能用 Table 做布局才能勉强做出个成型的网页来. 但是从 Web2.0 时代开始, 都是盒子模型布局法了, 也就是用 DIV+CSS 来实现布局了.
CSS 就是层叠样式表. 通过样式属性来对标签进行布局规范, 在不再使用 table 布局的时候, 只要 CSS 样式对网页标签进行对应的布局实现才是正确的开发方式了.
HTML(div)+CSS 布局, 是基础入门的基本步骤, 在这个阶段, 你需要学习的内容, 包括有:
1. 标签语义化, SEO
2. 页面加载的流程和原理
3. 网页结构
4. 盒子模型(W3C 盒子模型和 IE 盒子模型)
5.CSS 选择器
6.CSS 布局浮动, 定位
在刚刚开始的阶段, 大家学习的布局方式基本都是以 px 为单位的静态布局方法. 熟悉好布局方法, 先给自己一个小目标, 做一个简单的电商网页的基本结构出来, 不用特效, 不需要交互.
浏览器脚本语言: JavaScript
JavaScript 是我们学习前端开发中非常重要的一个内容, 也是一个大家经常掉坑里的难点. JavaScript 现在可以说是互联网时代使用率最高的脚本语言了, 在网页中, 所有的数据渲染, 特效的交互都需要利用 JavaScript, 来影响浏览器的显示.
JavaScript 不只是开发网页特效和渲染数据的重要内容, 在学习前端开发的后期, 大量使用算法和框架的时候, 对 JavaScript 基础的考验也是很多的.
在基础阶段, 我们学习 JavaScript 需要注意:
1. 基本关键字指令
2. 基本数据类型, 数组
3. 函数
4. 面向对象编程
5. 原型链, 闭包
- JSON
- Ajax
- DOM(文档对象模型 原生 DOM 操作)
9. 事件捕获, 冒泡, 代理
10. 常用函数方法
11.ES5,6,7
在 JavaScript 部分学习, 主要还是要去理解好交互的原理, 把原理分析清楚, 真的理解语法, 那写出多复杂的逻辑也是手到擒来.
JavaScript 经典类库 jQuery
说到学习 JavaScript, 很多小白同学肯定会很头痛他的原生写法. 每次逻辑业务都需要手动写, 也就是用一次就造一次轮子. 觉得很麻烦. 如果能简单一点就好了.
因为 JavaScript 有可以封装的特性, 所以在后面也出现了很多用 JavaScript 封装的类库, 插件. 比如说最经典的类库就是 jQuery 了.
jQuery 类库就是在类库里面封装好了很多 JavaScript 的事件方法. jQuery 通过封装, 减轻了遍历, 对象选择等等很多的问题. 把网页特效的实现变得简单化, 通过调用方法就可以了.
在学习 jQuery 的时候, 需要重点认识的有:
1.jQuery 语法和 JavaScript 原生语法的差异
2.Dom 对象和 jQuery 对象
3.jQuery 的入口函数和 JavaScript 的入口函数的差异
4.jQuery 事件的执行逻辑.
学习 jQuery, 最需要达到的效果就是能快速的完成网页的特效, 比如说轮播图, 手风琴菜单, 旋转木马, 放大镜等等这些特效. 能完成一个电商网站的布局 + 特效开发是最基本的要求了.
这些就是零基础学习必备的一些基本内容, 在入门前端开发最基本需要掌握的东西, 把基础理解好, 才能为后面的学习做更多的准备.
多终端进阶学习
除了基础的 PC 端, 目前移动端可以说是非常火的了.
比 PC 端单一的网页不同, 在移动端的技术可以应用到 Web-App, 小程序, Hybrid-App 等等.
Web-App
也就是我们常见的浏览器 (以及内置浏览器, 比如微信) 打开的大型移动端网页. 比如我们常见的电商网站, 功能性网站, 管理网站, 在布局和功能上都有 App 的效果.
做好 Web-App 开发, 最基本的很多人肯定会说响应式布局, 但是前端开发是又 5 种布局法的, 除了出名的响应式, 还有在移动端最重要的弹性布局法, 也就是很多人头疼的 rem 布局.
除了布局方法之外, 在 H5 新特性和触屏事件和设备兼容性问题也是需要信手拈来.
小程序
这个也不用多说, 现在可以说是非常火的, 各大平台都有在做自己的小程序, 各种砍价, 抢票, 电商, 游戏都有运用. 这个以微信小程序为例, 主要是微信团队基于前端基础来做的封装语法, 主要的还是 ES 语法. 小程序目前很多公司都是招聘前端开发, 目前还没有独立的小程序开发工程师, 所以小程序可以说是前端工程师高薪就业的加分技能, 换句话说就是成熟开发必备了.
Hybrid-App
又称混合式 App, 可能听说的人很少, 但是 18 年是越来越多人去开发了, 这种是能直接产出下载到终端的 App 的, 在体验感上可以说已经具备传统 App 的大部分功能了. 这种开发门槛较低, 也就是前端开发就可以完成. 多数都是大包平台就能做, 这个你可以后面了解一下.
前端主流技术框架
前面的都是基础东西, 现在去就业前端开发, 不是只靠个基础东西, 搞个移动端页面就可以算成熟了. 前端 3 大框架, vue,Angular,React 这 3 个可以说是现在非常火热的了.
基础语法都可以写的前端, 为什么还要框架?
很多小白朋友是不懂什么是框架的, 只听过 jQuery 这些东西, 以为就是框架. 或者认为框架就是加速开发, 觉得这些库, 插件就能完成框架的工作了.
其实框架的出现, 是改变前端地位的重要标志. 最重要的表现, 就是前后端分离, 在前后端分离之前, 很多后端开发都是又当爹又当妈的, 效果不好效率也不高, 我就是在后端出身, 深知痛苦.
现在的前端项目, 比以前是更加复杂化, 多样化了. 项目复杂了, 问题也多了.
Web 前端开发入门低的另一个重要表现就是符合 8/2 定律, 也就是 20% 的东西使用率占到 80%. 所以很适合囫囵吞枣, 因此我们的重点就是把这 20% 学起来, 而首先要做的就是把这 20% 的东西找出来. 前端这 20% 的东西大概就是常用的 HTML 标签, CSS 的盒子模型, 基本的原生 JS, 以及熟练使用 jQuery,Ajax, 常见浏览器的兼容. 拿下这些东西意义非凡, 一方面证明你适合做前端这份工作, 另一方面这些技能能让你找到一份工作.
让你能够从容地去学习剩下的 80%. 总之就是专心对付重要的东西, 那些什么 Less,Sass,angular 这类的东西, 当你把我之前说的基础打好之后, 学习起来畅通无阻, 随学随用. 较难的就是实践, 只有实践才能学到真正的技术, 新人很难参与一些有价值有意义的项目, 没有这些项目又很难成长, 所以自己有项目可参与应该珍惜.
小白学习 Web 前端最常见的几个问题和误区:
1. 无脑盲目的刷视频去看, 但是很少去练习. 正常的状态应该是在整个学习的过程中, 四分之三的时间都是在练习. 视频只是让你了解学习什么内容, 看一遍就行了. 有很多人都是无脑的刷视频看, 最后浪费几个月的时间, 也找不到工作.
2. 小白开始学习的时候, 看书是一种非常严重的误区. 所以新手禁忌看书学习编程. 至于原因是什么, 在这里我不做太多解释.
3. 很多人都是遇到一个问题, 就是能看懂代码, 但是不会写, 这是比较常见的问题.
4. 还有一个最现实的问题, 就是学了后面的忘了前面, 这是由于学习方法和方式存在这很大的错误.
5. 整个学习流程混乱, 没有系统的安排, 学的不系统不专业, 技术掌握的不好, 浪费几个月甚至半年的时间.
6. 缺乏和专业人士交流的过程, 作为一个小白, 在初期学习的时候, 所学的最多的东西一定是从别人那里学到的, 闭门造车.
不管是 Web 前端技术还是其他 IT 技术也好, 其实都是从零基础开始的, 你可以直接学习或者是通过相近经历转行. 所以新人不需要因零基础而担心自己学不会. 想要成为合格的 Web 前端工程师, 其实也不是很难的事情, 主要是要选择科学的学习方式.
对 Web 前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来, 编程工作第六个年头了, 与大家分享一些学习方法, 实战开发需要注意的细节. 784-783-012 秋裙. 从零基础开始怎么样学好前端. 看看前辈们是如何在编程的世界里傲然前行! 不停更新最新的教程和学习方法(Web 前端系统学习路线, 详细的前端项目实战教学视频, PDF), 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入. 我们会一起结伴同行学习前端我们是认真的
来源: http://www.jianshu.com/p/991c4517c953