前端学习路线

时间:2022-01-04 20:54:01

一、HTML标签和CSS基础

熟练使用HTML和CSS实现静态页面布局,标准还原UI设计稿

难点:

大量的标签和语法知识,需要系统的学习和大量整站练习

1、HTML标签和CSS基础

2、CSS语法(页面皮肤)

3、常见布局

4、配合UI设计师,实现相关PC端UI设计稿

二、javascript基础

学习javascript基础语法,编程技巧,培养编程思维能力,编写具有动效和交互的网页。

难点:

用编程思维解决实际需求

1、git和github仓库使用

2、js基础语法、数据类型、循环、对象、数组、逻辑控制等

3、常见算法的js实现,比如排序等

4、DOM操作API(页面元素的操作)

5、BOM操作API(浏览器对象,历史记录,打开关闭窗口等)

6、综合练习(柱状图排序/轮播图/放大镜/购物车/拖拽/todolist),并且使用git上传到github仓库。

7、jquery以及jquery相关案例实现

三、HTML5新增API,CSS3动画以及移动端开发

移动端开发,实现响应式网页开发;可以适配各种尺寸的设备,掌握当下流行的响应式UI框架。

难点:

案例综合性比较强,非常考验之前所学知识点的熟练度

1、HTML5新增API(语义化标签/音频/本地存储等)

2、CSS3(动画,过渡等)

3、移动端开发适配,flex布局

4、移动端jQ-zepto

5、sass、less等CSS预处理器

6、响应式开发以及layui,bootstrap等流行UI框架

7、项目练习:使用移动端/响应式开发还原设计稿;H5活动页(动画较多),页面侧栏滑动字母选择城市,具有本地存储功能的待办项网页。

四、JS高级,canvas,nodejs和ajax

接触js高级编程技巧,强化js编程能力,学习通过ajax获取后台数据原理和方法,了解web服务器原理实现可具有动态数据的网页,具备基本的网站开发能力

难点:

理解web服务器原理及利用动态数据实现需求的逻辑。

1、面向对象编程、作用域、原型、闭包、this、同步异步等

2、详细学习ES6、ES7新的语法

3、lodash.js

4、前端绘图canvas,图表可视化库如Echarts等,案例(小球动画/面向对象封装)

5、nodejs,express模板引擎原理,HTTP协议

6、正则表达式

7、元素ajax以及ajax封装,jquery的ajax使用

8、ajax跨域的原理及解决方法

9、mock.js介绍及使用,调试工具postman,apizza的介绍和使用

10、项目练习:使用面向对象编程方式实现完整的轮播插件,使用node搭建基本的后台服务器,完善在线待办列表,用ajax获取后台数据。

11、项目练习:使用layui框架配合后台接口,实现相对完整的影视信息展示网站,包括用户注册,登录,查看用户数据,查看电影列表,电影详情,演员列表,演员详情,预告片等功能。

五、前端流行框架VUE,打包工具webpack,element-ui框架等

熟练掌握vue框架及全家桶的使用,前后端分离,提高开发效率

难点:

vue-router和vuex的灵活使用

1、vue入门,基础语法,typescript语法,双向绑定原理,组件化,组件通信等

2、vue进阶,vue脚手架,vue-devtool调试工具,axios,自定义过滤器,自定义指令,发布订阅设计模式,组件封装复用等

3、vue-router及vuex

4、模块化规范,webpack安装配置,打包文件,懒加载等前端程工程化工具

5、深入vue原理,MVVM,虚拟DOM,diff算法源码,vue组件如何渲染和更新的,用Js实现hash路由,常见性能优化

6、element-ui介绍及使用,以及api工具类的axios封装

7、案例:vue实现完整的todo-list

六、跨平台开发

进行小程序,混合app等跨平台开发

1、小程序开发

2、小程序框架

3、小程序项目开发,学院入学报名系统,不凡音乐小程序

4、公众号开发学习

5、uniapp开发学习

6、此阶段项目练习多为熟悉语法,练手预热

七、实战阶段

1、PC整站:响应式开发

摄影/婚纱/家居/旅行等整站(有设计稿)

2、vue项目:移动端开发

虫虫电影移动端开发

3、vue项目:PC中后台开发 

element-ui使用

vue-element-admin后台框架的介绍和使用

常用vue第三方库的介绍和使用,比如:tinymce富文本,markdown编辑器等。

完整案例:学员管理系统

权限(用户,角色,资源)

4、vue项目:乐居移动web 中后台(商城)

前后移动端设计稿讲解

后台功能逻辑和交互逻辑讲解

后台接口(不少于80个)功能介绍

中后台重点,难点功能点实现

前台接口功能和使用介绍

前台功能实现

5、uiapp开发

乐居移动端uiapp版本

打包H5版本,微信小程序版本,app版本

6、公众号开发

jssdk的介绍和使用,比如相机,录音,定位等

微信用户基本信息调用

微信jssdk支付和网页支付

八、面试指导、踏入江湖、新的征程

1、此阶段指导简历,模拟简历

2、大量面试题详解和原理实现,比如实现promise Axios,节流防抖等

3、企业上门招聘

4、投递简历、面试、就业后仍需保持学习,已在程序员之路越走越远。