零 基 础 Web专 项 课 程
免费注册 (仅限本月30日前)在了解的过程中是不是存在着问题?咨询客服
猿课,只做精品课程
和其他机构临时拼凑起来的课程不同,我们的课程全是实战经验,每一节课,大漠老师都已反复测试,不断修正,直至达到让学员轻而易举接受的水平,才慎重决定对外发布
-
名师教学 -
在线学习 -
持续更新 -
勿须脱产 -
实战总结

课程介绍
web前端是什么?通俗来讲,在一个网站、甚至app中,你能直接感触到的,花哨或者不花哨的页面,我们称之为前端。随着移动智能设备的普及,前端能够大展拳脚的地方越来越多,比如做个hybrid app啥的。当然,css3的广泛支持给了前端更大的施展舞台,让我们不再依赖javascript就可以做出华丽炫酷的效果。你以为只是帅帅的效果?或许能做的比你想象更多。本课程将着重讲前端移动端方向,侧重html5、css3,一步一步引领大家做出实用又炫酷的案例。主讲大漠老师是阿里前端开发专家,在前端业内已经深耕多年。就让我们跟着大漠老师一步一步来学习前端吧!
课程内容
第1门 Web前端课程
视频 ·导学-Java和JavaScript真的是雷锋和雷峰塔的关系?
视频 ·不靠谱的ECMA
视频 ·搭建开发环境
视频 ·ES6在基本语法层面的更新-let与const
视频 ·ES6在基本语法层面的更新-解构赋值
视频 ·ES6在基本语法层面的更新-spread运算符
视频 ·ES6在基本语法层面的更新-rest运算符
视频 ·ES6在内置对象方面的更新-String
视频 ·ES6在内置对象方面的更新-Object-1
视频 ·ES6在内置对象方面的更新-Object-2
视频 ·ES6在内置对象方面的更新-Array
视频 ·ES6在内置对象方面的更新-Function
视频 ·对比Java理解ES6的封装-继承-多态-Java中的OO
视频 ·对比Java理解ES6的封装-继承-多态-ES6中残破的OO
视频 ·对比Java理解ES6的模块化方案
视频 ·对比Java的集合框架理解ES6的Set和Map-ES6中的Set和WeakSet
视频 ·对比Java的集合框架理解ES6的Set和Map-ES6中的Map和WeakMap
视频 ·对比Java的集合框架理解ES6的Set和Map-数据结构工具库lodash
视频 ·对比Java理解ES6中的迭代器Iterator
视频 ·对比Java理解ES6中的反射Reflect和Proxy机制-Java中的Reflect机制
视频 ·对比Java理解ES6中的反射Reflect和Proxy机制-Java中的Proxy机制
视频 ·对比Java理解ES6中的反射Reflect和Proxy机制-ES6引入的Proxy-Reflect机制
视频 ·ES6特有-Promise
视频 ·ES6特有-Symbol
视频 ·ES6特有-Generator-1
视频 ·ES6特有-Generator-2
视频 ·ES8引入的async-await机制
视频 ·ES7引入的Decorator机制-对比Java中的Annotation用法
视频 ·ES7引入的Decorator机制-ES6中的Decorator
对照Java学通ES6
- 课程简介:
对照Java学通ES6





























显示详细课程
第2门 Web前端课程
视频 ·meta-title-and-tpl
视频 ·文本标签
视频 ·字符格式标签
视频 ·div标签
视频 ·链接标签
视频 ·超级链接URL格式
视频 ·超级链接URL类型
视频 ·列表标签
视频 ·多媒体标签
视频 ·表格标签
视频 ·表单标签
视频 ·表格案例
视频 ·表格完整的标记
视频 ·单元格设置
视频 ·表单案例-登录表单制作
视频 ·表单概述
视频 ·表单基本元素(1)
视频 ·表单基本元素(2)
视频 ·表单基本元素(3)
视频 ·表单基本元素(4)
视频 ·表单高级元素(1)
视频 ·表单高级元素(2)
视频 ·表单高级元素(3)
视频 ·psd2html-1
视频 ·psd2html-2
视频 ·psd2html-3
视频 ·psd2html-4
视频 ·psd2html-5
视频 ·psd2html-6
视频 ·psd2html-7
视频 ·psd2html-8
HTML5入门
- 课程简介:
- HTML5究竟是什么,和HTML4.0的区别在哪里? HTML是万维网的核心语言,超文本标记语言HTML的第五次重大修改。HTML5是web时代最前沿的技术,其丰富的api重新定义了前端开发,是连接手机、平板电脑、pc以及多样移动终端的桥梁。可以更丰富的展示页面。本章节将带领大家一步步领略HTML5的风采
html4常用标签











表格与表单












PSD2HTML








显示详细课程
第3门 Web前端课程
视频 ·CSS选择器分类
视频 ·基本选择器(1)
视频 ·基本选择器(2)
视频 ·基本选择器(3)
视频 ·基本选择器(4)
视频 ·基本选择器(5)
视频 ·关系选择器(1)
视频 ·关系选择器(2)
视频 ·关系选择器(3)
视频 ·关系选择器(4)
视频 ·关系选择器(5)
视频 ·属性选择器(1)
视频 ·属性选择器(2)
视频 ·属性选择器(3)
视频 ·属性选择器(4)
视频 ·属性选择器(5)
视频 ·属性选择器(6)
视频 ·属性选择器(7)
视频 ·语言伪类选择器
视频 ·UI状态伪类选择器
视频 ·结构伪类选择语法
视频 ·结构伪类选择器n表达式
视频 ·first-and-last-child选择器
视频 ·nth-child选择器
视频 ·nth-last-child
视频 ·nth-of-type选择器
视频 ·nth-last-of-type选择器
视频 ·CSS选择器权重
视频 ·border width
视频 ·border style
视频 ·border color
视频 ·border-radius属性的使用及参数
视频 ·border radius 属性的使用方法
视频 ·border radius实战:制作特殊图形
视频 ·CSS3盒子阴影介绍
视频 ·box shadow单边阴影制作
视频 ·box shadow 边框制作
视频 ·box shadow图片内阴影制作
视频 ·案例分析:阴影盒子制作立体表单
视频 ·案例分析:阴影盒子制作loading动画
视频 ·border-image
视频 ·background-position
视频 ·background-clip
视频 ·background-mutipl
视频 ·text-align
视频 · vertical-align
视频 · line-height
视频 · text-decoration
视频 ·text-indent
视频 ·text-transform
视频 ·text-overflow
视频 ·text-shadow
视频 ·letter-spacing
视频 ·word-spacing
视频 ·white-space
视频 ·word-break
视频 ·word-wrap
视频 ·font-face
视频 ·direction
视频 ·text-align-last
视频 ·重要术语
视频 ·box-sizing
视频 ·width-height
视频 ·min-width
视频 ·margin-padding
视频 ·display
视频 ·position
视频 ·float
视频 ·过渡
视频 ·渐变-1
视频 ·渐变-2
视频 ·渐变-3
视频 ·渐变-4
视频 ·animation-1
视频 ·animation-2
视频 ·animation-3
视频 ·Transform-1
视频 ·Transform-2
CSS3部分
- 课程简介:
- CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本章讲带领大家剖析CSS3的新特性,做出绚丽的网页效果。
选择器




























属性
















CSS文本模块
















CSS布局模块


















显示详细课程
第4门 Web前端课程
视频 ·javascript是什么
视频 ·第一个javascript代码
视频 ·js的三种引入方式(上)
视频 ·js的三种引入方式(下)
视频 ·操作页面元素
视频 ·初识鼠标事件&函数
视频 ·JavaScript变量
视频 ·焦点图另类做法、使用数组进行和innerHTML拼接
视频 ·js获取元素属性
视频 ·js控制隐藏显示切换
视频 ·a链接事件处理&网页换肤
视频 ·提取行间事件
视频 ·案例-百度网盘换肤-class形式
视频 ·案例-百度网盘换肤-link形式
视频 ·for循环的使用
视频 ·for案例-点击显示再点回来
视频 ·案例-360登陆效果
视频 ·style与className
视频 ·函数传参
视频 ·getElementsByTagName的使用,for
视频 ·案例-选项卡(上)
视频 ·案例-选项卡(下)
视频 ·新浪vr多重选项卡-布局部分
视频 ·新浪vr多重选项卡-js部分
视频 ·案例:简易日历(上)
视频 ·案例:简易日历(下)
视频 ·鼠标移入移出、规避bug
视频 ·javascript变量类型
视频 ·计算两个文本框的和
视频 ·变量类型转换
视频 ·变量作用域和闭包
视频 ·命名规范
视频 ·运算符
视频 ·赋值
视频 ·switch
视频 ·网易云音乐-隔行变色
视频 ·京东数量加减框、通过数量和价钱算分期
视频 ·do while
视频 · js中的真和假
视频 ·真和假的应用
视频 · js中的随机数
视频 ·定时器
视频 ·定时器实例
视频 ·简易时钟
视频 ·补零
视频 ·本月多少天
视频 · 网易广告
视频 ·轮播图(上)
视频 ·轮播图(下)
视频 · 倒计时
视频 ·指定日期倒计时
视频 · 获取非行间样式(上)
视频 ·获取非行间样式(下)
视频 ·批量设置css样式
视频 · json
视频 ·json设置、读取、注意事项
视频 ·json选项卡
视频 ·字符串方法(上)
视频 ·字符串方法(下)
视频 ·案例-首字母大小、全部大写、全部小写
视频 ·字符串大小写转换
视频 ·字符串比较数组
视频 ·数组的操作方法
视频 ·数组排序
视频 ·数组操作焦点图
JS入门
- 课程简介:
- JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言。简单来说,咱们能在网页上看到的“功能”都是有js来完成的。通俗来讲,网页中实现用户交互,前端数据处理等。这章我们将认识这个新伙伴-javascript。
JS入门(上)

















JS入门(下)










JS基础






































显示详细课程
第5门 Web前端课程
视频 ·dom子元素
视频 ·dom-childrenNodes&parentNode
视频 ·dom首位节点&兄弟节点
视频 ·创建&删除dom元素(上)
视频 ·创建&删除dom元素(下)
视频 ·创建例子(上)
视频 ·创建例子(下)
视频 ·dom新属性操作方式
视频 ·bom基础
视频 ·onscroll事件&居中的广告位(上)
视频 ·onscroll事件&居中的广告位(下)
视频 ·offset&offsetParent
视频 ·getBoundingClientRect
视频 ·图片延时加载1
视频 ·图片延时加载2
视频 ·图片延时加载3
视频 ·图片延时加载4
视频 ·图片延时加载5
视频 ·新浪微博创建01
视频 ·新浪微博创建02
视频 ·新浪微博创建03
视频 ·新浪微博创建04
视频 ·新浪微博创建05
视频 ·瀑布流(上)
视频 ·瀑布流(下)
视频 ·innerHTML事件消失
视频 ·吸顶导航
视频 ·事件冒泡
视频 ·鼠标事件-放大镜效果1
视频 ·鼠标事件-放大镜效果2
视频 ·鼠标事件-放大镜效果3
视频 ·键盘事件
视频 ·百度安全中心
视频 ·城市三级联动1
视频 ·城市三级联动2
视频 ·城市三级联动3
视频 ·城市三级联动4
视频 ·预加载焦点图
视频 ·唯品会个性放大镜
视频 ·事件-网页上的快捷键使用
视频 ·事件对象
视频 ·跟随鼠标
视频 ·放大镜
视频 ·键盘事件
视频 ·初探拖拽、拖拽原理、简易拖拽
视频 ·拖拽显示范围、磁性吸附
视频 ·拖拽案例-仿QQ界面拖拽效果
视频 ·带回放的拖拽效果
视频 ·事件绑定与解绑
视频 ·事件冒泡与事件捕获
视频 ·事件绑定的问题
视频 ·call的使用
视频 ·事件绑定的问题,return false问题
视频 ·碰撞检测、图解碰撞检测、如何检测元素是否碰上
视频 ·碰撞检测交换位置、减少变量的方法(上)
视频 ·碰撞检测交换位置、减少变量的方法(下)
视频 ·自定义滚动条
视频 ·oninput
视频 ·字数统计
视频 ·鼠标滚轴事件、chrome和firefox区别、detail与wheelDelta
视频 ·detail和wheelDelta正负值、统一滚动的方向
视频 ·滚动滚轴改变元素大小
视频 · 改善滚动、完善封装1
视频 · 改善滚动、完善封装2
视频 ·自定义滚动条加拖拽实现App-Store自定义滚动条(上)
视频 ·自定义滚动条加拖拽实现App-Store自定义滚动条(下)
视频 ·ready事件、readyState、DOMContentLoaded、封装ready函数
视频 ·案例-中关村在线-01
视频 ·案例-中关村在线-02
视频 ·案例-中关村在线-03
视频 ·案例-中关村在线-04
视频 ·案例-中关村在线-05
视频 ·百度彩票-双色球-1
视频 ·百度彩票-双色球-2
视频 ·百度彩票-双色球-3
视频 ·百度彩票-双色球-4
视频 ·百度彩票-双色球-5
视频 ·百度彩票-双色球-6
视频 ·百度彩票-双色球-7
视频 ·百度彩票-双色球-8
JS中级
- 课程简介:
- 在学习javascript中的函数、变量 、事件、函数传参、闭包、数组...之后呢,我们要进入到js的中级部分了。本章节我们将学习到dom、bom 、事件对象等。涉及的知识点有: 子元素、父元素、创建节点、删除节点、bom基础、onscoll、offset 案例图片延时加载 案例瀑布流 吸顶导航、事件冒泡 案例放大镜效果 键盘事件等。
DOM和BOM











DOM应用
















事件对象













事件基础








事件中级











事件高级





















显示详细课程
第6门 Web前端课程
视频 ·js动画基础、第一个动画、问题
视频 ·解决因为某些值不能达到目标点的问题
视频 ·封装、解决再次点击依然动的问题、继续封装
视频 ·封装完成简单的动画库
视频 ·运动框架案例、链式运动
视频 ·运动类型、linear、ease-in
视频 ·tween.js的使用
视频 · tween.js的焦点图案例
视频 ·newmove制作焦点图
视频 ·tween.js和move.js完美运动框架
视频 ·案例-无缝焦点图
视频 ·案例-无缝焦点图-任意切换
视频 ·案例-仿淘宝每次滚动一屏
视频 ·回到顶部-普通版本
视频 ·回到顶部-提升版本
视频 ·初识cookie
视频 ·设置cookie、cookie的过期时间、路径
视频 ·设置cookie函数
视频 ·获取cookie、清除cookie
视频 ·换肤cookie案例
视频 ·初识正则、简介、test、match、replace、特殊含义字符(上)
视频 ·初识正则、简介、test、match、replace、特殊含义字符(下)
视频 ·特殊含义字符 杠(、d D s S w W 、 b B)^ $
视频 ·验证邮箱(上)
视频 ·验证邮箱(下)
视频 ·敏感词过滤、自定义replace
视频 ·正则过滤标签、getClass、封装getClass
视频 · ajax本地环境搭建、win和mac不同系统的环境配置、注意事项
视频 ·同步和异步的区别
视频 ·get和post区别
视频 ·ajax如何发送请求(上)
视频 ·ajax如何发送请求(下)
视频 ·封装ajax
视频 ·ajax请求数组
视频 ·ajax请求json
视频 ·ajax实例-用户注册登陆-环境配置
视频 ·ajax实例-用户注册登陆-登陆-剪辑
视频 ·ajax实例-用户登陆效果
视频 ·ajax实例-优化ajax、get和post发送方式区别
视频 ·ajax实例-ajax函数最终方法、超时情况的处理(上)
视频 ·ajax实例-ajax函数最终方法、超时情况的处理(下)
视频 ·ajax实例-ajax注册-基础版
视频 ·ajax实例-处理性别
视频 ·ajax实例-检验密码
视频 ·ajax实例-校验生日、地址
视频 ·ajax实例-校验生日、地址、ajax库bug的解决
视频 ·ajax实例-登陆注册之间切换
视频 ·ajax实例-与页面之间的配合
视频 ·ajax案例-登陆成功后设置cookie
视频 ·json简介、前戏
视频 ·jsonp请求360搜索数据-1
视频 ·jsonp请求360搜索数据2
视频 ·jsonp请求360搜索数据3
视频 ·封装josnp框架
视频 ·封装josnp框架、测试封装函数
视频 ·手机号码归属地
视频 ·案例-jsonp请求360天气
视频 ·js中的模板1
视频 ·js中的模板2
视频 ·js中的模板3
视频 ·js中的模板4
视频 ·jQuery版本选择
视频 · jQuery选择器基本使用(上)
视频 ·jQuery选择器基本使用(下)
视频 ·事件(上)
视频 ·事件(中)
视频 ·事件(下)
视频 ·属性(上)
视频 ·属性(下)
视频 ·尺寸
视频 ·ɸѡ
视频 ·动画
视频 ·选项卡
视频 ·轮播图
视频 ·文档处理(上)
视频 ·文档处理(中)
视频 ·文档处理(下)
视频 ·拖拽
视频 ·jQuery的ajax
JS高级
- 课程简介:
- 恭喜你,终于来到了咱们javascript的高级部分了。相信前面的章节您已经学会了如何做出一个漂亮的网页,并且实现了很多交互效果。这个阶段呢,我们将逐渐逐渐深入,比如你可能会学习到ajax,正则,jquery等。简单来说,ajax完成了一个网站的前后端通信,数据交互,使我们可以做出一个“动态”的网站,而正则呢,或许可以让你更高效灵活的实现一些规则上的需求。jquery呢,更是咱们原生javascript的一大利器。就跟着我们一步一步来吧!
JS运动















COOKIE视频





正则表达式







Ajax






















jsonp












jQuery


















显示详细课程
第7门 Web前端课程
视频 ·HelloWord实例
视频 ·v-if v-else和v-show
视频 ·v-for指令
视频 ·v-text和v-html指令
视频 ·v-on指令
视频 ·v-model指令
视频 ·v-bind指令标签属性绑定
视频 ·其他指令
视频 ·Vue.directive自定义指令
视频 ·Vue.extend扩展实例构造器
视频 ·Vue.set全局操作
视频 ·生命周期
视频 ·Template模板
视频 ·component_1
视频 ·component_2
视频 ·component_3
视频 ·component_4
视频 ·propsDataOption
视频 ·computedOption
视频 ·MethodsOption
视频 ·watchOption
视频 ·mixinsOption
视频 ·extendsOption
视频 ·Vue-router入门
视频 ·vue-router配置子路由
视频 ·vue-router如何参数传递
视频 ·单页面多路由区域操作
视频 ·vue-router 利用url传递参数
视频 ·vue-router 的重定向-redirect
视频 ·alias别名的使用
视频 ·路由的过渡动画
视频 ·mode的设置和404页面的处理
视频 ·路由中的钩子
视频 ·编程式导航
视频 ·Mockplus把我们的想法画出来
视频 ·Vue-cli搭建开发环境
视频 ·搞定项目图标Iconfont
视频 ·编写独立的侧边栏导航组件
视频 ·开启Element封印
视频 ·利用Element快速布局(1)
视频 ·利用Element快速布局(2)
视频 ·Axios从远程读取数据
视频 ·订单模块制作 核心功能-1
视频 ·订单模块制作 核心功能-2
视频 ·项目打包和上线
Vue
- 课程简介:
步入Vue的大门








全局VPI









选项






Vue-router











Vue实战POS系统











显示详细课程
课程价格
2480元
- 课程内容包括
- 1Web前端开发技术之结构层HTML
- 2Web前端开发技术之表现层CSS
- 3Web前端开发技术之表现层JAVASCRIPT
- 4二年以内所有课程更新
- 注:
- 1)我们确保课程会保持一定的进度不断调整更新,确保大家学到的永远是最新、最实用的内容。
2)有具备真实的项目经验,才可以在应聘单位要求“需要X年工作经验”时,胸有成竹,泰然处之。在工作中才能做到游刃有余。不夸张地说,如果你掌握我们85%以上的知识内容,入职后,就是公司的顶梁柱。
知友评价
一直以来,大漠老师都是在知乎和w3cplus中分享自己的知识和经验。帮助了很多知友,也得到了很多知友暖心的评价。
- 大漠回答
-
有哪些适合新手模仿学习的静态页面?
- 白马拥轻裘
- 感谢 四个月前看见这个答案里的第一个网站 现在仿了里面的七八个demo了 学习到了很多知识 感谢感谢
- 大漠回答
-
国内有什么好的前端学习网站推荐?
- 小郎中
- 每天都去学两三篇文章!每次都有收获,谢谢
- 大漠回答
-
移动端布局,div按比例布局,宽度为百分比,但又想让高度和宽度一样,即让div为正方形,怎么做布局呢?
- Jean ys
- 非常感谢解决了已久的疑惑!padding-bottom:100%用的实在太妙了!
- 大漠回答
-
如何理解块级格式化上下文BFC(block formatting context)?
- 欧文Z
- 大漠不亏是专家,搜集了这么多文献资料
- 大漠回答
-
像「class="btn btn-large btn-block btn-primary"」这样的 CSS 使用风格好吗?
- 蒹葭从风
- 你写的真的很好,很清晰,我见过最清晰的关于CSS类和Sass的解释。
常见问题
-
-
为什么你们的课程价格这么便宜?
-
在线教育的学习模式为我们的经营节约了很多成本,也为学员节约了来回奔波的时间,我们愿意将节约下来的成本回馈给我们的学员。是的,目前的学费价格很便宜,加上大漠老师的专业指导,这部分学费完全可以忽略不计。如果你想在前端这个行业一展手脚,跟大漠老师学习可以让你避免很多弯路。
-
-
是否包就业?
-
不包。如果你足够优秀的话,我们愿意为你推荐工作。
-
-
你们的课程与市面上的课程有什么区别?
-
市面上有很多前端课程,但是没有一个课程是大漠老师讲的。大漠老师是一名优秀的老师和分享者,这很少见,我们的课程自带项目实训属性,而且我们的课程内容会不断优化和更新。综上所述,我们的课程模式和课程内容早已甩其他培训机构N条街。
-
-
学完你们的课程能达到什么水平?
-
web前端是互联网行业最火的开发职位,不夸张地说,如果你掌握我们85%以上的知识内容,入职后,就是公司的顶梁柱。
-
-
想成为优秀的前端工程师需要哪些条件?
-
Practice Makes Perfect。如果想成为专家或者资深前端工程师,首先要对前端足够热爱,另外也愿意跟不同的达人或者高手交流经验,在帮助别人和分享知识的过程中,自己的技术也可以得到一定程度的提升。