目录

  • 1 课程简介
    • 1.1 为何要学习前端开发
    • 1.2 前端学习路线
    • 1.3 课程教案
    • 1.4 课程教学日历
    • 1.5 【课堂讨论】答疑解惑
    • 1.6 线上教学示范
    • 1.7 线上线下教学示范
  • 2 JavaScript概述
    • 2.1 本课我要学什么
    • 2.2 任务1.1 认识JavaScript
    • 2.3 开发工具的安装
    • 2.4 任务1.2 在页面显示个人信息
    • 2.5 任务1.3 测试综合案例在主流浏览器上的兼容性
    • 2.6 第1章节测验
    • 2.7 主题讨论
  • 3 JavaScript基础
    • 3.1 本课我要学什么
    • 3.2 任务2.1 显示变量数据类型
    • 3.3 任务2.2 根据成绩给出学生考评
    • 3.4 任务2.3 实现猜数游戏
    • 3.5 任务2.4 制作简易计算器
    • 3.6 第2章节测验
    • 3.7 主题讨论
  • 4 JavaScript对象编程
    • 4.1 本课我要学什么
    • 4.2 任务3.1 在页面动态显示系统时间
    • 4.3 任务3.2 制作随机选号器
    • 4.4 任务3.3 制作简单的焦点图效果
    • 4.5 任务3.4 使用JSON方式显示图书信息
    • 4.6 任务3.5 验证注册页面信息
    • 4.7 任务3.6 使用正则表达式验证注册页面信息
    • 4.8 第3章节测验
    • 4.9 主题讨论
  • 5 BOM编程
    • 5.1 本课我要学什么
    • 5.2 任务4.1 制作弹窗效果
    • 5.3 任务4.2 制作网页标题交替显示效果
    • 5.4 任务4.3 制作复选框全选效果
    • 5.5 第4章节测验
    • 5.6 主题讨论
  • 6 DOM编程
    • 6.1 本课我要学什么
    • 6.2 任务5.1  Core DOM方式动态添加表格 Core DOM方式动态添加表格
    • 6.3 任务5.2 使用HTML DOM方式动态添加表格
    • 6.4 第5章节测验
    • 6.5 主题讨论
  • 7 JavaScript与CSS交互
    • 7.1 本课我要学什么
    • 7.2 任务6.1 JavaScript动态改变导航菜单样式
    • 7.3 任务6.2 制作图片轮显效果
    • 7.4 任务6.3 制作随鼠标滚动的广告图片
    • 7.5 第6章节测试
    • 7.6 主题讨论
  • 8 jQuery基础
    • 8.1 线上学习引导文-交互特效1
    • 8.2 本课我要学什么
    • 8.3 课前测试
    • 8.4 任务7.1 JQuery基础
    • 8.5 课堂闯关游戏
    • 8.6 任务7.2 列表的显示与收起
    • 8.7 第7章节测试
    • 8.8 主题讨论
  • 9 jQuery中的DOM操作
    • 9.1 线上学习引导文-交互特效2、3
    • 9.2 本课我要学什么
    • 9.3 课前测试
    • 9.4 任务8.1  制作图片展示效果
    • 9.5 任务8.2 制作留言板前端局部更新效果
    • 9.6 课堂闯关游戏
    • 9.7 任务8.3 制作电子邮件删除效果
    • 9.8 第8章节测试
    • 9.9 主题讨论
  • 10 jQuery中的事件
    • 10.1 线上学习引导文-交互特效4、5
    • 10.2 本课我要学什么
    • 10.3 课前测试
    • 10.4 任务9.1 微博字数统计
    • 10.5 课堂闯关游戏
    • 10.6 任务9.2 制作图片提示效果
    • 10.7 课前测试
    • 10.8 任务9.3 制作横向导航菜单
    • 10.9 课堂闯关游戏
    • 10.10 第9章节测试
    • 10.11 主题讨论
  • 11 jQuery制作动画
    • 11.1 线上学习引导文-交互特效6、7
    • 11.2 本课我要学什么
    • 11.3 课前测试
    • 11.4 课堂闯关游戏
    • 11.5 任务10.1 FAQ答案的显示和隐藏
    • 11.6 课前测试
    • 11.7 课堂闯关游戏
    • 11.8 任务10.2 制作图片横向移动效果
      • 11.8.1 主题讨论
      • 11.8.2 第10章节测试
  • 12 jQuery插件应用
    • 12.1 线上学习引导文-交互特效8
    • 12.2 本课我要学什么
    • 12.3 课前测试
    • 12.4 任务11.1 使用ss-Menu固定侧边栏插件
    • 12.5 任务11.2 Pinterest Grid实现响应式网格瀑布流布局
    • 12.6 任务11.3 编写表格隔行变色插件
    • 12.7 主题讨论
  • 13 拓展:Bootstrap(网络资源)
    • 13.1 第1集 BootStrap安装和栅格系统
    • 13.2 第2集 BootStrap排版样式
    • 13.3 第3集 BootStrap代码、表格和表单样式
    • 13.4 第4集 BootStrap表单样式
    • 13.5 第5集 BootStrap按钮、图片、工具和响应式工具
    • 13.6 第6集 BootStrap Glyphicons图标、下拉菜单、按钮组和按钮式下拉菜单
    • 13.7 第7集 BootStrap输入框组和导航
    • 13.8 第8集 BootStrap导航条
    • 13.9 第9集 BootStrap面包屑导航、分页、标签、徽章、大屏幕显示、页面标题和缩略图
  • 14 1+X Web前端开发考证
    • 14.1 Web前端开发1+X职业技术等级证书的学习目标和学习线路图
    • 14.2 JavaScript专项练习1
    • 14.3 JavaScript专项练习2
    • 14.4 jQuery专项练习1
    • 14.5 jQuery专项练习2
    • 14.6 jQuery专项练习3
    • 14.7 jQuery专项练习4
Web前端开发1+X职业技术等级证书的学习目标和学习线路图

Web前端开发1+X职业技术等级证书的学习目标和学习线路图

web前端开发的学习目标:

       我们学习的是一种技术,而并不仅仅只是一门语言。可以拿到前端开发1+X职业技能等级证书,只是我们学习这么课程的当下的一个硬性目标,下一步的目标是通过前端课程学习,可以达到开发的级别, 成为一名前端或Web开发工程师,找到一份前途似锦的程序开发工作。学习猿地的前端开发1+X职业等级证书课程,可不仅仅是只为了让你通过课程学习能拿到初、中、高级别的一种证书, 课程设计中除了有考试政策内规定要内容外, 课程更是深入到具有高级开发工程师应该具备技能的内容。通过对1+X的政策解读, 本次在院校实施“学历证书+若干职业技能等级证书”制度试点方案中,对于前端开发工程师的课程内容的设计已经非常丰富, 不仅覆盖了前端所有开发技术,还是目前应用的最新的技术版本,而且不光只有前端的内容, 还有后端技术PHP及PHP流行的框架Laravel, 以及数据库开发方面的内容也很全面。这需要大家掌握的内容很多, 学习周期也很长,需要全力以赴拿下课程中的每一个考点知识,坚持学完全部课程拿到证书,找到一份技术开发工作。

1. 静态网页开发

Web前端开发能写静态网页是最基本的技能

· 能结合其他编程语言,综合运用 HTML 文本标签、头部标记、页面创建超链接、创建表格表单等功能搭建静态网页
· 能熟练使用 CSS 开发网页样式,能正确解决 CSS 编程过程中的问题
· 能熟练使用 JavaScript 开发交互效果网页,能正确解决JavaScript编程过程中的问题
· 能熟练使用 jQuery 开发交互网页,能正确解决在 jQuery 编程过程中出现的问题
· 能熟练使用 Bootstrap 开发响应式网页,并能解决在应用中出现的问题

2.静态网页美化

不仅能写出静态页面,还需要有网页美化的本领

· 掌握使用 CSS3 功能解决优化过程中兼容性问题的方法
· 能熟练使用 HTML 文本标签、图像、头部标记、页面创建超链接、创建表格表单及 iframe 框架等功能美化静态网页并解决出现的问题

3. 动态网页开发

所谓的动态网页是需要有后台程序从数据库中产生动态数据

· 掌握 CSS3 新增特性、CSS3 动画效果、多列布局以及弹性布局知识
· 掌握 MySQL 中创建、修改、删除表等数据基本操作方法及应用中出现问题的解决方法
· 能熟练使用 PHP 的编码技术操作 MySQL 数据库,进行动态网站开发。能熟练使用 Session 的操作、Cookie 的操作开发动态网站
· 能使用 Restful API 设计跨平台跨语言的数据接口
· 能使用 Ajax 的 XML、JSON数据格式、 JSONP 跨域等功能并解决应用中出现的问题
· 掌握 Ajax 进行数据交互的使用方法,并掌握应用中出现问题的解决方法
· 能使用 Laravel 的路由、控制器、Blade 模板、前端组件等功能并解决应用中出现的问题

4.架构设计

动态Web系统需要一个好的架构

· 能使用 ES6 基础语法、代码组织构建前端程序并解决在应用中出现的问题
· 掌握使用 Node.js 构建高性能服务器端环境的方法,并掌握应用中出现问题的解决方法
· 能使用 Node.js Web 应用框架 Express 构建网站
· 掌握 Vue 渐进式框架进行网站架构设计的使用方法,并掌握应用中出现问题的解决方法

5.性能优化

网化后的系统运行效率可以提高N倍

· 能熟练使用语义化、代码规范、去掉无意义字符等优化方式进行网页代码结构的优化
· 能通过对图片的压缩、优化、加载的方式实现网站图片资源优化
· 能使用 HTTP 缓存、预加载技术实现前端资源加载优化
· 能熟练使用 Webpack 的Output 出口、Plugin 插件、Module 模块技术打包网站资源 

6.移动端静态网页开发

移动设备已经普及,数量已经超过了PC的应用

· 能熟练使用 HTML5 新增语义化元素、页面增强元素与属性及多媒体元素等功能并解决应用中出现的问题
· 能熟练使用 CSS3 的选择器、背景特性、盒模型、多列布局、弹性布局等属性开发移动端网页并解决应用中出现的问题
· 能熟练使用 JavaScriptOOP、原型链、常用设计模式等功能并解决应用中出现的问题
· 掌握 Bootstrap 开发Web 应用程序和网站前端框架的方法,并掌握应用中出现问题的解决方法
· 能熟练使用 Canvas 绘制功能美化网页,并解决应用中出现的问题
· 能熟练使用 SVG 可缩放矢量图形功能美化网页,并解决应用中出现的问题
· 能使用 Less 语法进行网页美化,并解决应用中出现的问题


7.移动端静态网页美化

在手机中传播的页面,空间的限制更需要美化

· 能熟练使用 HTML5 新增语义化元素、页面增强元素与属性及多媒体元素等功能,并解决应用中出现的问题
· 能使用 CSS3 的边框特性、颜色、字体、盒阴影、背景特性、渐 变、过渡等属性美化移动端网页并解决应用中出现的问题



8.移动端动态网站开发

移动端的网站数据也是从数据中获取的动态网站

· 掌握使用 MySQL 中创建修改删除表、数据的基本操作进行数据管理的知识,并掌握应用中出现问题的解决方法
· 能熟练使用 PHP 的编码技术操作 MySQL 数据库,进行动态网站开发能熟练使用 Session 的操作、Cookie 的操作开发动态网站
· 掌握 Ajax 进行数据交互的使用方法
· 能使用 Bootstrap 的栅格系统、基本样式、组件、插件、定制及优化等功能,并解决应用中出现的问题
· 掌握使用 jQueryMobile 创建移动 Web 应用的方法,并掌握应用中出现问题的解决方法


9. 移动端动态网站架构设计

移动网站和PC网站设计的架构原则都是相同的

· 能使用 ES6 基础语法、代码组织构建前端程序并解决在应用中出现的问题
· 能使用 Node.js 的交互模式、事件循环、函数路由构建高性能服务器端环境
· 能使用 Vue 组件、Vue 工程化开发、Vue 路由、Vue 状态管理进
行网站架构设计


10.移动端动态网站性能优化

任何系统开发中都需要优化提高运行效率

· 能熟练使用语义化、代码规范、去掉无意义字符等优化方式进行网页代码结构的优化
· 能对图片的压缩、加载的方式实现网站图片资源优化
· 能使用 HTTP 缓存、预加载技术实现前端资源加载优化
· 能熟练使用 Webpack 的Output 出口、Plugin 插件、Module 模块技术打包网站资源