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

课程结束

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

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

有趣的鼠标悬浮模糊效果

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

课程结束

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

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

动态数据绑定(一)

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

课程结束

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

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

UI组件之色彩选择器

任务描述 欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会 如下示例图中所示,参考并实现一个色彩选择器: 组件默认一直呈显示状态 可以通过点击左侧色彩区域选择色彩,在右侧的输入框中会显示对应的色值,包括RGB和HSL值 可以通过调节右侧输入框的各数值,来查看对应的颜色 可以通过在中间的色带上点击来确定大致的颜色区域 提供设定颜色值的接口,指定具体颜色,左侧色区和右侧输入框显示对应数值 提供获取颜色值的接口,可获取色彩选择器选中的颜色值,可返回CSS color、RGB、HSL三种格式的色值 任务注意事项 示例图仅为参考,样式及交互方式不需要完全实现一致 可以合…

课程结束

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

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

标签云

任务描述 欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会 参照示例,实现一个标签云的效果Demo 要显示的标签数量、标签内容都可以支持用户自定义 标签云的转速也可以通过自定义来进行调节 不同的标签需要由不同的颜色和字体大小区分开来 任务注意事项 示例仅为参考,样式及交互方式不需要完全实现一致 请注意代码风格的整齐、优雅 代码中含有必要的注释 可以合理使用第三方框架、类库,但不可直接使用现成的功能库 …

课程结束

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

1468人在学习该课程,有168人已经完成该课程

WebGL No.1 - Three.js 入门

ECharts & WebVR 学院 之 WebGL 方向 在 WebGL 方向的教学过程中,你将了解到 WebGL 的一些基本原理,并且基于 Three.js 动手实现三维渲染的世界。 我们将以《Three.js 入门指南》作为主要参考教程,在此基础之上,也会补充其他的学习资料,指导大家从零基础掌握前端 3D 渲染相关知识。对于有一定图形学基础的同学,可以直接从进阶部分开始学习诸如动画、模型、光影、着色器等话题。 每一题需要提供可运行的网页链接和源码链接。 本方向的 QQ 群号:383578356 储备知识 需要对 JavaScript 比较了解; 无需了解图形学相关知识。 任务…

课程结束

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

106人在学习该课程,有18人已经完成该课程

巨型画布

任务描述 欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会 首先,我们需要一个巨型画布 这个画布不是大,而是巨大。它所支持的图片分辨率应当达到19200 x 10800。 我们不希望看到一个尺寸巨大的canvas容器,将整个图片显示出来。 呈现给用户的画布尺寸,最大分辨率是1024 x 768,画布只显示图片的一部分(暂时不考虑图片缩放显示)。 其次,我们希望这个画布支持拖拽 画布只能显示图片的一部分,我们希望通过鼠标在画布上的拖动,查看图片的其他部分。 为了不影响运行效率,鼠标拖拽的过程中,可以不做效果处理,只在鼠标抬起后,给出交互结果。 第三,我们需要一个缩…

课程结束

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

33人在学习该课程,有6人已经完成该课程

自动抠图

任务描述 欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会 抠图在图像处理中是常见的功能,在很多行业都有广泛的应用,比如抠去电影画面中的绿幕。这个题目的需求相对简单,需要你实现一个自动抠图的功能。 首先,我们需要一个能动态载入图片的画布 能从本地选择一张图片,放到一个canvas容器中。 这个画布可以放大缩小,已达到缩放显示图片的目的。 这个画布能响应鼠标事件,当鼠标点击在画布某个位置时,可以读取出当前位置的RGBA四通道颜色值。 其次,我们希望有一个抠图功能 鼠标点击画布后,要执行一个选中操作 选中的区域不是规则图形,而是需要你,根据点击区域附近的颜色,自行确定选中范…

课程结束

难度:普通时间:大约需要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中的兄弟相邻选择器 …

课程结束

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

133人在学习该课程,有91人已经完成该课程

WebGL No. 2 - 光与影

本方向的 QQ 群号:383578356 任务目的 在这一题中,你需要了解 Three.js 中不同类型的光源,并学会将它们添加到场景中。 任务描述 学习《Three.js 入门指南》第 8 章光与影; 理解不同类型灯光的区别和适用场景; 学会为场景添加合适的灯光; 思考灯光的位置对哪些类型的灯光是无所谓的,以及为什么; 思考为什么有些灯光无法形成阴影; 在第 1 题场景的基础上,增加光照效果; 如果你没做第 1 题,也可以随便在场景中创建一些物体; 为物体设置合适的材质(预习第 4 章),使得物体的亮度根据光照有所区别; 创建一个地板平面,并将小车投影到地板上 尝试并思考,一个物体…

课程结束

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

课程结束

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

133人在学习该课程,有14人已经完成该课程

贪吃蛇

任务描述 欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会 这是一个怀旧的任务。没有贪吃蛇的童年,是不完整的。好吧,现在用html来实现一个Snake Online 首先,我们需要一个空的颗粒化地图 所谓颗粒化地图,就是规定了蛇每次移动的距离和方向余度。 蛇每次移动一个格子,方向只能是前、左、右。 用户通过键盘上的上下左右键操作游戏,也可以用asdw 玩家敲击空格后,游戏暂停,暂停时,屏幕上给出一个图案,遮挡住整个地图 第二,玩法选择 第一种是普通模式。蛇越来越长,过一段时间增加一次移动速度。蛇占满了屏幕算胜,撞墙壁或撞自己算负 第二种是过关模式。在每一关中,蛇的移动速…

课程结束

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

88人在学习该课程,有60人已经完成该课程

WebGL No. 3 - 材质与纹理

任务目的 在这一题中,你将接触到如何为物体设置不同的材质,并且使用图片作为纹理。 任务描述 学习《Three.js 入门指南》第 4 章材质; 为小车的车厢的六个面设置贴图,图片可以随便画,也可以网上找资源; 为小车的轮胎和地板设置合适的材质。 …

课程结束

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

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

WebGL No. 4 - 照相机和交互控制

任务目的 在这一题中,你将了解如何为场景设置合适的照相机位置,并且配合鼠标实现交互控制照相机位置。 任务描述 学习《Three.js 入门指南》第 2 章照相机; 为场景添加合适的照相机位置; 实现交互控制照相机位置; 场景可以使用前两题的,也可以随意添加一些物体; 使用 TrackballControls 实现 Three.js 例子 的效果; 左键旋转、中键缩放、右键平移; Three.js 提供了一类辅助类的代码,比如用于交互控制的 TrackballControls ,这些代码不包括在 three.js 文件中,需要使用的话要额外引入,在这题中,可以使用这个文件快速实现效果; 可以参…