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

熊承彬

百度糯米运营平台研发部高级研发工程师。14年11月加入百度,从云平台前端团队的菜鸟,到直达号营销团队项目前端负责人,再到糯米前端团队核心成员,对前端新人如何快速成长有自己独特的见解。一向执着并热爱前端技术,对React, Vue, Angular, Nodejs等技术都有深刻了解。经历过多次大型项目重构,对复杂代码组织构建,模块划分等具有丰富经验。

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

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

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

自定义checkbox, radio样式

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

课程结束

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