Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白学习的web前端学习路线图。
web前端学习线路图 | ||||
学习阶段 | 学习内容 | 知识点细化 | 可达成学习效果 | 配套视频教程 |
第一阶段 (4周) | 前端页面重构 | PC端网站布局: - HTML基础,CSS基础,CSS核心属性 - CSS样式层叠,继承,盒模型 - 容器,溢出及元素类型 - 浏览器兼容与宽高自适应 - 定位,锚点与透明 - 图片整合 - 表格,CSS属性与滤镜 | Web前端开发工程师 前端页面布局与重构工程师 薪资可以达到:4K-6K | HTML5基础教程(持续更新) https://pan.baidu.com/s/1IiL0feDPp_4bsUZr0foKjg HTML5基础教程-PC及移动端页面布局 https://pan.baidu.com/s/1ZD7WYX_xmQJL-fzIGG9ExA |
HTML5+CSS3基础: - HTML5新增的元素与属性 - 表单域增强元素 - CSS3选择器 - 文字字体相关样式 - CSS3位移与变形处理 - CSS3 2D转换与过度动画 - CSS3 3D转换与关键帧动画 - 弹性盒模型 - 媒体查询 - 响应式设计 | ||||
WebApp页面布局: - 移动端页面设计规范 - 移动端切图 - 流式布局(100%布局) - 等比缩放布局(rem布局) - 响应式布局 - viewport - rem/vw的使用 - flexbox详解 - 移动端reset, 1px border, 高清图片 - 淘宝移动端页面适配方案 | ||||
第二阶段 (8周) | JavaScript高级程序设计 | 原生JavaScript交互功能开发: - 基本语法 - 循环语句 - 函数与数组 - String与Date - BOM与DOM - 事件 - 拖拽效果 - cookie存储 - 正则表达式 - Ajax - 面向对象基础 - 运动与游戏开发 | Web前端工程师 高级Web前端工程师 网站开发工程师 移动前端开发工程师 薪资可达到:6K-10K | HTML5中级教程-Javascript程序设计及PC全栈项目开发 https://pan.baidu.com/s/1bKS5X67WJm6qnxO3BJVNMw |
面向对象进阶与ES5/ES6/ES7应用: - Promise - 设计模式(观察者模式等) - 原型链 - 构造函数 - 执行上下文栈与执行上下文 - 变量对象与活动对象 - 作用域链 - 闭包 - this - ES5 - ES6 - ES7 | ||||
JavaScript工具库自主研发: - DOM库 - 事件库 - AJAX库 - 原型和继承库 - MVVM核心库 - 基于SPA的路由库 | ||||
PC端全栈开发 | jQuery经典交互特效开发: - 时间轴特效 - tab页面切换效果 - 网页定位导航特效 - 滑动门特效 - 焦点图轮播特效 - 导航条菜单效果 - 瀑布流特效 - 弹出层效果 - 倒计时效果 - 抽奖效果 | |||
PHP+MySQL后端基础: - Apache - PHP - MySQL - HTTP(s)协议详解 - Ajax进阶、跨域与Defered - Apache与Nginx 环境搭建与配置 - 接口的定义 - Mock数据 - Restful - 前后端联调 - 前端安全(XSS,CSRF,JSON注入) | ||||
前端工程化与模块化应用: - Gulp - Webpack - NPM - Linux命令 - Git/SVN - CommonJS - AMD - CMD - ES6模块化 | ||||
PC端全栈开发项目: - 大首页、列表页与详情页 - 展示与交互特效 - 搜索 - 登录与注册 - 购物车 - jQueryUI 与 jQuery EasyUI - Bootstrap(ACE) - Highcharts/Echarts - ArtTemplate - velocity - smarty - 云平台系统前端 - Apache+PHP+MySQL服务器搭建 | ||||
第三阶段 (8周) | Node.js后端开发 | Node.js基础: 一、Node.js基础 - Node.js介绍 - 开发环境搭建 - 模块与包管理工具 - CommonJS模块 - URL网址解析 - QueryString参数处理 - HTTP模块 - HTTP小爬虫 - request方法 - 事件 events模块 - 文件 fs模块 - Stream 流模块 - 原生路由与参数接收 - 读取图片文件 - npm scripts - Yarn 与 PM2 二、MongoDB - MongoDB介绍与环境搭建 - 数据库常用命令 - Collection聚集集合 - document文档操作 - 聚集集合查询 - NodeJS连接MongoDB 三、GraphGL - GraphQL初探:从REST到GraphQL - GraphGL安装 - 准备数据源 - 搭建GraphQL服务器 - 数据查询 四、Express - express 介绍 - 安装和创建基于Express的项目 - Express 4.1x 初始化项目详解 - 路由简介 Node.js高级全栈项目:基于M站+Node.js+MongoDB高级全栈项目开发 | ||
Vue.js前端框架 | Vue.js开发基础.: - WebApp开发基础(Webstorage,移动端事件,UI组件, Zepto, IScroll, Swiper) - MVVM模式 - 前端组件化 - 单文件组件 - 组件间传值 - Vue实例 - E19Vue实例生命周期 - Vue的模版语法 - 计算属性,方法与侦听器 - 计算属性的 getter 和 setter - Vue中的样式绑定 - Vue中的条件渲染 - Vue中的列表渲染 - Vue中的set方法 - 父子组件间的数据传递 - 组件参数校验与非 props 特性 - 给组件绑定原生事件 - 非父子组件间的传值 - 在Vue中使用插槽 - 作用域插槽 - 动态组件与 v-once 指令 - Vue动画 应用Vue.js开发WebApp项目: - 环境配置 - 项目代码介绍 - 单文件组件与Vue中的路由 - 单页应用VS多页应用 - Mint UI - Element UI - 项目的联调,测试与发布上线 | |||
React前端框架 | React 开发基础: - React简介 - React开发环境准备 - React中的组件 - JSX语法 - 拆分组件与组件之间的传值 - React developer tools 安装及使用 - PropTypes 与 DefaultProps 的应用 - props,state 与 render 函数的关系 - 深入了解React虚拟DOM - 虚拟 DOM 中的 Diff 算法 - React 中 ref 的使用 - React的生命周期函数及使用场景 - 使用Charles实现本地数据mock - React 中实现 CSS 动画效果 - react-transition-group 实现动画 - Redux 概念简述和工作流程 - Action 和 Reducer 的编写 - ActionTypes 的拆分 - 使用 actionCreator 统一创建 action - UI组件和、容器组件及无状态组件 - 使用Redux-thunk 中间件实现ajax数据请求 - Redux-saga 中间件使用 - React-redux 中间件使用 | 高级Web前端工程师 全栈工程师 移动前端App开发工程师 微信开发工程师 小程序开发工程师 数据可视化开发工程师 薪资可达到:10K-15K+ | HTML5高级教程-移动端WebApp及混合APP开发 https://pan.baidu.com/s/1ltJLMLHEOIlOg1UIGeLj0w | |
React Native: - React Native初探 - React Native 项目导航 - React Native 项目文本框 - React Native 项目滚动分页 - React Native 其他组件 | ||||
应用Reat开发WebApp项目: - Ant Design组件库 - React Router 4 路由 - 项目组件编写 - 使用 Immutable.js 来管理store中的数据 - 项目的联调、测试与发布上线 | ||||
混合开发(Hybrid,RN) | 微信公众号开发: - 初识微信公众号 - 订阅号的基本功能 - 使用百度BAE实现代码的快速上线 - 使用Git完成线上代码部署 - 公众号开发权限及功能接入 - 微信JSSDK接口API - 微信场景项目开发与接入 | |||
微信小程序开发: - 微信小程序初探 - 小程序入门必学 - 小程序组件体验 - 小程序大功能 - 项目实战带你征服小程序 | ||||
各类混合应用开发: - 自主原生Navtive Hybrid(iOS、Android) - 第三方Hybrid框架Cordova/Phone gap - 第三方Hybrid框架MUI + HTML5 | ||||
阿里钉钉企业E应用(支付宝小程序): - E应用功开发入门 - E应用开发流程 - E应用开发基础 - E应用开发实战 | ||||
Angular前端框架 | Angular6基础: - TypeScript 基础与进阶 - 开发环境配置 - Hello World - 架构、模块与组件 - 模板 - 元数据、数据绑定与数据显示 - 表单 - 服务与指令 - 依赖注入 - 路由 - Ionic 3 框架 | |||
大数据可视化 | 大数据可视化基础与实战: - 数据可视化基础 - Echars、Hignchars - D3.js 入门 - D3.js 进阶 - D3.js 选择集与数据 - D3.js 高级应用 - D3.js 应用工具:NVD3、n3-charts |
第一:基础的重要性
无论做什么都一定要有扎实的基础,参加web前端开发培训也不例外,只有基础牢固,才能更深入的学习新技能。作为一名初级的web前端工程师,你必须要具备基础的技术要素:html,CSS和Java。这是作为web前端工程师所必须要掌握的。web前端的入门门槛其实很低的,与其他语言先慢后快的学习节奏相比,他是一个先快后慢的过程。所以在前期的学习过程中,你会很容易的掌握其基础的技能。而随着html5技术的广泛应用,web前端的学习也会变得更加简单。
第二:细节的重要性
有句俗语是这样说的:“细节决定成败”,很多web前端开发者在工作过程中为了追求速度,而忽略了一些细节性的东西。比如:给代码加备注,代码的命名规范,代码的简洁等。所有的这些看似不重要,其实却严重影响了项目的进度以及自身能力的提升。在开发过程中,适当的添加备注,能够加深对技术点的印象,也便于以后在修改的过程中迅速查找;规范的代码命名能够方便团队之间的沟通,提高工作效率;而简洁的代码能够直观的展现某一块代码的作用。
第三:网站布局的重要性
做网站的目的除了向大众群体直观的展现公司的形象以外,更重要的还是便于SEO优化,为了提升网站在百度搜索引擎中的排名,以获取更多的浏览量。因为网站没有排名,不能让更多的人了解到公司,盈利从何谈起呢?作为一名web前端培训者,想要进一步提升技能,就一定要研究网站的优化布局。
第四:学习的重要性
优秀的web前端工程师之所以优秀,不是因为工作的年限有多久,而是具备快速学习的能力。web前端开发是一个特殊的工作,涵盖的知识面非常广,而且互联网行业技术的更新速度是非常快的,如果没有快速学习的能力,就很难跟上时代的步伐。所以,作为web前端工程师一定要不断的学习,提升技能。