前端学习路线，如何学习前端（学习周期，源码，阶段项目 ...

风吹无痕

1.零基础学习前端首先先要制定一个计划，了解前端需要学习的技术、学习方法、什么程度能就业。
2.做好自己的时间规划，如何快速入门前端，高效率的学习，学习时尽量把手机调静音给自己一个安静的学习环境和氛围。
3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。
学习是一个循序渐进的过程，前端的学习也是如此

不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前端的学习入门快要三个月，慢的要 5-6 个月左右，看个人的理解速度来评估，只要入门了不论理解能力，还是学习的速度都会有明显的提升。
在学习前端的过程中，除了要把学到的知识点第一时间去实践，也要在学习的每个阶段自己创建课题，用所学到的知识去实现课题的内容。这样可以更好有助于理解和积累一定的项目经验。
前端的学习从来不是孤军奋战，需要一个前辈的领路，也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路，也能让自己发现问题的根本所在。
一个好的开发工具

在学习前端之前，你需要一个编辑器，俗话说，没有金刚钻怎么揽瓷器活。个人推荐 VSCode，市场使用范围比较广泛，里面很多免费的插件。
还有以下编辑器，可根据个人习惯使用。



阶段一：前端基础

1、HTML+CSS

前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。
HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。


以上内容的学习用时 两周左右，再花 2 天的时间项目实践，这部分总花费时间在 16天左右。
2、HTML5+CSS3

HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。
CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。
CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。
CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。


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

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


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



以上内容的学习用时 10天左右
阶段二：框架和前后端交互技术的学习

1、Vue



2、React



3、Node



4、webpack



以上内容用时 两个月 左右
阶段三：扩展学习

1、项目管理篇

• SVN使用
  

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

2. GIT使用

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

2、扩展部分
小程序
1.了解小程序开发流程
2.视图容器

• view
  
• scroll-view
  
• movable-view
  
• cover-view
  
• cover-image
  

3.基础内容

• icon
  
• text
  
• rich-text
  
• progress
  

4. 表单组件

• button
  
• checkbox
  
• form
  
• input
  
• label
  
• picker
  
• picker-view
  
• radio
  
• slider
  
• switch
  
• textarea
  

5. 导航

• navigator
  
• function-page-navigator
  

6. 媒体组件

• audio
  
• image
  
• video
  
• camera
  
• live-player
  
• live-pusher
  

7. 地图（map）
8. 画布（canvas）
9. 开放能力

• open-data
  
• web-view
  
• ad
  
• official-account
  

apicloud（移动app开发）
1.认识apicloud

• 开发工具讲解
  

2.端API
3.API对象

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

4.云API

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

5.小程序模块使用
3、常用框架使用篇

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

4、综合项目实战
vue + vuex + vue-router + node 项目开发


此阶段用时1-2个月左右
<hr/>自学的伙伴可以加入前端学习营：

• 会给大家组队学习，进度相同的两人一组，一起探讨交流，互帮互助，避免一个人产生惰性。
  
• 整理了一套前端学习资料，免费提供给大家学习使用，有需要可以找我私发。
  
• 不定期组织各种小活动，促进大家学习，小项目练习、学习经验分享、电子书籍等等。
  

欢迎加入前端学习营，点击上方卡片自动复制微信号添加~