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

Varsha

百度高级研发工程师,在MVVM、Node.js方向有多年研发经验,对代码实现有极致的要求,致力于成为前端技术专家。

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

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

4824人在学习该课程,有1889人已经完成该课程

第二天:给自己做一个在线简历吧

第二天:给自己做一个在线简历吧 前言 我相信很多同学很着急的在第一天就开始看这个题了,没关系,如果你时间足够,没问题的。但是希望你记住,在这个系列课程中,完成多少任务并不重要,我们没有什么指标或者打分,来记录或者评估,你是不是一个快枪手。我们希望你在这个系列课程中,能够扎扎实实地掌握每一个基础知识,能够不断思考、实践,来形成自己的学习方法论,顺便提高自己的英文阅读能力以及写作能力。所以,不要在这里刷题,这里是个学习的平台,而不是培训考试速成培训班。 课程目标 第二天,我们希望你能够通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么。学习基本的HTML标签,理解HTML语义化概念 任…

课程结束

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

2009人在学习该课程,有1309人已经完成该课程

第三天:让简历有点色彩

第三天:让简历有点色彩 课程目标 今天我们会安排一些学习和练习,来初步了解什么是CSS,掌握基本的CSS概念,语法,学习如何设置一些简单的样式 任务描述 首先简单动下手,打开昨天编辑的 Codepen,在中间CSS的窗口,加上下面的代码 h1 { font-size: 32px; } p { color: orange; } 如果你之前的HTML没有用到这些标签,可以把h1或者p换成你使用到的标签 然后你应该发现下面的预览区域发生了一些变化,这就是你通过CSS代码,对你页面的样式进行了设置。接下来,我们边读边做。 阅读 我们先跳着阅读一下,关于使用CSS来设置字体,阅读MD…

课程结束

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

1369人在学习该课程,有972人已经完成该课程

第四天,背景边框列表链接和更复杂的选择器

第四天,背景边框列表链接和更复杂的选择器 课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 课程描述 复习 昨天我们学习了CSS的基本概念,基本的选择器,以及关于字体的一些样式设置,今天我们会进一步学习CSS的其它知识,但在开始之前,推荐你把昨天的阅读材料和自己写的代码花上半小时时间,回顾一下。 阅读 在学习枯燥难懂的盒模型之前,我们先学习一些简单的 W3School-背景 MDN-什么是背景 编码 打开你的简历代码,练习背景样式设置,比如把“简历”这两个大字标题加上一个背景色吧。多多实践,尽量把以下样式都实践一遍: background backgr…

课程结束

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

1185人在学习该课程,有885人已经完成该课程

第五天和第六天:三种简历

第五天和第六天 三种简历 课程目标 通过阅读及一个小型练习,掌握 CSS 盒模型及通过Float进行简单的布局 课程描述 阅读 今天我们要学习非常重要的一些知识,这些知识会伴随着你的前端生涯.首先我们先学习一下盒模型的概念 MDN-盒模型 MDN-再述盒模型 W3C 接下来我们了解一下浮动 MDN-浮动 W3C 浮动 如何理解 CSS 中的浮动布局方式? What methods of ‘clearfix’ can I use? 清除浮动(clearfix hack) 编码 今天的任务,我们将不在codepen上来实现,打开你电脑本地的代码编辑器(如VSCode,Sublime或者其它…

课程结束

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

1113人在学习该课程,有707人已经完成该课程

第七天到第八天:学习布局

第七天到第八天,学习布局 课程目标 通过大量练习,来学习布局的各种方式 复习 首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。 课程描述 阅读 MDN 定位 MDN 定位实战 MDN Flexbox 学习CSS布局 CSS布局(三) 布局模型 CSS布局(四) Float CSS布局(五) 网页布局方式 CSS布局(六) 对齐方式 七种实现左侧固定,右侧自适应两栏布局的方法 圣杯布局 双飞翼布局 圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局 三种三栏网页宽度自适应布局方法 编码 分别尝试使用Float、Position或者Flex…

课程结束

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

972人在学习该课程,有548人已经完成该课程

第九天到第十一天:来做一个漂亮的网站

第九天到第十一天,来做一个漂亮的网站 课程目标 经过前面八天的练习,我们基本把HTML和CSS的基本知识进行了一遍学习,新的任务,将会用三天的时间,来学习如何将一个设计稿转化为网页,通过这个过程实战我们之前学到的各种CSS知识。 课程描述 复习 首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。 阅读 按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”,在不同公司,切图的工作可能是不同职位做,可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样,这是我们需要掌握的一个基本功能,正常来说,小半天我…

课程结束

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

545人在学习该课程,有355人已经完成该课程

第十二天到第十五天,复杂页面实现

第十二天到第十五天,复杂页面实现 课程目标 再次通过一个复杂的页面样式实现来实践前面几天学习到的HTML及CSS知识。这个任务将会是HTML,CSS第一阶段学习的最后一个任务,务必不断重复审视自己的代码,是否每一个细节的实现都有理有据,是否做到最优。 课程描述 复习 如果还没有完成上一课任务的同学,请先完成上一个任务。 编码 使用VS Code等开发工具,按照如下设计图,进行页面的实现 PSD:链接: https://pan.baidu.com/s/1BygIXhCnNGjs1KzK6l5bZQ 密码: h29s 说明: 最左侧一列要求自适应浏览器高度,左上面4个按钮相对浏览器左上角固定…

课程结束

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

948人在学习该课程,有482人已经完成该课程

第十六天,开始感受JS的乐趣

第十六天,开始感受JS的乐趣 课程目标 从今天开始,我们要开始学习在Web开发中使用 JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理,今天的目标是初步了解 JavaScript/ECMAScript 是什么,开始学习基本的语法,并通过几个小例子的练习,来初步感受语言的魅力。 已经有经验的同学,可以直接跳过此课。 阅读 首先我们阅读一些定义和历史,放轻松阅读,不用背下来。 W3School JavaScript MDN 什么是JavaScript? 一文读懂JavaScript和ECMAScript的区别 W3School JavaScript历史 编码 接下…

课程结束

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

596人在学习该课程,有446人已经完成该课程

第十七天到第十八天,“如果”可以“重来”

第十七天到第十八天,“如果”可以“重来” 课程目标 今天将继续学习 JavaScript 的一些基本知识,比如if如果判断,for循环等 任务描述 阅读 W3School 从if-else看到异常 MDN 阅读完JavaScript第一步及JavaScript基础要件 编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> …

课程结束

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

485人在学习该课程,有406人已经完成该课程

第十九天:找到那个DOM

第十九天:找到那个DOM 课程目标 掌握 JavaScript 的核心之一:DOM,能够熟悉DOM相关操作,了解JavaScript事件机制 课程描述 阅读 W3School MDN DOM 《JavaScript 高级程序设计》 编码 查找元素练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> &l…

课程结束

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

441人在学习该课程,有366人已经完成该课程

第二十到第二十一天:让你和页面对话

第二十到第二十一天:让你和页面对话 课程目标 掌握 JavaScript 事件的概念,并能写出基本的事件相关的代码 掌握如何通过 JavaScript 操作 DOM 的样式 课程描述 阅读 首先学习了解 JavaScript 事件的知识 W3School 事件 MDN 事件 HTML DOM Text 对象 HTML DOM Button 对象 编码 <input id="name" type="text"> <button id="submit-btn">Submit</button> 在HTML中增加上面的代码,然后通过JavaScrip…

课程结束

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

362人在学习该课程,有292人已经完成该课程

第二十二天到第二十四天:JavaScript里面的居民们

第二十二天到第二十四天:JavaScript里面的居民们 课程目标 掌握 JavaScript 中的各个数据类型、对象的概念及常用方法,这次课程的任务量比较多,但不要着急,也不要急于完成任务,认真写好每一个代码。加油! 课程描述 阅读 首先,我们从变量和数据类型入手,同时学习一下 JavaScript 中的数字类型 W3School 变量 W3School 数据类型 JavaScript中值类型和引用类型的区别 MDN 变量 W3School 数字 MDN 数字 Number Math 编码 首先练习数字相关的一些操作: <div> <label>Numbe…

课程结束

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

324人在学习该课程,有275人已经完成该课程

第二十五天到第二十七天 倒数开始 滴答滴 滴答滴

第二十五天到第二十七天 倒数开始 滴答滴 滴答滴 课程目标 学习 JavaScript 的函数,学习如何使用和封装函数,学习Date对象 课程描述 阅读 可能大部分同学已经理解了函数是什么概念,不过对于一些新入门的同学,我们不妨再来仔细阅读一下什么是函数。 W3School 函数 MDN 编码 我们假设要在某种特殊的机器人上写代码,但是这个机器人本身只实现了以下两个方法(函数): Go,表示向当前方向前进一步 TurnLeft,表示向左转 那我现在需要你做的任务是向前走两步,然后向左转,再向前走一步,所以代码是: Go(); Go(); TurnLeft(); Go(); 好,看上去没…

课程结束

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

317人在学习该课程,有257人已经完成该课程

第二十八天到第三十天 给爱的人发个邮件吧

第二十八天到第三十天 给爱的人发个邮件吧 课程目标 通过一系列的练习掌握如何分解问题、解决问题,在这个过程中如何设计自己的代码结构,如何优化及重构。 课程描述 通过一个小练习综合运用 HTML、CSS、JavaScript,我们要实现一个邮箱输入的提示功能。最终示意图: 部分代码参考: <div class="wrapper"> <input id="email-input" type="text"> <ul id="email-sug-wrapper" class="email-sug"></ul> </div>…

课程结束

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

304人在学习该课程,有208人已经完成该课程

第三十一到第三十三天:我是精明的小卖家(一)

第三十一到第三十三天:我是精明的小卖家(一) 课程目标: 这次的任务将会分解为好几个子任务,是我们以后在工作中会经常遇到的项目类型--MIS系统,我们今天将会以MIS系统中的一个简单的页面示例,来让大家尝试一下稍微复杂的页面功能,我们如何进行拆解。 课程描述 最终需求描述: 这是一个数据报表定制页面,有许多筛选表单,有一个表格,以及几个图表,需要我们在不使用任何框架的情况下,完成这个页面的开发 页面初始化的时候,显示默认的数据及图表 根据用户的表单选择,可以进行数据和图表的切换,但这些切换动作都是在当前页面中完成 用户可以在当前页面上做一些数据修改,我们先设定这些修改仅对自己有效,将数据存在…

课程结束

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

173人在学习该课程,有130人已经完成该课程

第三十四天到第三十六天:我是精明的小卖家(二)

第三十四天到第三十六天 我是精明的小卖家(二) 课程目标 今天我们将学习SVG和Canvas,来继续丰富我们的销售报表 课程描述 需求描述 当上一课任务完成时,面对一个复杂数据的表格,估计没有人会仔细看这份数据的内容是什么,看也看不出什么。所以我们希望找到某种方式,让数据变得更加易读和易懂,而数据可视化正式解决这一问题的最佳答案。 在表格上方增加两个图表,一个折线图和一个柱状图,用于展现不同数据在12个月的销售情况。 先了解一下数据可视化 简要阅读下面两个文章了解数据可视化 数据可视化百科词条 ECharts数据可视化规范 小练习 阅读 我们将通过SVG及Canvas来分别实现折线图及柱状…

课程结束

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

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

第三十七天到第三十八天:我是精明的小卖家(三)

第三十七天到第三十八天:我是精明的小卖家(三) 课程目标 今天我们将学习LocalStorage,基于它来实现对于数据的写操作 课程描述 我们在做这种系统时,经常会有在数据表格中同时进行数据编辑的需求,这里面涉及两个工作,一个是实现在数据编辑的交互问题,另一个是解决数据编辑完成后的传输问题。今天我们就来学习一下。 编辑 需求 我们首先为所有表格增加一个编辑功能,在原来的表格输出的数据单元格,全部变成input输入框,里面为数据。 在页面中增加一个保存按钮,点击保存后将数据保存到LocalStorage中 页面加载的时候,优先从LocalStorage读取数据 阅读 我们需要阅读一些基础的背…

课程结束

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

129人在学习该课程,有109人已经完成该课程

第三十九天到第四十一天:我是精明的小卖家(四)

第三十九天到第四十一天:我是精明的小卖家(四) 课程目标 今天我们将进行这个任务系列的最后一课,学习Location,Hash等相关知识,来实现最后一个需求 课程描述 先来点简单的 阅读 W3School Location location.hash详解 MDN onhashchange 需求 <button id="a">A</button> <button id="b">B</button> <button id="c">C</button> <div id="cont"></div> 基…

课程结束

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

183人在学习该课程,有136人已经完成该课程

第四十二天到第四十三天:开一家餐厅吧(一)

第四十二天到第四十三天:开一家餐厅吧(一) 课程目标 通过一个新的系列课程,我们来学习更多的JavaScript知识,比如如何在JavaScript使用面向对象编程,如何在你的设计中应用设计模式. 课程描述 需求 我们现在要开一个餐厅啦,餐厅里面有服务员,有厨师,有顾客。学习面向对象,为餐厅和几个角色创建自己的类吧。 餐厅可以招聘或者解雇职员,职员越多,就越能够满足更多的顾客需求,从而赚取更多的钱 餐厅里的容量是有限的,当顾客坐满了,其他顾客需要排队 服务员的工作有两个职责,一个是负责点菜,另外一个是上菜 厨师的职责就一个,烹饪食物 顾客可以做两件事情,一个是点菜,一个是吃 系列任务的第一个部…

课程结束

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

136人在学习该课程,有110人已经完成该课程

第四十四天到第四十六天:开一家餐厅吧(二)

第四十四天到第四十六天:开一家餐厅吧(二) 课程目标 通过完善餐厅的功能,来学习JavaScript面向对象编程,及一些基本的设计模式 课程描述 最简单的餐厅 需求 我们上个任务已经创造了各个角色,现在,我们希望让各个角色动起来。 我们假设只有一个厨师,一个服务员,一个座位。而且餐厅老板是个偏执狂,他喜欢简单,他需要保证餐厅永远只有一个厨师,一个服务员和一个座位。 整个餐厅的运作流程是这样的,顾客入座,服务员招待顾客点菜,点完菜后告诉厨师,厨师做好菜后服务员上菜,顾客用餐,然后换下一个顾客 你需要设计一个菜单,然后设计一个顾客随机点菜的方法 阅读 JavaScript设计模式----单例模式…

课程结束

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

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

第四十七天到第四十九天:开一家餐厅吧(三)

第四十七天到第四十九天:开一家餐厅吧(三) 课程目标 通过今天的练习,来继续深入练习,如何通过编程中的抽象设计、封装来解决实际问题 尝试把我们提供的学习资料中的内容,运用到任务编码中 课程描述 给这个世界加上时间 需求 在真实世界中,点菜、烹饪、用餐都是需要时间的,我们给我们的餐厅加上时间的因素。 我们假设每一个时间单位是 1 秒(可配置)。 点菜需要 3 个时间单位 做菜的时间不一定,每个菜需要的时间不一样,所以需要在菜单的数据中添加一个字段,描述这个菜需要用的时间,比如在 1-10 个时间单位这个区间 用餐时间,每个菜的用餐时间为 3 个时间单位,如果顾客点了 n 个菜,则需要 3 * …

课程结束

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

58人在学习该课程,有36人已经完成该课程

第五十天到第五十三天:开一家餐厅吧(四)

第五十天到第五十三天:开一家餐厅吧(四) 课程目标 通过今天的练习,来继续深入练习,如何通过编程中的抽象设计、封装来解决实际问题 尝试把我们提供的学习资料中的内容,运用到任务编码中 课程描述 阅读 javascript设计模式-适配器模式 深入理解JavaScript系列(44):设计模式之桥接模式 观察者模式(发布订阅模式) 浅析JavaScript设计模式——发布-订阅/观察者模式 JS实现事件总线 抠门的老板把餐厅扩建了 需求 上一个任务中,我们的餐厅只有一个厨师,一个服务员和一个座位,老板觉得赚太少了,所以要增加座位,但是老板很抠门,还是不愿意增加服务员和厨师 所以,你的厨师和服务…

课程结束

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

46人在学习该课程,有25人已经完成该课程

第五十四天到第五十七天:足球小将(一)

第五十四天到第五十七天:足球小将(一) 课程目标 通过趣味练习,来强化对于 JavaScript 的熟悉 持续练习如何对于问题进行抽象,应用面向对象或者各种设计模式进行问题的解决 这也是本次2018百度前端技术学院零基础班最后一个任务,祝大家学习开心 课程描述 创建一个足球场 需求 通过 Canvas 或者 SVG 绘制一片绿色矩形,就像是我们从高空俯视绿色草坪足球场看见的一样。 有余力的同学,可以把足球场上的各种边线画上。 参考 设计 应用工厂模式,设计一个生成足球场的类 足球场包括长度,宽度的属性,长度宽度创建时候以模拟真实单位的“米”为参数,同时以容器宽度和高度进行对应换算。 验证 …

课程结束

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

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

第五十八天到第六十二天:足球小将(二)

第五十八天到第六十二天:足球小将(二) 课程目标 通过趣味练习,来强化对于 JavaScript 的熟悉 持续练习如何对于问题进行抽象,应用面向对象或者各种设计模式进行问题的解决 这也是本次2018百度前端技术学院零基础班最后一个任务,祝大家学习开心 课程描述 创建一个足球 需求 创建一个足球,用一个圆形表示,足球大小的直径假设为0.5米(不太真实,但为了看清),实际显示大小按照球场像素进行对应变化。 足球不妨找一个图片做贴图 足球有一个方法是移动,参数为运动方向、初速度、加速度,先假设足球只在草地平面移动。加速度为全局常量。 验证 创建足球,尝试各种参数的搭配,观察足球在运动场上的运动轨迹。…

开始学习

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

170人在学习该课程,有22人已经完成该课程

第六十三天到第六十六天:足球小将(三)

第六十三天到第六十六天:足球小将(三) 课程目标 通过趣味练习,来强化对于 JavaScript 的熟悉 持续练习如何对于问题进行抽象,应用面向对象或者各种设计模式进行问题的解决 这也是本次2018百度前端技术学院零基础班最后一个任务,祝大家学习开心 课程描述 我们在前两个子任务中完成了运动员的运动,足球的运动,接下来我们来实现具体的足球运动的行为。 踢球行为 停球 停球,就是将运动向自己的足球控制在自己的一定范围内。 将上一任务中的踢球封装为父类,停球继承踢球。 我们定义停球的行为,是将足球踢向一个距离自己很近的位置,甚至距离为0。比如: 球员在原地停球时,需要将球停到自己脚下 球员在前插…