首先零基础学习前端先要有一个计划，了解前端要学习哪些技术。

 

　　2.做好自己的时间规划，如何快速入门前端那肯定是需要不断的提高自己的学习效率，学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。

 

　　3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。

 

　　学习是一个循序渐进的过程，前端的学习也是如此。

 

　　不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前端的学习入门快要三个月，慢的要 5-7个月左右，看个人的理解速度来评估，只要入门了不论理解能力，还是学习的速度都会有明显的提升。

 

　　在学习前端的过程中，除了要把学到的知识点第一时间去实践，也要在学习的每个阶段自己创建课题，用所学到的知识去实现课题的内容。这样可以更好有助于理解和累计一定的项目经验。

 

　　前端的学习从来不是孤军奋战，需要一个前辈的领路，也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路，也能让自己发现问题的根本所在。

 

　　前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

 

　　移动互联网带来了大量高性能的移动终端设备以及快速的无线网络、HTML5、node.js 的广泛应用，各类框架类库层出不穷。

 

　　软件开发的学习，要求我们在学习的过程中抓紧时间实践，在阶段性的学习中也要求找一些项目来做，本质上就是要给自己找点事情做，绝对不能单看书。毕竟这门学问是我们用来生产的，用来养家糊口的技能，所以要多动手去实践。

 

　　随着时代的发展，前端开发也越来越受到大家的欢迎，其中不乏转行来做前端开发的，通过与这些人的接触发现，很多人在入行前或多或少的存在顾虑。那么转行来做前端到底可以走多远，转行来做前端会不会为时已晚？我们可以看看如下视频：Web前端技术精讲：转行做编程必看视频_

 

　　1.HTML xmlns 属性

 

　　2.页面渲染完成过程

 

　　3.优雅降级和渐进增强

 

　　4.回流和重绘

 

　　5.BFC详解

 

　　6.Javascript 的重要构成部分—DOM

 

　　7.Web前端技术特辑：websocket介绍_

 

　　8.前端入门学习的一个误区_

 

　　9.Web前端技术特辑：HTML样式_

 

　　10.Web前端技术特辑：常用HTTP状态码_

 

　　11.Web前端技术特辑：Html5新特性精讲_

 

　　12.Web前端技术特辑：重绘与回流_

 

　　13.Web前端技术特辑：前端页面渲染过程分析

 

　　14.Web前端技术特辑：HTML段落标记_

 

　　15.Web前端技术特辑：算法小知识：变量互换_

 

　　16.2020年最新Web前端基础精讲视频教程，适用于所有前端初学者

 

　　根据我长期的总结并结合时下的技术栈，把前端的学习大致分为如下五个阶段。不仅适合想学前端或者转行学前端的，在校学生也非常实用。

 

　　在学习前端之前呢，你需要一个编辑器，在网上你可以看到很多编辑器用来编写前端，甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说，没有金刚钻怎么揽瓷器活，所以一个好的编辑器很重要，我在这里推荐给大家的编辑器是 VSCode。

 

　　前端开发工具介绍_

 

　　思维导图

 

　　前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。

 

　　HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。

 

　　属性事件标签

 

　　字符集

 

　　CSS

 

　　CSS基础教程CSS样式CSS框模型CSS定位CSS选择器CSS高级

 

　　思维导图

 

　　以上内容的学习用时 20天左右，再花 2 天的时间项目实践，这部分总花费时间在 22天左右。

 

　　HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

 

　　HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。

 

　　CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

 

　　CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

 

　　CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

 

　　HTML5视频HTML5音频HTML5拖放HTML5画布HTML5 SVGHTML5地理定位HTML5 Web存储HTML5 应用缓存HTML5表单CSS3边框CSS3背景CSS3文本效果CSS3字体CSS3 2D转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS3 多列

 

　　思维导图

 

　　以上内容用时 10 天左右，这部分内容是在 HTML+CSS 做的升级改进，只需要了解他们的一些特性即可，再结合这些特性做一些小项目加深学习。

 

　　JavaScript 是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示：

 

　　认识JavaScript

 

　　基本语法

 

　　变量

 

　　数据类型字符串数字布尔数组对象NullUndefined

 

　　5. 函数

 

　　内置函数自定义哈数

 

　　6. 运算符

 

　　7. 流程控制

 

　　8. DOM对象

 

　　StringArrayDateBooleanMathNumber

 

　　9. BOM对象

 

　　WIndowNavigatorScreenHistoryLocation

 

　　10. 综合实例

 

　　思维导图

 

　　以上内容的学习用时 35天 左右，这里推荐几本 Javascript 的书籍，如下：

 

　　《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章讲的是语言特性，是重点学习的部分，必须需要反复阅读，直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习，这是一些常用的 Web API。至于本书的其余部分大致读一下就可以，不做重点要求。《JavaScript 语言精粹》，俗称蝴蝶书。很薄的一本书总页数就 147 页，花一天时间就能看完，快的话半天就能看完。这本书虽然很薄，但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言，所以这本书”取其精华，去其糟粕“就是精粹了。《你不知道的 JS》非常精彩的一本书，将 JavaScript 的细节一网打尽。

 

　　这部分内容是对 JavaScript 的补充学习

 

　　基本选择器层次选择器过滤选择器表单选择器

 

　　3. DOM操作

 

　　查找节点创建节点插入节点删除节点复制节点替换节点包裹节点属性操作样式操作

 

　　4. 事件

 

　　事件绑定事件冒泡

 

　　5. 动画

 

　　show、hidefadeIn、fadeOutslideUp、slideDown自定义动画animate动画回调以及停止动画

 

　　6. 常用工具

 

　　浏览器及特性检测数组和对象操作Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等

 

　　7. Ajax

 

　　8. Jquery插件编写

 

　　思维导图

 

　　JavaScript 进阶DOM+BOM综合演练网页特效ES6 进阶bootstrapanimate.css学习

 

　　以上内容的学习用时 10天左右

 

　　这部分是框架和前后端交互技术的学习

 

　　一、Vue

 

　　Vue基础模版语法计算属性侦听器Class与Style绑定条件/列表渲染事件处理表单输入绑定组件基础、注册Prop自定义事件

 

　　2. Vuex

 

　　StateGetterMutationActionModule

 

　　3. Vue-router

 

　　认识路由动态路由嵌套路由编程式导航路由组件传参

 

　　4. axios

 

　　认识axios全局配置发送POST、GET请求等

 

　　思维导图

 

　　认识ReactReact元素渲染JSX组件StateProps事件处理条件渲染列表组件API组件声明周期

 

　　思维导图

 

　　基础console（控制台）crypto（加密）debugger（调试器）fs（文件系统）http（网络）os（操作系统）path（路径）

 

　　2. 高级

 

　　NPM介绍及使用MVC模式简介Express框架学习链接Mysql链接Redis项目实战

 

　　思维导图

 

　　概念

 

　　主要讲什么是入口，出口，loader，插件等

 

　　2. 入口

 

　　单个入口语法对象语法常见场景

 

　　3. 输出

 

　　用法多个入口起点高级进阶

 

　　4. 模式

 

　　developmentproduction

 

　　5. loader

 

　　实例配置

 

　　6. 插件

 

　　剖析用法配置

 

　　7. 配置

 

　　基本配置多个Target使用其他语言配置

 

　　8. 模块

 

　　思维导图

 

　　一、Mysql

 

　　阶段一认识mysql安装mysql创建数据库、数据表学习常用的SQL命令，完成增删查改

 

　　2. 阶段二

 

　　学习Mysql关联查询，子查询等学习Mysql常用函数学习Mysql分组、分页、排序等

 

　　3. 阶段三

 

　　学习Mysql高级查询了解存储过程，自定义函数等了解Mysql配置文件认识Redis学习redis的数据类型redis常用操作redis事务

 

　　思维导图

 

　　SVN使用认识svn安装生命周期启动模式创建版本库检出操作解决冲突提交操作版本回退查看历史分支标签

 

　　2. GIT使用

 

　　认识git安装配置工作流程工作区、暂存区和版本库创建仓库基本操作分支管理查看历史等标签githubviewscroll-viewmovable-viewcover-viewcover-image

 

　　3. 基础内容

 

　　icontextrich-textprogress

 

　　4. 表单组件

 

　　buttoncheckboxforminputlabelpickerpicker-viewradiosliderswitchtextarea

 

　　5. 导航

 

　　navigatorfunction-page-navigator

 

　　6. 媒体组件

 

　　audioimagevideocameralive-playerlive-pusher

 

　　7. 地图（map）

 

　　8. 画布（canvas）

 

　　9. 开放能力

 

　　open-dataweb-viewadofficial-account

 

　　apicloud（移动app开发）

 

　　认识apicloud

 

　　开发工具讲解

 

　　端APIAPI对象设备访问功能扩展界面布局导航菜单小程序模块云服务对接

 

　　4. 云API

 

　　数据云API统计云API推送云API云API SDK

 

　　5. 小程序模块使用

 

　　iview （vue框架）element ui （vue框架）echarts （百度图标库）阿里巴巴开源图标使用Sass学习Swiper学习zoom.js 学习

 

　　思维导图

 

　　教务管理系统（node+express+mysql），以上内容学习用时 一个月 左右