百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

百度糯米前端技术学院

百度糯米前端技术学院,是覆盖糯米业务范围最广的前端技术团队,包含B(Business)&C(Customs)两端,应用场景涵盖PC、NA和WAP三端。团队内有对前端各个领域擅长的资深技术人才,从入门到精通都有专门导师做1对1指导。学院的宗旨是服务学员,专注如一。欢迎大家加入百度糯米前端技术学院,跟我们一起,探索前端技术奥妙!

关键词 node css3 vue
共发布 22个课程,已经有 7706名学生在这里学习上课
熊承彬
百度糯米运营平台研发部高级研发工程师。14年11月加入百度,从云平台前端团队的菜鸟,到直达号营销团队项目前端负责人,再到糯米前端团队核心成员,对前端新人如何快速成长有自己独特的见解。一向执着并热爱前端技术,对React, Vue, Angular, Nodejs等技术都有深刻了解。经历过多次大型项目重构,对复杂代码组织构建,模块划分等具有丰富经验。
梁少峰
糯米运营平台研发部前端工程师,公众号“前端早读课”专栏作者,知乎专栏“Vue源码学习”作者。 著有个人博客:https://github.com/youngwind/blog (star 300+) 热衷在造轮子中学习,比如MVVM框架、基于vue的UI组件库、模块加载器等等。熟练掌握Vue、React等框架,在移动H5和后端方面也有所涉猎。
课程结束

难度:进阶时间:大约需要1

1237人在学习该课程,有331人已经完成该课程

有趣的鼠标悬浮模糊效果

任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义、用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: 了解CSS的定义、概念、发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式 任务描述 实现图示效果(点击查看) 实现文字的流光渐变动画 背景图需要进行模糊处理 实现按钮边框的从中间到两边扩展开 任务注意事项 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定 尽可能多地尝试不同的…

课程结束

难度:进阶时间:大约需要1

1008人在学习该课程,有383人已经完成该课程

动态数据绑定(一)

任务目的 了解 getter 和 setter 了解 new 任务描述 这是“动态数据绑定”系列的第一题。 我之前经常使用 Vue,后来不满足于仅仅使用它,我想了解其内部实现原理,所以就尝试学习其源码,获益匪浅。所以,如果你跟我一样,希望挑战这高难度的事情,那就开启这一系列吧! 我们从最简单的开始。 其中,动态数据绑定就是 Vue 最为基础,最为有用的一个功能。这个系列将分成5部分,一步一步来理解和实现这一功能。 ok,我们从最简单的开始。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子。 let app1 = new …

课程结束

难度:进阶时间:大约需要4

336人在学习该课程,有260人已经完成该课程

动态数据绑定(二)

任务目的 在实践中使用递归思想 了解设计模式中的“发布-订阅模式” 任务描述 这是“动态数据绑定”系列的第二题。在第一题的基础上,我们继续考虑以下难点: 如果传入参数对象是一个“比较深”的对象(也就是其属性值也可能是对象),那该怎么办呢?举个例子。// 一个“比较深”的对象:某些属性的值也是一个对象 let obj = { a: 1, b: 2, c: { d: 3, e: 4 } } 如果设置新的值是一个对象的话,新设置的对象的属性是否能能继续响应 getter 和 setter。举个例子。 let app1 = new Observer({ …

课程结束

难度:困难时间:大约需要4

212人在学习该课程,有159人已经完成该课程

动态数据绑定(三)

任务目的 了解事件传播机制 任务描述 这是“动态数据绑定”的第三题。在第二题的基础上,我们再多考虑一个问题:"深层次数据变化如何逐层往上传播"。举个例子。 let app2 = new Observer({ name: { firstName: 'shaofeng', lastName: 'liang' }, age: 25 }); app2.$watch('name', function (newName) { console.log('我的姓名发生了变化,可能是姓氏变了,也可能是名字变了。') });…

课程结束

难度:困难时间:大约需要5

139人在学习该课程,有111人已经完成该课程

动态数据绑定(四)

任务目的 熟练使用原生 JS对操作 DOM 结构 任务描述 这是“动态数据绑定”的第四题。有了前面的充分准备,相信你能搞定这一题。请实现如下的这样一个 Vue,传入参数是一个 Selector 和一个数据对象,程序需要将 HTML 模板片段渲染成正确的模样。 这就是一次性的静态数据绑定。 let app = new Vue({ el: '#app', data: { user: { name: 'youngwind', age: 25 } } }); <!-- 页面中原本的 html 模板片段 --> <div id=…

课程结束

难度:普通时间:大约需要0.2

1582人在学习该课程,有438人已经完成该课程

自定义checkbox, radio样式

任务目的 深入了解html label标签 了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现页面开发,要求实现效果基本一致 任务注意事项 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点。 注意测试不同情况,尤其是极端情况下的效果。 参考资料 MDN label: 了解html中label的基本知识 MDN background-position: 了解背景图片定位相关知识 MDN :checked: 了解input的:checked伪类的基本知识以及应用场景 …

课程结束

难度:困难时间:大约需要7

108人在学习该课程,有84人已经完成该课程

动态数据绑定(五)

任务目的 综合应用本系列的所有知识点 任务描述 这是“动态数据绑定”的最后一题了,希望你能坚持到最后。在第四题的基础上,我们考虑如何做到:"当数据发生改变时,重新渲染 DOM。" 此目标又可以分为两层难度。 相对简单的目标:数据任意部分发生了变化,都重新渲染 DOM。 相对困难的目标:数据的某一部分发生了变动,只重新渲染对应这部分数据的 DOM。 举个例子。 let app = new Vue({ el: '#app', data: { user: { name: 'youngwind', age: 25 }, …

课程结束

难度:普通时间:大约需要0.2

664人在学习该课程,有311人已经完成该课程

自定义网页右键菜单

任务目的 了解js中的oncontextmenu事件 了解如何获取鼠标位置 了解如何实现页面屏蔽右键菜单 任务描述 实现鼠标右击时,出现自定义菜单。点击非自定义菜单区域时,隐藏自定义菜单。参考样例(点击查看),实现页面开发,要求实现效果基本一致。 点击自定义菜单条目时,弹出菜单条目名称。 任务注意事项 自定义菜单出现在鼠标指针右下方,当右边区域不够大,展示在左下方,同理,当下方区域不够时,展示在鼠标指针上方 注意测试不同情况,尤其是极端情况下的效果 尽量不要使用第三方库,包括jQuery 参考资料 oncontextmenu: 了解JavaScript中oncontextmenu…

课程结束

难度:进阶时间:大约需要0.5

215人在学习该课程,有156人已经完成该课程

使用CSS实现折叠面板

任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例),要求样式一致。 任务注意事项 当其中一个面对折叠时,其他面板需要隐藏 只能使用HTML,CSS,不允许使用JavaScript 注意测试不同情况,尤其是极端情况下的效果 有能力的同学在面板折叠或者展开时添加动画效果 参考资料 MDN label: 了解html中label的基本知识 MDN Adjacent sibling selectors: 了解CSS中的兄弟相邻选择器 …

课程结束

难度:普通时间:大约需要0.2

607人在学习该课程,有262人已经完成该课程

正则表达式之入门

任务目的 掌握JavaScript正则表达式编写规则 了解JavaScript中的正则表达式的特殊字符 了解JavaScript提供的正则表达式相关方法 能用正则表达式做一些简单文本或者数字校验 任务描述 编写一个判断给定数字是否为手机号码的正则表达式,测试用例参照但不限于:18812011232 // 测试结果应该为 true 18812312 // false 12345678909 // false 编写一个判断输入的字符串是否有相邻重复单词的正则表达式,测试用例可以参考但不限于:foo foo bar // true foo bar foo …

课程结束

难度:困难时间:大约需要1.5

69人在学习该课程,有39人已经完成该课程

正则表达式之简易markdown文件解析器

任务目的 深入理解正则表达式 练习使用正则表达式处理文本 掌握Markdown语法 任务描述 参考Mahua 在线Markdown编辑器左右两栏样式,实现一个在线的Markdown文档编辑器。要求: 可以解析标题 可以解析列表,包含有序和无序列表 可以解析引用和代码块 任务注意事项 尽量独立思考完成,必要时也可以参照一些开源库如marked的实现 注意测试不同情况,尤其是极端情况下的能否正常解析。 如果有能力,可以尝试添加图片、链接的解析。 参考资料 Markdown——入门指南: 了解markdown基本语法,里面有介绍一些markdown编辑器,可以试用感受一下 common…

课程结束

难度:进阶时间:大约需要1

264人在学习该课程,有171人已经完成该课程

CSS3饼状loading效果

任务目的 学习和掌握水平垂直居中布局 学习和掌握利用HTML和CSS构造简单规则图形 学习和掌握和使用CSS3动画新特性任务描述 实现图示效果。(点击查看) 需要使用HTML和CSS实现半圆和四分之三圆环 longding动画页面上下左右剧中 所有的动画元素采用HTML和CSS实现任务注意事项 尽量只使用HTML和CSS代码编写,不需要JavaScript 不能引入其他图片 尽量提高动画性能 HTML 及 CSS 代码结构清晰、规范在线学习参考资料 w3cplus 《图解CSS3》 MDN CSS3 …

课程结束

难度:进阶时间:大约需要1

318人在学习该课程,有144人已经完成该课程

CSS3实现3D 轮播图

任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义、用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的CSS编码,包括以下但不限于: 了解CSS的定义、概念、发展简史 掌握CSS选择器的含义和用法 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式 理解 css 3d 和 景深的原理任务描述 实现图示效果(点击查看)任务注意事项 只需要完成HTML,CSS代码编写,需要写一点JavaScript 需要有一定的数学计算 可以尝试不同的逻辑处理:如点击切换,滑动切换等等 …

课程结束

难度:困难时间:大约需要7

53人在学习该课程,有12人已经完成该课程

封装DOM动画类库(一)

任务目的 理解DOM动画的本质 深入理解JS DOM动画实现原理 学习和掌握javascript类库的设计与开发 通过封装类库合理使用设计模式,理解设计模式及其带来好处任务描述 动画库API(接口文档)设计参考velocity.js,参考其源码实现,类似:Animation(DOM元素集合,变化CSS属性集合,选项)或者Animation(DOM元素集合).animation(变化CSS属性集合,选项)。 动画选项设计靠拢CSS3动画概念(duration,time-function/easing,delay,iteration-count/loop),采用补间动画设计,其中time-fu…

课程结束

难度:困难时间:大约需要7

12人在学习该课程,有5人已经完成该课程

封装DOM动画类库(二)

任务目的 理解DOM动画的本质 深入理解JS DOM动画实现原理 学习和掌握javascript类库的设计与开发 通过封装类库合理使用设计模式,理解设计模式及其带来好处 打造属于自己的动画操作流任务描述 在任务《封装DOM动画类库(一)》基础上继续完善动画库,实现更多选项 能够完成链式调用,实现动画队列。(参考jquery的queue或者ES6的generator) 增加定义动画序列和调用动画序列功能,参考velocity.js的UI Pack插件的Sequence部分 增加预定义动画功能,参考velocity.js的UI Pack插件的pre-registered effects 完成r…

课程结束

难度:困难时间:大约需要6

160人在学习该课程,有67人已经完成该课程

仿豆瓣音乐播放器

任务目的 ● 练习综合运用HTML、CSS、JavaScript实现功能 ● 熟悉 html5 audio 使用 ● 应用的整体架构设计 任务描述 ● 模仿豆瓣音乐播放器,编写基于 html5的音乐播放器 ● 顺序播放音乐列表支持循环,播放,暂停,快进,声音大小控制 ● 有封面图片展示以及歌曲名称 ● 音乐文件可以是本地或者来自网络 ● 界面尽量做到简洁整齐不必和豆瓣界面一样 任务注意事项 ● 可以使用 Jquery 等类库开发 ● 代码关键处必须要有注释 ● 布局可以使用 bootstrap 等css 布局框架 ● 尽量做到控制和数据分离 ● 兼容最新 chr…

课程结束

难度:困难时间:大约需要5

80人在学习该课程,有49人已经完成该课程

实现树形组件

任务目的 ● 练习综合运用HTML、CSS排版 ● 练习 JavaSript 递归使用 ● 练习 css 控制 html 隐藏和显示 任务描述 ● 类似window 资源管理器 ● 支持无限层级展示 ● 支持文件夹展开和隐藏 ● 不必支持显示文件夹图片 ● 支持数据格式如下: var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]}, {name: "父节点2…

课程结束

难度:普通时间:大约需要1

407人在学习该课程,有115人已经完成该课程

网页抓取分析服务系列之一(基础分析)

任务目的 体会数据的封装 快速学习新工具的的能力 熟悉phantomjs的基础用法 任务描述 安装phantomjs2.0,并查看webpage相关的API http://phantomjs.org/api/webpage/。 编写一个task.js脚本,参考官网的includeJs方法,实现根据传入的参数(关键字),抓取百度第一页对应该关键字的搜索结果。 将结果输出为json string回显。 回显的格式为 { code: 1, //返回状态码,1为成功,0为失败 msg: '抓取成功', //返回的信息 word: '示例关键字', /…

课程结束

难度:普通时间:大约需要1

123人在学习该课程,有75人已经完成该课程

网页抓取分析服务系列之二(设备模拟)

任务目的 学会分析并借鉴其他工具的运行机制 学习更多phatomJS的配置 任务描述 观察chrome开发者工具中device toolbar,切换到不同的device,查看浏览器BOM数据有何变化 把device toolbar中不同的device名对应的ua和尺寸信息记录下来,保存为配置文件 在任务1的基础上,增加一个参数,表示device信息,taskjs中,解析该参数并从配置文件找到对应的ua和尺寸,完成设置后再抓取 在结果中也增加一个device字段保存传入的设备名 任务注意事项 chrome device toolbar不了解可以百度一下看看使用方法,在conso…

课程结束

难度:进阶时间:大约需要3

51人在学习该课程,有40人已经完成该课程

网页抓取分析服务系列之三(服务封装)

任务目的 学习NodeJS HTTP模块 学习NodeJS和本地进程的互动 学习NodeJS和mongodb的交互 任务描述 安装nodejs和mongodb 利用nodejs的HTTP模块封装一个node服务,监听8000端口,接受一个参数(关键字),http模块示例参考如下: var http = require("http"); http.createServer(function(request, response) { console.log('request received'); response.write…

课程结束

难度:进阶时间:大约需要2

34人在学习该课程,有24人已经完成该课程

网页抓取分析服务系列之四(数据交互)

任务目的 学习前后端的交互 学习静态文件服务器的实现 对于结果的二次处理 任务描述 开发对应的前端界面,使用技术栈不限,越简单越好。输入包含一个输入框(输入关键字),一个下拉列表(选择对应的UL),一个提交按钮。 关键字输入做不能为空的校验,输入后发起异步请求,请求上阶段的服务。 在上阶段的服务中增加一个数据二次处理功能,对于返回的结果中有缩略图片的,下载图片到本地,并确保下载后的图片能被访问。 入库后,返回信息给前端,前端展示对应的抓取结果,以表格展示,图片加载本地已下载的图片 任务注意事项 静态文件服务器需用nodejs实现,也是8080端口,可以使用现成框架(推荐使用koa2)…

课程结束

难度:困难时间:大约需要3

27人在学习该课程,有15人已经完成该课程

网页抓取分析服务系列之五(并发控制)

任务目的 任务的并行控制逻辑设计 socket.io的使用 任务描述 在4的基础上前端增加一个输入选项(页码),表面需要抓取的页数,另外设备输入值由下拉框改为多选框。 单个用户可以选择多个设备的模拟任务,并且每个设备需要抓取多页。 服务器端根据选择的情况,生成任务待执行队列,每个phantomjs任务只执行一次抓取。同时允许nodejs调起最大5个phantomjs的进程。 前后端改为通过web socket通信,使用socket.io库,每完成一个抓取,将结果追加到页面中。同时在页面的最上方显示当前的进度(完成数/总任务数)。 任务注意事项 phantomjs进程的最大5个并发需要…