零基础童鞋快速学习前端开发 ---- (1)

初识前端

1、前端开发简介

2、前端开发如何入手学习？

3、前端入门学习建议

4、对初学者的建议

5、小结

一.前端开发简介

形成：从简单网页制作演变至功能强大的前端开发。
早期的网页设计制作主要内容都是静态死的页面，以文字图片为主，用户使用网站也以浏览为主。随着互联网的发展，现代网页布局更佳美观，交互效果显著，用户体验超棒，功能更加强大。
因此现在的前端开发的主要技术通常是指html、css、js技术和前端几大框架的使用。
现在市场上主要产品划分有网页，手机app，电视大屏端，H5游戏，微信小程序/小游戏/公众号以及支付宝/钉钉小程序等
二.前端开发如何入手学习？

这里针对于不是本专业（网页设计等）的童鞋
一是报班学习，效果好且能得到系统性的学习，但价格比较贵对时间要求高，不是所有童鞋都能拿得出那么多时间和金钱去学习的。
二是自学和观看免费视频学习，经济实惠但缺点是缺少指导缺少方向，导致学习的内容杂乱无章更可能花费的时间学了无用的内容，如果没有出众的意志力规划力是很难学下去的。
三是报名线上收费课程，优点是价格相对便宜，通常有一个集体可以探讨问题，有老师指导方向的话，效果要比自学好很多，也会清楚更多些。
具体各位童鞋自行考量。

三、前端入门学习建议
1.先明确前端三个概念：
①.HTML是内容层，展示页面内容。它的目的是表示一个HTML标签在页面里是个什么角色。
②.CSS是样式层，它的目的是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示，为HTML做化妆打扮的。
③.JS是行为层，它要做的是当用户触发某些行为时，会给内容和样式带来什么样的改变。
建议：入门的可以先从较为系统的技术学习网站开始学习。
2.学习工具
前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境浏览器即可，推荐 Chrome，易于调试。编辑器直接用 VSCode 吧，超级好用的，当然有些插件需要自己上百度查区别进行按需下载。
3.前端的基础：
JavaScript，HTML+CSS，HTML5+CSS3，ES5，ES6，ES7，jQuery，bootstrap，nodejs，mySql，ajax。
这里建议先学习js,html,css,可以自行选择观看线上视频，选择高质量的，后续学习 es5 / es6 / es7 / jQuery / bootstrap / nodejs / mysql / ajax。时间更多的可以学习 less / scss,它两都属于都属于 CSS 预处理器的范畴，也就是 CSS 的超集。
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
其中nodejs可以与express或者koa2框架进行搭建前后端分离的后端服务器端，可以接受前端发来的请求并进行做处理后返回结果给前端。这样可以更好地理解前后端分离方式。
mySql就是一个数据库，保存数据的地方，当然你也可以选择其他数据库。
4.前端的几大框架和工具：
前端三大js框架(vue / Angular / React)，前端项目打包工具webpack，gulp等，版本控制工具svn / git，还有微信小程序(支付宝，钉钉的可以先别管),至于多端框架方面可以先不进行学习。
前端框架从以前常用的jQuery、Bootstrap等框架，发展成现在的Vue、React、Angular三大框架局面，都是比较成熟的框架，也都有相对成熟的周边UI组件库。下面逐个介绍：
Vue是一个轻量级的框架，通过进行双向数据的绑定来驱动界面，拥有丰富的指令和组件化。Vue框架上手很快且易学，因为它的官方文档介绍的非常清楚，开发Vue的也是中国人，所以文档方面易阅读，而且能够非常快速的通过异步批处理的方式更新DOM，可以把解耦的、可复用的组件组合在一起使用，还可以允许多种模块的安装，使用的场景很灵活。

Angular是一款很优秀的前端js框架，已经被Google的多款产品采用。它拥有良好的应用程序，模板的功能很强大，自带丰富的angular指令，拥有双向数据绑定，可以通过指令扩宽HTML。 angular 入门很容易 但深入后概念很多, 学习中较难理解，需多加学习，多看文档。

React，由facebook推出，正式版推出是在2013年。React 拥有较高的性能，代码逻辑非常简单。拥有 速度快，跨浏览器兼容， 模块化，单向数据流Flux，同构、纯粹的javascript，兼容性好等特点。
react推崇的是JSX语法，在学习react之前还要去了解JSX语法
vue与之不同的是语法更友好，搭配前端模块化，大的小的都能hold住，less等等的也都可以使用

五.小结
第一学习前端的基础，例如HTML需要花费时间来记忆，摸清每个标签的使用场景，最好的记忆就是写，一定要写，写，写！重要的事说三遍！
对于不知道写什么的童鞋，这里建议你可以模仿各大电商网站，比如淘宝网，去实现它的界面效果，先写静态页面和一点点交互功能，后面再拓展。
第二先把前端基础的弄会了再上手前端主流框架的，不然就叫盲目学习了，至于前端工程化模块化等其他高级知识点后续再说
第三框架都学都看看，别害怕。花费一天的时间可以快速了解三大框架你更易于哪一种上手更快更高效。
需求出活快就直接学Vue.js,其他两个可以日后进行学习。