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

陈星弟

百度糯米高级前端工程师,百度糯米营销项目前端负责人,熟悉移动端开发和CSS3动画特效开发,对React,Angular,Vue,Node等技术有浓厚的兴趣并有一定研究,乐于探索前端最舒适可靠的开发方式,对于组件化开发有丰富的经验。

共发布 5个任务,已经有 1884名学生在这里学习上课
课程结束

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

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

有趣的鼠标悬浮模糊效果

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

课程结束

难度:进阶时间:大约需要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…